ayanova/src/components/data-table.vue

@@ -16,6 +16,7 @@
     <v-card>
       <!-- {{ dataTablePagingOptions }}
       {{ headers }} -->
+      {{ activeFilterId }}
       <v-card-title>
         <v-select
           v-model="activeFilterId"
@@ -23,7 +24,7 @@
           item-text="name"
           item-value="id"
           :label="$ay.t('Filter')"
-          @input="savedFilterSelected"
+          @input="selectedFilterChanged"
           prepend-icon="$ayiEdit"
           @click:prepend="editFilter()"
           data-cy="selectSavedFilter"
@@ -35,7 +36,7 @@
             <v-icon data-cy="refresh">$ayiSync</v-icon>
           </v-btn>
 
-          <v-btn class="ml-12" @click="editListView">
+          <v-btn class="ml-12" @click="editColumnView">
             <v-icon data-cy="filter">$ayiColumns</v-icon>
           </v-btn>
         </div>
@@ -486,7 +487,7 @@ export default {
         }
 
         //has changed something important so refetch and put a pin in last paging settings for next time
-        this.getDataFromApi();
+        await this.getDataFromApi();
         this.lastDataTablePagingOptions = this.dataTablePagingOptions;
       },
       deep: true
@@ -533,7 +534,8 @@ export default {
       let res = await this.$refs.dataTableFilterManager.open();
       if (res && res.refresh == true) {
         //refresh the filter picklist and get data from api
-        this.getDataFromApi();
+        await fetchSavedFilterList(this);
+        await this.getDataFromApi();
       }
     },
     keyArrayFromSortByArray(sortBy) {
@@ -613,7 +615,7 @@ export default {
         this.selected.map(z => z.id)
       );
     },
-    editListView() {
+    editColumnView() {
       this.$router.push({
         name: "ay-data-list-column-view",
         params: {
@@ -632,43 +634,32 @@ export default {
       //needs to show as temp unsaved filter or overridden or something
     },
 
-    savedFilterSelected: async function() {
-      return;
-      let vm = this;
+    selectedFilterChanged: async function() {
+      // let vm = this;
 
-      //If listview had changed it can only have changed *away* from the unsaved filter item if it's present so just remove the unsaved filter item if it exists
+      // //first prevent the following changes from triggering a fetch
+      // vm.loading = true;
+      // //always go back to page one on a change of data list view
+      // vm.dataTablePagingOptions.page = 1;
 
-      //DANGER DANGER WARNING: if using lodash to remove item it might mess with vue reactivity
-      //this example does remove from the array and does update a plain mustache rendition of it on the page but doesn't update the select itself
-      //whereas using the native javascript array splice function *does* update the select because vue wraps splice and other native methods specifically
-      //so it can properly update the dom
-      // window.$gz. _.remove(vm.selectLists.savedFilters, function(n) {
-      //   return n.id == -1;
-      // });
+      // for (let i = vm.selectLists.savedFilters.length - 1; i >= 0; i--) {
+      //   if (vm.selectLists.savedFilters[i].id === -1) {
+      //     vm.selectLists.savedFilters.splice(i, 1);
+      //   }
+      // }
 
-      //first prevent the following changes from triggering a fetch
-      vm.loading = true;
-      //always go back to page one on a change of data list view
-      vm.dataTablePagingOptions.page = 1;
+      // if (vm.activeFilterId == 0) {
+      //   //default view, no saved, no cached
+      //   vm.listView = undefined;
+      //   saveFormSettings(vm);
+      // } else if (vm.activeFilterId > 0) {
+      //   await fetchListView(vm);
+      //   saveFormSettings(vm);
+      // }
 
-      for (let i = vm.selectLists.savedFilters.length - 1; i >= 0; i--) {
-        if (vm.selectLists.savedFilters[i].id === -1) {
-          vm.selectLists.savedFilters.splice(i, 1);
-        }
-      }
-
-      if (vm.activeFilterId == 0) {
-        //default view, no saved, no cached
-        vm.listView = undefined;
-        saveFormSettings(vm);
-      } else if (vm.activeFilterId > 0) {
-        await fetchListView(vm);
-        saveFormSettings(vm);
-      }
-
-      //fetch data because listview has changed
-      vm.loading = false;
-      vm.getDataFromApi();
+      // //fetch data because listview has changed
+      // vm.loading = false;
+      await this.getDataFromApi();
     },
     gridCellButtonClick(key, i, ot) {
       let typeToOpen = null;
@@ -1068,13 +1059,13 @@ async function fetchEnums(columnData) {
 //
 async function initForm(vm) {
   vm.timeZoneName = window.$gz.locale.getResolvedTimeZoneName();
-  await populateSelectionLists(vm);
-  await loadFormSettings(vm);
+  await fetchSavedFilterList(vm);
+  loadFormSettings(vm);
 }
 
 ////////////////////
 //
-async function populateSelectionLists(vm) {
+async function fetchSavedFilterList(vm) {
   //http://localhost:7575/api/v8/data-list-filter/list?ListKey=TestWidgetDataList
   let res = await window.$gz.api.get(
     "data-list-filter/list?ListKey=" + vm.dataListKey
@@ -1084,11 +1075,17 @@ async function populateSelectionLists(vm) {
     window.$gz.form.setErrorBoxErrors(vm);
   } else {
     vm.selectLists.savedFilters = res.data;
+    //confirm we still have the current active filter id (if it's not empty 0)
+    if (vm.activeFilterId != 0) {
+      if (!res.data.find(z => z.id == vm.activeFilterId)) {
+        vm.activeFilterId = 0;
+      }
+    }
     if (vm.activeFilterId == 0) {
       let dflt = res.data.find(z => z.default == true);
       if (!dflt) {
         throw new Error(
-          `data-table::populateSelectionLists - No default filter returned for listKey '${vm.dataListKey}'`
+          `data-table::fetchSavedFilterList - No default filter returned for listKey '${vm.dataListKey}'`
         );
       } else {
         vm.activeFilterId = dflt.id;