ayanova/src/api/form-custom-template.js

@@ -1,4 +1,4 @@
-/*e slint-disable */
+/*Xeslint-disable */
 
 ///Add data key names which make the custom fields control work more easily
 ///Since the names can be inferred from the data that comes from the server it saves bandwidth to do it here at the client

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

@@ -12,7 +12,6 @@
       </span>
     </div>
     <hr /> -->
-
     <div>
       <v-row align-center justify-left row wrap>
         <!-- Here is what a template object looks like 
@@ -138,7 +137,7 @@
 </template>
 <script>
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/*  xeslint-disable    */
+/*  XXXeslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /**
  * v-if="item.hide == false"
@@ -211,7 +210,7 @@ export default {
       if (!this.value) {
         return null;
       }
-      //debugger;
+
       //get the data out of the JSON string value
       var cData = JSON.parse(this.value);
 

ayanova/src/views/customize.vue

@@ -1,23 +1,178 @@
 <template>
-  <h1>CUSTOMIZE: {{ formCustomTemplateKey }}</h1>
+  <v-container>
+    <v-row v-if="this.formState.ready">
+      <v-col>
+        <v-form ref="form">
+          <v-row>
+            <v-col cols="12" mt-1 mb-2>
+              <v-alert
+                ref="errorbox"
+                v-show="formState.errorBoxMessage"
+                color="error"
+                icon="fa-exclamation-circle "
+                :value="true"
+                transition="scale-transition"
+                class="multi-line"
+                outlined
+                >{{ formState.errorBoxMessage }}</v-alert
+              >
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
-
 <script>
-/*  xeslint-disable */
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+const FORM_KEY = "customize";
+const API_BASE_URL = "FormCustom/";
 export default {
   data() {
     return {
-      formCustomTemplateKey: this.$route.params.formCustomTemplateKey
+      formCustomTemplateKey: this.$route.params.formCustomTemplateKey,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
     };
   },
+  //WATCHERS
+  watch: {
+    formState: {
+      handler: function(val) {
+        //,oldval is available here too if necessary
+        if (this.formState.loading) {
+          return;
+        }
+
+        //enable / disable save button
+        var canSave = val.dirty && val.valid && !val.readOnly;
+        if (canSave) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        //enable / disable duplicate button
+        var canDuplicate = !val.dirty && val.valid && !val.readOnly;
+        if (canDuplicate) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+        }
+      },
+      deep: true
+    }
+  },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    },
+    canDuplicate: function() {
+      return this.formState.valid && !this.formState.dirty;
+    }
+  },
+  created() {
+    // Fetch as needed
+
+    this.getDataFromApi();
+  },
   beforeRouteEnter(to, from, next) {
     var ltKeysRequired = [
-      "ObjectCustomFieldCustomGrid",
-      "ObjectCustomFieldFieldName",
-      "ObjectCustomFieldFieldType",
-      "ObjectCustomFieldVisible"
+      "FormFieldEntryRequired",
+      "FormFieldVisible",
+      "FormfieldDataType",
+      "FormFieldDataTypesCurrency",
+      "FormFieldDataTypesDateOnly",
+      "FormFieldDataTypesDateTime",
+      "FormFieldDataTypesNumber",
+      "FormFieldDataTypesText",
+      "FormFieldDataTypesTimeOnly",
+      "FormFieldDataTypesTrueFalse"
     ];
-    /*
+
+    window.$gz.locale.fetch(ltKeysRequired).then(next());
+  },
+  components: {},
+  methods: {
+    lt: function(ltkey) {
+      return window.$gz.locale.get(ltkey);
+    },
+    getDataFromApi() {
+      this.formState.loading = true;
+      if (!formCustomTemplateKey) {
+        throw FORM_KEY + "::getDataFromApi -> Missing recordID!";
+      }
+      //http://localhost:7575/api/v8/FormCustom/AvailableFields/widget
+      var url = FORM_BASE_URL + "AvailableFields/" + formCustomTemplateKey;
+      var vm = this;
+      window.$gz.form.deleteAllErrorBoxErrors(this);
+
+      window.$gz.api
+        .get(url)
+        .then(res => {
+          if (res.error != undefined) {
+            //Not found?
+            if (res.error.code == "2010") {
+              //notify not found error then navigate backwards
+              window.$gz.dialog
+                .displayLTErrorMessage("ErrorAPI2010")
+                .then(() => {
+                  // navigate backwards
+                  vm.$router.go(-1);
+                });
+            }
+            vm.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(vm);
+          } else {
+            vm.obj = res.data;
+            //Update the form status
+            window.$gz.form.setFormState({
+              vm: vm,
+              dirty: false,
+              valid: true,
+              loading: false,
+              readOnly: res.readOnly ? true : false
+            });
+            //modify the menu as necessary
+            generateMenu(vm, res.readOnly);
+          }
+        })
+        .catch(function handleGetDataFromAPIError(error) {
+          //Update the form status
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+          window.$gz.errorHandler.handleFormError(error, vm);
+        });
+    }
+  },
+  beforeCreate() {
+    window.$gz.eventBus.$emit("menu-change", {
+      isMain: true,
+      icon: "sliders-h",
+      title: window.$gz.locale.get("Customize")
+    });
+  }
+};
+/*
+    OLD (not used, drop)
 "ObjectCustomFieldCustomGrid": "Custom Fields",
   "ObjectCustomFieldDisplayName": "Display as",
   "ObjectCustomFieldFieldName": "Field Name",
@@ -25,6 +180,7 @@ export default {
   "ObjectCustomFieldObjectName": "Object name",
   "ObjectCustomFieldVisible": "Visible",
 
+CURRENT (used)
     "FormFieldDataTypesCurrency": "Money",
   "FormFieldDataTypesDateOnly": "Date",
   "FormFieldDataTypesDateTime": "Date & Time",
@@ -33,7 +189,7 @@ export default {
   "FormFieldDataTypesTimeOnly": "Time",
   "FormFieldDataTypesTrueFalse": "True/False",
 
-  NEW
+  NEW (used)
   "FormFieldEntryRequired" = "Required"
   "FormFieldVisible" = "Visible" (copy from ObjectCustomFieldVisible)
   "FormfieldDataType" = "Data type" (copy from ObjectCustomFieldDataType)
@@ -48,18 +204,54 @@ LTDisplay [FieldKey] , Visible, Required, DataType (if custom)
 (Some items will have their visible or required read only because they are stock and can't be changed see FormAvailableFields.cs in server)
 (A required field by default can't be hidden, setting to required automatically toggles hidden=false here but reverse doesn't do the opposite)
 
-  
+  TODO:
+  Fetch - form field custom data
+  Possibly turn it into a easily iterated collection in the Data key
+  Iterate and display in series of boxes (small factor UI)
+  OnSave sends to server and roundtrips back to refresh local cached copy
+
+
+
+<template>
+  <div v-if="this.$store.state.formCustomTemplate[formCustomTemplateKey]">
+    <span class="v-label v-label--active theme--light">
+      {{ lt("ObjectCustomFieldCustomGrid") }}
+    </span>
+    <!-- <div>
+      <h5>FORMKEY: {{ formKey }}</h5>
+      <h5>TEMPLATE: {{ this.$store.state.formCustomTemplate[formKey] }}</h5>
+      <h5>CUSTOM FIELD DATA:</h5>
+      <span class="caption">
+        {{ value }}
+      </span>
+    </div>
+    <hr /> -->
+
+    <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[
+            formCustomTemplateKey
+          ]"
+        >
+          <v-col :key="item.fld" cols="12" sm="6" lg="4" xl="3" px-2>
+            <div>
+              {{ item }}
+            </div>
+          </v-col>
+        </template>
+      </v-row>
+    </div>
+  </div>
+</template>
 
 */
-    window.$gz.locale.fetch(ltKeysRequired).then(next());
-  },
-  components: {},
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "sliders-h",
-      title: window.$gz.locale.get("Customize")
-    });
-  }
-};
 </script>

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

