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

@@ -12,6 +12,7 @@
       </span>
     </div>
     <hr />
+    {{ obj.c2 }}
     <div>
       <v-layout align-center justify-left row wrap>
         <template v-for="item in this.$store.state.formCustomTemplate[formKey]">
@@ -29,7 +30,12 @@
               DATE and TIME CONTROL HERE
             </div>
             <div v-else-if="item.type === 'text'">
-              TEXT INPUT CONTROL HERE
+              <v-textarea
+                v-model="$data[item.fld]"
+                :readonly="readOnly"
+                :label="lt(item.fld)"
+                auto-grow
+              ></v-textarea>
             </div>
             <div v-else-if="item.type === 'number'">
               NUMBER INPUT CONTROL HERE
@@ -37,7 +43,11 @@
             <div v-else-if="item.type === 'bool'">
               CHECKBOX INPUT CONTROL HERE
             </div>
-            <div v-else><span class="error">UNKNOWN CUSTOM CONTROL TYPE: {{ item.type }}</span></div>
+            <div v-else>
+              <span class="error"
+                >UNKNOWN CUSTOM CONTROL TYPE: {{ item.type }}</span
+              >
+            </div>
           </v-flex>
         </template>
       </v-layout>
@@ -46,7 +56,7 @@
 </template>
 <script>
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/*  xeslint-disable    */
+/*  eslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /**
  * v-if="item.hide == false"
@@ -67,9 +77,13 @@
         public const string Number = "number"; //decimal regardless
         public const string Bool = "bool";
 
-                TEMPLATE: [ { "fld": "WidgetNotes", "required": "true" }, { "fld": "WidgetCustom1", "hide": "false", "required": "false", "type": "date" }, 
+           
-                { "fld": "WidgetCustom2", "hide": "false", "required": "true", "type": "text" }, { "fld": "WidgetCustom3", "hide": "false", "required": "false", "type": "int" },
+FORMKEY: widget
-                { "fld": "WidgetCustom4", "hide": "false", "required": "false", "type": "bool" }, { "fld": "WidgetCustom5", "hide": "false", "required": "false", "type": "decimal" } ]
+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" } ]
+CUSTOM FIELD DATA:
+{"c1":"2020-03-12T16:37:39.9094856Z","c2":"Sint laborum quisquam dolorem ipsum architecto voluptate consequatur tempora praesentium. Nemo aliquam amet aut aliquid perspiciatis adipisci excepturi. Officia ea voluptatem dolore suscipit ipsa itaque. Quaerat nostrum ut qui dignissimos nesciunt quasi laudantium dicta. Ut nihil doloribus illum rem quas sed.","c3":30453626,"c4":false,"c5":0.529134196010015}
+
+
  * 3) bind to the data somehow (might have to warp the data to fit the controls in some cases due to changed template design)
     - computed properties that sit above the json and translate into and out of it, custom1, custom2 etc.  If empty then it's just empty.
  * 4) Profit$
@@ -78,12 +92,14 @@
 export default {
   data() {
     return {
-      obj: { blah: "blah", rhubarb: "rhubarb" }
+      obj: { me: 1, c2: "This is my c2 data!" },
+      WidgetCustom2: "Here is my WidgetCustom2 Data!"
     };
   },
   props: {
     value: String,
-    formKey: String //used to grab template from store
+    formKey: String, //used to grab template from store
+    readOnly: Boolean
   },
   watch: {
     value(val) {
@@ -93,35 +109,15 @@ export default {
       this.$emit("change", val);
     }
   },
-  // computed: {
+
-  //   //todo: make this work with a text field first to make life easier and get the concept rolling then extend out
+  methods: {
-  //   custom1: {
+    lt: function(ltkey) {
-  //     get: function() {
+      return this.$gzlocale.get(ltkey);
-  //       //TODO: move all this functionality to quick easy methods to call for each custom type
+    },
-  //       //get the cx name of this field
+    bindName: function() {
-  //       //get the type of this field expected from the store template
+      return this.obj.c2;
-  //       //get the value in the json, co-erce it to the expected type and return it
+    }
-  //     },
+  },
-  //     set: function(newValue) {
-  //       //get the cx name of this field
-  //       //store the value in the json or update it with the textual representation of this field's data
-  //       //might need to mark dirty as well or push an event of change?
-  //     }
-  //   },
-  //   custom2: {
-  //     get: function() {
-  //       //get the cx name of this field
-  //       //get the type of this field expected from the store template
-  //       //get the value in the json, co-erce it to the expected type and return it
-  //     },
-  //     set: function(newValue) {
-  //       //get the cx name of this field
-  //       //store the value in the json or update it with the textual representation of this field's data
-  //       //might need to mark dirty as well or push an event of change?
-  //     }
-  //   }
-  // },
-  methods: {},
   beforeCreate() {
     //check pre-requisites exist just in case
     if (this.$gzdevmode()) {
@@ -132,6 +128,16 @@ export default {
         throw "custom-fields-control: $gzlocale is required and missing";
       }
     }
+    //debugger;
+    // this.$set(this.obj, "c1", "2020-03-12T16:37:39.9094856Z");
+    // this.$set(
+    //   this.obj,
+    //   "c2",
+    //   "Sint laborum quisquam dolorem ipsum architecto voluptate consequatur tempora praesentium. Nemo aliquam amet aut aliquid perspiciatis adipisci excepturi. Officia ea voluptatem dolore suscipit ipsa itaque. Quaerat nostrum ut qui dignissimos nesciunt quasi laudantium dicta. Ut nihil doloribus illum rem quas sed."
+    // );
+    // this.$set(this.obj, "c3", 30453626);
+    // this.$set(this.obj, "c4", false);
+    // this.$set(this.obj, "c5", 5.55);
   },
   created() {
     if (this.$gzdevmode()) {
@@ -140,6 +146,8 @@ export default {
         throw "custom-fields-control: formKey property is required and missing";
       }
     }
+    //{"c1":"2020-03-12T16:37:39.9094856Z","c2":"Sint laborum quisquam dolorem ipsum architecto voluptate consequatur tempora praesentium. Nemo aliquam amet aut aliquid perspiciatis adipisci excepturi. Officia ea voluptatem dolore suscipit ipsa itaque. Quaerat nostrum ut qui dignissimos nesciunt quasi laudantium dicta. Ut nihil doloribus illum rem quas sed.",
+    //"c3":30453626,"c4":false,"c5":0.529134196010015}
   }
 };
 </script>

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

@@ -166,7 +166,7 @@
             <gz-custom-fields
               :formKey="formCustomTemplateKey"
               v-model="obj.customFields"
-              :readonly="this.formState.readOnly"
+              :readOnly="this.formState.readOnly"
               ref="customFields"
               :error-messages="this.$gzform.serverErrors(this, 'customFields')"
               @change="onChange('customFields')"