ayanova/devdocs/todo.txt

@@ -47,6 +47,8 @@ CURRENT TODOs
 todo: widget edit form, is it using all the latest thinking on Created, beforeCreate, initform calls to async functions etc?
 	- compare and contrast with DataListview editor form which is fully up to date.  
 
+todo: widget edit, NEW button?  (v7 has a new button for every type of record?? Save and new??)
+
 todo: apparently I can change the buttons to display the text not uppercase with class="text-none" or something, should I go back to buttons? (kinda looked cooler, but...)
 	- https://github.com/vuetifyjs/vuetify/issues/3948
 

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

@@ -94,19 +94,6 @@
                 :error-messages="form().serverErrors(this, 'dollarAmount')"
                 @input="onChange('dollarAmount')"
               ></gz-currency>
-
-              <!-- <gz-decimal
-                v-model="obj.dollarAmount"
-                :readonly="this.formState.readOnly"
-                :label="lt('WidgetDollarAmount')"
-                ref="dollarAmount"
-                :rules="[
-                  form().decimalValid(this, 'dollarAmount'),
-                  form().required(this, 'dollarAmount')
-                ]"
-                :error-messages="form().serverErrors(this, 'dollarAmount')"
-                @input="onChange('dollarAmount')"
-              ></gz-decimal> -->
             </v-col>
 
             <v-col cols="12" sm="6" lg="4" xl="3">
@@ -201,26 +188,8 @@
                 :error-messages="form().serverErrors(this, 'customFields')"
                 @change="onChange('customFields')"
               ></gz-custom-fields>
-              <!-- v-model="obj.customFields" -->
             </v-col>
           </v-row>
-          <!-- <v-layout align-left justify-center row wrap mt-12>
-          <v-col xs6 sm4> FORMtags: {{ obj.tags }} </v-col>
-        </v-row> -->
-          <!-- <v-layout align-left justify-center row wrap mt-12>
-          <v-col xs6 sm4>
-            READY: {{ formState.ready }}
-            <br />
-            LOADING: {{ formState.loading }}
-            <br />
-            DIRTY: {{ formState.dirty }}
-            <br />
-            VALID: {{ formState.valid }}
-            <br />
-            READONLY: {{ formState.readOnly }}
-            <br />
-          </v-col>
-        </v-row>-->
         </v-form>
       </v-col>
     </v-row>
@@ -237,80 +206,39 @@ const API_BASE_URL = "Widget/";
 const FORM_CUSTOM_TEMPLATE_KEY = "Widget";
 
 export default {
-  beforeRouteEnter(to, from, next) {
+  created() {
-    var ltKeysRequired = [
-      "Widget",
-      "WidgetName",
-      "WidgetSerial",
-      "WidgetDollarAmount",
-      "WidgetCount",
-      "WidgetUserType",
-      "WidgetStartDate",
-      "WidgetEndDate",
-      "WidgetNotes",
-      "WidgetCustom1",
-      "WidgetCustom2",
-      "WidgetCustom3",
-      "WidgetCustom4",
-      "WidgetCustom5",
-      "WidgetCustom6",
-      "WidgetCustom7",
-      "WidgetCustom8",
-      "WidgetCustom9",
-      "WidgetCustom10",
-      "WidgetCustom11",
-      "WidgetCustom12",
-      "WidgetCustom13",
-      "WidgetCustom14",
-      "WidgetCustom15",
-      "WidgetCustom16"
-    ];
-
-    window.$gz.locale.fetch(ltKeysRequired).then(
-      //ensure cached any form customizations for this particular form
-      window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY).then(next)
-    );
-  },
-  beforeCreate() {
     var vm = this;
-    initForm(this)
+    initForm(vm)
       .then(() => {
-        vm.pickLists.usertypes = window.$gz.enums.getPickList("usertype");
+        vm.rights = window.$gz.role.getRights(window.$gz.type.Widget);
         vm.formState.ready = true;
+        window.$gz.eventBus.$on("menu-click", clickHandler);
+        //id 0 means create a new record don't load one
+        if (vm.$route.params.recordid != 0) {
+          vm.getDataFromApi(vm.$route.params.recordid);
+        } else {
+          //setup for new record
+          var readOnly = !vm.rights.change;
+          //Update the form status
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true,
+            loading: false,
+            readOnly: readOnly
+          });
+
+          //bugbug WTF?  This doesn't make sense, if it's an attempt to hide delete button then that's wrong
+          //it's a new record so it can't be deleted so...
+          vm.rights.delete = false;
+          generateMenu(vm);
+        }
       })
       .catch(err => {
         vm.formState.ready = true;
         window.$gz.errorHandler.handleFormError(err);
       });
   },