@@ -236,7 +236,7 @@
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 //Illegal1 = O0
 const FORM_KEY = "inventory-widget-edit";
-const FORM_BASE_URL = "Widget/";
+const API_BASE_URL = "Widget/";
 const FORM_CUSTOM_TEMPLATE_KEY = "widget";
 
 export default {
@@ -445,7 +445,7 @@ export default {
       if (!recordId) {
         throw FORM_KEY + "::getDataFromApi -> Missing recordID!";
       }
-      var url = FORM_BASE_URL + recordId;
+      var url = API_BASE_URL + recordId;
       var vm = this;
       window.$gz.form.deleteAllErrorBoxErrors(this);
 
@@ -492,7 +492,7 @@ export default {
       if (this.canSave) {
         this.formState.loading = true;
         var vm = this;
-        var url = FORM_BASE_URL + this.$route.params.id;
+        var url = API_BASE_URL + this.$route.params.id;
 
         //clear any errors vm might be around from previous submit
         window.$gz.form.deleteAllErrorBoxErrors(this);
@@ -547,7 +547,7 @@ export default {
             // navigate backwards
             vm.$router.go(-1);
           } else {
-            var url = FORM_BASE_URL + vm.$route.params.id;
+            var url = API_BASE_URL + vm.$route.params.id;
 
             window.$gz.form.deleteAllErrorBoxErrors(vm);
             window.$gz.api
@@ -580,7 +580,7 @@ export default {
       if (this.canDuplicate && this.$route.params.id != 0) {
         this.formState.loading = true;
         var vm = this;
-        var url = FORM_BASE_URL + "duplicate/" + this.$route.params.id;
+        var url = API_BASE_URL + "duplicate/" + this.$route.params.id;
 
         //clear any errors vm might be around from previous submit
         window.$gz.form.deleteAllErrorBoxErrors(this);