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

@@ -1,12 +1,12 @@
 <template>
-  <v-layout>
+  <v-layout v-if="this.formReady">
     <v-flex>
       <form>
         <v-layout align-center justify-left row wrap>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
-              v-model="obj.name"              
-              :counter="255"              
+              v-model="obj.name"
+              :counter="255"
               :label="this.$gzlocale.get('WidgetName')"
               name="name"
               required
@@ -14,17 +14,18 @@
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
-              v-model="obj.serial"              
-              :counter="10"              
+              v-model="obj.serial"
+              :counter="10"
               :label="this.$gzlocale.get('WidgetSerial')"
+              :rules="[this.$gzv.MaxLength('WidgetSerial',obj.serial,10)]"
               name="serial"
               required
             ></v-text-field>
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
-              v-model="obj.count"             
-              :counter="10"             
+              v-model="obj.count"
+              :counter="10"
               :label="this.$gzlocale.get('WidgetCount')"
               name="count"
               required
@@ -34,7 +35,7 @@
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
               v-model="obj.dollarAmount"
-              :prefix="this.$gzlocale.formats.currencySymbol"                           
+              :prefix="this.$gzlocale.formats.currencySymbol"
               :label="this.$gzlocale.get('WidgetDollarAmount')"
               name="dollarAmount"
               required
@@ -70,7 +71,7 @@
             <gz-date-time-picker
               :label="this.$gzlocale.get('WidgetStartDate')"
               v-model="obj.startDate"
-              name="startDate"             
+              name="startDate"
             ></gz-date-time-picker>
           </v-flex>
 
@@ -78,19 +79,18 @@
             <gz-date-time-picker
               :label="this.$gzlocale.get('WidgetEndDate')"
               v-model="obj.endDate"
-              name="endDate"             
+              name="endDate"
             ></gz-date-time-picker>
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-checkbox
-              v-model="obj.active"             
+              v-model="obj.active"
               value="1"
               :label="this.$gzlocale.get('Active')"
               name="checkbox"
               required
             ></v-checkbox>
           </v-flex>
-         
         </v-layout>
 
         <v-layout align-center justify-space-around row wrap mt-5>
@@ -142,7 +142,13 @@ export default {
       "WidgetCustom15",
       "WidgetCustom16"
     ].concat(this.$gzlocale.commonKeysEditForm);
-    this.$gzlocale.fetch(ltKeysRequired);
+    this.$gzlocale
+      .fetch(ltKeysRequired)
+      .then(() => (this.formReady = true))
+      .catch(err => {
+        this.formReady = true;
+        this.$gzerror(err);
+      });
   },
   created() {
     this.getDataFromApi();
@@ -151,6 +157,7 @@ export default {
   data() {
     return {
       obj: {},
+      formReady: false,
       theDate: new Date(),
       date: new Date().toISOString().substr(0, 10),
       menu: false,