From ff2b2d9e0a4bc2eb6d40ea503d4fd1d56935000f Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Wed, 27 Mar 2019 23:56:58 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                    |  6 ++++
 ayanova/src/views/inventory-widget-edit.vue | 34 +++++++++++++++++----
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 386a4568..4318fa4b 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -14,6 +14,12 @@ TODO CLIENT STUFF
 
 TODO NEXT
 
+Get broken server rule to display in vue properly
+see the "bit sketchy but seems to work" bit
+Ensure a form-wide server validation error displays properly 
+	- this page has an idea along the lines of what I was thinking: https://dev-squared.com/2018/01/18/using-modelstate-validation-vue-js-net-core-2/
+
+
 End to end action
 	- The faster I get to a fully working basic level like being able to do data entry and submit to server new or updated records, the faster I can flesh out all the rest
 	- Code the submit data to server route for update
diff --git a/ayanova/src/views/inventory-widget-edit.vue b/ayanova/src/views/inventory-widget-edit.vue
index 76f4f1b3..527b50eb 100644
--- a/ayanova/src/views/inventory-widget-edit.vue
+++ b/ayanova/src/views/inventory-widget-edit.vue
@@ -47,7 +47,7 @@
             <gz-date-time-picker
               :label="this.$gzlocale.get('WidgetStartDate')"
               v-model="obj.startDate"
-              ref="startDate"            
+              ref="startDate"
             ></gz-date-time-picker>
           </v-flex>
 
@@ -63,7 +63,7 @@
             <v-checkbox
               v-model="obj.active"
               :label="this.$gzlocale.get('Active')"
-              ref="active"            
+              ref="active"
               required
             ></v-checkbox>
           </v-flex>
@@ -73,7 +73,7 @@
               :label="this.$gzlocale.get('WidgetRoles')"
               ref="roles"
               :rules="[this.$gzv.Integer(this,'roles'),this.$gzv.Required(this,'roles')]"
-              :error-messages="canHasServerError('roles')"              
+              :error-messages="canHasServerError('roles')"
               required
             ></v-text-field>
           </v-flex>
@@ -152,11 +152,33 @@ export default {
       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 
+
+      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
@@ -186,10 +208,10 @@ export default {
         .upsert(url, this.obj)
         .then(res => {
           if (res.error) {
-            debugger;
+            //debugger;
             that.serverErrors = res.error;
-            that.$refs.form.resetValidation();
-            that.$refs.form.validate();
+            // that.$refs.form.resetValidation();
+            // that.$refs.form.validate();
             //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"}}
             //todo: integrate validation error into form so user can see it