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";