ayanova/src/components/currency-control.vue

@@ -19,6 +19,9 @@
 </template>
 <script>
 /*  Xeslint-disable */
+//https://dm4t2.github.io/vue-currency-input/guide/#introduction
+//https://codesandbox.io/s/vue-template-kd7d1?fontsize=14&module=%2Fsrc%2FApp.vue
+//https://github.com/dm4t2/vue-currency-input
 import { setValue, parseCurrency } from "vue-currency-input";
 export default {
   data() {

ayanova/src/components/decimal-control.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <v-text-field
+      ref="textField"
+      :value="formattedValue"
+      @input="handleInput"
+      v-currency="{
+        currency: null,
+        locale: languageName
+      }"
+      :readonly="readonly"
+      :label="label"
+      :rules="rules"
+    ></v-text-field>
+    <p v-show="error" class="form__error v-messages theme--light error--text">
+      {{ error }}
+    </p>
+  </div>
+</template>
+<script>
+/*  Xeslint-disable */
+//https://dm4t2.github.io/vue-currency-input/guide/#introduction
+//https://codesandbox.io/s/vue-template-kd7d1?fontsize=14&module=%2Fsrc%2FApp.vue
+//https://github.com/dm4t2/vue-currency-input
+//NON CURRENCY MODE: https://dm4t2.github.io/vue-currency-input/config/#component
+import { setValue, parseCurrency } from "vue-currency-input";
+export default {
+  data() {
+    return {
+      formattedValue: this.value,
+      languageName: window.$gz.locale.getBrowserFirstLanguage()
+    };
+  },
+  watch: {
+    value(value) {
+      setValue(this.$refs.textField.$refs.input, value);
+    }
+  },
+  props: {
+    label: String,
+    rules: Array,
+    value: { type: Number, default: null },
+    readonly: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    lt(ltKey) {
+      return window.$gz.locale.get(ltKey);
+    },
+    locale() {
+      return window.$gz.locale;
+    },
+    handleInput(value) {
+      this.$emit(
+        "input",
+        parseCurrency(value, {
+          currency: null,
+          locale: this.languageName
+        })
+      );
+      this.formattedValue = value;
+    }
+  }
+};
+</script>

ayanova/src/main.js

@@ -35,9 +35,9 @@ import timeControl from "./components/time-control.vue";
 import tagPicker from "./components/tag-picker.vue";
 import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
+import decimalControl from "./components/decimal-control.vue";
 import errorhandler from "./api/errorhandler";
 
-
 /////////////////////////////////////////////////////////////////
 // LIBS AND GLOBAL ITEMS
 // NOTE: I'm putting them on Window deliberately to be globally available
@@ -181,7 +181,7 @@ Vue.component("gz-time-picker", timeControl);
 Vue.component("gz-tag-picker", tagPicker);
 Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
-
+Vue.component("gz-decimal", decimalControl);
 
 //3rd party components
 Vue.use(VueCurrencyInput);

ayanova/src/views/test-inventory-widget-edit.vue

@@ -82,7 +82,7 @@
               lg="4"
               xl="3"
             >
-              <gz-currency
+              <!-- <gz-currency
                 v-model="obj.dollarAmount"
                 :readonly="this.formState.readOnly"
                 :label="lt('WidgetDollarAmount')"
@@ -93,7 +93,20 @@
                 ]"
                 :error-messages="form().serverErrors(this, 'dollarAmount')"
                 @input="onChange('dollarAmount')"
-              ></gz-currency>
+              ></gz-currency> -->
+
+              <gz-decimal
+                v-model="obj.dollarAmount"
+                :readonly="this.formState.readOnly"
+                :label="lt('WidgetDollarAmount')"
+                ref="dollarAmount"
+                :rules="[
+                  form().decimalValid(this, 'dollarAmount'),
+                  form().required(this, 'dollarAmount')
+                ]"
+                :error-messages="form().serverErrors(this, 'dollarAmount')"
+                @input="onChange('dollarAmount')"
+              ></gz-decimal>
             </v-col>
 
             <v-col cols="12" sm="6" lg="4" xl="3">