Merge pull request #1040 from AbleKSaju/shortcuts

 feat: shortcuts in POS

src/components/Controls/AutoComplete.vue

@@ -107,6 +107,7 @@ export default {
     return {
       showQuickView: false,
       linkValue: '',
+      focInp: false,
       isLoading: false,
       suggestions: [],
       highlightedIndex: -1,
@@ -187,6 +188,15 @@ export default {
       const route = getFormRoute(this.linkSchemaName, name);
       await routeTo(route);
     },
+    async focusInputTag() {
+      this.focInp = true;
+      if (this.linkValue) {
+        return;
+      }
+
+      await this.$nextTick();
+      this.$refs.input.focus();
+    },
     setLinkValue(value) {
       this.linkValue = value;
     },
@@ -282,6 +292,14 @@ export default {
         return;
       }
 
+      if (!e.target.value || this.focInp) {
+        e.target.value = null;
+        this.focInp = false;
+        this.toggleDropdown(false);
+
+        return;
+      }
+
       this.toggleDropdown(true);
       this.updateSuggestions(e.target.value);
     },

src/components/Controls/Base.vue

@@ -21,6 +21,7 @@
         @blur="onBlur"
         @focus="(e) => !isReadOnly && $emit('focus', e)"
         @input="(e) => !isReadOnly && $emit('input', e)"
+        @keydown.enter="setLoyaltyPoints"
       />
     </div>
   </div>
@@ -49,6 +50,7 @@ export default defineComponent({
     border: { type: Boolean, default: false },
     size: { type: String, default: 'large' },
     placeholder: String,
+    focusInput: Boolean,
     showLabel: { type: Boolean, default: false },
     containerStyles: { type: Object, default: () => ({}) },
     textRight: {
@@ -64,6 +66,15 @@ export default defineComponent({
       default: null,
     },
   },
+  async created() {
+    if (this.focusInput) {
+      await this.$nextTick();
+      (this.$refs.input as HTMLInputElement).focus();
+      if (this.value == 0) {
+        this.triggerChange('');
+      }
+    }
+  },
   emits: ['focus', 'input', 'change'],
   computed: {
     doc(): Doc | undefined {
@@ -191,6 +202,12 @@ export default defineComponent({
     },
   },
   methods: {
+    setLoyaltyPoints() {
+      const inputElement = this.$refs.input as HTMLInputElement;
+      if (inputElement && inputElement?.value) {
+        this.$emit('change', inputElement.value);
+      }
+    },
     onBlur(e: FocusEvent) {
       const target = e.target;
       if (!(target instanceof HTMLInputElement)) {
@@ -227,7 +244,7 @@ export default defineComponent({
     triggerChange(value: unknown): void {
       value = this.parse(value);
 
-      if (value === '') {
+      if (value === '' || value == 0) {
         value = null;
       }
 

src/components/Controls/Link.vue

@@ -26,6 +26,14 @@ export default {
       this.setLinkValue();
     }
   },
+  props: {
+    focusInput: Boolean,
+  },
+  async created() {
+    if (this.focusInput) {
+      this.focusInputTag();
+    }
+  },
   methods: {
     async setLinkValue(newValue, isInput) {
       if (isInput) {

src/components/POS/types.ts

@@ -8,15 +8,18 @@ export type ItemSerialNumbers = { [item: string]: string };
 
 export type DiscountType = 'percent' | 'amount';
 
-export type ModalName =
-  | 'Keyboard'
-  | 'Payment'
-  | 'ShiftClose'
-  | 'LoyaltyProgram'
-  | 'SavedInvoice'
-  | 'Alert'
-  | 'CouponCode'
-  | 'PriceList';
+export const modalNames = [
+  'Keyboard',
+  'Payment',
+  'ShiftClose',
+  'LoyaltyProgram',
+  'SavedInvoice',
+  'Alert',
+  'CouponCode',
+  'PriceList',
+] as const;
+
+export type ModalName = typeof modalNames[number];
 
 export type PosEmits =
   | 'addItem'

src/components/ShortcutsHelper.vue

@@ -191,6 +191,49 @@ export default defineComponent({
           },
         ],
       },
+      {
+        label: t`Point of Sale`,
+        description: t`Applicable when POS is open`,
+        collapsed: false,
+        shortcuts: [
+          {
+            shortcut: [ShortcutKey.shift, 'V'],
+            description: t`Toggle between Grid and List view`,
+          },
+          {
+            shortcut: [ShortcutKey.shift, 'S'],
+            description: t`Open Sales Invoice List`,
+          },
+          {
+            shortcut: [ShortcutKey.shift, 'L'],
+            description: t`Set Loyalty Program`,
+          },
+          {
+            shortcut: [ShortcutKey.shift, 'C'],
+            description: t`Set Coupon Code`,
+          },
+          {
+            shortcut: [ShortcutKey.shift, 'P'],
+            description: t`Set Price List`,
+          },
+          {
+            shortcut: [ShortcutKey.pmod, ShortcutKey.shift, 'H'],
+            description: t`Open Saved or Submitted Invoice List.`,
+          },
+          {
+            shortcut: [ShortcutKey.pmod, ShortcutKey.shift, 'S'],
+            description: t`If any entry form is open, save the details. Otherwise, save the invoice.`,
+          },
+          {
+            shortcut: [ShortcutKey.pmod, ShortcutKey.shift, 'P'],
+            description: t`Create Payment.`,
+          },
+          {
+            shortcut: [ShortcutKey.pmod, ShortcutKey.shift, ShortcutKey.delete],
+            description: t`If any entry form is open, your entry will be canceled. Otherwise the selected items will be removed.`,
+          },
+        ],
+      },
     ];
   },
 });

src/pages/POS/CouponCodeModal.vue

@@ -63,6 +63,7 @@
             :show-label="true"
             :border="true"
             :value="couponCode"
+            :focus-input="true"
             :df="coupons.fieldMap.coupons"
             @change="updateCouponCode"
           />
@@ -161,15 +162,18 @@ export default defineComponent({
     },
   },
   methods: {
-    updateCouponCode(value: string) {
-      (this.validationError = false), (this.couponCode = value);
-    },
-    async setCouponCode() {
+    async updateCouponCode(value: string | Event) {
       try {
-        if (!this.couponCode) {
-          throw new Error(t`Must be select a coupon code`);
+        if (!value) {
+          return;
+        }
+        this.validationError = false;
+
+        if ((value as Event).type === 'keydown') {
+          value = ((value as Event).target as HTMLInputElement).value;
         }
 
+        this.couponCode = value as string;
         const appliedCouponCodes = this.fyo.doc.getNewDoc(
           ModelNameEnum.AppliedCouponCodes
         );
@@ -183,8 +187,6 @@ export default defineComponent({
         await this.sinvDoc.append('coupons', { coupons: this.couponCode });
 
         this.$emit('applyPricingRule');
-        this.$emit('toggleModal', 'CouponCode');
-
         this.couponCode = '';
         this.validationError = false;
       } catch (error) {
@@ -196,6 +198,9 @@ export default defineComponent({
         });
       }
     },
+    setCouponCode() {
+      this.$emit('toggleModal', 'CouponCode');
+    },
     async removeAppliedCoupon(coupon: AppliedCouponCodes) {
       this.sinvDoc?.items?.map((item: InvoiceItem) => {
         item.itemDiscountAmount = this.fyo.pesa(0);

src/pages/POS/LoyaltyProgramModal.vue

@@ -20,13 +20,15 @@
       <p>{{ loyaltyPoints }}</p>
     </div>
 
-    <Data
+    <Int
       v-if="sinvDoc.fieldMap"
       class="flex-shrink-0 px-10 pb-10"
       :show-label="true"
       :border="true"
+      :focus-input="true"
       :value="sinvDoc.loyaltyPoints"
       :df="sinvDoc.fieldMap.loyaltyPoints"
+      @keydown.enter="setLoyaltyPoints"
       @change="updateLoyaltyPoints"
     />
 
@@ -52,7 +54,7 @@
         <Button
           class="w-full bg-red-500 dark:bg-red-700"
           style="padding: 1.35rem"
-          @click="$emit('toggleModal', 'LoyaltyProgram')"
+          @click="cancelLoyaltyProgram"
         >
           <slot>
             <p class="uppercase text-lg text-white font-semibold">
@@ -67,20 +69,20 @@
 
 <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 { showToast } from 'src/utils/interactive';
 import { ModelNameEnum } from 'models/types';
+import Int from 'src/components/Controls/Int.vue';
 
 export default defineComponent({
   name: 'LoyaltyProgramModal',
   components: {
     Modal,
     Button,
-    Data,
+    Int,
   },
   props: {
     loyaltyPoints: {
@@ -105,6 +107,14 @@ export default defineComponent({
     };
   },
   methods: {
+    async keydownEnter(value: number) {
+      await this.updateLoyaltyPoints(value);
+      this.setLoyaltyPoints();
+    },
+    cancelLoyaltyProgram() {
+      this.$emit('setLoyaltyPoints', 0);
+      this.$emit('toggleModal', 'LoyaltyProgram');
+    },
     async updateLoyaltyPoints(newValue: number) {
       try {
         const partyData = await this.fyo.db.get(
@@ -141,26 +151,11 @@ export default defineComponent({
           throw new Error(t`no need ${newValue} points to purchase this item`);
         }
 
-        this.validationError = false;
-      } catch (error) {
-        this.validationError = true;
-
-        showToast({
-          type: 'error',
-          message: t`${error as string}`,
-        });
-
-        return;
-      }
-    },
-    setLoyaltyPoints() {
-      try {
-        if (!this.sinvDoc.loyaltyPoints || this.sinvDoc.loyaltyPoints < 0) {
+        if (newValue < 0) {
           throw new Error(t`Points must be greater than 0`);
         }
 
         this.$emit('setLoyaltyPoints', this.sinvDoc.loyaltyPoints);
-        this.$emit('toggleModal', 'LoyaltyProgram');
 
         this.validationError = false;
       } catch (error) {
@@ -170,8 +165,13 @@ export default defineComponent({
           type: 'error',
           message: t`${error as string}`,
         });
+
+        return;
       }
     },
+    setLoyaltyPoints() {
+      this.$emit('toggleModal', 'LoyaltyProgram');
+    },
   },
 });
 </script>