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

@@ -9,6 +9,7 @@
               :counter="255"
               :label="this.$gzlocale.get('WidgetName')"
               :rules="[this.$gzv.Max255(this,'name')]"
+              :error-messages="this.$gzv.ServerErrors(this,'name')"
               ref="name"
             ></v-text-field>
           </v-flex>
@@ -18,6 +19,7 @@
               :counter="10"
               :label="this.$gzlocale.get('WidgetSerial')"
               :rules="[this.$gzv.MaxLength(this,'serial',10)]"
+              :error-messages="this.$gzv.ServerErrors(this,'count')"
               ref="serial"
             ></v-text-field>
           </v-flex>
@@ -28,6 +30,7 @@
               :label="this.$gzlocale.get('WidgetCount')"
               ref="count"
               :rules="[this.$gzv.Integer(this,'count'),this.$gzv.Required(this,'count')]"
+              :error-messages="this.$gzv.ServerErrors(this,'count')"
               required
             ></v-text-field>
           </v-flex>
@@ -40,6 +43,7 @@
               ref="dollarAmount"
               required
               :rules="[this.$gzv.Decimal(this,'dollarAmount'),this.$gzv.Required(this,'dollarAmount')]"
+              :error-messages="this.$gzv.ServerErrors(this,'dollarAmount')"
             ></v-text-field>
           </v-flex>
 
@@ -48,6 +52,7 @@
               :label="this.$gzlocale.get('WidgetStartDate')"
               v-model="obj.startDate"
               ref="startDate"
+              :error-messages="this.$gzv.ServerErrors(this,'startDate')"
             ></gz-date-time-picker>
           </v-flex>
 
@@ -55,6 +60,7 @@
             <gz-date-time-picker
               :label="this.$gzlocale.get('WidgetEndDate')"
               :rules="[this.$gzv.After(this,'startDate','endDate')]"
+              :error-messages="this.$gzv.ServerErrors(this,'endDate')"
               v-model="obj.endDate"
               ref="endDate"
             ></gz-date-time-picker>
@@ -64,6 +70,7 @@
               v-model="obj.active"
               :label="this.$gzlocale.get('Active')"
               ref="active"
+              :error-messages="this.$gzv.ServerErrors(this,'active')"
               required
             ></v-checkbox>
           </v-flex>
@@ -147,58 +154,7 @@ export default {
       formReady: false
     };
   },
-  methods: {
-    getErrorCount() {
-      return 3;
-    },
-    canHasServerError(fieldName) {
-      //OK, this is sketchy a bit but seems to work
-      //If it returns a value that is displayed as an error in the field (hides any rule errors but whatever)
-      //Tested and confirmed that If I make a change to the underlying data property that is housing the data used here to determine if a field has an error, and remove that error then it instantly resolves in the UI and removes the message so that's good!
-      //  - so if we store the server errors in the data() property and edit it the changes to (for example remove a rule), the changes will be reflected instantly
-
-      //Vuetify seems to prioritize messages over validation rule messages or perhaps it's set to display only one at a time no matter what value is set for error-count
-      //What I need is each field needs to bind here
-      //This code needs to determine if there are any errors for the field in question,
-      //and return the appropriate string of text
-      //Then eventually this needs to go into gzvalidate as part of *it's* code so I can just easily call that shit from anywhere
-
-      //To determine: how to detect the field has been edited and is dirty and so remove the server error message for that field?
-
-      //Have a think about this: is it better to just show all server errors in their own place instead?
-      // - how many are field related and how many are general?
-      //- what is best for the end user and least confusing? (probably error with field unless it's general then at top and cleared instantly when they modify the field in question)
-
-      //IN ADDITION: on submit needs to clear serverErrors
-
-      /*
-Steps to completion:
-
-On submit show server errors for fields in their fields, show general errors at the top of form in an error box
-When a field is edited any *server* errors must clear for that field right away
-When the form is submitted all server errors cleared if any from previous submit
-
-
- //example error when submit when there are no roles set at all (blank)
-            //{"error":{"code":"2200","details":[{"code":"2200","message":"","target":"roles","error":"VALIDATION_FAILED"}],"message":"Object did not pass validation"}}
-    
- */
-
-      if (this.$_.isEmpty(this.serverErrors)) return [];
-
-      if (fieldName == "roles") {
-        return ["This is an error"];
-      }
-    },
-    validate() {
-      this.serverErrors = [];
-      // this.$refs.form.resetValidation();
-      // this.$refs.form.validate();
-      //test to manually insert an error into the field like a server validation error would need to do
-      //UPDATE: this cannot work because you need to bind to error-messages, not set it directly like here
-      // this.$refs.roles["error-messages"] = ["This is an error!"];
-      // this.$refs.roles.error = true;
-    },
+  methods: {   
     getDataFromApi() {
       var url = "Widget/" + this.$route.params.id;
       this.$gzapi.get(url).then(res => {