From 849e0d981d22f3926f38be91595c2d43204044e0 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Tue, 18 Feb 2020 00:42:23 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                 |   4 +-
 ayanova/src/components/gz-data-table.vue | 156 ++++++++++++++++-------
 2 files changed, 112 insertions(+), 48 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index b4bb359a..3cb3cb9d 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -81,8 +81,8 @@ DataTable form ListView picker
 		- Tells gz-data-table control it should update itself
 
 GZFORM FORMSETTINGS RELATED TO DATALISTVIEW
-	- formSettings.saved.dataTable.{ListViewId:[0 if none or else the last saved view id selected], EditedListViewJson:[edited but unsaved listview json, only if listviewId=0]}
-	- formSettings.temp.dataTable.CachedListViewJson - temporary cached version of listview that was saved at server but only if saved listviewId is non-zero
+	- formSettings.saved.dataTable.{listViewId:[0 if none or else the last saved view id selected], unsavedListView:[edited but unsaved listview json, only if listviewId=0]}
+	- formSettings.temp.dataTable.cachedListView - temporary cached version of listview that was saved at server but only if saved listviewId is non-zero
 
 
 
diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index ce766386..b7fc09c8 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -71,9 +71,12 @@
                     <!-- TEXT (also maybe openable)-->
                     <template v-if="c.i">
                       <!-- openable object with an ID -->
-                      <v-btn depressed small @click="gridCellButtonClick(c.key, c.i)">{{
-                        c.v
-                      }}</v-btn>
+                      <v-btn
+                        depressed
+                        small
+                        @click="gridCellButtonClick(c.key, c.i)"
+                        >{{ c.v }}</v-btn
+                      >
                     </template>
                     <template v-else>
                       {{ c.v }}
