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

@@ -1,7 +1,7 @@
 <template>
   <v-layout v-if="this.formReady">
     <v-flex>
-      <form ref="form">
+      <v-form ref="form">
         <v-layout align-center justify-left row wrap>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
@@ -26,7 +26,7 @@
               v-model="obj.count"
               :counter="10"
               :label="this.$gzlocale.get('WidgetCount')"
-              ref="count"              
+              ref="count"
               :rules="[this.$gzv.Integer(this,'count'),this.$gzv.Required(this,'count')]"
               required
             ></v-text-field>
@@ -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,24 +63,34 @@
             <v-checkbox
               v-model="obj.active"
               :label="this.$gzlocale.get('Active')"
-              ref="active"
+              ref="active"            
               required
             ></v-checkbox>
           </v-flex>
+          <v-flex xs12 sm6 lg4 xl3 px-2>
+            <v-text-field
+              v-model="obj.roles"
+              :label="this.$gzlocale.get('WidgetRoles')"
+              ref="roles"
+              :rules="[this.$gzv.Integer(this,'roles'),this.$gzv.Required(this,'roles')]"
+              :error-messages="canHasServerError('roles')"              
+              required
+            ></v-text-field>
+          </v-flex>
         </v-layout>
 
         <v-layout align-center justify-space-around row wrap mt-5>
           <v-flex xs1>
-            <v-btn>one</v-btn>
+            <v-btn @click="validate">Force validate</v-btn>
           </v-flex>
           <v-flex xs1>
-            <v-btn>two</v-btn>
+            <v-btn>test2</v-btn>
           </v-flex>
           <v-flex xs1>
-            <v-btn @click="submit">submit</v-btn>
+            <v-btn @click="submit">save</v-btn>
           </v-flex>
         </v-layout>
-      </form>
+      </v-form>
     </v-flex>
   </v-layout>
 </template>
@@ -133,10 +143,27 @@ export default {
   data() {
     return {
       obj: {},
+      serverErrors: {},
       formReady: false
     };
   },
   methods: {
+    getErrorCount() {
+      return 3;
+    },
+    canHasServerError(fieldName) {
+      if (fieldName == "roles") {
+        return ["This is an error"];
+      }
+    },
+    validate() {
+      // 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;
+    },
     getDataFromApi() {
       var url = "Widget/" + this.$route.params.id;
       this.$gzapi.get(url).then(res => {
@@ -145,9 +172,61 @@ export default {
     },
     submit() {
       // debugger;
-      //this.$validator.validateAll();
-      this.$refs.form.validate();
-    }
+      //Submit the form data to the api
+
+      //Check for broken rules, do not submit with broken rules
+      //No broken rules then:
+      //Gather up the form data into a submitable object (can I just submit the existing object??)
+      //Post it
+      //Update the local object with the returned result
+      //Check the return object for broken rules
+      var that = this;
+      var url = "Widget/" + this.$route.params.id;
+      this.$gzapi
+        .upsert(url, this.obj)
+        .then(res => {
+          if (res.error) {
+            debugger;
+            that.serverErrors = res.error;
+            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
+            //User can only submit if no existing errors so should be starting with a clean error free form and then will see validation errors under appropriate fields
+            //if a user makes a change to a control then that control being changed should remove the rule from the server until the next submit happens
+          } else {
+            //Logic for detecing if a post or put: if id then it was a post, if no id then it was a put
+            if (res.id) {
+              //Handle "post" of new record
+              that.obj = res.data;
+            } else {
+              //Handle "put" of an existing record
+              that.obj.concurrencyToken = res.data.concurrencyToken;
+            }
+          }
+        })
+        .catch(function(error) {
+          //we should be here if it was a gross error of some kind not a mild one like validation but more like if the server doesn't exist or something I guess
+
+          console.log(error);
+          alert("Houston, we have a problem");
+        });
+
+      //example from login form
+      //  if (this.input.username != "" && this.input.password != "") {
+      //   auth
+      //     .authenticate(this.input.username, this.input.password)
+      //     .then(() => {
+      //       this.$router.replace({ name: "home" });
+      //     })
+      //     .catch(function(error) {
+      //       /* xeslint-disable-next-line */
+      //       //console.log(error);
+      //       alert("login failed: " + error);
+      //     });
+      // }
+    } //end of submit()
   }
 };
 </script>