From e50ad204bac01252b35019977cd614c6294f1786 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Wed, 15 Nov 2023 01:02:30 +0800
Subject: [PATCH] [Core] [Metadata] Add filter column operation

---
 core/datacap-web/src/model/TableFilter.ts     |  9 ++++
 .../source/components/TableColumnFilter.vue   | 47 ++++++++++++++-----
 .../admin/source/components/TableData.vue     | 10 +++-
 3 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/core/datacap-web/src/model/TableFilter.ts b/core/datacap-web/src/model/TableFilter.ts
index ba1d18c0..a773cf7e 100644
--- a/core/datacap-web/src/model/TableFilter.ts
+++ b/core/datacap-web/src/model/TableFilter.ts
@@ -27,3 +27,12 @@ export class SqlColumn
   value?: string;
   original?: Map<string, object>;
 }
+
+export class ColumnFilter
+{
+  index: number;
+  column: string;
+  operation: string;
+  operations: Array<string>;
+  value: any
+}
diff --git a/core/datacap-web/src/views/admin/source/components/TableColumnFilter.vue b/core/datacap-web/src/views/admin/source/components/TableColumnFilter.vue
index 1210619e..6adcac9c 100644
--- a/core/datacap-web/src/views/admin/source/components/TableColumnFilter.vue
+++ b/core/datacap-web/src/views/admin/source/components/TableColumnFilter.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <Modal v-model="visible"
+           width="40%"
            :title="$t('source.manager.filter')"
            :closable="false"
            :mask-closable="false"
@@ -35,14 +36,25 @@
               <Row>
                 <Col span="6"
                      offset="1">
-                  <Select v-model="item.column"
-                          size="small">
+                  <Select v-model="item.index"
+                          size="small"
+                          @on-change="handlerFetchOperations($event, item)">
+                    <Option v-for="(column, index) in columns"
+                            :label="column"
+                            :key="index"
+                            :value="index">
+                    </Option>
                   </Select>
                 </Col>
                 <Col span="6"
                      offset="1">
-                  <Select v-model="item.filter"
+                  <Select v-model="item.operation"
                           size="small">
+                    <Option v-for="operation in item.operations"
+                            :label="operation"
+                            :key="operation"
+                            :value="operation">
+                    </Option>
                   </Select>
                 </Col>
                 <Col span="6"
@@ -90,6 +102,7 @@
 <script lang="ts">
 import {defineComponent, watch} from "vue";
 import CircularLoading from "@/components/loading/CircularLoading.vue";
+import {ColumnFilter} from "@/model/TableFilter";
 
 export default defineComponent({
   name: "TableFilter",
@@ -97,11 +110,16 @@ export default defineComponent({
   props: {
     isVisible: {
       type: Boolean
+    },
+    columns: {
+      type: Array
+    },
+    types: {
+      type: Array
     }
   },
   created()
   {
-    this.handlerInitialize();
     this.watchId();
   },
   data()
@@ -115,23 +133,26 @@ export default defineComponent({
     }
   },
   methods: {
-    handlerInitialize()
-    {
-      console.log(1)
-    },
     handlerAddFilter()
     {
-      const filter = {
-        column: null,
-        filter: null,
-        value: null
-      }
+      const filter: ColumnFilter = new ColumnFilter();
       this.formState.filters.push(filter);
     },
     handlerRemoveFilter(index: number)
     {
       this.formState.filters.splice(index, 1);
     },
+    handlerFetchOperations(value, filter: ColumnFilter)
+    {
+      const type = this.types[value];
+      filter.column = this.columns[value];
+      if (type === 'Long' || type === 'Double' || type === 'Integer') {
+        filter.operations = ['=', '!=', '>', '<', '>=', '<='];
+      }
+      else {
+        filter.operations = ['=', '!=', 'LIKE', 'NOT LIKE', 'IS NULL', 'IS NOT NULL'];
+      }
+    },
     handlerCancel()
     {
       this.visible = false;
diff --git a/core/datacap-web/src/views/admin/source/components/TableData.vue b/core/datacap-web/src/views/admin/source/components/TableData.vue
index 9699aadf..a59e0b30 100644
--- a/core/datacap-web/src/views/admin/source/components/TableData.vue
+++ b/core/datacap-web/src/views/admin/source/components/TableData.vue
@@ -170,6 +170,8 @@
       </TableColumn>
       <TableColumnFilter v-if="filterConfigure.show"
                          :isVisible="filterConfigure.show"
+                         :columns="filterConfigure.columns"
+                         :types="filterConfigure.types"
                          @close="handlerFilterConfigure(false)">
       </TableColumnFilter>
     </div>
@@ -247,7 +249,9 @@ export default defineComponent({
         columns: []
       },
       filterConfigure: {
-        show: false
+        show: false,
+        columns: [],
+        types: []
       }
     }
   },
@@ -270,6 +274,8 @@ export default defineComponent({
             this.configure.datasets = response.data.columns;
             this.configure.pagination = response.data.pagination;
             this.visibleContent.content = '```sql\n' + response.data.content + '\n```';
+            this.filterConfigure.columns = cloneDeep(response.data.headers)
+            this.filterConfigure.types = cloneDeep(response.data.types)
           }
           else {
             this.$Message.error(response.message);
@@ -297,6 +303,8 @@ export default defineComponent({
             }
             this.configure.pagination = response.data.pagination;
             this.visibleContent.content = '```sql\n' + response.data.content + '\n```';
+            this.filterConfigure.columns = cloneDeep(response.data.headers)
+            this.filterConfigure.types = cloneDeep(response.data.types)
           }
           else {
             this.$Message.error(response.message);