From 297a970178c14a7d6b0c7fcff284617bbb5e9349 Mon Sep 17 00:00:00 2001 From: sulmo Date: Thu, 14 Nov 2024 19:32:39 +0900 Subject: [PATCH] fix: fix filter reset bug Signed-off-by: sulmo --- .../components/CostAnalysisFiltersPopper.vue | 21 ++++++++++--------- .../components/CostAnalysisQuerySection.vue | 6 +++--- .../stores/cost-analysis-page-store.ts | 12 ++++++++++- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue index a33d868722..4e73ea356b 100644 --- a/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue +++ b/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue @@ -16,6 +16,7 @@ import type { WorkspaceModel } from '@/schema/identity/workspace/model'; import { useAppContextStore } from '@/store/app-context/app-context-store'; import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store'; +import getRandomId from '@/lib/random-id-generator'; import { VariableModelFactory } from '@/lib/variable-models'; import type { ManagedVariableModelKey, @@ -73,8 +74,7 @@ const GROUP_BY_TO_VAR_MODELS_FOR_UNIFIED_COST: Record = [GROUP_BY.USAGE_TYPE]: { key: MANAGED_VARIABLE_MODEL_KEY_MAP.unified_cost, dataKey: 'usage_type' }, }; -const getInitialSelectedItemsMap = (): Record => ({ -}); +const getInitialSelectedItemsMap = (): Record => ({}); const props = defineProps<{ visible: boolean; @@ -85,6 +85,7 @@ const storeState = reactive({ isAdminMode: computed(() => appContextStore.getters.isAdminMode), }); const state = reactive({ + randomId: '', loading: true, enabledFilters: computed(() => { if (!costAnalysisPageState.enabledFiltersProperties) return []; @@ -154,8 +155,8 @@ const getMenuHandler = (groupBy: string, modelOptions: Record, prim return async () => ({ results: [] }); } }; -const initSelectedFilters = () => { - const _filters = costAnalysisPageState.filters; +const initSelectedFilters = (isReset = false) => { + const _filters = isReset ? costAnalysisPageGetters.convertedOriginFilter : costAnalysisPageState.filters; const _selectedItemsMap = {}; Object.keys(_filters ?? {}).forEach((groupBy) => { if (storeState.isAdminMode && !costAnalysisPageState.isAllWorkspaceSelected && groupBy === GROUP_BY.WORKSPACE) { @@ -163,7 +164,8 @@ const initSelectedFilters = () => { return; } _selectedItemsMap[groupBy] = _filters?.[groupBy].map((d) => ({ name: d, label: d })) ?? []; - if (costAnalysisPageState.enabledFiltersProperties?.indexOf(groupBy) === -1) { + const isGroupByExist = costAnalysisPageState.enabledFiltersProperties?.indexOf(groupBy) === -1; + if (isGroupByExist) { costAnalysisPageStore.setEnabledFiltersProperties([ ...(costAnalysisPageState.enabledFiltersProperties ?? []), groupBy, @@ -195,8 +197,7 @@ const handleDisabledFilters = (all?: boolean, disabledFilter?: string) => { } }; const handleClickResetFilters = () => { - state.selectedItemsMap = getInitialSelectedItemsMap(); - + initSelectedFilters(true); const _originConsoleFilters: ConsoleFilter[]|undefined = costAnalysisPageGetters.selectedQuerySet?.options?.filters; const _originFilters: Record = {}; if (_originConsoleFilters?.length) { @@ -205,10 +206,10 @@ const handleClickResetFilters = () => { }); } costAnalysisPageStore.setFilters(_originFilters); + state.randomId = getRandomId(); }; -watch(() => props.visible, (visible) => { - if (!visible) return; +watch([() => costAnalysisPageGetters.selectedQueryId, () => costAnalysisPageGetters.isUnifiedCost, () => costAnalysisPageGetters.selectedDataSourceId], () => { initSelectedFilters(); }, { immediate: true }); @@ -218,7 +219,7 @@ watch(() => props.visible, (visible) => {
{ const handleUpdateWorkspaceScope = (selectedItems: string) => { costAnalysisPageStore.setWorkspaceScope(selectedItems); }; -watch(() => costAnalysisPageGetters.selectedQueryId, (updatedQueryId) => { - if (updatedQueryId !== '') { +watch([() => costAnalysisPageGetters.selectedQueryId, () => costAnalysisPageGetters.isUnifiedCost, () => costAnalysisPageGetters.selectedDataSourceId], ([updatedQueryId]) => { + if (updatedQueryId !== '' || MANAGED_COST_QUERY_SET_ID_LIST.includes(updatedQueryId)) { state.filtersPopoverVisible = false; } }, { immediate: true }); diff --git a/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts b/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts index 6cfd9a5ddf..383b1b8848 100644 --- a/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts +++ b/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts @@ -4,7 +4,7 @@ import dayjs from 'dayjs'; import { cloneDeep, isEmpty, sortBy } from 'lodash'; import { defineStore } from 'pinia'; -import type { ConsoleFilter } from '@cloudforet/core-lib/query/type'; +import type { ConsoleFilter, ConsoleFilterValue } from '@cloudforet/core-lib/query/type'; import { SpaceConnector } from '@cloudforet/core-lib/space-connector'; import type { CostQuerySetCreateParameters } from '@/schema/cost-analysis/cost-query-set/api-verbs/create'; @@ -78,6 +78,16 @@ export const useCostAnalysisPageStore = defineStore('page-cost-analysis', () => selectedQueryId: computed(() => costQuerySetState.selectedQuerySetId), costQueryList: computed(() => costQuerySetState.costQuerySetList), selectedQuerySet: computed(() => costQuerySetGetters.selectedQuerySet), + convertedOriginFilter: computed>(() => { + const originFilters:ConsoleFilter[] = getters.selectedQuerySet?.options?.filters ?? []; + const _selectedItemsMap: Record = {}; + (originFilters ?? []).forEach((queryFilter:ConsoleFilter) => { + if (queryFilter.k) { + _selectedItemsMap[queryFilter.k] = queryFilter.v; + } + }); + return _selectedItemsMap; + }), selectedDataSourceId: computed(() => costQuerySetState.selectedDataSourceId), isUnifiedCost: computed(() => costQuerySetState.isUnifiedCostOn), managedCostQuerySetList: computed(() => costQuerySetGetters.managedCostQuerySets),