ayanova/src/api/gzvalidate.js

@@ -362,6 +362,7 @@ export default {
     vm.appError = null;
     //clear out actual message box display
     vm.errorBoxMessage = null;
+    vm.formValid = true;
   },
   ///////////////////////////////
   // setErrorBoxErrors
@@ -407,5 +408,7 @@ export default {
       vm.obj[ref] = val;
       triggeringChange = false;
     }
+    vm.formDirty = true;
+    vm.formValid = vm.$refs.form.validate();
   }
 };

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

@@ -19,6 +19,7 @@
             <v-text-field
               v-model="obj.name"
               clearable
+              @click:clear="onChange('name')"
               :counter="255"
               :label="this.$gzlocale.get('WidgetName')"
               :rules="[this.$gzv.max255(this,'name'),this.$gzv.required(this,'name')]"
@@ -31,6 +32,7 @@
             <v-text-field
               v-model="obj.serial"
               clearable
+              @click:clear="onChange('serial')"
               :counter="10"
               :label="this.$gzlocale.get('WidgetSerial')"
               :rules="[this.$gzv.maxLength(this,'serial',10)]"
@@ -43,6 +45,7 @@
             <v-text-field
               v-model="obj.count"
               clearable
+              @click:clear="onChange('count')"
               :counter="10"
               :label="this.$gzlocale.get('WidgetCount')"
               ref="count"
@@ -95,7 +98,7 @@
               ref="active"
               :error-messages="this.$gzv.serverErrors(this,'active')"
               required
-              @change="onChange('active')"
+              @change="onChange('active')"              
             ></v-checkbox>
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
@@ -112,6 +115,18 @@
           </v-flex>
         </v-layout>
 
+        <v-layout align-left justify-center row wrap mt-5>
+          <v-flex xs6 sm4>
+            READY: {{formReady}}
+            <br>
+            DIRTY: {{formDirty}}
+            <br>
+            VALID: {{formValid}}
+            <br>
+            READONLY: {{formReadOnly}}
+            <br>
+          </v-flex>
+        </v-layout>
         <!-- <v-layout align-left justify-center row wrap mt-5>
           <v-flex xs6 sm4>
             <v-btn small @click="remove">{{ this.$gzlocale.get("Delete")}}</v-btn>
@@ -129,7 +144,7 @@
 </template>
 
 <script>
-/*  xeslint-disable    */
+/*  eslint-disable    */
 function clickHandler(menuItem) {
   if (!menuItem) {
     return;
@@ -236,11 +251,24 @@ export default {
       serverError: {},
       errorBoxMessage: null,
       appError: null,
-      formReady: false
+      formReady: false,
+      formDirty: false,
+      formValid: true,
+      formReadOnly: false
     };
   },
+
+  // watch: {
+  //   obj: {
+  //     handler: function(newObj, oldObj) {
+  //       console.log("WATCH OBJ CHANGED ");
+  //     },
+  //     deep: true
+  //   }
+  // },
   methods: {
     onChange(ref) {
+      console.log("onChange:" + ref);
       this.$gzv.onChange(this, ref);
     },
     getDataFromApi() {
@@ -277,6 +305,9 @@ export default {
               vm.serverError = res.error;
               vm.$gzv.setErrorBoxErrors(vm);
             } else {
+              //It's ok, form is saved
+              vm.formDirty = false;
+
               //Logic for detecting 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