From c582ea14c89363efbadb3f2123d6263e5d255afa Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Wed, 3 Feb 2021 14:59:41 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                      | 31 +++++++++--
 .../components/data-table-filter-control.vue  | 52 +++++++++++++++++++
 ayanova/src/components/data-table.vue         | 10 +++-
 ayanova/src/main.js                           |  2 +
 4 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 ayanova/src/components/data-table-filter-control.vue

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index c4d95d4c..fc1a08f5 100644
--- a/ayanova/devdocs/todo.txt
+++ b/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
diff --git a/ayanova/src/components/data-table-filter-control.vue b/ayanova/src/components/data-table-filter-control.vue
new file mode 100644
index 00000000..a14d45bf
--- /dev/null
+++ b/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>
diff --git a/ayanova/src/components/data-table.vue b/ayanova/src/components/data-table.vue
index 57e4a4a9..ae5cd1fb 100644
--- a/ayanova/src/components/data-table.vue
+++ b/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";
diff --git a/ayanova/src/main.js b/ayanova/src/main.js
index a58cd004..2e778722 100644
--- a/ayanova/src/main.js
+++ b/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);