fix: moved shared data to parent component and managed via props

src/components/POS/ItemsGrid.vue

@@ -22,9 +22,7 @@
         class="border border-gray-300 p-1 flex flex-col text-sm text-center"
         @click="handleChange(item as POSItem)"
       >
-        <div
+        <div class="self-center w-32 h-32 rounded-lg mb-1">
-          class="self-center w-32 h-32 rounded-lg mb-1"
-        >
           <div class="relative">
             <img
               v-if="item.image"
@@ -34,7 +32,15 @@
             />
             <div
               v-else
-              class="rounded-lg w-32 h-32 flex bg-gray-100 justify-center items-center"
+              class="
+                rounded-lg
+                w-32
+                h-32
+                flex
+                bg-gray-100
+                justify-center
+                items-center
+              "
             >
               <p class="text-4xl font-semibold text-gray-400">
                 {{ getExtractedWords(item.name) }}
@@ -66,70 +72,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject } from 'vue';
+import { defineComponent } from 'vue';
 import { fyo } from 'src/initFyo';
-import { ModelNameEnum } from 'models/types';
+import { POSItem } from './types';
-import { Item } from 'models/baseModels/Item/Item';
-import { ItemQtyMap, POSItem } from './types';
-import { Money } from 'pesa';
 
 export default defineComponent({
   name: 'ItemsGrid',
   emits: ['addItem', 'updateValues'],
-  setup() {
+  props: {
-    return {
+    items: {
-      itemQtyMap: inject('itemQtyMap') as ItemQtyMap,
+      type: Array,
-    };
+    },
-  },
-  data() {
-    return {
-      items: [] as POSItem[],
-    };
-  },
-  async mounted() {
-    await this.setItems();
-  },
-  watch: {
     itemQtyMap: {
-      async handler() {
+      type: Object,
-        this.setItems();
-      },
-      deep: true,
     },
   },
   methods: {
-    async setItems() {
-      console.log('setItems');
-
-      const items = (await fyo.db.getAll(ModelNameEnum.Item, {
-        fields: [],
-        filters: { trackItem: true },
-      })) as Item[];
-
-      this.items = [] as POSItem[];
-      for (const item of items) {
-        let availableQty = 0;
-
-        if (!!this.itemQtyMap[item.name as string]) {
-          availableQty = this.itemQtyMap[item.name as string].availableQty;
-        }
-
-        if (!item.name) {
-          return;
-        }
-
-        this.items.push({
-          availableQty,
-          image: item?.image as string,
-          name: item.name,
-          rate: item.rate as Money,
-          unit: item.unit as string,
-          hasBatch: !!item.hasBatch,
-          hasSerialNumber: !!item.hasSerialNumber,
-        });
-      }
-      console.log(this.items, 'this.items');
-    },
     getExtractedWords(item: string) {
       const initials = item.split(' ').map((word) => {
         return word[0].toUpperCase();

src/components/POS/ItemsTable.vue

@@ -21,7 +21,7 @@
   <div class="overflow-y-auto" style="height: 80vh">
     <Row
       v-if="items"
-      v-for="row in items"
+      v-for="row in items as any"
       :ratio="ratio"
       :border="true"
       class="
@@ -35,7 +35,7 @@
         px-2
         w-full
       "
-      @click="handleChange(row as POSItem)"
+      @click="handleChange(row)"
     >
       <FormControl
         v-for="df in tableFields"
@@ -54,32 +54,17 @@
 import FormControl from '../Controls/FormControl.vue';
 import Row from 'src/components/Row.vue';
 import { isNumeric } from 'src/utils';
-import { inject } from 'vue';
-import { fyo } from 'src/initFyo';
 import { defineComponent } from 'vue';
-import { ModelNameEnum } from 'models/types';
 import { Field } from 'schemas/types';
-import { ItemQtyMap } from './types';
-import { Item } from 'models/baseModels/Item/Item';
 import { POSItem } from './types';
-import { Money } from 'pesa';
 
 export default defineComponent({
   name: 'ItemsTable',
   components: { FormControl, Row },
   emits: ['addItem', 'updateValues'],
-  async mounted() {
+  props: {
-    await this.setItems();
+    items: Array,
-  },
+    itemQtyMap: Object,
-  setup() {
-    return {
-      itemQtyMap: inject('itemQtyMap') as ItemQtyMap,
-    };
-  },
-  data() {
-    return {
-      items: [] as POSItem[],
-    };
   },
   computed: {
     ratio() {
@@ -119,46 +104,7 @@ export default defineComponent({
       ] as Field[];
     },
   },
-  watch: {
-    itemQtyMap: {
-      async handler() {
-        this.setItems();
-      },
-      deep: true,
-    },
-  },
-  async activated() {
-    await this.setItems();
-  },
   methods: {
-    async setItems() {
-      const items = (await fyo.db.getAll(ModelNameEnum.Item, {
-        fields: [],
-        filters: { trackItem: true },
-      })) as Item[];
-
-      this.items = [] as POSItem[];
-      for (const item of items) {
-        let availableQty = 0;
-
-        if (!!this.itemQtyMap[item.name as string]) {
-          availableQty = this.itemQtyMap[item.name as string].availableQty;
-        }
-
-        if (!item.name) {
-          return;
-        }
-
-        this.items.push({
-          availableQty,
-          name: item.name,
-          rate: item.rate as Money,
-          unit: item.unit as string,
-          hasBatch: !!item.hasBatch,
-          hasSerialNumber: !!item.hasSerialNumber,
-        });
-      }
-    },
     handleChange(value: POSItem) {
       this.$emit('addItem', value);
       this.$emit('updateValues');

src/pages/POS/POS.vue

@@ -68,8 +68,18 @@
             />
           </div>
 
-          <ItemsTable v-if="tableView" @add-item="addItem" />
+          <ItemsTable
-          <ItemsGrid v-else @add-item="addItem" />
+            v-if="tableView"
+            :items="items"
+            :item-qty-map="itemQtyMap"
+            @add-item="addItem"
+          />
+          <ItemsGrid
+            v-else
+            :items="items"
+            :item-qty-map="itemQtyMap"
+            @add-item="addItem"
+          />
           <div
             class="bg-gray-100 p-2 fixed bottom-0 mb-7 rounded-md"
             @click="toggleView"
@@ -263,6 +273,8 @@ export default defineComponent({
   },
   data() {
     return {
+      items: [] as POSItem[],
+
       tableView: true,
 
       isItemsSeeded: false,
@@ -326,19 +338,52 @@ export default defineComponent({
       deep: true,
     },
   },
+  async mounted() {
+    await this.setItems();
+  },
   async activated() {
     toggleSidebar(false);
     validateIsPosSettingsSet(fyo);
     this.setSinvDoc();
     this.setDefaultCustomer();
     await this.setItemQtyMap();
+    await this.setItems();
   },
   deactivated() {
     toggleSidebar(true);
   },
   methods: {
+    async setItems() {
+      const items = (await fyo.db.getAll(ModelNameEnum.Item, {
+        fields: [],
+        filters: { trackItem: true },
+      })) as Item[];
+
+      this.items = [] as POSItem[];
+      for (const item of items) {
+        let availableQty = 0;
+
+        if (!!this.itemQtyMap[item.name as string]) {
+          availableQty = this.itemQtyMap[item.name as string].availableQty;
+        }
+
+        if (!item.name) {
+          return;
+        }
+
+        this.items.push({
+          availableQty,
+          name: item.name,
+          image: item?.image as string,
+          rate: item.rate as Money,
+          unit: item.unit as string,
+          hasBatch: !!item.hasBatch,
+          hasSerialNumber: !!item.hasSerialNumber,
+        });
+      }
+    },
     toggleView() {
-      this.tableView = !this.tableView; // Toggle between table and grid view
+      this.tableView = !this.tableView;
     },
     setCashAmount(amount: Money) {
       this.cashAmount = amount;