ayanova/src/components/percent-control.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <v-text-field
+      ref="textField"
+      :value="currencyValue"
+      @change="updateValue"
+      v-currency="{
+        currency: null,
+        locale: languageName,
+        precision: precision
+      }"
+      :readonly="readonly"
+      :disabled="disabled"
+      :label="label"
+      :rules="rules"
+      :error-messages="errorMessages"
+      append-icon="$ayiPercent"
+    ></v-text-field>
+  </div>
+</template>
+<script>
+/*  Xeslint-disable */
+//### NOTE: THIS IS A DUPLICATE OF CURRENCYCONTROL AND THE ONLY DIFFERENCE IS THE "currency:" VALUE IS SET TO NULL IN THE TEMPLATE AND IN THE updateValue METHOD
+//https://dm4t2.github.io/vue-currency-input/guide/#introduction :value="formattedValue"
+//https://codesandbox.io/s/vue-template-kd7d1?fontsize=14&module=%2Fsrc%2FApp.vue
+//https://github.com/dm4t2/vue-currency-input
+//https://github.com/dm4t2/vue-currency-input/releases
+import { setValue, parseCurrency } from "vue-currency-input";
+export default {
+  data() {
+    return {
+      languageName: window.$gz.locale.getBrowserFirstLanguage()
+    };
+  },
+  props: {
+    label: { type: String, default: null },
+    rules: { type: Array, default: undefined },
+    value: { type: Number, default: null },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    errorMessages: { type: Array, default: null },
+    precision: { type: Number, default: undefined }
+  },
+  computed: {
+    currencyValue() {
+      return this.value;
+    }
+  },
+  methods: {
+    updateValue() {
+      let val = this.$refs.textField.$refs.input.value;
+      let parsedValue = parseCurrency(val, {
+        currency: null,
+        locale: this.languageName
+      });
+
+      this.$emit("input", parsedValue);
+    }
+  }
+};
+</script>

ayanova/src/main.js

@@ -45,6 +45,7 @@ import dataTableMobileFilterColumnSelectorControl from "./components/data-table-
 import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
+import percentControl from "./components/percent-control.vue";
 import phoneControl from "./components/phone-control.vue";
 import emailControl from "./components/email-control.vue";
 import urlControl from "./components/url-control.vue";
@@ -197,6 +198,7 @@ Vue.component(
 );
 Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
+Vue.component("gz-percent", percentControl);
 Vue.component("gz-decimal", decimalControl);
 Vue.component("gz-phone", phoneControl);
 Vue.component("gz-email", emailControl);

ayanova/src/views/svc-contract.vue

@@ -39,7 +39,7 @@
           <v-col cols="12">
             <v-row>
               <v-col>
-                <gz-decimal
+                <gz-percent
                   v-model="obj.partsOverride"
                   :readonly="formState.readOnly"
                   :label="$ay.t('PartList')"
@@ -51,7 +51,8 @@
                   ]"
                   :error-messages="form().serverErrors(this, 'partsOverride')"
                   @input="fieldValueChanged('partsOverride')"
-                ></gz-decimal>
+                  :precision="5"
+                ></gz-percent>
               </v-col>
 
               <v-col>
@@ -74,7 +75,7 @@
             </v-row>
             <v-row>
               <v-col>
-                <gz-decimal
+                <gz-percent
                   v-model="obj.serviceRatesOverride"
                   :readonly="formState.readOnly"
                   :label="$ay.t('ServiceRateList')"
@@ -88,7 +89,7 @@
                     form().serverErrors(this, 'serviceRatesOverride')
                   "
                   @input="fieldValueChanged('serviceRatesOverride')"
-                ></gz-decimal>
+                ></gz-percent>
               </v-col>
 
               <v-col>
@@ -114,7 +115,7 @@
 
             <v-row>
               <v-col>
-                <gz-decimal
+                <gz-percent
                   v-model="obj.travelRatesOverride"
                   :readonly="formState.readOnly"
                   :label="$ay.t('TravelRateList')"
@@ -128,7 +129,7 @@
                     form().serverErrors(this, 'travelRatesOverride')
                   "
                   @input="fieldValueChanged('travelRatesOverride')"
-                ></gz-decimal>
+                ></gz-percent>
               </v-col>
 
               <v-col>
@@ -324,7 +325,7 @@
             <v-card-text>
               <v-row>
                 <v-col cols="12" sm="6" lg="4" xl="3">
-                  <gz-decimal
+                  <gz-percent
                     v-model="
                       obj.contractPartOverrideItems[
                         editContractPartOverrideItemIndex
@@ -355,7 +356,7 @@
                         `ContractPartOverrideItems[${editContractPartOverrideItemIndex}].Override`
                       )
                     "
-                  ></gz-decimal>
+                  ></gz-percent>
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
                   <v-select