ayanova/devdocs/todo.txt

@@ -11,11 +11,31 @@ LISTVIEW REPLACE CURRENT <----HERE not THERE ---v
 (below this is all past for reference)
 	FILTER
 		Very similar to columnview in that it's saved at the server then triggers a refresh and server handles from local copy
-		Client needs to send current local time and date to server with list request so it can apply relative date filters
-		Server accepts request clientnow,listview,filterid and applies any relative filter calcs in sqlWhere generator at server
+		 /*
+           OLD EXAMPLE: 
+           {"offset":0,"limit":10,"dataListKey":"CustomerDataList",
+           "listView":"[
+           {\"fld\":\"customername\",\"sort\":\"+\",\"filter\":{\"items\":[{\"op\":\"=\",\"value\":\"dfdfdf\"},{\"op\":\"=\",\"value\":\"3333\"}],\"any\":true}},
+           {\"fld\":\"customerphone1\",\"filter\":{\"items\":[{\"op\":\">\",\"value\":\"44444\"},
+           {\"op\":\"<\",\"value\":\"7777\"}]}},
+           {\"fld\":\"customeremail\"}
+           {\"fld\":\"customerheadoffice\"},
+           {\"fld\":\"customertags\",\"sort\":\"+\"}]"}
+
+           NEW:
+           columns:["PartInventoryTransactionEntryDate","PartPartNumber","PartWarehouseName","PartInventoryTransactionQuantity","PartInventoryTransactionDescription","PartInventoryTransactionSource","PartInventoryBalance"]
+           sortBy:[{"PartInventoryTransactionEntryDate":"-"}],//All sorted columns here as keyvalue pairs value is a string of "+" for ascending "-" for descending and are IN ORDER of how to be sorted
+           filter:[{column:"PartPartNumber",any:true/false,items:[{op: "=",value: "400735"}]}],
+           clientCriteria:"2" //could be anything here that makes sense to the list, in this case an example customer id for customernotedatalist
+
+           columns are represented in a higher level object DataListTableOptions 
+           sort and filter are in here
+
+           columns and sort are a singleton per datalistkey,userid persisted automatically (no alternative "views" just one of these).  User can set them or reset them to default.
+           filter is different: user can persist a filter by name for future selection, sharing with others (public). The default filter is no filter.
+           */
 	TODO (round 1):		
-		SERVER 
-			DataListSqlFilterCriteriaBuilder - modify to handle date tokens using client timestamp (old filter code already put back in comment form)
+	
 		CLIENT			
 			Implement filter UI to construct local filter object that is temporary and stored in session state
 				doesn't have to do anything specific yet, just handles the filtering into an object for the next stage			
@@ -25,6 +45,9 @@ LISTVIEW REPLACE CURRENT <----HERE not THERE ---v
 				Need filter drop down to select which columns to filter which triggers opening regular filter items
 				Needs also to show a filter beside "headings" which are filtered so it's known 
 				Or maybe if it's not too ugly filter on each one, nahh theres no room I think
+
+		SERVER 
+			DataListSqlFilterCriteriaBuilder - modify to handle date tokens using client timestamp (old filter code already put back in comment form)
 			
 	TODO (round 2):
 		Send to server (as unsaved filter, not dealing with saving just yet) with datalist request and get back filtered data

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

@@ -0,0 +1,52 @@
+<template>
+  <v-dialog
+    v-model="isVisible"
+    @keydown.esc="close()"
+    data-cy="dataTableFilterControl"
+  >
+    {{ headerItem }}
+  </v-dialog>
+</template>
+<script>
+export default {
+  components: {},
+  async created() {
+    await initForm(this);
+  },
+  data: () => ({
+    isVisible: false,
+    resolve: null,
+    reject: null,
+    headerItem: {}
+  }),
+  methods: {
+    open(headerItem) {
+      this.headerItem = headerItem;
+      this.isVisible = true;
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+    },
+    close(ret) {
+      this.isVisible = false;
+
+      this.resolve(ret);
+    }
+  }
+};
+/////////////////////////////////
+//
+//
+async function initForm(vm) {
+  //await fetchTranslatedText(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText(vm) {
+  await window.$gz.translation.cacheTranslations(["TimeStamp", "ID", "Status"]);
+}
+</script>

ayanova/src/components/data-table.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
+    <gz-data-table-filter :dataListKey="dataListKey" ref="dataTableFilter">
+    </gz-data-table-filter>
     <v-card>
       <!-- {{ dataTablePagingOptions }}
       {{ headers }} -->
@@ -511,8 +513,12 @@ export default {
       }
       return "";
     },
-    filter(item) {
-      console.log("filter:", item);
+    async filter(item) {
+      // console.log("filter:", item);
+      let res = await this.$refs.dataTableFilter.open(item);
+      if (res && res.refresh == true) {
+        this.getDataFromApi();
+      }
     },
     filterColor(item) {
       let clr = "disabled";

ayanova/src/main.js

@@ -39,6 +39,7 @@ import timeControl from "./components/time-control.vue";
 import tagPicker from "./components/tag-picker.vue";
 import pickList from "./components/pick-list.vue";
 import dataTable from "./components/data-table.vue";
+import dataTableFilterControl from "./components/data-table-filter-control.vue";
 import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
@@ -186,6 +187,7 @@ Vue.component("gz-time-picker", timeControl);
 Vue.component("gz-tag-picker", tagPicker);
 Vue.component("gz-pick-list", pickList);
 Vue.component("gz-data-table", dataTable);
+Vue.component("gz-data-table-filter", dataTableFilterControl);
 Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
 Vue.component("gz-decimal", decimalControl);