Merge pull request #976 from AbleKSaju/feat-shortcut-to-invoice

feat: shortcut to navigate to invoice list from POS

src/components/POS/types.ts

@@ -8,7 +8,7 @@ export type ItemSerialNumbers = { [item: string]: string };
 
 export type DiscountType = "percent" | "amount";
 
-export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment' | 'LoyaltyProgram'
+export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment' | 'LoyaltyProgram' | 'RouteToInvoiceList'
 
 export interface POSItem {
     image?:string,

src/pages/POS/AlertModal.vue

@@ -0,0 +1,57 @@
+<template>
+  <Modal class="h-auto px-6 select-none" :set-close-listener="false">
+    <p class="text-center font-semibold py-3">{{ t`Alert` }}</p>
+    <hr class="dark:border-gray-800" />
+    <p class="py-6">
+      {{ t`Clicking continue will remove all the selected items.` }}
+    </p>
+
+    <div class="row-start-6 grid grid-cols-2 gap-4 mt-auto pb-6">
+      <div class="flex col-span-2 gap-5">
+        <Button
+          class="py-5 w-full bg-red-500 dark:bg-red-700"
+          @click="$emit('toggleModal', 'RouteToInvoiceList')"
+        >
+          <slot>
+            <p class="uppercase text-lg text-white font-semibold">
+              {{ t`Cancel` }}
+            </p>
+          </slot>
+        </Button>
+
+        <Button
+          class="w-full py-5 bg-green-500 dark:bg-green-700"
+          @click="
+            routeTo('/list/SalesInvoice');
+            $emit('toggleModal', 'RouteToInvoiceList');
+          "
+        >
+          <slot>
+            <p class="uppercase text-lg text-white font-semibold">
+              {{ t`Continue` }}
+            </p>
+          </slot>
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts">
+import Button from 'src/components/Button.vue';
+import Modal from 'src/components/Modal.vue';
+import { defineComponent } from 'vue';
+import { routeTo } from 'src/utils/ui';
+
+export default defineComponent({
+  name: 'AlertModal',
+  components: {
+    Modal,
+    Button,
+  },
+  emits: ['toggleModal', 'selectedInvoiceName'],
+  methods: {
+    routeTo,
+  },
+});
+</script>

src/pages/POS/POS.vue

@@ -40,6 +40,11 @@
       @set-transfer-clearance-date="setTransferClearanceDate"
     />
 
+    <AlertModal
+      :open-modal="openRouteToInvoiceListModal"
+      @toggle-modal="toggleModal"
+    />
+
     <div
       class="bg-gray-25 dark:bg-gray-875 gap-2 grid grid-cols-12 p-4"
       style="height: calc(100vh - var(--h-row-largest))"
@@ -186,6 +191,45 @@
                 Loyalty Program
               </span>
             </div>
+            <div class="relative group">
+              <div class="p-1 rounded-md bg-gray-100" @click="routeToSinvList">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24"
+                  viewBox="0 -960 960 960"
+                  width="24"
+                  fill="currentColor"
+                  class="text-gray-700 dark:text-gray-300"
+                >
+                  <path
+                    d="M240-100q-41.92 0-70.96-29.04Q140-158.08 140-199.82V-300h120v-552.31l55.39 47.7 56.15-47.7 56.15 47.7 56.16-47.7 56.15 47.7 56.15-47.7 56.16 47.7 56.15-47.7 56.15 47.7 55.39-47.7V-200q0 41.92-29.04 70.96Q761.92-100 720-100H240Zm480-60q17 0 28.5-11.5T760-200v-560H320v460h360v100q0 17 11.5 28.5T720-160ZM367.69-610v-60h226.92v60H367.69Zm0 120v-60h226.92v60H367.69Zm310-114.62q-14.69 0-25.04-10.34-10.34-10.35-10.34-25.04t10.34-25.04q10.35-10.34 25.04-10.34t25.04 10.34q10.35 10.35 10.35 25.04t-10.35 25.04q-10.35 10.34-25.04 10.34Zm0 120q-14.69 0-25.04-10.34-10.34-10.35-10.34-25.04t10.34-25.04q10.35-10.34 25.04-10.34t25.04 10.34q10.35 10.35 10.35 25.04t-10.35 25.04q-10.35 10.34-25.04 10.34ZM240-160h380v-80H200v40q0 17 11.5 28.5T240-160Zm-40 0v-80 80Z"
+                  />
+                </svg>
+              </div>
+
+              <span
+                class="
+                  absolute
+                  bottom-full
+                  left-1/2
+                  transform
+                  -translate-x-1/2
+                  rounded-md
+                  opacity-0
+                  bg-gray-100
+                  dark:bg-gray-850 dark:text-white
+                  text-black text-xs text-center
+                  mb-2
+                  p-2
+                  w-28
+                  group-hover:opacity-100
+                  transition-opacity
+                  duration-300
+                "
+              >
+                Sales Invoice List
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -358,6 +402,7 @@ import {
 import Barcode from 'src/components/Controls/Barcode.vue';
 import { getAddedLPWithGrandTotal, getPricingRule } from 'models/helpers';
 import LoyaltyProgramModal from './LoyaltyprogramModal.vue';
+import AlertModal from './AlertModal.vue';
 
 export default defineComponent({
   name: 'POS',
@@ -369,6 +414,7 @@ export default defineComponent({
     ItemsTable,
     ItemsGrid,
     Link,
+    AlertModal,
     OpenPOSShiftModal,
     PageHeader,
     PaymentModal,
@@ -402,6 +448,7 @@ export default defineComponent({
       openLoyaltyProgramModal: false,
       openShiftCloseModal: false,
       openShiftOpenModal: false,
+      openRouteToInvoiceListModal: false,
 
       additionalDiscounts: fyo.pesa(0),
       cashAmount: fyo.pesa(0),
@@ -842,7 +889,14 @@ export default defineComponent({
         }
       }, 1);
     },
+    async routeToSinvList() {
+      if (!this.sinvDoc.items.length) {
+        return await routeTo('/list/SalesInvoice');
+      }
 
+      this.openRouteToInvoiceListModal = true;
+    },
+    routeTo,
     getItem,
   },
 });