@@ -295,6 +298,7 @@ export default {
       loading: true,
       dataTablePagingOptions: {},
       listViewId: 0,
+      listView: {},
       pickLists: {
         listViews: []
       },
@@ -314,8 +318,6 @@ export default {
     },
     formKey: String,
     dataListKey: String,
-    dataListSort: String,
-    dataListFilter: String,
     showSelect: {
       type: Boolean,
       default: false
@@ -359,7 +361,7 @@ export default {
       }
       //emit event to parent form of selected rows
       //this.$emit("update:selected", this.selected);
-      //Note that this bubbles up all the columns of all the selected rows
+      //Note vm this bubbles up all the columns of all the selected rows
 
       //so, to be more efficient for now will just send the ID's until I see a need for other shit
       this.$emit("update:selected", window.$gz._.map(this.selected, "id"));
@@ -384,7 +386,7 @@ export default {
       //get the datatype of the column which matches the server columns array index
       var typeToOpen = this.serverColumns[key.split("-")[1]].ay;
 
-      //i is the actual AyaNova index of that record so we have all we need to open that object
+      //i is the actual AyaNova index of vm record so we have all we need to open vm object
       window.$gz.eventBus.$emit("openobject", { type: typeToOpen, id: i });
     },
     lt(ltKey) {
@@ -392,27 +394,27 @@ export default {
     },
 
     getDataFromApi() {
-      var that = this;
+      var vm = this;
 
       //start with defaults
       var listOptions = {
-        DataListKey: that.dataListKey,
+        DataListKey: vm.dataListKey,
         Limit: 5,
         Offset: 0
       };
       //calculate paging based on settings
-      const { page, itemsPerPage } = that.dataTablePagingOptions;
+      const { page, itemsPerPage } = vm.dataTablePagingOptions;
       if (itemsPerPage && itemsPerPage > 0) {
         listOptions.Offset = (page - 1) * itemsPerPage;
         listOptions.Limit = itemsPerPage;
       }
 
       //is there a filter?
-      if (that.dataFilterId != 0) {
-        listOptions["DataFilterID"] = that.dataFilterId;
+      if (vm.dataFilterId != 0) {
+        listOptions["DataFilterID"] = vm.dataFilterId;
       }
 
-      that.loading = true;
+      vm.loading = true;
 
       // {
       //   "offset": 0,
@@ -424,35 +426,29 @@ export default {
       // }
 
       window.$gz.api
-        .upsert(that.apiBaseUrl, {
+        .upsert(vm.apiBaseUrl, {
           offset: listOptions.Offset,
           limit: listOptions.Limit,
-          dataListKey: that.dataListKey,
+          dataListKey: vm.dataListKey,
           listView: ""
         })
         .then(res => {
           //NOTE: This is how to call an async function and await it from sync code
           (async function() {
             //Save a copy of the server columns data for handling button clicks etc later
-            that.serverColumns = res.columns;
+            vm.serverColumns = res.columns;
             //Make sure the locale keys are fetched
             await fetchLocalizedHeaderNames(res.columns); //Note can use await here because it's wrapped inside an async function call, it will wait then resume next stuff below
             await fetchEnums(res.columns);
-            //build that.headers here
-            that.headers = buildHeaders(res.columns);
-            //Post process data here and then set that.records
-            that.records = buildRecords(res.data, res.columns);
-            that.loading = false;
-            that.totalRecords = res.totalRecordCount;
+            //build vm.headers here
+            vm.headers = buildHeaders(res.columns);
+            //Post process data here and then set vm.records
+            vm.records = buildRecords(res.data, res.columns);
+            vm.loading = false;
+            vm.totalRecords = res.totalRecordCount;
 
-            //persist the paging options so user sees same page and list on refresh or leave and return scenario
-
-            window.$gz.form.setFormSettings(that.formKey, {
-              temp: { page: that.dataTablePagingOptions.page },
-              saved: {
-                itemsPerPage: that.dataTablePagingOptions.itemsPerPage
-              }
-            });
+            //persist the paging options and listview stuff so user sees same page and list on refresh or leave and return scenario
+            saveFormSettings(vm);
             //////////
           })();
         });
@@ -465,19 +461,11 @@ export default {
     initForm(vm).then(() => {
       //  path: "/ay-data-list-view/:listViewId/:dataListKey",
 
-      //rehydrate last form settings
-      var formSettings = window.$gz.form.getFormSettings(this.formKey);
-      if (formSettings.saved && formSettings.saved.itemsPerPage) {
-        this.dataTablePagingOptions.itemsPerPage =
-          formSettings.saved.itemsPerPage;
-      }
-      if (formSettings.temp && formSettings.temp.page) {
-        this.dataTablePagingOptions.page = formSettings.temp.page;
-      }
+      // - formSettings.saved.dataTable.{listViewId:[0 if none or else the last saved view id selected], unsavedListView:[edited but unsaved listview json, only if listviewId=0]}
+      // - formSettings.temp.dataTable.cachedListView - temporary cached version of listview vm was saved at server but only if saved listviewId is non-zero
 
-      // vm.formState.ready = true;
-      // vm.dataListKey = this.$route.params.dataListKey;
-      // vm.listViewId = this.$route.params.listViewId;
+      //rehydrate last form settings
+      loadFormSettings(vm);
     });
   }
 };
@@ -570,14 +558,14 @@ function buildRecords(listData, columndefinitions) {
         default:
         //do nothing, allow it to stay as is (checkbox, plain text etc)
       }
-      //build the row column object that will be used by the datatable
+      //build the row column object vm will be used by the datatable
       var columnObject = {
         v: display,
         t: dataType,
         key: iRow + "-" + iColumn
       };
       //is the source dtalist field openable?  If so it will have an i property set for it's ID and we already know the types to open from the column headers data
-      //so between the two we can make a clickable button in the grid that triggers a function with the column index and the id and that in turn will bubble up the event to open that
+      //so between the two we can make a clickable button in the grid vm triggers a function with the column index and the id and vm in turn will bubble up the event to open vm
       //object
       if (column.i) {
         columnObject["i"] = column.i;
@@ -589,7 +577,7 @@ function buildRecords(listData, columndefinitions) {
       //CHANGE TO:
       //Headers: [ { "text": "Name", "value": "c1.v" }, { "text": "Serial #", "value": "c2" },
       //Records: [ { "id": 1,columns: {"c1": {v:"Incredible Metal Fish 76",t:THETYPE,key:ROWID-COLUMNID e.g. 1-1,1-2,2-1 etc}, "c2": 1, "c3": "$877.8", "c4": "AuthorizationRoles.65536", "c5": "2020-01-30 01:53:57 AM", "c6": "Yup", "c7": "Virgil Strosin 74" }, { "id": 2, "c1": "Practical Plastic Bike 77", "c2": 2, "
-      //THis way can have v-if for each column that changes based on type and then has it's shit figured out
+      //THis way can have v-if for each column vm changes based on type and then has it's shit figured out
     }
     ret.push(o);
   }
@@ -616,7 +604,7 @@ async function fetchLocalizedHeaderNames(columnData) {
       return;
     })
     .catch(err => {
-      that.formState.ready = true; //show the form anyway so we know what's what
+      vm.formState.ready = true; //show the form anyway so we know what's what
       window.$gz.errorHandler.handleFormError(err);
     });
 }
@@ -666,4 +654,80 @@ function populatePickLists(vm) {
       }
     });
 }
+
+//////////////////////////////////////////////////////////
+//
+// Fetch and cache list view
+//
+async function fetchListView(vm, listViewId) {
+  if (!listViewId) {
+    return;
+  }
+  await window.$gz.api.get("DataListView/" + listViewId).then(res => {
+    if (res.error != undefined) {
+      window.$gz.errorHandler.handleFormError(res.error, vm);
+    } else {
+      vm.listView = res.data.listView;
+    }
+  });
+}
+
+////////////////////
+//
+function saveFormSettings(vm) {
+  //do we need to persist this listview (only if it's an unsaved one)
+  var unsavedlv = vm.listView;
+  var cachedlv = vm.listView;
+  if (vm.listViewId != 0) {
+    //we have a saved one in use so there is no unsaved lv to save
+    unsavedlv = undefined;
+  } else {
+    //we have an unsaved on in use so there is no need for a cached one
+    cachedlv = undefined;
+  }
+  window.$gz.form.setFormSettings(vm.formKey, {
+    temp: { page: vm.dataTablePagingOptions.page, cachedListView: cachedlv },
+    saved: {
+      itemsPerPage: vm.dataTablePagingOptions.itemsPerPage,
+      dataTable: { listViewId: vm.listViewId, unsavedListView: unsavedlv }
+    }
+  });
+}
+
+////////////////////
+//
+function loadFormSettings(vm) {
+  var formSettings = window.$gz.form.getFormSettings(this.formKey);
+  if (formSettings.saved) {
+    if (formSettings.saved.itemsPerPage) {
+      this.dataTablePagingOptions.itemsPerPage =
+        formSettings.saved.itemsPerPage;
+    }
+    if (formSettings.saved.dataTable.listViewId != undefined) {
+      vm.listViewId = formSettings.saved.dataTable.listViewId;
+    }
+    if (vm.listViewId == 0) {
+      //check if there is a local copy of a listview vm was edited but not saved
+      if (formSettings.saved.dataTable.editedListView != undefined) {
+        vm.listView = formSettings.saved.dataTable.editedListView;
+      }
+    }
+  }
+
+  if (formSettings.temp) {
+    if (formSettings.temp.page) {
+      this.dataTablePagingOptions.page = formSettings.temp.page;
+    }
+
+    //check for cached local copy of saved list view in use
+    if (vm.listViewId != 0) {
+      if (formSettings.temp.dataTable.cachedListView != undefined) {
+        vm.listView = formSettings.temp.dataTable.cachedListView;
+      } else {
+        //fetch it and cache it
+        (async function() {})();
+      }
+    }
+  }
+}
 </script>