From 14be1a0af308330af5c558375608c4442a72f86c Mon Sep 17 00:00:00 2001 From: AbleKSaju <126228406+AbleKSaju@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:49:21 +0530 Subject: [PATCH] feat: add saved invoices list modal --- src/pages/POS/POS.vue | 24 +++++ src/pages/POS/SavedInvoiceModal.vue | 158 ++++++++++++++++++++++++++++ 2 files changed, 182 insertions(+) create mode 100644 src/pages/POS/SavedInvoiceModal.vue diff --git a/src/pages/POS/POS.vue b/src/pages/POS/POS.vue index f3dc8a16..28934364 100644 --- a/src/pages/POS/POS.vue +++ b/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; }, diff --git a/src/pages/POS/SavedInvoiceModal.vue b/src/pages/POS/SavedInvoiceModal.vue new file mode 100644 index 00000000..ae4906fd --- /dev/null +++ b/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>