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

@@ -40,5 +40,25 @@ export default {
         resolve();
       }
     });
+  },
+  getFieldTemplateValue(formKey, fieldKey) {
+    if (fieldKey === undefined) {
+      throw "ERROR form-custom-template::getFieldTemplateValue -> fieldKey not specified for template for form [" +
+        formKey +
+        "]";
+    }
+
+    var template = window.$gz.store.state.formCustomTemplate[formKey];
+    if (template === undefined) {
+      throw "ERROR form-custom-template::getFieldTemplateValue -> Store is missing form template for [" +
+        formKey +
+        "]";
+    }
+
+    //_https://lodash.com/docs#find
+    //Note that not every field being requested will exist so it's valid to return undefined
+    var templateItem = window.$gz._.find(template, ["fld", fieldKey]);
+
+    return templateItem;
   }
 };

ayanova/src/views/customize.vue

@@ -12,7 +12,9 @@
       READONLY: {{ formState.readOnly }}
       <br />
     </div> -->
-
+    <div>
+      {{ this.$store.state.formCustomTemplate[formCustomTemplateKey] }}
+    </div>
     <v-row v-if="this.formState.ready">
       <v-col>
         <v-form ref="form">
@@ -31,15 +33,22 @@
               >
             </v-col>
 
-            <template
+            <template v-for="item in formAvailableFields">
-              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>
+                <v-card>
-                  {{ item }}
+                  <v-card-title>
-                </div>
+                    {{ lt(item.key) }}
+                  </v-card-title>
+                  <v-card-subtitle>
+                    {{ item.key }}
+                  </v-card-subtitle>
+                  <v-checkbox
+                    v-model="item.hideable"
+                    :label="lt('FormFieldVisible')"
+                    :ref="item.key"
+                    :disabled="!canHide(item)"
+                  ></v-checkbox>
+                </v-card>
               </v-col>
             </template>
           </v-row>
@@ -49,6 +58,7 @@
   </v-container>
 </template>
 <script>
+//LTDisplay [FieldKey] , Visible, Required, DataType (if custom)
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /*  Xeslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -86,6 +96,10 @@ export default {
   created() {
     // Fetch as needed
     // this.getDataFromApi();
+
+    //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
+    //modify the menu as necessary
+    generateMenu(this, false); //default is never read only and passing in this vm
   },
   data() {
     return {
@@ -151,54 +165,34 @@ export default {
     lt: function(ltkey) {
       return window.$gz.locale.get(ltkey);
     },
-    getDataFromApi() {
+    canHide: function(availableFieldItem) {
-      this.formState.loading = true;
+      //Two things can prevent allowing hide, if the template says it's required and / or if the aviailable fields record
-      if (!this.formCustomTemplateKey) {
+      //hideable value is false
-        throw FORM_KEY + "::getDataFromApi -> Missing recordID!";
+      var templateSaysRequired = false;
-      }
+      var availableFieldsSayHideable = true;
-      //http://localhost:7575/api/v8/FormCustom/AvailableFields/widget
-      var url = API_BASE_URL + "AvailableFields/" + this.formCustomTemplateKey;
-      var vm = this;
-      window.$gz.form.deleteAllErrorBoxErrors(this);
 
-      window.$gz.api
+      //first check template
-        .get(url)
+      var templateItem = window.$gz.formCustomTemplate.getFieldTemplateValue(
-        .then(res => {
+        this.formCustomTemplateKey,
-          if (res.error != undefined) {
+        availableFieldItem.key
-            //Not found?
+      );
-            if (res.error.code == "2010") {
+
-              //notify not found error then navigate backwards
+      if (
-              window.$gz.dialog
+        templateItem &&
-                .displayLTErrorMessage("ErrorAPI2010")
+        templateItem.required !== undefined &&
-                .then(() => {
+        templateItem.required === "true" //it's text
-                  // navigate backwards
+      ) {
-                  vm.$router.go(-1);
+        templateSaysRequired = true;
-                });
+      }
-            }
+
-            vm.formState.serverError = res.error;
+      //Now check availableFields collection
-            window.$gz.form.setErrorBoxErrors(vm);
+      if (availableFieldItem.hideable != true) {
-          } else {
+        availableFieldsSayHideable = false;
-            vm.obj = res.data;
+      }
-            //Update the form status
+
-            window.$gz.form.setFormState({
+      return (
-              vm: vm,
+        templateSaysRequired === false && availableFieldsSayHideable === true
-              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);
-        });
     }
   }
 };
@@ -245,20 +239,12 @@ function generateMenu(vm) {
 // }
 
 function initForm(vm) {
-  //for now just stub this out, may need to hit another route or something in init later so keep for now
+  return ensureTemplateIsInStore(vm).then(getAvailableFields(vm));
-
+  //return getAvailableFields(vm).then(ensureTemplateIsInStore(vm));
-  //this is a ten second delay return just to confirm it's really acting like it should
-  // return new Promise(function(resolve) {
-  //   setTimeout(resolve, 10000);
-  // });
-
-  //for now just return the resolved promise
-  // return Promise.resolve(null);
-  return getAvailableFields(vm);
 }
 
 ////////////////////
-
+//
 function getAvailableFields(vm) {
   //http://localhost:7575/api/v8/FormCustom/AvailableFields/widget
 
@@ -272,6 +258,14 @@ function getAvailableFields(vm) {
   });
 }
 
+////////////////////
+//
+function ensureTemplateIsInStore(vm) {
+  return window.$gz.formCustomTemplate.get(
+    vm.$route.params.formCustomTemplateKey
+  );
+}
+
 /*
     OLD (not used, drop)
 "ObjectCustomFieldCustomGrid": "Custom Fields",
@@ -311,50 +305,42 @@ LTDisplay [FieldKey] , Visible, Required, DataType (if custom)
   Iterate and display in series of boxes (small factor UI)
   OnSave sends to server and roundtrips back to refresh local cached copy
 
+Example form available fields
+{"data":[
+{"key":"WidgetName","propertyName":"Name","hideable":false,"sharedLTKey":false,"custom":false},
+{"key":"WidgetSerial","propertyName":"Serial","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"WidgetDollarAmount","propertyName":"DollarAmount","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"WidgetCount","propertyName":"Count","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"WidgetRoles","propertyName":"Roles","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"WidgetStartDate","propertyName":"StartDate","hideable":false,"sharedLTKey":false,"custom":false},
+{"key":"WidgetEndDate","propertyName":"EndDate","hideable":false,"sharedLTKey":false,"custom":false},
+{"key":"WidgetNotes","propertyName":"Notes","hideable":true,"sharedLTKey":false,"custom":false},
+{"key":"Active","propertyName":"Active","hideable":true,"sharedLTKey":true,"custom":false},
+{"key":"Tags","propertyName":"Tags","hideable":true,"sharedLTKey":true,"custom":false},
+{"key":"WidgetCustom1","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom2","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom3","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom4","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom5","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom6","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom7","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom8","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom9","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom10","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom11","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom12","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom13","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom14","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom15","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true},
+{"key":"WidgetCustom16","propertyName":null,"hideable":true,"sharedLTKey":false,"custom":true}],"readOnly":true}
 
-
+Example form custom template
-<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>
-   
-        <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>
-
-
-     <!-- 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
-       -->
+   
 */
 </script>