Merge pull request #1293 from Gadha2311/quantityadjust-arrow

Fix: add arrows for quantity adjustment

src/components/POS/Classic/SelectedItemRow.vue

@@ -27,19 +27,34 @@
     </p>
   </div>
 
-  <Int
-    :df="{
-      fieldname: 'quantity',
-      fieldtype: 'Int',
-      label: 'Quantity',
-    }"
-    size="small"
-    :border="false"
-    :value="row.quantity"
-    :read-only="true"
-  />
+  <div class="flex items-center">
+    <Int
+      :df="{
+        fieldname: 'quantity',
+        fieldtype: 'Int',
+        label: 'Quantity',
+      }"
+      size="small"
+      :border="false"
+      :value="row.quantity"
+      :read-only="true"
+    />
+    <div class="flex flex-col ml-1">
+      <feather-icon
+        name="chevron-up"
+        class="w-3 h-3 cursor-pointer hover:text-blue-500"
+        @click="adjustQuantity(1)"
+      />
+      <feather-icon
+        name="chevron-down"
+        class="w-3 h-3 cursor-pointer hover:text-blue-500"
+        @click="adjustQuantity(-1)"
+      />
+    </div>
+  </div>
 
   <Link
+    class="ml-5"
     :df="{
       fieldname: 'unit',
       fieldtype: 'Data',