-  created() {
-    this.rights = window.$gz.role.getRights(window.$gz.type.Widget);
-
-    window.$gz.eventBus.$on("menu-click", clickHandler);
-    //id 0 means create a new record don't load one
-    if (this.$route.params.recordid != 0) {
-      this.getDataFromApi(this.$route.params.recordid);
-    } else {
-      //setup for new record
-      var readOnly = !this.rights.change;
-      //Update the form status
-      window.$gz.form.setFormState({
-        vm: this,
-        dirty: false,
-        valid: true,
-        loading: false,
-        readOnly: readOnly
-      });
-
-      //it's a new record so it can't be deleted so...
-      this.rights.delete = false;
-
-      //NOTE: If this object requires defaults from the server for a new object then here is where it woudld fetch them
-
-      //modify the menu as necessary
-      generateMenu(this);
-    }
-  },
   beforeRouteUpdate(to, from, next) {
     //This triggers a fetch of the data when the ID value changes on the route
     //which happens on duplicate, submit new record and change of active record id (backward nav/forward nav etc)
@@ -434,13 +362,14 @@ export default {
       }
     },
     getDataFromApi(recordId) {
-      this.formState.loading = true;
+      var vm = this;
+      vm.formState.loading = true;
       if (!recordId) {
         throw FORM_KEY + "::getDataFromApi -> Missing recordID!";
       }
       var url = API_BASE_URL + recordId;
-      var vm = this;
+
-      window.$gz.form.deleteAllErrorBoxErrors(this);
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
 
       window.$gz.api
         .get(url)
@@ -483,15 +412,16 @@ export default {
         });
     },
     submit() {
-      if (this.canSave) {
+      var vm = this;
-        this.formState.loading = true;
+      if (vm.canSave) {
-        var vm = this;
+        vm.formState.loading = true;
-        var url = API_BASE_URL + this.$route.params.recordid;
+
+        var url = API_BASE_URL + vm.$route.params.recordid;
 
         //clear any errors vm might be around from previous submit
-        window.$gz.form.deleteAllErrorBoxErrors(this);
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
         window.$gz.api
-          .upsert(url, this.obj)
+          .upsert(url, vm.obj)
           .then(res => {
             vm.formState.loading = false;
             if (res.error != undefined) {
@@ -503,10 +433,8 @@ export default {
                 //Handle "post" of new record (CREATE)
 
                 //change url to new record in history
-                //NOTE: will not cause a new navigate, almost nothing does unless forced with a KEY property or using router.GO()
+                //NOTE: will not cause a page re-render, almost nothing does unless forced with a KEY property or using router.GO()
-                //but will trigger navigation guard beforeRouteUpdate which we use here in this form
+                //but will trigger navigation guard beforeRouteUpdate which we use here in this form to fetch data freshly
-
-                //NOTE: THIS IS THE ONLY PLACE ON THIS FORM THAT WILL TRIGGER BEFOREROUTEUPDATE
                 vm.$router.replace(
                   vm.$route.fullPath.slice(0, -1) + res.data.id
                 );
@@ -533,7 +461,7 @@ export default {
           //do the delete
           vm.formState.loading = true;
           //No need to delete a new record, just abandon it...
-          if (this.$route.params.recordid == 0) {
+          if (vm.$route.params.recordid == 0) {
             //this should not get offered for delete but to be safe and clear just in case:
             JUST_DELETED = true;
             // navigate backwards
@@ -569,13 +497,14 @@ export default {
       });
     },
     duplicate() {
-      if (this.canDuplicate && this.$route.params.recordid != 0) {
+      var vm = this;
-        this.formState.loading = true;
+      if (vm.canDuplicate && vm.$route.params.recordid != 0) {
-        var vm = this;
+        vm.formState.loading = true;
-        var url = API_BASE_URL + "duplicate/" + this.$route.params.recordid;
+
+        var url = API_BASE_URL + "duplicate/" + vm.$route.params.recordid;
 
         //clear any errors vm might be around from previous submit
-        window.$gz.form.deleteAllErrorBoxErrors(this);
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
         window.$gz.api
           .duplicate(url)
           .then(res => {
@@ -717,12 +646,56 @@ function generateMenu(vm) {
 
 var JUST_DELETED = false;
 
-//////////////////////
+/////////////////////////////////
-//
 //
 //
 function initForm(vm) {
-  return populatePickLists(vm);
+  return new Promise(function(resolve, reject) {
+    (async function() {
+      try {
+        await fetchUILocalizedText(vm);
+        await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY);
+        await populatePickLists(vm);
+      } catch (err) {
+        reject(err);
+      }
+      resolve();
+    })();
+  });
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI localized text is available
+//
+function fetchUILocalizedText(vm) {
+  return window.$gz.locale.fetch([
+    "Widget",
+    "WidgetName",
+    "WidgetSerial",
+    "WidgetDollarAmount",
+    "WidgetCount",
+    "WidgetUserType",
+    "WidgetStartDate",
+    "WidgetEndDate",
+    "WidgetNotes",
+    "WidgetCustom1",
+    "WidgetCustom2",
+    "WidgetCustom3",
+    "WidgetCustom4",
+    "WidgetCustom5",
+    "WidgetCustom6",
+    "WidgetCustom7",
+    "WidgetCustom8",
+    "WidgetCustom9",
+    "WidgetCustom10",
+    "WidgetCustom11",
+    "WidgetCustom12",
+    "WidgetCustom13",
+    "WidgetCustom14",
+    "WidgetCustom15",
+    "WidgetCustom16"
+  ]);
 }
 
 //////////////////////
@@ -730,51 +703,10 @@ function initForm(vm) {
 //
 function populatePickLists(vm) {
   //ensure the pick lists required are pre-fetched
-  //this is called before form is fully opened
+  return window.$gz.enums.fetchEnumList("usertype").then(() => {
-  return window.$gz.enums.fetchEnumList("usertype");
+    vm.pickLists.usertypes = window.$gz.enums.getPickList("usertype");
-  // return window.$gz.api.get("EnumPickList/list/usertype").then(res => {
+  });
-  //   if (res.error) {
-  //     throw res.error;
-  //   }
-  //   vm.pickLists.usertypes = res.data;
-  // });
 }
-
-//////////////////////
-//
-//
-// function fetchLocaleText(vm) {
-//   //Cache all required lt keys
-//   var ltKeysRequired = [
-//     "Widget",
-//     "WidgetName",
-//     "WidgetSerial",
-//     "WidgetDollarAmount",
-//     "WidgetCount",
-//     "WidgetUserType",
-//     "WidgetStartDate",
-//     "WidgetEndDate",
-//     "WidgetNotes",
-//     "WidgetCustom1",
-//     "WidgetCustom2",
-//     "WidgetCustom3",
-//     "WidgetCustom4",
-//     "WidgetCustom5",
-//     "WidgetCustom6",
-//     "WidgetCustom7",
-//     "WidgetCustom8",
-//     "WidgetCustom9",
-//     "WidgetCustom10",
-//     "WidgetCustom11",
-//     "WidgetCustom12",
-//     "WidgetCustom13",
-//     "WidgetCustom14",
-//     "WidgetCustom15",
-//     "WidgetCustom16"
-//   ];
-
-//   return window.$gz.locale.fetch(ltKeysRequired);
-// }
 </script>
 
 <style></style>