Optionally allow decimal quantities for receiving

src/components/numeric-input/NumericInput.vue

@@ -0,0 +1,152 @@
+<template>
+  <b-input :name="name"
+           :value="value"
+           ref="input"
+           :placeholder="placeholder"
+           :size="size"
+           :icon-pack="iconPack"
+           :icon="icon"
+           :disabled="disabled"
+           :custom-class="customClass"
+           @focus="notifyFocus"
+           @blur="notifyBlur"
+           @keydown.native="keyDown"
+           @input="valueChanged"
+           />
+</template>
+
+<script>
+export default {
+    name: 'NumericInput',
+
+    props: {
+        name: String,
+        value: [Number, String],
+        placeholder: String,
+        iconPack: String,
+        icon: String,
+        size: String,
+        disabled: Boolean,
+        allowEnter: Boolean,
+        customClass: String,
+    },
+
+    methods: {
+
+        focus() {
+            this.$refs.input.focus()
+        },
+
+        notifyFocus(event) {
+            this.$emit('focus', event)
+        },
+
+        notifyBlur(event) {
+            this.$emit('blur', event)
+        },
+
+        keyDown(event) {
+            // by default we only allow numeric keys, and general navigation
+            // keys, but we might also allow Enter key
+            if (!this.key_modifies(event) && !this.key_allowed(event)) {
+                if (!this.allowEnter || event.which != 13) {
+                    event.preventDefault()
+                }
+            }
+        },
+
+        /*
+         * Determine if a keypress would modify the value of a textbox.
+         *
+         * Note that this implies that the keypress is also *valid* in the context of a
+         * numeric textbox.
+         *
+         * Returns `true` if the keypress is valid and would modify the textbox value,
+         * or `false` otherwise.
+         */
+        key_modifies(event) {
+
+            if (event.which >= 48 && event.which <= 57) {       // Numeric (QWERTY)
+                if (! event.shiftKey) {  // shift key means punctuation instead of numeric
+                    return true;
+                }
+
+            } else if (event.which >= 96 && event.which <= 105) { // Numeric (10-Key)
+                return true;
+
+            } else if (event.which == 109 || event.which == 173) { // hyphen (negative sign)
+                return true;
+
+            } else if (event.which == 110 || event.which == 190) { // period/decimal
+                return true;
+
+            } else if (event.which == 8) {                      // Backspace
+                return true;
+
+            } else if (event.which == 46) {                     // Delete
+                return true;
+            } else if (event.ctrlKey && event.which == 86) {    // Ctrl+V
+                return true;
+            } else if (event.ctrlKey && event.which == 88) {    // Ctrl+X
+                return true;
+            }
+
+            return false;
+        },
+
+        /*
+         * Determine if a keypress is allowed in the context of a textbox.
+         *
+         * The purpose of this function is to let certain "special" keys (e.g. function
+         * and navigational keys) to pass through, so they may be processed as they
+         * would for a normal textbox.
+         *
+         * Note that this function does *not* check for keys which would actually
+         * modify the value of the textbox.  It is assumed that the caller will have
+         * already used `key_modifies()` for that.
+         *
+         * Returns `true` if the keypress is allowed, or `false` otherwise.
+         */
+        key_allowed(event) {
+
+            // Allow anything with modifiers (except Shift).
+            if (event.altKey || event.ctrlKey || event.metaKey) {
+
+                // ...but don't allow Ctrl+X or Ctrl+V
+                return event.which != 86 && event.which != 88;
+            }
+
+            // Allow function keys.
+            if (event.which >= 112 && event.which <= 123) {
+                return true;
+            }
+
+            // Allow Home/End/arrow keys.
+            if (event.which >= 35 && event.which <= 40) {
+                return true;
+            }
+
+            // Allow Tab key.
+            if (event.which == 9) {
+                return true;
+            }
+
+            // allow Escape key
+            if (event.which == 27) {
+                return true;
+            }
+
+            return false;
+        },
+
+        select() {
+            this.$el.children[0].select()
+        },
+
+        valueChanged(value) {
+            this.$emit('input', value)
+        }
+
+    },
+}
+</script>

src/components/numeric-input/index.js

@@ -0,0 +1,28 @@
+// Import vue component
+import NumericInput from './NumericInput.vue'
+
+// Declare install function executed by Vue.use()
+export function install(Vue) {
+    if (install.installed) return;
+    install.installed = true;
+    Vue.component('NumericInput', NumericInput);
+}
+
+// Create module definition for Vue.use()
+const plugin = {
+    install,
+};
+
+// Auto-install when vue is found (eg. in browser via <script> tag)
+let GlobalVue = null;
+if (typeof window !== 'undefined') {
+    GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+    GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+    GlobalVue.use(plugin);
+}
+
+// To allow use as module (npm/webpack/etc.) export component
+export default NumericInput

src/components/receiving/ByjoveReceiving.vue

@@ -159,10 +159,13 @@
 
     <b-field grouped>
       <b-field class="control">
-        <b-input v-model="inputQuantity"
+        <numeric-input v-if="allowDecimalQuantities"
+                       v-model="inputQuantity"
+                       custom-class="receiving-quantity-input" />
+        <b-input v-else
+                 v-model="inputQuantity"
                  type="number"
-                 custom-class="receiving-quantity-input">
-        </b-input>
+                 custom-class="receiving-quantity-input" />
       </b-field>
       <b-field class="control">
         <b-radio-button v-model="inputUOM"
@@ -246,8 +249,11 @@
 </template>
 
 <script>
+import NumericInput from '../numeric-input/NumericInput.vue'
+
 export default {
     name: 'ByjoveReceiving',
+    components: {NumericInput},
     props: {
         productKey: {
             type: String,
@@ -257,6 +263,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        allowDecimalQuantities: {
+            type: Boolean,
+            default: false,
+        },
         allowExpired: {
             type: Boolean,
             default: true,
@@ -333,7 +343,8 @@ export default {
 
         addAmount() {
 
-            let amount = parseInt(this.inputQuantity)
+            let amount = this.inputQuantity
+            amount = this.allowDecimalQuantities ? parseFloat(amount) : parseInt(amount)
             if (!amount) {
                 this.$buefy.toast.open({
                     message: "Please specify an amount",