@@ -305,9 +320,6 @@ export default defineComponent({
   },
 
   async mounted() {
-    // this.$watch('row.quantity', (newVal: number) => {
-    //   this.setQuantity(newVal);
-    // });
     const posProfileName = this.fyo.singles.POSSettings?.posProfile;
 
     if (posProfileName) {
@@ -332,6 +344,16 @@ export default defineComponent({
   },
 
   methods: {
+    adjustQuantity(change: number) {
+      let currentQuantity = this.row.quantity ?? 1;
+      let newQuantity = currentQuantity + change;
+
+      if (newQuantity === 0) {
+        return;
+      }
+
+      this.setQuantity(newQuantity);
+    },
     async getAvailableQtyInBatch(): Promise<number> {
       if (!this.row.batch) {
         return 0;
@@ -390,7 +412,7 @@ export default defineComponent({
 
       validateSerialNumberCount(
         serialNumber,
-        this.row.quantity ?? 0,
+        Math.abs(this.row.quantity ?? 0),
         this.row.item!
       );
     },

src/components/POS/Classic/SelectedItemTable.vue

@@ -97,7 +97,7 @@ export default defineComponent({
   emits: ['applyPricingRule'],
   computed: {
     ratio() {
-      return [0.1, 1, 0.8, 0.8, 0.8, 0.8, 0.2];
+      return [0.1, 0.9, 0.8, 0.8, 0.8, 0.8, 0.2];
     },
     tableFields() {
       return [

src/components/POS/types.ts

@@ -43,6 +43,7 @@ export type PosEmits =
   | 'selectedInvoiceName'
   | 'selectedReturnInvoice'
   | 'saveAndContinue'
+  | 'handlePaymentAction'
   | 'setTransferClearanceDate';
 
 export interface POSItem {

src/pages/POS/ClassicPOS.vue

@@ -257,7 +257,6 @@
                         fyo.singles.Defaults?.saveButtonColour,
                     }"
                     :class="`${isReturnInvoiceEnabledReturn ? 'py-5' : 'py-6'}`"
-                    :disabled="!sinvDoc?.party || !sinvDoc?.items?.length"
                     @click="$emit('saveInvoiceAction')"
                   >
                     <slot>
@@ -274,7 +273,6 @@
                         fyo.singles.Defaults?.cancelButtonColour,
                     }"
                     :class="`${isReturnInvoiceEnabledReturn ? 'py-5' : 'py-6'}`"
-                    :disabled="!sinvDoc?.items?.length"
                     @click="() => $emit('clearValues')"
                   >
                     <slot>
@@ -332,8 +330,7 @@
                         fyo.singles.Defaults?.payButtonColour,
                     }"
                     :class="`${isReturnInvoiceEnabledReturn ? 'py-5' : 'py-6'}`"
-                    :disabled="disablePayButton"
-                    @click="emitEvent('toggleModal', 'Payment', true)"
+                    @click="emitEvent('handlePaymentAction')"
                   >
                     <slot>
                       <p class="uppercase text-lg text-white font-semibold">
@@ -350,8 +347,7 @@
                       profile?.payButtonColour ||
                       fyo.singles.Defaults?.payButtonColour,
                   }"
-                  :disabled="disablePayButton"
-                  @click="emitEvent('toggleModal', 'Payment', true)"
+                  @click="emitEvent('handlePaymentAction')"
                 >
                   <slot>
                     <p class="uppercase text-lg text-white font-semibold">
@@ -506,6 +502,7 @@ export default defineComponent({
     'selectedReturnInvoice',
     'setTransferClearanceDate',
     'saveAndContinue',
+    'handlePaymentAction',
   ],
   data() {
     return {

src/pages/POS/POS.vue

@@ -62,6 +62,7 @@
       @selected-return-invoice="selectedReturnInvoice"
       @set-transfer-clearance-date="setTransferClearanceDate"
       @save-and-continue="handleSaveAndContinue"
+      @handle-payment-action="handlePaymentAction"
     />
     <ModernPOS
       v-else
@@ -1058,12 +1059,31 @@ export default defineComponent({
         });
       }
     },
+    showValidationToast(method: string) {
+      showToast({
+        type: 'error',
+        message: t`${
+          !this.sinvDoc.items?.length
+            ? 'Please add items'
+            : 'Please select a customer'
+        } before ${method}`,
+      });
+    },
+
     async saveInvoiceAction() {
-      if (!this.sinvDoc.party && !this.sinvDoc.items?.length) {
+      if (!this.sinvDoc.items?.length || !this.sinvDoc.party) {
+        this.showValidationToast('saving');
+        return;
+      }
+      await this.saveOrder();
+    },
+    handlePaymentAction() {
+      if (!this.sinvDoc.items?.length || !this.sinvDoc.party) {
+        this.showValidationToast('payment');
         return;
       }
 
-      await this.saveOrder();
+      this.toggleModal('Payment', true);
     },
     routeTo,
   },

src/pages/POS/POSQuickActions.vue

@@ -86,11 +86,7 @@
         'dark:bg-gray-600 cursor-not-allowed':
           !loyaltyPoints || !sinvDoc?.party || !sinvDoc?.items?.length,
       }"
-      @click="
-        loyaltyPoints && sinvDoc?.party && sinvDoc?.items?.length
-          ? $emit('toggleModal', 'LoyaltyProgram')
-          : null
-      "
+      @click="openLoyaltyModal"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -142,7 +138,7 @@
         'dark:bg-gray-600 cursor-not-allowed':
           !sinvDoc?.party || !sinvDoc?.items?.length,
       }"
-      @click="openCouponModal()"
+      @click="openCouponModal"
     >
       <svg
         fill="#000000"
@@ -351,6 +347,9 @@ import { defineComponent, PropType } from 'vue';
 import { Payment } from 'models/baseModels/Payment/Payment';
 import { ItemSerialNumbers } from 'src/components/POS/types';
 import { SalesInvoice } from 'models/baseModels/SalesInvoice/SalesInvoice';
+import { showToast } from 'src/utils/interactive';
+import { t } from 'fyo';
+
 export default defineComponent({
   name: 'POSQuickActions',
   props: {
@@ -399,10 +398,39 @@ export default defineComponent({
       this.tableView = !this.tableView;
       this.$emit('toggleView');
     },
-    openCouponModal() {
-      if (this.sinvDoc?.party && this.sinvDoc?.items?.length) {
-        this.$emit('toggleModal', 'CouponCode');
+    showValidationToast(action: string, isLoyalty = false) {
+      let message = '';
+
+      if (!this.sinvDoc?.items?.length) {
+        message = t`Please add items`;
+      } else if (!this.sinvDoc?.party) {
+        message = t`Please select a customer`;
+      } else if (isLoyalty && !this.loyaltyPoints) {
+        message = t`Customer has no loyalty points to redeem`;
       }
+
+      showToast({
+        type: 'error',
+        message: t`${message} before ${action}`,
+      });
+    },
+    openCouponModal() {
+      if (!this.sinvDoc?.items?.length || !this.sinvDoc?.party) {
+        this.showValidationToast('applying coupon');
+        return;
+      }
+      this.$emit('toggleModal', 'CouponCode');
+    },
+    openLoyaltyModal() {
+      if (
+        !this.sinvDoc?.items?.length ||
+        !this.sinvDoc?.party ||
+        !this.loyaltyPoints
+      ) {
+        this.showValidationToast('applying loyalty points', true);
+        return;
+      }
+      this.$emit('toggleModal', 'LoyaltyProgram');
     },
   },
 });

src/pages/POS/PaymentModal.vue

@@ -149,14 +149,10 @@
               backgroundColor: fyo.singles.Defaults?.submitButtonColour,
             }"
             style="padding: 1.35rem"
-            :disabled="disableSubmitButton"
-            @click="submitTransaction()"
+            @click="submitTransaction"
           >
             <slot>
-              <p
-                class="uppercase text-lg text-white font-semibold"
-                :disabled="sinvDoc.submitted"
-              >
+              <p class="uppercase text-lg text-white font-semibold">
                 {{ t`Submit` }}
               </p>
             </slot>
@@ -170,7 +166,7 @@
               backgroundColor: fyo.singles.Defaults?.cancelButtonColour,
             }"
             style="padding: 1.35rem"
-            @click="cancelTransaction()"
+            @click="cancelTransaction"
           >
             <slot>
               <p class="uppercase text-lg text-white font-semibold">
@@ -185,8 +181,7 @@
             class="w-full"
             :style="{ backgroundColor: fyo.singles.Defaults?.payButtonColour }"
             style="padding: 1.35rem"
-            :disabled="disablePayButton"
-            @click="payTransaction()"
+            @click="payTransaction"
           >
             <slot>
               <p class="uppercase text-lg text-white font-semibold">
@@ -203,8 +198,7 @@
               backgroundColor: fyo.singles.Defaults?.payAndPrintButtonColour,
             }"
             style="padding: 1.35rem"
-            :disabled="disablePayButton"
-            @click="$emit('createTransaction', true, true)"
+            @click="payAndPrintTransaction"
           >
             <slot>
               <p class="uppercase text-lg text-white font-semibold">
@@ -230,6 +224,7 @@ import { defineComponent, inject } from 'vue';
 import { fyo } from 'src/initFyo';
 import { isPesa } from 'fyo/utils';
 import { ModelNameEnum } from 'models/types';
+import { showToast } from 'src/utils/interactive';
 
 export default defineComponent({
   name: 'PaymentModal',
@@ -331,45 +326,6 @@ export default defineComponent({
         return true;
       }
 
-      return false;
-    },
-    disableSubmitButton(): boolean {
-      if (this.sinvDoc.submitted) {
-        return true;
-      }
-
-      if (
-        (this.sinvDoc.grandTotal?.float as number) < 1 &&
-        this.fyo.pesa(this.paidAmount.float).isZero() &&
-        !this.sinvDoc.returnAgainst
-      ) {
-        return true;
-      }
-
-      if (
-        !this.paymentMethod &&
-        (!this.transferRefNo || !this.transferClearanceDate)
-      ) {
-        return true;
-      }
-      return false;
-    },
-    disablePayButton(): boolean {
-      if (
-        (this.sinvDoc.grandTotal?.float as number) < 1 &&
-        this.fyo.pesa(this.paidAmount.float).isZero() &&
-        !this.sinvDoc.returnAgainst
-      ) {
-        return true;
-      }
-
-      if (
-        !this.paymentMethod &&
-        (!this.transferRefNo || !this.transferClearanceDate)
-      ) {
-        return true;
-      }
-
       return false;
     },
   },
@@ -394,11 +350,39 @@ export default defineComponent({
       ).map((d) => d.name);
     },
     submitTransaction() {
+      if (!this.paymentMethod) {
+        return showToast({
+          type: 'error',
+          message: this.fyo
+            .t`Please select a payment method before submitting.`,
+        });
+        return;
+      }
       this.$emit('createTransaction');
     },
     payTransaction() {
+      if (!this.paymentMethod) {
+        return showToast({
+          type: 'error',
+          message: this.fyo
+            .t`Please select a payment method before proceeding with payment.`,
+        });
+        return;
+      }
       this.$emit('createTransaction', false, true);
     },
+    payAndPrintTransaction() {
+      if (!this.paymentMethod) {
+        return showToast({
+          type: 'error',
+          message: this.fyo
+            .t`Please select a payment method before proceeding with payment.`,
+        });
+        return;
+      }
+
+      this.$emit('createTransaction', true, true);
+    },
     cancelTransaction() {
       this.$emit('setPaidAmount', fyo.pesa(0));
       this.$emit('toggleModal', 'Payment');