Items grid view

src/components/POS/ItemsGrid.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="
+      flex flex-col
+      gap-4
+      p-4
+      border
+      items-center
+      mt-4
+      px-2
+      rounded-t-md
+      text-black
+      w-full
+    "
+    style="height: 80vh"
+  >
+    <!-- Items Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 w-full">
+      <div
+        v-for="item in items as POSItem[]"
+        :key="item.name"
+        class="border border-gray-300 p-1 flex flex-col text-sm text-center"
+        @click="handleChange(item as POSItem)"
+      >
+        <div class="self-center w-32 h-32 rounded-lg mb-1">
+          <div class="relative">
+            <img
+              v-if="item.image"
+              :src="item.image"
+              alt=""
+              class="rounded-lg w-32 h-32 object-cover"
+            />
+            <div
+              v-else
+              class="
+                rounded-lg
+                w-32
+                h-32
+                flex
+                bg-gray-100
+                justify-center
+                items-center
+              "
+            >
+              <p class="text-4xl font-semibold text-gray-400 select-none">
+                {{ getExtractedWords(item.name) }}
+              </p>
+            </div>
+            <p
+              class="absolute top-1 right-1 rounded-full p-1"
+              :class="
+                item.availableQty > 0
+                  ? 'bg-green-100 text-green-900'
+                  : 'bg-red-100 text-red-900'
+              "
+            >
+              {{ item.availableQty }}
+            </p>
+          </div>
+        </div>
+        <h3 class="text-lg font-medium">{{ item.name }}</h3>
+
+        <p class="text-lg font-medium">
+          {{
+            item.rate ? fyo.currencySymbols[item.rate.getCurrency()] : undefined
+          }}
+          {{ item.rate }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { fyo } from 'src/initFyo';
+import { POSItem } from './types';
+
+export default defineComponent({
+  name: 'ItemsGrid',
+  emits: ['addItem', 'updateValues'],
+  props: {
+    items: {
+      type: Array,
+    },
+    itemQtyMap: {
+      type: Object,
+    },
+  },
+  methods: {
+    getExtractedWords(item: string) {
+      const initials = item.split(' ').map((word) => {
+        return word[0].toUpperCase();
+      });
+      return initials.join('');
+    },
+    handleChange(value: POSItem) {
+      this.$emit('addItem', value);
+      this.$emit('updateValues');
+    },
+  },
+});
+</script>

src/components/POS/ItemsTable.vue

@@ -18,10 +18,10 @@
     </div>
   </Row>
 
-  <div class="overflow-y-auto" style="height: 72.5vh">
+  <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,29 +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'],
-  setup() {
-    return {
-      itemQtyMap: inject('itemQtyMap') as ItemQtyMap,
-    };
-  },
-  data() {
-    return {
-      items: [] as POSItem[],
-    };
+  props: {
+    items: Array,
+    itemQtyMap: Object,
   },
   computed: {
     ratio() {
@@ -116,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/components/POS/types.ts

@@ -11,6 +11,7 @@ export type DiscountType = "percent" | "amount";
 export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment'
 
 export interface POSItem {
+    image?:string,
     name: string,
     rate: Money,
     availableQty: number,

src/pages/POS/POS.vue

@@ -68,7 +68,27 @@
             />
           </div>
 
-          <ItemsTable @add-item="addItem" />
+          <ItemsTable
+            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"
+          >
+            <FeatherIcon
+              :name="tableView ? 'grid' : 'list'"
+              class="w-6 h-6 text-black"
+            />
+          </div>
         </div>
       </div>
 
@@ -193,6 +213,7 @@ import { fyo } from 'src/initFyo';
 import { routeTo, toggleSidebar } from 'src/utils/ui';
 import { ModelNameEnum } from 'models/types';
 import { SalesInvoice } from 'models/baseModels/SalesInvoice/SalesInvoice';
+import ItemsGrid from 'src/components/POS/ItemsGrid.vue';
 import { t } from 'fyo';
 import {
   ItemQtyMap,
@@ -227,6 +248,7 @@ export default defineComponent({
     FloatingLabelCurrencyInput,
     FloatingLabelFloatInput,
     ItemsTable,
+    ItemsGrid,
     Link,
     OpenPOSShiftModal,
     PageHeader,
@@ -251,6 +273,10 @@ export default defineComponent({
   },
   data() {
     return {
+      items: [] as POSItem[],
+
+      tableView: true,
+
       isItemsSeeded: false,
       openPaymentModal: false,
       openShiftCloseModal: false,
@@ -312,17 +338,53 @@ 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;
+    },
     setCashAmount(amount: Money) {
       this.cashAmount = amount;
     },