Adds keyboard support to payment popup

Blair2004 · Oct 1, 2022 · 33dc7c8 · 33dc7c8
1 parent 46bb7fb
commit 33dc7c8
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/resources/ts/pages/dashboard/pos/payments/sample-payment.vue b/resources/ts/pages/dashboard/pos/payments/sample-payment.vue
@@ -28,10 +28,10 @@
             <div class="-mx-2 flex flex-wrap">
                 <div class="pl-2 pr-1 flex-auto">
                     <div id="numpad" class="grid grid-flow-row grid-cols-3 gap-2 grid-rows-3" style="padding: 1px">
-                        <div 
+                        <div
                             @click="inputValue( key )"
-                            :key="index" 
-                            v-for="(key,index) of keys" 
+                            :key="index"
+                            v-for="(key,index) of keys"
                             style="margin:-1px;"
                             class="ns-numpad-key text-2xl border h-16 flex items-center justify-center cursor-pointer">
                             <span v-if="key.value !== undefined">{{ key.value }}</span>
@@ -45,7 +45,7 @@
                 </div>
                 <div class="w-1/2 md:w-72 pr-2 pl-1">
                     <div class="grid grid-flow-row grid-rows-1 gap-2">
-                        <div 
+                        <div
                             v-for="(amount, index) of amountShortcuts" :key="index"
                             @click="increaseBy({ value : amount })"
                             class="ns-numpad-key text-2xl border h-16 flex items-center justify-center cursor-pointer">
@@ -68,11 +68,11 @@ export default {
     data() {
         return {
             backValue: '0',
-            number: parseInt( 
+            number: parseInt(
                 1 + ( new Array( parseInt( ns.currency.ns_currency_precision ) ) )
                 .fill('')
                 .map( _ => 0 )
-                .join('') 
+                .join('')
             ),
             order: null,
             cursor: parseInt( ns.currency.ns_currency_precision ),
@@ -98,14 +98,34 @@ export default {
         this.orderSubscription  =   POS.order.subscribe( order => {
             this.order  =   order;
         });
+
+        /**
+         * will bind keyboard event listening
+         */
+        const numbers   =   ( new Array(10) ).fill('').map( ( v,i ) => i );
+
+        nsHotPress
+            .create( 'numpad-keys' )
+            .whenVisible([ '.is-popup' ])
+            .whenPressed( numbers, ( event, value ) => { this.inputValue({ value: value }); })
+
+        nsHotPress
+            .create( 'numpad-backspace' )
+            .whenVisible([ '.is-popup' ])
+            .whenPressed( 'backspace', () => this.inputValue({ identifier: 'backspace' }))
+
+        nsHotPress
+            .create( 'numpad-save' )
+            .whenVisible([ '.is-popup' ])
+            .whenPressed( 'enter', () => this.inputValue({ identifier: 'next' }))
     },
     destroyed() {
         this.orderSubscription.unsubscribe();
     },
     methods: {
         __,
         toggleDiscount() {
-            Popup.show( nsPosDiscountPopupVue, { 
+            Popup.show( nsPosDiscountPopupVue, {
                 reference : this.order,
                 type : 'cart',
                 onSubmit : ( response ) => {
@@ -144,23 +164,23 @@ export default {
             })
         },
         increaseBy( key ) {
-            let number    =   parseInt( 
+            let number    =   parseInt(
                 1 + ( new Array( this.cursor ) )
                 .fill('')
                 .map( _ => 0 )
-                .join('') 
+                .join('')
             );
 
             this.backValue      =   (( parseFloat( key.value ) * number ) + ( parseFloat( this.backValue ) || 0 ) ).toString();
             this.allSelected    =   false;
         },
 
         inputValue( key ) {
-            let number    =   parseInt( 
+            let number    =   parseInt(
                 1 + ( new Array( this.cursor ) )
                 .fill('')
                 .map( _ => 0 )
-                .join('') 
+                .join('')
             );
 
             if ( key.identifier === 'next' ) {
@@ -190,7 +210,7 @@ export default {
                         this.backValue = this.backValue > 100 ? 100 : this.backValue;
                     }
                 }
-            } 
+            }
 
             if ( ( this.backValue ) === "0" ) {
                 this.backValue      =   '';