ayanova/src/api/initialize.js

@@ -782,7 +782,7 @@ export default function initialize() {
                 //TODO: also need the other locale settings such as number and date formats etc to be added at server
                 window.$gz.store.commit("setLocale", {
                   decimalSeparator: ".",
-                  currencyName: "USD",
+                  currencyName: "EUR",
                   hour12: true,
                   // shortDate: "YYYY-MM-DD",
                   // shortTime: "hh:mm:ss A",

ayanova/src/components/currency-control.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
     <v-text-field
+      ref="textField"
+      :value="formattedValue"
+      @input="handleInput"
       v-currency="{
         currency: currencyName,
         locale: languageName
       }"
-      v-model="workingAmount"
       :readonly="readonly"
       v-bind:label="label"
       v-bind:rules="rules"
@@ -14,22 +16,31 @@
     <p v-show="error" class="form__error v-messages theme--light error--text">
       {{ error }}
     </p>
+    <!--     currency:{{ currencyName }}, locale:{{ languageName }}, amount:{{ amount }}
+   <span class="title">v-currency-field</span>
+    <v-currency-field v-model="value" /> -->
   </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 */
+import { setValue, parseCurrency } from "vue-currency-input";
 export default {
-  data: () => ({
-    amount: null,
-    oldAmount: null,
-    currencyName: window.$gz.locale.getCurrencyName(),
-    languageName: window.$gz.locale.getBrowserFirstLanguage()
-  }),
+  data() {
+    return {
+      formattedValue: this.value,
+      currencyName: window.$gz.locale.getCurrencyName(),
+      languageName: window.$gz.locale.getBrowserFirstLanguage()
+    };
+  },
+  watch: {
+    value(value) {
+      setValue(this.$refs.textField.$refs.input, value);
+    }
+  },
   props: {
     label: String,
     rules: Array,
-    value: Number,
+    value: { type: Number, default: null },
     required: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     error: {
@@ -43,37 +54,41 @@ export default {
     },
     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);
-      }
+    handleInput(value) {
+      this.$emit(
+        "input",
+        parseCurrency(value, {
+          currency: this.currencyName,
+          locale: this.languageName
+        })
+      );
+      this.formattedValue = value;
     }
   }
+  //   ,
+  //   computed: {
+  //     amountLocal: {
+  //       get: function() {
+  //         console.log("Control getting amount: " + this.amount);
+  //         if (this.amount == null) {
+  //           return "0";
+  //         } else {
+  //           return this.amount.toString();
+  //         }
+  //       },
+  //       set: function(value) {
+  //         var parsedValue = this.$parseCurrency(this.amount, {
+  //           currency: this.currencyName,
+  //           locale: this.languageName
+  //         });
+  //         console.log("Control SETTING amount: " + parsedValue);
+  //         //https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
+  //         //https://stackoverflow.com/a/51722100/8939
+  //         this.$emit("update:amount", parsedValue);
+  //         this.$emit("change", parsedValue);
+  //       }
+  //     }
+  //   },
 };
 </script>

ayanova/src/main.js

@@ -36,6 +36,7 @@ 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";
+import VCurrencyField from "./components/VCurrencyField";
 
 /////////////////////////////////////////////////////////////////
 // LIBS AND GLOBAL ITEMS
@@ -180,6 +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("v-currency-field", VCurrencyField);
 
 //3rd party components
 Vue.use(VueCurrencyInput);

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

@@ -96,12 +96,11 @@
                 :rules="[form().decimalValid(this, 'dollarAmount')]"
                 :error-messages="form().serverErrors(this, 'dollarAmount')"
                 @change="onChange('dollarAmount')"
-              ></v-text-field> -->
+              ></v-text-field>v-model="obj.dollarAmount" -->
+              <span class="title">v-currency-field</span>
+              <v-currency-field v-model="obj.dollarAmount" />
+              DOLLAR AMOUNT: {{ obj.dollarAmount }}
               <gz-currency
-                v-currency="{
-                  currency: locale().getCurrencyName(),
-                  locale: locale().getBrowserFirstLanguage()
-                }"
                 v-model="obj.dollarAmount"
                 :readonly="this.formState.readOnly"
                 :label="lt('WidgetDollarAmount')"
@@ -434,7 +433,7 @@ export default {
     },
     onChange(ref) {
       if (!this.formState.loading && !this.formState.readOnly) {
-        debugger;
+        console.log("Onchange: " + ref);
         window.$gz.form.onChange(this, ref);
       }
     },
@@ -465,6 +464,7 @@ export default {
             window.$gz.form.setErrorBoxErrors(vm);
           } else {
             vm.obj = res.data;
+            console.log("GetData dollarAmount:" + res.data.dollarAmount);
             //Update the form status
             window.$gz.form.setFormState({
               vm: vm,