ayanova/src/api/locale.js

@@ -218,6 +218,12 @@ export default {
   getTimeZoneName() {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   },
+  //////////////////////////////////////////////////
+  // Get the user's chosen currency name
+  //
+  getCurrencyName() {
+    return window.$gz.store.state.locale.currencyName;
+  },
   ///////////////////////////////////////////
   // Turn a utc date into a displayable
   // short date and time
@@ -386,7 +392,7 @@ export default {
       languageName = this.getBrowserLanguages();
     }
     if (!currencyName) {
-      currencyName = window.$gz.store.state.locale.currencyName;
+      currencyName = this.getCurrencyName();
     }
 
     return new Intl.NumberFormat(languageName, {

ayanova/src/components/currency-control.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <v-text-field
+      v-currency="{
+        currency: currencyName,
+        locale: languageName
+      }"
+      v-model="workingAmount"
+      :readonly="readOnly"
+      v-bind:label="label"
+      v-bind:rules="rules"
+      v-bind:required="required"
+    ></v-text-field>
+    <p v-show="error" class="form__error v-messages theme--light error--text">
+      {{ error }}
+    </p>
+  </div>
+</template>
+<script>
+/*  Xeslint-disable */
+//******************************** NOTE: this control also captures the TIME even though it's DATE only, this is an intentional design decision to support field change to amount or amount AND time and is considered a display issue */
+export default {
+  data: () => ({
+    amount: null,
+    oldAmount: null,
+    currencyName: window.$gz.locale.getCurrencyName(),
+    languageName: window.$gz.locale.getBrowserFirstLanguage()
+  }),
+  props: {
+    label: String,
+    rules: Array,
+    value: String,
+    required: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    lt(ltKey) {
+      return window.$gz.locale.get(ltKey);
+    },
+    locale() {
+      return window.$gz.locale;
+    }
+  },
+  watch: {
+    amount() {
+      //abstract change of value to filter out no change and control when change happens to parent
+      var hasChanged = false;
+
+      if (this.amount != this.oldAmount) {
+        hasChanged = true;
+      }
+      this.oldAmount = this.amount;
+      if (hasChanged) {
+        this.$emit("input", this.amount);
+        this.$emit("change", this.amount);
+      }
+    },
+    value() {
+      this.amount = this.value;
+    }
+  },
+  computed: {
+    workingAmount: {
+      get() {
+        return this.amount;
+      },
+      set(value) {
+        console.log("STUB: setvalue ");
+        console.log(value);
+        //this.amount = parseCurrencyHere(value);
+      }
+    }
+  }
+};
+</script>

ayanova/src/main.js

@@ -34,6 +34,7 @@ import dateControl from "./components/date-control.vue";
 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 errorhandler from "./api/errorhandler";
 
 /////////////////////////////////////////////////////////////////
@@ -178,6 +179,7 @@ Vue.component("gz-date-picker", dateControl);
 Vue.component("gz-time-picker", timeControl);
 Vue.component("gz-tag-picker", tagPicker);
 Vue.component("gz-custom-fields", customFieldsControl);
+Vue.component("gz-currency", currencyControl);
 
 //3rd party components
 Vue.use(VueCurrencyInput);

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

@@ -84,16 +84,18 @@
               xl="3"
             >
               <v-text-field
+                v-currency="{
+                  currency: locale().getCurrencyName(),
+                  locale: locale().getBrowserFirstLanguage()
+                }"
                 v-model="obj.dollarAmount"
                 :readonly="this.formState.readOnly"
-                :prefix="ltFormat().currencySymbol"
                 :label="lt('WidgetDollarAmount')"
                 ref="dollarAmount"
                 required
                 :rules="[form().decimalValid(this, 'dollarAmount')]"
                 :error-messages="form().serverErrors(this, 'dollarAmount')"
                 @change="onChange('dollarAmount')"
-                type="number"
               ></v-text-field>
             </v-col>
 
@@ -410,14 +412,15 @@ export default {
     lt(ltKey) {
       return window.$gz.locale.get(ltKey);
     },
-    ltFormat() {
-      return window.$gz.locale.format();
+    locale() {
+      return window.$gz.locale;
     },
     form() {
       return window.$gz.form;
     },
     onChange(ref) {
       if (!this.formState.loading && !this.formState.readOnly) {
+        debugger;
         window.$gz.form.onChange(this, ref);
       }
     },