feat: add price list modal and functionality

frappe · Nov 27, 2024 · 626ca6e · 626ca6e
1 parent 0e42d4a
commit 626ca6e
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 1 deletion.
diff --git a/src/pages/POS/ClassicPOS.vue b/src/pages/POS/ClassicPOS.vue
@@ -34,6 +34,11 @@
       @set-coupons-count="(count) => emitEvent('setCouponsCount', count)"
     />
 
+    <PriceListModal
+      :open-modal="openPriceListModal"
+      @toggle-modal="emitEvent('toggleModal', 'PriceList')"
+    />
+
     <PaymentModal
       :open-modal="openPaymentModal"
       @toggle-modal="emitEvent('toggleModal', 'Payment')"
@@ -287,6 +292,7 @@ import AlertModal from './AlertModal.vue';
 import PaymentModal from './PaymentModal.vue';
 import Button from 'src/components/Button.vue';
 import { defineComponent, PropType } from 'vue';
+import PriceListModal from './PriceListModal.vue';
 import { Item } from 'models/baseModels/Item/Item';
 import Link from 'src/components/Controls/Link.vue';
 import CouponCodeModal from './CouponCodeModal.vue';
@@ -318,8 +324,9 @@ export default defineComponent({
     ItemsTable,
     PaymentModal,
     MultiLabelLink,
-    POSQuickActions,
+    PriceListModal,
     CouponCodeModal,
+    POSQuickActions,
     OpenPOSShiftModal,
     SelectedItemTable,
     SavedInvoiceModal,
@@ -336,6 +343,7 @@ export default defineComponent({
     isPosShiftOpen: Boolean,
     disablePayButton: Boolean,
     openPaymentModal: Boolean,
+    openPriceListModal: Boolean,
     openCouponCodeModal: Boolean,
     openShiftCloseModal: Boolean,
     openSavedInvoiceModal: Boolean,

diff --git a/src/pages/POS/ModernPOS.vue b/src/pages/POS/ModernPOS.vue
@@ -34,6 +34,11 @@
       @set-coupons-count="(count) => emitEvent('setCouponsCount', count)"
     />
 
+    <PriceListModal
+      :open-modal="openPriceListModal"
+      @toggle-modal="emitEvent('toggleModal', 'PriceList')"
+    />
+
     <PaymentModal
       :open-modal="openPaymentModal"
       @toggle-modal="emitEvent('toggleModal', 'Payment')"
@@ -297,6 +302,7 @@ import AlertModal from './AlertModal.vue';
 import PaymentModal from './PaymentModal.vue';
 import Button from 'src/components/Button.vue';
 import KeyboardModal from './KeyboardModal.vue';
+import PriceListModal from './PriceListModal.vue';
 import { Item } from 'models/baseModels/Item/Item';
 import Link from 'src/components/Controls/Link.vue';
 import CouponCodeModal from './CouponCodeModal.vue';
@@ -327,6 +333,7 @@ export default defineComponent({
     PaymentModal,
     KeyboardModal,
     MultiLabelLink,
+    PriceListModal,
     POSQuickActions,
     CouponCodeModal,
     OpenPOSShiftModal,
@@ -348,6 +355,7 @@ export default defineComponent({
     disablePayButton: Boolean,
     openPaymentModal: Boolean,
     openKeyboardModal: Boolean,
+    openPriceListModal: Boolean,
     openCouponCodeModal: Boolean,
     openShiftCloseModal: Boolean,
     openSavedInvoiceModal: Boolean,

diff --git a/src/pages/POS/PriceListModal.vue b/src/pages/POS/PriceListModal.vue
@@ -0,0 +1,96 @@
+<template>
+  <Modal class="h-auto w-96" :set-close-listener="false">
+    <p class="text-center font-semibold py-3">Apply Price List</p>
+    <div class="px-10">
+      <hr class="dark:border-gray-800" />
+      <div class="flex justify-center pt-10">
+        <div class="w-80 mb-20">
+          <Link
+            v-if="sinvDoc.fieldMap"
+            class="flex-shrink-0"
+            :border="true"
+            :value="priceList"
+            :df="sinvDoc.fieldMap.priceList"
+            @change="(value) => (priceList = value)"
+          />
+        </div>
+      </div>
+
+      <div class="row-start-6 grid grid-cols-2 gap-4 mt-auto mb-2">
+        <div class="col-span-2">
+          <Button
+            class="w-full bg-green-500 dark:bg-green-700"
+            style="padding: 1.35rem"
+            @click="setPriceList()"
+          >
+            <slot>
+              <p class="uppercase text-lg text-white font-semibold">
+                {{ t`Save` }}
+              </p>
+            </slot>
+          </Button>
+        </div>
+      </div>
+
+      <div class="row-start-6 grid grid-cols-2 gap-4 mt-auto mb-8">
+        <div class="col-span-2">
+          <Button
+            class="w-full bg-red-500 dark:bg-red-700"
+            style="padding: 1.35rem"
+            @click="$emit('toggleModal', 'PriceList')"
+          >
+            <slot>
+              <p class="uppercase text-lg text-white font-semibold">
+                {{ t`Cancel` }}
+              </p>
+            </slot>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts">
+import { t } from 'fyo';
+import Modal from 'src/components/Modal.vue';
+import { defineComponent, inject } from 'vue';
+import Button from 'src/components/Button.vue';
+import { showToast } from 'src/utils/interactive';
+import Link from 'src/components/Controls/Link.vue';
+import { SalesInvoice } from 'models/baseModels/SalesInvoice/SalesInvoice';
+
+export default defineComponent({
+  name: 'PriceListModal',
+  components: {
+    Link,
+    Modal,
+    Button,
+  },
+  emits: ['toggleModal'],
+  setup() {
+    return {
+      sinvDoc: inject('sinvDoc') as SalesInvoice,
+    };
+  },
+  data() {
+    return {
+      priceList: '',
+    };
+  },
+  methods: {
+    async setPriceList() {
+      try {
+        await this.sinvDoc.set('priceList', this.priceList);
+
+        this.$emit('toggleModal', 'PriceList');
+      } catch (error) {
+        showToast({
+          type: 'error',
+          message: t`${error as string}`,
+        });
+      }
+    },
+  },
+});
+</script>