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

@@ -15,6 +15,14 @@
 
     <div>
       <v-row align-center justify-left row wrap>
+        <!-- Here is what a template object looks like 
+    "template":"[
+    {\"fld\":\"WidgetNotes\",\"required\":\"true\"},{\"fld\":\"WidgetCustom1\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"datetime\"},
+    {\"fld\":\"WidgetCustom2\",\"hide\":\"false\",\"required\":\"true\",\"type\":\"text\"},{\"fld\":\"WidgetCustom3\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"number\"},
+    {\"fld\":\"WidgetCustom4\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"bool\"},{\"fld\":\"WidgetCustom5\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"currency\"},
+    {\"fld\":\"WidgetCustom6\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"date\"},{\"fld\":\"WidgetCustom7\",\"hide\":\"false\",\"required\":\"false\",\"type\":\"time\"}]"
+    Note that it mixes in regular stock form fields that the end user has set to required as well as the custom ones, we identify custom by the presence of the "type" property
+       -->
         <template v-for="item in this.$store.state.formCustomTemplate[formKey]">
           <v-col
             v-if="item.type"
@@ -38,13 +46,16 @@
               DATE and TIME CONTROL HERE
             </div>
             <div v-else-if="item.type === 'text'">
+              {{ lt(item.fld) }}
               <v-textarea
                 v-model="_self[item.dataKey]"
                 :readonly="readOnly"
                 :label="lt(item.fld)"
                 :ref="item.fld"
                 :error-messages="form().serverErrors(parentVM, item.fld)"
+                :rules="[form().required(parentVM, item.fld)]"
                 auto-grow
+                clearable
               ></v-textarea>
 
               <!-- <v-textarea
@@ -55,6 +66,10 @@
                 ref="notes"
                 @change="onChange('notes')"
                 auto-grow
+                 
+                @change="onChange(item.fld)"
+                
+              >
               ></v-textarea> -->
             </div>
             <div v-else-if="item.type === 'number'">
@@ -76,7 +91,7 @@
 </template>
 <script>
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/*  xeslint-disable    */
+/*  eslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /**
  * v-if="item.hide == false"
@@ -115,7 +130,7 @@ export default {
   data() {
     return {
       c1: null,
-      //c2: "Here is my WidgetCustom2 Data!",
+      // c2: null, this was replaced with a computed property as will all others
       c3: null,
       c4: null,
       c5: null,
@@ -155,11 +170,16 @@ export default {
       //nothing
       return window.$gz.form;
     },
+    onChange(ref) {
+      if (!this.parentVM.formState.loading && !this.parentVM.formState.readOnly) {
+        window.$gz.form.onChange(this.parentVM, ref);
+      }
+    },
     GetValueForField: function(dataKey) {
       if (!this.value) {
         return null;
       }
-      // debugger;
+      //debugger;
       //get the data out of the JSON string value
       var cData = JSON.parse(this.value);
 
@@ -169,20 +189,29 @@ export default {
       //coerce it to that type and return it
       //TODO: Method here
 
-      // debugger;
+     
       return cData[dataKey];
     },
     SetValueForField: function(dataKey, newValue) {
       //https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn
 
+      //debugger;
+
       //Get the data out of the json string value
       //
       var cData = JSON.parse(this.value);
 
-      //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();
+      //handle null or undefined
+      if (newValue === null || newValue === undefined) {
+        cData[dataKey] = null;
+      } else {
+        
+        //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();
+      }
 
       //emit the new data so it syncs with the parent source
       var ret = JSON.stringify(cData);
@@ -203,10 +232,6 @@ export default {
         throw "custom-fields-control: $gz.locale is required and missing";
       }
     }
-
-    //trigger the template fetch
-
-    //var v=this.$store.state.formCustomTemplate[this.formKey];
   },
   created() {
     // console.log("custom-fields-control::BEFORECREATE: TOP");