ayanova/src/components/custom-fields-control.vue

@@ -3,7 +3,7 @@
     <span class="v-label v-label--active theme--light">
       {{ this.$gzlocale.get("ObjectCustomFieldCustomGrid") }}
     </span>
-    <div>
+    <!-- <div>
       <h5>FORMKEY: {{ formKey }}</h5>
       <h5>TEMPLATE: {{ this.$store.state.formCustomTemplate[formKey] }}</h5>
       <h5>CUSTOM FIELD DATA:</h5>
@@ -11,7 +11,7 @@
         {{ value }}
       </span>
     </div>
-    <hr />
+    <hr /> -->
 
     <div>
       <v-layout align-center justify-left row wrap>
@@ -113,18 +113,9 @@ export default {
   },
   props: {
     value: String,
-    customfielddata: String,
     formKey: String, //used to grab template from store
     readOnly: Boolean
-  },
-  watch: {
-    // value(val) {
-    //   //this ensures the parent form gets the onchange event
-    //   //not actually sure why there are two here but it worked with the datetime picker so I replicated it here
-    //   this.$emit("input", val);
-    //   this.$emit("change", val);
-    // }
-  },
+  },  
   computed: {
     c2: {
       get: function() {
@@ -140,12 +131,12 @@ export default {
       return this.$gzlocale.get(ltkey);
     },
     GetValueForField: function(dataKey) {
-      if (!this.customfielddata) {
+      if (!this.value) {
         return null;
       }
       // debugger;
       //get the data out of the JSON string value
-      var cData = JSON.parse(this.customfielddata);
+      var cData = JSON.parse(this.value);
 
       //get the type it *should* be
       //TODO: method here
@@ -157,32 +148,27 @@ export default {
       return cData[dataKey];
     },
     SetValueForField: function(dataKey, newValue) {
-      //console.log("Setting " + dataKey + " TO " + newValue);
+      //https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn
 
       //Get the data out of the json string value
       //
-      var cData = JSON.parse(this.customfielddata);
+      var cData = JSON.parse(this.value);
 
-      //then set item in the cData
+      //then set item in the cData      
+      //TODO: This will likely need also to be converted because dates and stuff
       //initial naive attempt: (tostring is suspect)
-      cData[dataKey]=newValue.toString();
-      
-      //TODO: look at how the datetime and tags use the value vs a local cached value instead of mutating the props value
-      //to json text (opposite of Parse above)
-      //BUGBUG: 
-      /*
-      //DEV ERROR errorHandler::devShowUnknownError - unexpected error: 
+      cData[dataKey] = newValue.toString();
 
-Vue warning: 
-Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
-
-//MAYBE I need to modify the value object, not simply replace it (somehow?)
-     */
-     //this.value=JSON.stringify(cData)
-     this.$emit('update:customfielddata', JSON.stringify(cData));
+      //emit the new data so it syncs with the parent source
+      var ret = JSON.stringify(cData);
+      this.$emit("update:value", ret);
+      //this triggers the onchange routine in the parent form
+      //mainly for custom fields purposes so that the dirty checking works
+      this.$emit("change");
     }
   },
   beforeCreate() {
+    console.log("custom-fields-control::BEFORECREATE: TOP");
     //check pre-requisites exist just in case
     if (this.$gzdevmode()) {
       if (!this.$_) {
@@ -191,7 +177,11 @@ Avoid mutating a prop directly since the value will be overwritten whenever the
       if (!this.$gzlocale) {
         throw "custom-fields-control: $gzlocale is required and missing";
       }
-    }  
+    }
+
+    //trigger the template fetch
+    
+    //var v=this.$store.state.formCustomTemplate[this.formKey];
   },
   created() {
     if (this.$gzdevmode()) {
@@ -199,8 +189,7 @@ Avoid mutating a prop directly since the value will be overwritten whenever the
       if (!this.formKey) {
         throw "custom-fields-control: formKey property is required and missing";
       }
-    }   
+    }
   }
 };
-
 </script>

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

@@ -165,8 +165,7 @@
           <v-flex xs12 px-2>
             <gz-custom-fields
               :formKey="formCustomTemplateKey"
-              v-bind:customfielddata.sync="obj.customFields"
-              
+              v-bind:value.sync="obj.customFields"
               :readOnly="this.formState.readOnly"
               ref="customFields"
               :error-messages="this.$gzform.serverErrors(this, 'customFields')"
@@ -199,7 +198,7 @@
 
 <script>
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/*  Xeslint-disable    */
+/*  eslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 const FORM_KEY = "inventory-widget-edit";
@@ -208,7 +207,7 @@ const FORM_CUSTOM_TEMPLATE_KEY = "widget";
 
 export default {
   beforeCreate() {
-    //console.log("BEFORECREATE: TOP");
+    console.log("BEFORECREATE: TOP");
     var vm = this;
     initForm(this)
       .then(() => {
@@ -618,11 +617,17 @@ var JUST_DELETED = false;
 //////////////////////
 //
 //
+// function initForm(vm) {
+//   return fetchLocaleText(vm).then(
+//     populatePickLists(vm).then(
+//       vm.$gzformcustomtemplate.get(FORM_CUSTOM_TEMPLATE_KEY)
+//     )
+//   );
+// }
+
 function initForm(vm) {
-  return fetchLocaleText(vm).then(
-    populatePickLists(vm).then(
-      vm.$gzformcustomtemplate.get(FORM_CUSTOM_TEMPLATE_KEY)
-    )
+  return  vm.$gzformcustomtemplate.get(FORM_CUSTOM_TEMPLATE_KEY).then(fetchLocaleText(vm).then(
+    populatePickLists(vm))
   );
 }