ayanova/src/components/data-table-filter-control.vue

@@ -320,9 +320,10 @@ export default {
     isVisible: false,
     resolve: null,
     reject: null,
-    tableColumnData: {},
+    tableColumnData: {}, //from table
     fieldDefinitions: [],
     editItem: {},
+    activeFilter: null,
     selectLists: {
       dateFilterOperators: [],
       dateFilterTokens: [],
@@ -345,11 +346,21 @@ export default {
     }
   }),
   props: {
-    dataListKey: String
+    dataListKey: String,
+    activeFilterId: Number
   },
   methods: {
     saveAndExit() {
       //todo: save changes here
+      //Note: we are working with a specific filter, either the "default" filter which is the one used when no other filter is specified or a specific one
+      //So here we need to take the current filter, update it and save it
+
+      //todo: populate current filter on open of this control so we have it here to modify and it's near live
+      //    grid doesn't know about filters and has no need to, so this form just needs to know the currently active filter id
+      //take existing filter
+      //upsert conditions for this column
+      //save filter
+      //let grid do it's thing
       this.close({ refresh: true });
     },
     addFilterCondition(editItem) {
@@ -453,8 +464,10 @@ export default {
         return;
       }
     },
-    open(tableColumnData) {
+    async open(tableColumnData) {
       this.tableColumnData = tableColumnData;
+
+      await getActiveFilter(vm);
       initEditItem(this);
       this.isVisible = true;
       return new Promise((resolve, reject) => {
@@ -509,6 +522,21 @@ async function populateFieldDefinitions(vm) {
   }
 }
 
+////////////////////
+//
+async function fetchActiveFilter(vm) {
+  ///api/v8/data-list-filter/{id}
+  let res = await window.$gz.api.get(
+    `/api/v8/data-list-filter/${vm.activeFilterId}`
+  );
+  if (res.error) {
+    //throw new Error(res.error);
+    throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+  } else {
+    vm.activeFilter = res.data;
+  }
+}
+
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available

ayanova/src/components/data-table.vue

@@ -1,20 +1,24 @@
 <template>
   <div>
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-    <gz-data-table-filter :dataListKey="dataListKey" ref="dataTableFilter">
+    <gz-data-table-filter
+      :dataListKey="dataListKey"
+      :activeFilterId="filterId"
+      ref="dataTableFilter"
+    >
     </gz-data-table-filter>
     <v-card>
       <!-- {{ dataTablePagingOptions }}
       {{ headers }} -->
       <v-card-title>
         <v-select
-          v-model="listViewId"
+          v-model="filterId"
-          :items="selectLists.listViews"
+          :items="selectLists.savedFilters"
           item-text="name"
           item-value="id"
           :label="$ay.t('Filter')"
-          @input="listViewChanged"
+          @input="savedFilterSelected"
-          data-cy="selectlistview"
+          data-cy="selectSavedFilter"
         >
         </v-select>
         <v-spacer></v-spacer>
@@ -380,10 +384,10 @@ export default {
       loading: true,
       dataTablePagingOptions: {},
       lastDataTablePagingOptions: {},
-      listViewId: 0,
+      filterId: 0,
       listView: undefined,
       selectLists: {
-        listViews: []
+        savedFilters: []
       },
       headers: [],
       serverColumns: [],
@@ -610,20 +614,20 @@ export default {
         params: {
           dataListKey: this.dataListKey,
           formKey: this.formKey,
-          listViewId: this.listViewId
+          filterId: this.filterId
         }
       });
     },
     resetListView: function() {
       let vm = this;
-      vm.listViewId = 0;
+      vm.filterId = 0;
       vm.listView = undefined;
       vm.dataTablePagingOptions.page = 1;
       saveFormSettings(vm);
       //needs to show as temp unsaved filter or overridden or something
     },
 
-    listViewChanged: async function() {
+    savedFilterSelected: 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
@@ -632,7 +636,7 @@ export default {
       //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.listViews, function(n) {
+      // window.$gz. _.remove(vm.selectLists.savedFilters, function(n) {
       //   return n.id == -1;
       // });
 
@@ -641,17 +645,17 @@ export default {
       //always go back to page one on a change of data list view
       vm.dataTablePagingOptions.page = 1;
 
-      for (let i = vm.selectLists.listViews.length - 1; i >= 0; i--) {
+      for (let i = vm.selectLists.savedFilters.length - 1; i >= 0; i--) {
-        if (vm.selectLists.listViews[i].id === -1) {
+        if (vm.selectLists.savedFilters[i].id === -1) {
-          vm.selectLists.listViews.splice(i, 1);
+          vm.selectLists.savedFilters.splice(i, 1);
         }
       }
 
-      if (vm.listViewId == 0) {
+      if (vm.filterId == 0) {
         //default view, no saved, no cached
         vm.listView = undefined;
         saveFormSettings(vm);
-      } else if (vm.listViewId > 0) {
+      } else if (vm.filterId > 0) {
         await fetchListView(vm);
         saveFormSettings(vm);
       }
@@ -784,7 +788,7 @@ export default {
     vm.getDataFromApi();
   },
   beforeUpdate() {
-    if (this.clientCriteria != null && this.listViewId != 0) {
+    if (this.clientCriteria != null && this.filterId != 0) {
       this.resetListView();
     }
   }
@@ -1076,8 +1080,8 @@ async function populateSelectionLists(vm) {
     window.$gz.form.setErrorBoxErrors(vm);
     //window.$gz.errorHandler.handleFormError(res.error, vm);
   } else {
-    vm.selectLists.listViews = res.data;
+    vm.selectLists.savedFilters = res.data;
-    window.$gz.form.addNoSelectionItem(vm.selectLists.listViews);
+    window.$gz.form.addNoSelectionItem(vm.selectLists.savedFilters);
   }
 }
 
@@ -1086,15 +1090,15 @@ async function populateSelectionLists(vm) {
 // Fetch and cache list view
 //
 async function fetchListView(vm) {
-  if (!vm.listViewId) {
+  if (!vm.filterId) {
     return;
   }
-  let res = await window.$gz.api.get("data-list-view/" + vm.listViewId);
+  let res = await window.$gz.api.get("data-list-view/" + vm.filterId);
   if (res.error) {
     if (res.error.code && res.error.code == "2010") {
       //list not found, probably deleted by another user
       //or on another browser and this one still had it as the last used list view
-      vm.listViewId = 0; //indicate no list view
+      vm.filterId = 0; //indicate no list view
       return;
     } else {
       vm.formState.serverError = res.error;
@@ -1112,18 +1116,18 @@ function saveFormSettings(vm) {
   let unsavedlv = vm.listView;
   let cachedlv = vm.listView;
 
-  if (vm.listViewId == 0) {
+  if (vm.filterId == 0) {
     //we aren't using any listview
     unsavedlv = undefined;
     cachedlv = undefined;
   }
 
-  if (vm.listViewId == -1) {
+  if (vm.filterId == -1) {
     //we have an unsaved one in use so there is no need for a cached one
     cachedlv = undefined;
   }
 
-  if (vm.listViewId > 0) {
+  if (vm.filterId > 0) {
     //we are using a saved lv so save cached one and clear anything in unsaved one
     unsavedlv = undefined;
   }
@@ -1132,7 +1136,7 @@ function saveFormSettings(vm) {
     temp: { page: vm.dataTablePagingOptions.page, cachedListView: cachedlv },
     saved: {
       itemsPerPage: vm.dataTablePagingOptions.itemsPerPage,
-      dataTable: { listViewId: vm.listViewId, unsavedListView: unsavedlv }
+      dataTable: { filterId: vm.filterId, unsavedListView: unsavedlv }
     }
   });
 }
@@ -1147,29 +1151,29 @@ function loadFormSettings(vm) {
     if (formSettings.saved.itemsPerPage) {
       vm.dataTablePagingOptions.itemsPerPage = formSettings.saved.itemsPerPage;
     }
-    if (formSettings.saved.dataTable.listViewId != null) {
+    if (formSettings.saved.dataTable.filterId != null) {
-      vm.listViewId = formSettings.saved.dataTable.listViewId;
+      vm.filterId = formSettings.saved.dataTable.filterId;
     }
-    if (vm.listViewId == 0) {
+    if (vm.filterId == 0) {
       //default view, not unsaved and not saved
       vm.listView = undefined;
     }
-    if (vm.listViewId == -1) {
+    if (vm.filterId == -1) {
       //-1 is code for unsaved list view
       //check if there is a local copy of a listview vm was edited but not saved
       if (formSettings.saved.dataTable.unsavedListView != null) {
         //add UNSAVED FILTER if -1
 
-        vm.selectLists.listViews.unshift({
+        vm.selectLists.savedFilters.unshift({
           name: vm.$ay.t("FilterUnsaved"),
           id: -1
         });
 
         vm.listView = formSettings.saved.dataTable.unsavedListView;
       } else {
-        //listviewid is for unsaved but we have no unsaved so fix that up
+        //filterId is for unsaved but we have no unsaved so fix that up
         vm.listView = undefined;
-        vm.listViewId = 0;
+        vm.filterId = 0;
       }
     }
   }
@@ -1181,13 +1185,13 @@ function loadFormSettings(vm) {
   }
 
   //check for cached local copy of saved list view in use
-  if (vm.listViewId > 0) {
+  if (vm.filterId > 0) {
     //0=no list view, -1=unsaved list view so any number greater than zero means there sb a cached local copy of a saved list view
     if (formSettings.temp && formSettings.temp.cachedListView != null) {
       vm.listView = formSettings.temp.cachedListView;
     } else {
       //fetch it and cache it
-      return fetchListView(vm, vm.listViewId);
+      return fetchListView(vm, vm.filterId);
     }
   }
 }