[Core] [Metadata] Add filter component data postback

core/datacap-web/src/model/TableFilter.ts

@@ -10,6 +10,7 @@ export class TableFilter
   original?: Map<string, string>;
   preview?: boolean;
   value?: string;
+  filter: Filter;
 }
 
 export enum SqlType
@@ -36,3 +37,9 @@ export class ColumnFilter
   operations: Array<string>;
   value: any
 }
+
+export class Filter
+{
+  condition: string;
+  filters: Array<ColumnFilter>;
+}

core/datacap-web/src/views/admin/source/components/TableColumnFilter.vue

@@ -30,51 +30,50 @@
                    :style="{margin: '0'}">
             {{ $t('source.manager.filter') }}
           </Divider>
-          <template v-for="(item, index) in formState.filters">
-            <FormItem :key="index"
-                      :style="{marginBottom: '0px'}">
-              <Row>
-                <Col span="6"
-                     offset="1">
-                  <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.operation"
-                          size="small">
-                    <Option v-for="operation in item.operations"
-                            :label="operation"
-                            :key="operation"
-                            :value="operation">
-                    </Option>
-                  </Select>
-                </Col>
-                <Col span="6"
-                     offset="1">
-                  <Input v-model="item.filter"
-                         size="small">
-                  </Input>
-                </Col>
-                <Col span="1"
-                     offset="1">
-                  <Button size="small"
-                          type="error"
-                          shape="circle"
-                          icon="md-remove"
-                          @click="handlerRemoveFilter(index)">
-                  </Button>
-                </Col>
-              </Row>
-            </FormItem>
-          </template>
+          <FormItem v-for="(item, index) in formState.filters"
+                    :key="index"
+                    :style="{marginBottom: '0px'}">
+            <Row>
+              <Col span="6"
+                   offset="1">
+                <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.operation"
+                        size="small">
+                  <Option v-for="operation in item.operations"
+                          :label="operation"
+                          :key="operation"
+                          :value="operation">
+                  </Option>
+                </Select>
+              </Col>
+              <Col span="6"
+                   offset="1">
+                <Input v-model="item.value"
+                       size="small">
+                </Input>
+              </Col>
+              <Col span="1"
+                   offset="1">
+                <Button size="small"
+                        type="error"
+                        shape="circle"
+                        icon="md-remove"
+                        @click="handlerRemoveFilter(index)">
+                </Button>
+              </Col>
+            </Row>
+          </FormItem>
           <FormItem :style="{marginBottom: '0px'}">
             <Row>
               <Col span="6"
@@ -95,6 +94,10 @@
                 @click="handlerCancel">
           {{ $t('common.cancel') }}
         </Button>
+        <Button type="primary"
+                @click="handlerApplyFilter">
+          {{ $t('common.apply') }}
+        </Button>
       </template>
     </Modal>
   </div>
@@ -103,6 +106,7 @@
 import {defineComponent, watch} from "vue";
 import CircularLoading from "@/components/loading/CircularLoading.vue";
 import {ColumnFilter} from "@/model/TableFilter";
+import {cloneDeep} from "lodash";
 
 export default defineComponent({
   name: "TableFilter",
@@ -116,10 +120,16 @@ export default defineComponent({
     },
     types: {
       type: Array
+    },
+    configure: {
+      type: Object
     }
   },
   created()
   {
+    if (this.configure) {
+      this.formState = cloneDeep(this.configure);
+    }
     this.watchId();
   },
   data()
@@ -142,7 +152,7 @@ export default defineComponent({
     {
       this.formState.filters.splice(index, 1);
     },
-    handlerFetchOperations(value, filter: ColumnFilter)
+    handlerFetchOperations(value: number, filter: ColumnFilter)
     {
       const type = this.types[value];
       filter.column = this.columns[value];
@@ -153,6 +163,11 @@ export default defineComponent({
         filter.operations = ['=', '!=', 'LIKE', 'NOT LIKE', 'IS NULL', 'IS NOT NULL'];
       }
     },
+    handlerApplyFilter()
+    {
+      this.$emit('apply', this.formState);
+      this.handlerCancel();
+    },
     handlerCancel()
     {
       this.visible = false;

core/datacap-web/src/views/admin/source/components/TableData.vue

@@ -172,6 +172,8 @@
                          :isVisible="filterConfigure.show"
                          :columns="filterConfigure.columns"
                          :types="filterConfigure.types"
+                         :configure="filterConfigure.configure"
+                         @apply="handlerApplyFilter"
                          @close="handlerFilterConfigure(false)">
       </TableColumnFilter>
     </div>
@@ -251,7 +253,11 @@ export default defineComponent({
       filterConfigure: {
         show: false,
         columns: [],
-        types: []
+        types: [],
+        configure: {
+          condition: 'AND',
+          filters: []
+        }
       }
     }
   },
@@ -314,9 +320,7 @@ export default defineComponent({
     },
     handlerSortChanged()
     {
-      const configure: TableFilter = new TableFilter();
-      this.getSortConfigure(configure)
-      this.handlerRefererData(configure)
+      this.handlerRefererData(this.getConfigure());
     },
     handlerCellValueChanged(event: { data: any; colDef: { field: string; }; oldValue: any; newValue: any; })
     {
@@ -387,9 +391,7 @@ export default defineComponent({
     {
       this.visibleColumn.show = show;
       if (event) {
-        const configure: TableFilter = new TableFilter()
-        this.getSortConfigure(configure)
-        this.getVisibleColumn(configure)
+        const configure: TableFilter = this.getConfigure();
         const columns = event.map((item: string) => ({column: item}))
         configure.columns = columns
         // Remove the reduced column is not selected
@@ -409,15 +411,19 @@ export default defineComponent({
     handlerColumnMoved(event: { finished: any; })
     {
       if (event.finished) {
-        const configure: TableFilter = new TableFilter()
-        this.getSortConfigure(configure)
-        this.getVisibleColumn(configure)
-        this.handlerRefererData(configure)
+        this.handlerRefererData(this.getConfigure());
       }
     },
     handlerFilterConfigure(show: boolean)
     {
       this.filterConfigure.show = show;
+      if (!show) {
+        this.handlerRefererData(this.getConfigure());
+      }
+    },
+    handlerApplyFilter(value: any)
+    {
+      this.filterConfigure.configure = value;
     },
     getSortConfigure(configure: TableFilter)
     {
@@ -436,6 +442,14 @@ export default defineComponent({
         .map((item: { colId: any; }) => ({column: item.colId}))
       configure.columns = columns
     },
+    getConfigure(): TableFilter
+    {
+      const configure: TableFilter = new TableFilter();
+      configure.filter = this.filterConfigure.configure;
+      this.getSortConfigure(configure);
+      this.getVisibleColumn(configure);
+      return configure;
+    },
     watchId()
     {
       watch(