fix(data-table-filter): apply keyword-filter disabled (#4770)

Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Sep 26, 2024 · 04f3c3b · 04f3c3b
1 parent b0ef2e4
commit 04f3c3b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
@@ -37,7 +37,11 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardFiltersItem
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue';
-import { DATA_SOURCE_DOMAIN, DATA_TABLE_QUERY_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
+import {
+    DATA_SOURCE_DOMAIN,
+    DATA_TABLE_QUERY_OPERATOR,
+    KEYWORD_FILTER_DISABLED_KEYS,
+} from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DataTableSourceType, DataTableQueryFilter } from '@/common/modules/widgets/types/widget-model';
@@ -165,14 +169,17 @@ const handleAddFilter = () => {
 
 const handleSelectAddFilterMenuItem = (item: MenuItem, _: any, isSelected: boolean) => {
     if (isSelected) {
+        const defaultOperator = KEYWORD_FILTER_DISABLED_KEYS.includes(item.name)
+            ? DATA_TABLE_QUERY_OPERATOR.in.key
+            : DATA_TABLE_QUERY_OPERATOR.contain_in.key;
         state.selectedItems = [
             ...state.selectedItems,
             item,
         ];
         state.selectedItemsMap[item.name] = {
             k: item.name,
             v: [],
-            o: DATA_TABLE_QUERY_OPERATOR.contain_in.key,
+            o: defaultOperator,
         };
     } else {
         state.selectedItems = state.selectedItems.filter((d) => d !== item.name);

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
@@ -10,11 +10,15 @@ import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/typ
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/inputs/dropdown/select-dropdown/type';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
-import { DATA_TABLE_QUERY_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
+import {
+    DATA_TABLE_QUERY_OPERATOR,
+    KEYWORD_FILTER_DISABLED_KEYS,
+} from '@/common/modules/widgets/_constants/data-table-constant';
 import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/types/widget-data-table-type';
 
 import { blue, gray } from '@/styles/colors';
 
+
 interface Props {
     filterItem: MenuItem;
     handler: AutocompleteHandler;
@@ -32,24 +36,38 @@ const operatorButtonRef = ref<HTMLElement | null>(null);
 
 const state = reactive({
     visibleMenu: false,
-    operatorMenu: computed<MenuItem[]>(() => [
-        {
-            name: DATA_TABLE_QUERY_OPERATOR.contain_in.key,
-            label: DATA_TABLE_QUERY_OPERATOR.contain_in.label,
-        },
-        {
-            name: DATA_TABLE_QUERY_OPERATOR.not_contain_in.key,
-            label: DATA_TABLE_QUERY_OPERATOR.not_contain_in.label,
-        },
-        {
-            name: DATA_TABLE_QUERY_OPERATOR.in.key,
-            label: DATA_TABLE_QUERY_OPERATOR.in.label,
-        },
-        {
-            name: DATA_TABLE_QUERY_OPERATOR.not_in.key,
-            label: DATA_TABLE_QUERY_OPERATOR.not_in.label,
-        },
-    ]),
+    operatorMenu: computed<MenuItem[]>(() => {
+        if (KEYWORD_FILTER_DISABLED_KEYS.includes(props.filterItem?.name)) {
+            return [
+                {
+                    name: DATA_TABLE_QUERY_OPERATOR.in.key,
+                    label: DATA_TABLE_QUERY_OPERATOR.in.label,
+                },
+                {
+                    name: DATA_TABLE_QUERY_OPERATOR.not_in.key,
+                    label: DATA_TABLE_QUERY_OPERATOR.not_in.label,
+                },
+            ];
+        }
+        return [
+            {
+                name: DATA_TABLE_QUERY_OPERATOR.contain_in.key,
+                label: DATA_TABLE_QUERY_OPERATOR.contain_in.label,
+            },
+            {
+                name: DATA_TABLE_QUERY_OPERATOR.not_contain_in.key,
+                label: DATA_TABLE_QUERY_OPERATOR.not_contain_in.label,
+            },
+            {
+                name: DATA_TABLE_QUERY_OPERATOR.in.key,
+                label: DATA_TABLE_QUERY_OPERATOR.in.label,
+            },
+            {
+                name: DATA_TABLE_QUERY_OPERATOR.not_in.key,
+                label: DATA_TABLE_QUERY_OPERATOR.not_in.label,
+            },
+        ];
+    }),
     proxySelectedFilter: useProxyValue<DataTableQueryFilterForDropdown>('selectedFilter', props, emit),
 });
 

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
@@ -54,3 +54,5 @@ export const DATA_TABLE_QUERY_OPERATOR = {
         label: 'does not equal',
     },
 } as const;
+
+export const KEYWORD_FILTER_DISABLED_KEYS = [GROUP_BY.PROJECT, GROUP_BY.WORKSPACE, GROUP_BY.SERVICE_ACCOUNT];