incr: added payment, cancel action buttons

src/components/NeuPOS/types.ts

@@ -2,9 +2,8 @@ export type ItemQtyMap = {
     [item: string]: { availableQty: number;[batch: string]: number };
 }
 
-export type ItemSerialNumbers = { [item: string]: string }
+export type ItemSerialNumbers = { [item: string]: string };
 
-export enum DiscountType {
-    Percent= "percent",
-    Amount= "amount"
-}
+export type DiscountType = "percent" | "amount";
+
+export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment'

src/pages/NeuPOS/NeuPOS.vue

@@ -50,11 +50,8 @@
       </div>
 
       <div class="col-span-7">
-        <div
-          class="gap-5 grid grid-rows-6"
-          style="height: calc(100vh - 6.1rem)"
-        >
-          <div class="bg-white border p-4 rounded-md row-span-5">
+        <div class="flex flex-col gap-3" style="height: calc(100vh - 6rem)">
+          <div class="bg-white border grow h-full p-4 rounded-md">
             <Link
               class="flex-shrink-0"
               size="medium"
@@ -72,6 +69,90 @@
 
             <SelectedItemTable />
           </div>
+
+          <div class="bg-white border p-4 rounded-md">
+            <div class="w-full grid grid-cols-2 gap-y-2 gap-x-3">
+              <div class="">
+                <div class="grid grid-cols-2 gap-2">
+                  <FloatingLabelFloatInput
+                    :df="{
+                      label: t`Total Quantity`,
+                      fieldtype: 'Int',
+                      fieldname: 'totalQuantity',
+                      minvalue: 0,
+                      maxvalue: 1000,
+                    }"
+                    size="large"
+                    :value="totalQuantity"
+                    :read-only="true"
+                    :text-right="true"
+                  />
+
+                  <FloatingLabelCurrencyInput
+                    :df="{
+                      label: t`Add'l Discounts`,
+                      fieldtype: 'Int',
+                      fieldname: 'additionalDiscount',
+                      minvalue: 0,
+                    }"
+                    size="large"
+                    :value="additionalDiscounts"
+                    :read-only="false"
+                    :text-right="true"
+                  />
+                </div>
+
+                <div class="mt-4 grid grid-cols-2 gap-2">
+                  <FloatingLabelCurrencyInput
+                    :df="{
+                      label: t`Item Discounts`,
+                      fieldtype: 'Currency',
+                      fieldname: 'itemDiscounts',
+                    }"
+                    size="large"
+                    :value="itemDiscounts"
+                    :read-only="true"
+                    :text-right="true"
+                  />
+                  <FloatingLabelCurrencyInput
+                    :df="{
+                      label: t`Total`,
+                      fieldtype: 'Currency',
+                      fieldname: 'total',
+                    }"
+                    size="large"
+                    :value="sinvDoc.grandTotal"
+                    :read-only="true"
+                    :text-right="true"
+                  />
+                </div>
+              </div>
+
+              <div class="">
+                <Button
+                  class="w-full bg-red-500 py-6"
+                  @click="clearSelectedItems"
+                >
+                  <slot>
+                    <p class="uppercase text-lg text-white font-semibold">
+                      {{ t`Cancel` }}
+                    </p>
+                  </slot>
+                </Button>
+
+                <Button
+                  class="mt-4 w-full bg-green-500 py-6"
+                  @click="toggleModal('Payment', true)"
+                >
+                  <slot>
+                    <p class="uppercase text-lg text-white font-semibold">
+                      {{ t`Pay` }}
+                    </p>
+                  </slot>
+                </Button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -81,14 +162,17 @@
 <script lang="ts">
 import Button from 'src/components/Button.vue';
 import ClosePOSShiftModal from './ClosePOSShiftModal.vue';
+import FloatingLabelCurrencyInput from 'src/components/NeuPOS/FloatingLabelCurrencyInput.vue';
+import FloatingLabelFloatInput from 'src/components/NeuPOS/FloatingLabelFloatInput.vue';
 import ItemsTable from 'src/components/NeuPOS/ItemsTable.vue';
 import Link from 'src/components/Controls/Link.vue';
 import OpenPOSShiftModal from './OpenPOSShiftModal.vue';
 import PageHeader from 'src/components/PageHeader.vue';
 import PaymentModal from './PaymentModal.vue';
-import { computed, defineComponent } from 'vue';
-import { fyo } from 'src/initFyo';
+import SelectedItemTable from 'src/components/NeuPOS/SelectedItemTable.vue';
 import { toggleSidebar } from 'src/utils/ui';
