ayanova/src/views/customize.vue

@@ -1,5 +1,18 @@
 <template>
   <v-container>
+    <div>
+      READY: {{ formState.ready }}
+      <br />
+      LOADING: {{ formState.loading }}
+      <br />
+      DIRTY: {{ formState.dirty }}
+      <br />
+      VALID: {{ formState.valid }}
+      <br />
+      READONLY: {{ formState.readOnly }}
+      <br />
+    </div>
+
     <v-row v-if="this.formState.ready">
       <v-col>
         <v-form ref="form">
@@ -17,6 +30,7 @@
                 >{{ formState.errorBoxMessage }}</v-alert
               >
             </v-col>
+
             <template
               v-for="item in this.$store.state.formCustomTemplate[
                 formCustomTemplateKey
@@ -41,6 +55,42 @@
 const FORM_KEY = "customize";
 const API_BASE_URL = "FormCustom/";
 export default {
+  beforeRouteEnter(to, from, next) {
+    debugger;
+    var ltKeysRequired = [
+      "FormFieldEntryRequired",
+      "FormFieldVisible",
+      "FormfieldDataType",
+      "FormFieldDataTypesCurrency",
+      "FormFieldDataTypesDateOnly",
+      "FormFieldDataTypesDateTime",
+      "FormFieldDataTypesNumber",
+      "FormFieldDataTypesText",
+      "FormFieldDataTypesTimeOnly",
+      "FormFieldDataTypesTrueFalse"
+    ];
+
+    window.$gz.locale.fetch(ltKeysRequired).then(next());
+  },
+  beforeCreate() {
+    debugger;
+    var vm = this;
+    initForm(this)
+      .then(() => {
+        debugger;
+        vm.formState.ready = true;
+      })
+      .catch(err => {
+        debugger;
+        vm.formState.ready = true;
+        window.$gz.errorHandler.handleFormError(err);
+      });
+  },
+  created() {
+    // Fetch as needed
+    debugger;
+    this.getDataFromApi();
+  },
   data() {
     return {
       formCustomTemplateKey: this.$route.params.formCustomTemplateKey,
@@ -99,27 +149,6 @@ export default {
       return this.formState.valid && !this.formState.dirty;
     }
   },
-  created() {
-    // Fetch as needed
-
-    this.getDataFromApi();
-  },
-  beforeRouteEnter(to, from, next) {
-    var ltKeysRequired = [
-      "FormFieldEntryRequired",
-      "FormFieldVisible",
-      "FormfieldDataType",
-      "FormFieldDataTypesCurrency",
-      "FormFieldDataTypesDateOnly",
-      "FormFieldDataTypesDateTime",
-      "FormFieldDataTypesNumber",
-      "FormFieldDataTypesText",
-      "FormFieldDataTypesTimeOnly",
-      "FormFieldDataTypesTrueFalse"
-    ];
-
-    window.$gz.locale.fetch(ltKeysRequired).then(next());
-  },
   components: {},
   methods: {
     lt: function(ltkey) {
@@ -214,6 +243,48 @@ function generateMenu(vm) {
   window.$gz.eventBus.$emit("menu-change", menuOptions);
 }
 
+//////////////////////
+//
+//
+// function initForm(vm) {
+//   return fetchLocaleText(vm).then(
+//     populatePickLists(vm).then(
+//       window.$gz.formcustomtemplate.get(FORM_CUSTOM_TEMPLATE_KEY)
+//     )
+//   );
+// }
+
+function initForm(vm) {
+  //for now just stub this out, may need to hit another route or something in init later so keep for now
+  debugger;
+  return new Promise((resolve, reject) => {
+    debugger;
+    resolve(null);
+    // const xhr = new XMLHttpRequest();
+    // xhr.open("GET", url);
+    // xhr.onload = () => resolve(xhr.responseText);
+    // xhr.onerror = () => reject(xhr.statusText);
+    // xhr.send();
+  });
+
+  //return Promise.resolve(null);
+  // return populatePickLists(vm);
+}
+
+//////////////////////
+//
+//
+// function populatePickLists(vm) {
+//   return window.$gz.api
+//     .get("AyaEnumPickList/list/authorizationroles")
+//     .then(res => {
+//       if (res.error) {
+//         throw res.error;
+//       }
+//       vm.pickLists.roles = res.data;
+//     });
+// }
+
 /*
     OLD (not used, drop)
 "ObjectCustomFieldCustomGrid": "Custom Fields",
@@ -272,14 +343,7 @@ LTDisplay [FieldKey] , Visible, Required, DataType (if custom)
 
     <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
@@ -296,5 +360,14 @@ LTDisplay [FieldKey] , Visible, Required, DataType (if custom)
   </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>