feat(data-table): create keyword filter (contain_in, `not_contain_i…

…n`) (#4765) * feat(): create data-table keyword filter (contain_in, not_contain_in) Signed-off-by: samuel.park <[email protected]> * refactor: refactor updating filter event & add refining filter for request Signed-off-by: samuel.park <[email protected]> * chore: small fix Signed-off-by: samuel.park <[email protected]> * chore: small fix Signed-off-by: samuel.park <[email protected]> --------- Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Sep 26, 2024 · 9816fde · 9816fde
1 parent 66fc530
commit 9816fde
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 18 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
@@ -3,7 +3,7 @@ import {
     computed, defineExpose, onMounted, reactive, watch,
 } from 'vue';
 
-import { isEqual } from 'lodash';
+import { isEqual, uniq } from 'lodash';
 
 import type { MenuItem } from '@cloudforet/mirinae/src/inputs/context-menu/type';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/inputs/dropdown/select-dropdown/type';
@@ -142,7 +142,7 @@ const originDataState = reactive({
         name: group.key,
         label: group.name,
     }))),
-    filter: computed(() => {
+    filter: computed<Record<string, DataTableQueryFilter>>(() => {
         const _filter = {} as Record<string, DataTableQueryFilter>;
         ((props.item.options as DataTableAddOptions).filter ?? []).forEach((filter) => {
             _filter[filter.k] = filter;
@@ -199,13 +199,17 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     const metricLabelsInfo = storeState.metrics[state.metricId ?? '']?.data?.labels_info;
     const assetGroupBy = (metricLabelsInfo ?? []).filter((label) => state.selectedGroupByItems.map((group) => group.name).includes(label.key));
     const groupBy = state.sourceType === DATA_SOURCE_DOMAIN.COST ? costGroupBy : assetGroupBy;
+    const refinedFilter = Object.values(state.filter as Record<string, DataTableQueryFilter>).filter((filter) => filter?.v?.length).map((filter) => ({
+        ...filter,
+        v: uniq(filter.v),
+    }));
 
     const updateParams: DataTableUpdateParameters = {
         data_table_id: state.dataTableId,
         options: {
             [state.sourceType]: domainOptions,
             group_by: groupBy,
-            filter: Object.values(state.filter),
+            filter: refinedFilter,
             data_name: state.dataFieldName,
             data_unit: state.dataUnit,
             additional_labels: additionalLabelsRequest,

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
@@ -5,7 +5,7 @@ import {
 } from 'vue';
 
 import {
-    cloneDeep, isEmpty, unset,
+    isEmpty, unset,
 } from 'lodash';
 
 import {
@@ -143,16 +143,13 @@ onClickOutside(containerRef, hideContextMenu);
 
 /* Event */
 const handleUpdateFilter = (filterKey: string, filter: DataTableQueryFilterForDropdown) => {
-    const selectedItemsMap = cloneDeep(state.selectedItemsMap);
-    selectedItemsMap[filterKey] = filter;
-
-    state.selectedItemsMap = selectedItemsMap;
+    state.selectedItemsMap[filterKey] = { ...filter };
 
     state.proxyFilter = {
         ...state.proxyFilter,
         [filterKey]: {
-            ...selectedItemsMap[filterKey],
-            v: selectedItemsMap[filterKey].v.map((d) => d.name),
+            ...filter,
+            v: filter.v.map((d) => d.name),
         },
     };
 };

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
@@ -4,7 +4,7 @@ import { onClickOutside } from '@vueuse/core/index';
 import { computed, reactive, ref } from 'vue';
 
 import {
-    PSelectDropdown, PContextMenu, PIconButton, PI,
+    PSelectDropdown, PContextMenu, PIconButton, PI, PTextInput,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/inputs/dropdown/select-dropdown/type';
@@ -61,7 +61,9 @@ const handleSelectOperator = (operator: MenuItem) => {
     state.proxySelectedFilter = {
         ...state.proxySelectedFilter,
         o: operator.name,
+        v: [],
     };
+    state.visibleMenu = false;
 };
 
 const handleDeleteFilter = () => {
@@ -75,6 +77,13 @@ const handleUpdateFilterDropdown = (selected: MenuItem[]) => {
     };
 };
 
+const handleUpdateKeywordSelected = (selected: MenuItem[]) => {
+    state.proxySelectedFilter = {
+        ...state.proxySelectedFilter,
+        v: selected,
+    };
+};
+
 onClickOutside(operatorButtonRef, () => {
     state.visibleMenu = false;
 });
@@ -103,7 +112,7 @@ onClickOutside(operatorButtonRef, () => {
                                     class="operator-menu"
                                     :visible.sync="state.visibleMenu"
                                     :menu="state.operatorMenu"
-                                    :selected="[{ name: props.selectedFilter?.o }]"
+                                    :selected="[{ name: state.proxySelectedFilter?.o }]"
                                     @select="handleSelectOperator"
                     />
                 </div>
@@ -114,10 +123,20 @@ onClickOutside(operatorButtonRef, () => {
                            @click="handleDeleteFilter"
             />
         </div>
-        <p-select-dropdown class="filters-dropdown"
+        <p-text-input v-if="state.proxySelectedFilter.o === DATA_TABLE_QUERY_OPERATOR.contain_in.key
+                          || state.proxySelectedFilter.o === DATA_TABLE_QUERY_OPERATOR.not_contain_in.key"
+                      :selected="state.proxySelectedFilter?.v"
+                      multi-input
+                      block
+                      appearance-type="stack"
+                      placeholder="Enter Value"
+                      @update="handleUpdateKeywordSelected"
+        />
+        <p-select-dropdown v-else
+                           class="filters-dropdown"
                            is-filterable
                            :handler="props.handler"
-                           :selected="props.selectedFilter?.v"
+                           :selected="state.proxySelectedFilter?.v"
                            :loading="props.loading"
                            multi-selectable
                            appearance-type="stack"

diff --git a/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts b/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts
@@ -39,18 +39,18 @@ export const EVAL_EXPRESSION_TYPE = {
 export const DATA_TABLE_QUERY_OPERATOR = {
     contain_in: {
         key: 'contain_in',
-        label: 'Contains',
+        label: 'contains',
     },
     not_contain_in: {
         key: 'not_contain_in',
-        label: 'Does Not Contain',
+        label: 'does not contain',
     },
     in: {
         key: 'in',
-        label: 'Equals',
+        label: 'equals',
     },
     not_in: {
         key: 'not_in',
-        label: 'Does Not Equal',
+        label: 'does not equal',
     },
 } as const;