+import { fyo } from 'src/initFyo';
+import { computed, defineComponent } from 'vue';
 import { ValuationMethod } from 'models/inventory/types';
 import {
   getRawStockLedgerEntries,
@@ -103,13 +187,17 @@ import { getItem } from 'models/inventory/tests/helpers';
 import { handleErrorWithDialog } from 'src/errorHandling';
 import { t } from 'fyo';
 import { ItemQtyMap, ItemSerialNumbers } from 'src/components/NeuPOS/types';
-import SelectedItemTable from 'src/components/NeuPOS/SelectedItemTable.vue';
+import { safeParseFloat } from 'utils/index';
+import { Money } from 'pesa';
+import { ModalName } from 'src/components/NeuPOS/types';
 
 export default defineComponent({
   name: 'NeuPOS',
   components: {
     Button,
     ClosePOSShiftModal,
+    FloatingLabelCurrencyInput,
+    FloatingLabelFloatInput,
     ItemsTable,
     Link,
     OpenPOSShiftModal,
@@ -133,9 +221,15 @@ export default defineComponent({
 
       customer: undefined as string | undefined,
       defaultCustomer: undefined as string | undefined,
-      itemSerialNumbers: {} as ItemSerialNumbers,
       itemQtyMap: {} as ItemQtyMap,
+      itemSerialNumbers: {} as ItemSerialNumbers,
       sinvDoc: {} as SalesInvoice,
+
+      totalQuantity: 0,
+
+      additionalDiscounts: fyo.pesa(0),
+      itemDiscounts: fyo.pesa(0),
+      totalTaxedAmount: fyo.pesa(0),
     };
   },
   computed: {
@@ -145,6 +239,7 @@ export default defineComponent({
     sinvDoc: {
       async handler() {
         await this.sinvDoc.runFormulas();
+        this.updateValues();
       },
       deep: true,
     },
@@ -158,7 +253,7 @@ export default defineComponent({
     toggleSidebar(true);
   },
   methods: {
-    toggleModal(modal: 'ShiftOpen' | 'ShiftClose', value?: boolean) {
+    toggleModal(modal: ModalName, value?: boolean) {
       if (value) {
         return (this[`open${modal}Modal`] = value);
       }
@@ -168,12 +263,7 @@ export default defineComponent({
       this.defaultCustomer = this.fyo.singles.Defaults?.posCustomer ?? '';
       this.customer = this.defaultCustomer;
     },
-    async setItemQtyMap(item?: string) {
-      // TODO itemQty is not populated on first run
-
-      const filters = {
-        item: item,
-      };
+    async setItemQtyMap() {
       const valuationMethod =
         this.fyo.singles.InventorySettings?.valuationMethod ??
         ValuationMethod.FIFO;
@@ -181,7 +271,7 @@ export default defineComponent({
       const rawSLEs = await getRawStockLedgerEntries(this.fyo);
       const rawData = getStockLedgerEntries(rawSLEs, valuationMethod);
 
-      const stockBalance = getStockBalanceEntries(rawData, filters);
+      const stockBalance = getStockBalanceEntries(rawData, {});
 
       for (const row of stockBalance) {
         if (!this.itemQtyMap[row.item]) {
@@ -194,6 +284,39 @@ export default defineComponent({
 
       this.isItemsSeeded = true;
     },
+    setTotalQuantity() {
+      let totalQuantity = safeParseFloat(0);
+
+      if (!this.sinvDoc.items?.length) {
+        this.totalQuantity = totalQuantity;
+        return;
+      }
+
+      for (const item of this.sinvDoc.items) {
+        const quantity = item.quantity ?? 0;
+        totalQuantity = safeParseFloat(totalQuantity + quantity);
+      }
+
+      this.totalQuantity = totalQuantity;
+    },
+    setItemDiscounts() {
+      let itemDiscounts = fyo.pesa(0);
+
+      if (!this.sinvDoc.items?.length) {
+        this.itemDiscounts = itemDiscounts;
+        return;
+      }
+
+      for (const item of this.sinvDoc.items) {
+        itemDiscounts.add(item.itemDiscountedTotal as Money);
+      }
+
+      this.itemDiscounts = itemDiscounts;
+    },
+    updateValues() {
+      this.setTotalQuantity();
+      this.setItemDiscounts();
+    },
     async addItem(item: DocValueMap) {
       if (!item) {
         return;
@@ -253,6 +376,9 @@ export default defineComponent({
         party: this.customer,
       }) as SalesInvoice;
     },
+    clearSelectedItems() {
+      this.sinvDoc.items = [];
+    },
     getItem,
   },
 });