feat: add saved invoices list modal

src/pages/POS/POS.vue

@@ -29,6 +29,12 @@
       @set-loyalty-points="setLoyaltyPoints"
       @toggle-modal="toggleModal"
     />
+    <SavedInvoiceModal
+      :open-modal="openSavedInvoiceModal"
+      :modal-status="openSavedInvoiceModal"
+      @selected-invoice-name="selectedInvoiceName"
+      @toggle-modal="toggleModal"
+    />
 
     <PaymentModal
       :open-modal="openPaymentModal"
@@ -342,6 +348,16 @@
                       </p>
                     </slot>
                   </Button>
+                  <Button
+                    class="w-full mt-4 bg-orange-500 dark:bg-green-700 py-6"
+                    @click="toggleModal('SavedInvoice', true)"
+                  >
+                    <slot>
+                      <p class="uppercase text-lg text-white font-semibold">
+                        {{ t`held` }}
+                      </p>
+                    </slot>
+                  </Button>
                 </div>
                 <div class="w-full">
                   <Button
@@ -421,6 +437,7 @@ import Barcode from 'src/components/Controls/Barcode.vue';
 import { getAddedLPWithGrandTotal, getPricingRule } from 'models/helpers';
 import LoyaltyProgramModal from './LoyaltyprogramModal.vue';
 import AlertModal from './AlertModal.vue';
+import SavedInvoiceModal from './SavedInvoiceModal.vue';
 
 export default defineComponent({
   name: 'POS',
@@ -437,6 +454,7 @@ export default defineComponent({
     PageHeader,
     PaymentModal,
     LoyaltyProgramModal,
+    SavedInvoiceModal,
     SelectedItemTable,
     Barcode,
   },
@@ -464,6 +482,7 @@ export default defineComponent({
       isItemsSeeded: false,
       openPaymentModal: false,
       openLoyaltyProgramModal: false,
+      openSavedInvoiceModal: false,
       openShiftCloseModal: false,
       openShiftOpenModal: false,
       openRouteToInvoiceListModal: false,
@@ -658,6 +677,11 @@ export default defineComponent({
 
       this.sinvDoc.grandTotal = total;
     },
+    async selectedInvoiceName(doc: SalesInvoice) {
+      const salesInvoiceDoc = await this.fyo.doc.getDoc(ModelNameEnum.SalesInvoice,doc.name) as SalesInvoice
+      this.sinvDoc = salesInvoiceDoc
+      this.toggleModal('SavedInvoice', false);
+    },
     setTransferAmount(amount: Money = fyo.pesa(0)) {
       this.transferAmount = amount;
     },

src/pages/POS/SavedInvoiceModal.vue

@@ -0,0 +1,158 @@
+<template>
+  <Modal class="h-auto w-auto px-10" :set-close-listener="false">
+    <p class="text-center py-4">Saved Invoices</p>
+
+    <hr class="dark:border-gray-800" />
+
+    <Row
+      :ratio="ratio"
+      class="
+        border
+        dark:border-gray-800
+        flex
+        items-center
+        mt-4
+        px-2
+        rounded-t-md
+        text-gray-600
+        dark:text-gray-400
+        w-full
+      "
+    >
+      <div
+        v-for="df in tableFields"
+        :key="df.fieldname"
+        class="flex items-center px-2 py-2 text-lg"
+        :style="{
+          height: ``,
+        }"
+      >
+        {{ df.label }}
+      </div>
+    </Row>
+
+    <div class="overflow-y-auto" style="height: 65vh; width: 60vh">
+      <Row
+        v-if="savedInvoices.length"
+        v-for="row in savedInvoices as any"
+        :ratio="ratio"
+        :border="true"
+        class="
+          border-b border-l border-r
+          dark:border-gray-800
+          flex
+          group
+          h-row-mid
+          hover:bg-gray-25
+          dark:bg-gray-890
+          items-center
+          justify-center
+          px-2
+          w-full
+        "
+            @click="$emit('selectedInvoiceName', row)"
+  >
+        <FormControl
+          v-for="df in tableFields"
+          :key="df.fieldname"
+          size="large"
+          class=""
+          :df="df"
+          :value="row[df.fieldname]"
+          :readOnly="true"
+        />
+      </Row>
+    </div>
+
+    <div class="row-start-6 grid grid-cols-2 gap-4 mt-auto p-10">
+      <div class="col-span-2">
+        <Button
+          class="w-full bg-red-500"
+          style="padding: 1.35rem"
+          @click="$emit('toggleModal', 'SavedInvoice')"
+        >
+          <slot>
+            <p class="uppercase text-lg text-white font-semibold">
+              {{ t`Cancel` }}
+            </p>
+          </slot>
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts">
+import Button from 'src/components/Button.vue';
+import Data from 'src/components/Controls/Data.vue';
+import Modal from 'src/components/Modal.vue';
+import { SalesInvoice } from 'models/baseModels/SalesInvoice/SalesInvoice';
+import { defineComponent, inject } from 'vue';
+import { t } from 'fyo';
+import { ModelNameEnum } from 'models/types';
+import { Field } from 'schemas/types';
+import Row from 'src/components/Row.vue';
+import FormControl from 'src/components/Controls/FormControl.vue';
+
+export default defineComponent({
+  name: 'SavedInvoiceModal',
+  components: {
+    Modal,
+    Button,
+    Data,
+    FormControl,
+    Row,
+  },
+  data() {
+    return {
+      savedInvoices: [] as SalesInvoice[],
+      isModalVisible: false,
+    };
+  },
+  computed: {
+    ratio() {
+      return [1, 1, 1, 0.8];
+    },
+    tableFields() {
+      return [
+        {
+          fieldname: 'name',
+          label: 'Name',
+          fieldtype: 'Link',
+          target: 'SalesInvoice',
+          readOnly: true,
+        },
+        {
+          fieldname: 'party',
+          fieldtype: 'Link',
+          label: 'Customer',
+          target: 'Party',
+          placeholder: 'Customer',
+          readOnly: true,
+        },
+        {
+          fieldname: 'date',
+          label: 'Date',
+          fieldtype: 'Date',
+          readOnly: true,
+        },
+        {
+          fieldname: 'grandTotal',
+          label: 'Grand Total',
+          fieldtype: 'Currency',
+          readOnly: true,
+        },
+      ] as Field[];
+    },
+  },
+  props: {
+    modalStatus: Boolean,
+  },
+  emits: ['toggleModal' , 'selectedInvoiceName'],
+  setup() {
+    return {
+      sinvDoc: inject('sinvDoc') as SalesInvoice,
+    };
+  },
+});
+</script>