From 4c7b0f85fba1a64fe1d8c44f02d895abe8fbdee2 Mon Sep 17 00:00:00 2001 From: Yongtae Park Date: Thu, 3 Apr 2025 16:09:31 +0900 Subject: [PATCH 01/18] chore: edit composable name Signed-off-by: samuel.park --- .../__tests__/use-service-query-key.test.ts | 18 +++++++++--------- .../query/query-key/use-service-query-key.ts | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/web/src/query/query-key/__tests__/use-service-query-key.test.ts b/apps/web/src/query/query-key/__tests__/use-service-query-key.test.ts index a610828907..3bfba0d41b 100644 --- a/apps/web/src/query/query-key/__tests__/use-service-query-key.test.ts +++ b/apps/web/src/query/query-key/__tests__/use-service-query-key.test.ts @@ -4,7 +4,7 @@ import { describe, it, expect, vi, } from 'vitest'; -import { _useServiceQueryKey } from '../use-service-query-key'; +import { useServiceQueryKey } from '../use-service-query-key'; // Mock useQueryKeyAppContext vi.mock('@/query/query-key/_composable/use-app-context-query-key', () => ({ @@ -13,9 +13,9 @@ vi.mock('@/query/query-key/_composable/use-app-context-query-key', () => ({ }), })); -describe('_useServiceQueryKey', () => { +describe('useServiceQueryKey', () => { it('should generate correct query key structure for basic usage', () => { - const { key } = _useServiceQueryKey( + const { key } = useServiceQueryKey( 'dashboard', 'public-data-table', 'list', @@ -40,7 +40,7 @@ describe('_useServiceQueryKey', () => { }); it('should generate correct query key structure with contextKey', () => { - const { key } = _useServiceQueryKey( + const { key } = useServiceQueryKey( 'dashboard', 'public-data-table', 'get', @@ -69,7 +69,7 @@ describe('_useServiceQueryKey', () => { const params = computed(() => ({ id: 'table-123' })); const contextKey = computed(() => 'table-123'); - const { key } = _useServiceQueryKey( + const { key } = useServiceQueryKey( 'dashboard', 'public-data-table', 'get', @@ -95,7 +95,7 @@ describe('_useServiceQueryKey', () => { }); it('should handle function getters correctly', () => { - const { key } = _useServiceQueryKey( + const { key } = useServiceQueryKey( 'dashboard', 'public-data-table', 'get', @@ -124,14 +124,14 @@ describe('_useServiceQueryKey', () => { const params = computed(() => ({ id: 'table-123' })); const contextKey = computed(() => 'table-123'); - const { key: key1 } = _useServiceQueryKey( + const { key: key1 } = useServiceQueryKey( 'dashboard', 'public-data-table', 'get', { contextKey, params }, ); - const { key: key2 } = _useServiceQueryKey( + const { key: key2 } = useServiceQueryKey( 'dashboard', 'public-data-table', 'get', @@ -155,7 +155,7 @@ describe('_useServiceQueryKey', () => { }); it('should handle withSuffix correctly', () => { - const { withSuffix } = _useServiceQueryKey( + const { withSuffix } = useServiceQueryKey( 'dashboard', 'public-data-table', 'load', diff --git a/apps/web/src/query/query-key/use-service-query-key.ts b/apps/web/src/query/query-key/use-service-query-key.ts index 90e8fcbce7..0c82b0bd02 100644 --- a/apps/web/src/query/query-key/use-service-query-key.ts +++ b/apps/web/src/query/query-key/use-service-query-key.ts @@ -51,7 +51,7 @@ type UseServiceQueryKeyResult = { withSuffix: (arg: ContextKeyType) => QueryKeyArray; }; -export const _useServiceQueryKey = , V extends Verb, T extends object = object>( +export const useServiceQueryKey = , V extends Verb, T extends object = object>( service: S, resource: R, verb: V, From 910a2fee7f00da858a7d2cea9c09b01e69bb2249 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Sun, 6 Apr 2025 18:54:50 +0900 Subject: [PATCH 02/18] refactor(query-key-composable): add reactivity to returned params Signed-off-by: piggggggggy --- apps/web/src/query/query-key/use-service-query-key.md | 6 +++--- apps/web/src/query/query-key/use-service-query-key.ts | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/web/src/query/query-key/use-service-query-key.md b/apps/web/src/query/query-key/use-service-query-key.md index 4714b1e55e..8d28558cfa 100644 --- a/apps/web/src/query/query-key/use-service-query-key.md +++ b/apps/web/src/query/query-key/use-service-query-key.md @@ -34,7 +34,7 @@ This predictable structure allows for precise cache management and query invalid ```typescript interface UseServiceQueryKeyOptions { contextKey?: _MaybeRefOrGetter; // string | unknown[] | object - params?: ComputedRef; + params?: _MaybeRefOrGetter; } ``` @@ -43,7 +43,7 @@ interface UseServiceQueryKeyOptions { ```typescript interface UseServiceQueryKeyResult { key: ComputedRef; // full query key - params?: Readonly; // parameters + params: ComputedRef; // parameters withSuffix: (arg: ContextKeyType) => QueryKeyArray; // dynamic namespace builder } ``` @@ -158,7 +158,7 @@ const { key, params } = useServiceQueryKey( // ✅ Use params from useServiceQueryKey const { data } = useQuery({ queryKey: key, - queryFn: () => publicDataTableAPI.list(params) + queryFn: () => publicDataTableAPI.list(params.value) }); // ❌ Not Recommended: Creating params separately diff --git a/apps/web/src/query/query-key/use-service-query-key.ts b/apps/web/src/query/query-key/use-service-query-key.ts index 0c82b0bd02..959900f30c 100644 --- a/apps/web/src/query/query-key/use-service-query-key.ts +++ b/apps/web/src/query/query-key/use-service-query-key.ts @@ -47,7 +47,7 @@ type ContextKeyType = string|unknown[]|object; type UseServiceQueryKeyResult = { key: ComputedRef; - params: T extends undefined ? undefined : Readonly; + params: ComputedRef; withSuffix: (arg: ContextKeyType) => QueryKeyArray; }; @@ -83,7 +83,6 @@ export const useServiceQueryKey = { const resolvedParams = toValue(params); - return [ ...queryKeyAppContext.value, service, resource, verb, @@ -101,9 +100,10 @@ export const useServiceQueryKey = (); return { key: queryKey, - params: params - ? Object.freeze(toValue(params)) as Readonly - : undefined, + params: computed(() => { + const resolvedParams = toValue(params); + return resolvedParams; + }), withSuffix: (arg) => { if (typeof arg === 'object' && arg !== null) { const cached = suffixCache.get(arg); From cd4616701044f0b99d0a51b863217ca2e87caef4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Sun, 6 Apr 2025 18:55:59 +0900 Subject: [PATCH 03/18] feat(widget-n-dashboard): create separated resource query Signed-off-by: piggggggggy --- .../use-widget-data-table-list-query.ts | 107 ++++++++++++++ .../use-widget-data-table-query.ts | 63 ++++++++ .../composables/use-dashboard-folder-query.ts | 134 ++++++++++++++++++ .../composables/use-dashboard-search-query.ts | 111 +++++++++++++++ 4 files changed, 415 insertions(+) create mode 100644 apps/web/src/common/modules/widgets/_composables/use-widget-data-table-list-query.ts create mode 100644 apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts create mode 100644 apps/web/src/services/dashboards/composables/use-dashboard-folder-query.ts create mode 100644 apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-list-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-list-query.ts new file mode 100644 index 0000000000..00e1c3ca4a --- /dev/null +++ b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-list-query.ts @@ -0,0 +1,107 @@ +import type { ComputedRef } from 'vue'; +import { computed } from 'vue'; + +import type { QueryKey } from '@tanstack/vue-query'; + +import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; +import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api'; +import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api'; +import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list'; +import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; + +import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type'; + +const DEFAULT_LIST_DATA = { results: [] }; +// const DEFAULT_LOAD_DATA = { results: {}, labels_info: {}, data_info: {} }; +const STALE_TIME = 1000 * 60 * 5; + +interface UseWidgetDataTableListQueryOptions { + widgetId: ComputedRef; +} + +interface UseWidgetDataTableListQueryReturn { + dataTableList: ComputedRef; + isLoading: ComputedRef; + keys: { + publicDataTableListQueryKey: ComputedRef; + privateDataTableListQueryKey: ComputedRef; + }; + api: { + publicDataTableAPI: ReturnType['publicDataTableAPI']; + privateDataTableAPI: ReturnType['privateDataTableAPI']; + }; + fetcher: { + updateDataTableFn: (params: DataTableUpdateParameters) => Promise; + }; +} + +export const useWidgetDataTableListQuery = ({ + widgetId, +}: UseWidgetDataTableListQueryOptions): UseWidgetDataTableListQueryReturn => { + const { + publicDataTableAPI, + } = usePublicDataTableApi(); + const { + privateDataTableAPI, + } = usePrivateDataTableApi(); + + const isPrivate = computed(() => !!widgetId?.value?.startsWith('private')); + + /* Query Keys */ + const { key: publicDataTableListQueryKey, params: publicDataTableListParams } = useServiceQueryKey('dashboard', 'public-data-table', 'list', { + params: computed(() => ({ + widget_id: widgetId.value as string, + })), + }); + const { key: privateDataTableListQueryKey, params: privateDataTableListParams } = useServiceQueryKey('dashboard', 'private-data-table', 'list', { + params: computed(() => ({ + widget_id: widgetId.value as string, + })), + }); + + /* Querys */ + const publicDataTableListQuery = useScopedQuery({ + queryKey: publicDataTableListQueryKey, + queryFn: () => publicDataTableAPI.list(publicDataTableListParams.value), + select: (data) => data?.results || [], + enabled: computed(() => !!widgetId?.value && !isPrivate.value), + initialData: DEFAULT_LIST_DATA, + initialDataUpdatedAt: 0, + staleTime: STALE_TIME, + }, ['DOMAIN', 'WORKSPACE']); + const privateDataTableListQuery = useScopedQuery({ + queryKey: privateDataTableListQueryKey, + queryFn: () => privateDataTableAPI.list(privateDataTableListParams.value), + select: (data) => data?.results || [], + enabled: computed(() => !!widgetId?.value && isPrivate.value), + initialData: DEFAULT_LIST_DATA, + initialDataUpdatedAt: 0, + staleTime: STALE_TIME, + }, ['WORKSPACE']); + + /* Fetchers */ + const updateDataTableFn = (params: DataTableUpdateParameters): Promise => { + if (isPrivate.value) { + return privateDataTableAPI.update(params); + } + return publicDataTableAPI.update(params); + }; + + + return { + dataTableList: computed(() => (isPrivate.value ? privateDataTableListQuery.data.value : publicDataTableListQuery.data.value) ?? []), + isLoading: computed(() => (isPrivate.value ? privateDataTableListQuery.isFetching.value : publicDataTableListQuery.isFetching.value)), + api: { + publicDataTableAPI, + privateDataTableAPI, + }, + keys: { + publicDataTableListQueryKey, + privateDataTableListQueryKey, + }, + fetcher: { + updateDataTableFn, + }, + }; +}; diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts new file mode 100644 index 0000000000..032d0fa9cb --- /dev/null +++ b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts @@ -0,0 +1,63 @@ +import type { ComputedRef } from 'vue'; +import { computed } from 'vue'; + +import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; +import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api'; +import type { DataTableGetParameters } from '@/api-clients/dashboard/private-data-table/schema/api-verbs/get'; +import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; + + +const STALE_TIME = 1000 * 60 * 5; // 5 minutes +const GC_TIME = 1000 * 60; // 1 minute + +export const useWidgetDataTableQuery = (dataTableId: ComputedRef) => { + const { publicDataTableAPI } = usePublicDataTableApi(); + const { privateDataTableAPI } = usePrivateDataTableApi(); + + const isPrivate = computed(() => { + if (!dataTableId.value) return false; + return dataTableId.value.startsWith('private'); + }); + + const { key: publicKey, params: publicParams } = useServiceQueryKey('dashboard', 'public-data-table', 'get', { + contextKey: dataTableId, + params: { + data_table_id: dataTableId.value, + } as DataTableGetParameters, + }); + const { key: privateKey, params: privateParams } = useServiceQueryKey('dashboard', 'private-data-table', 'get', { + contextKey: dataTableId, + params: { + data_table_id: dataTableId.value, + } as DataTableGetParameters, + }); + + const privateDataTableQuery = useScopedQuery({ + queryKey: privateKey, + queryFn: () => { + if (!dataTableId.value) { + throw new Error('DataTable ID is required for fetching data'); + } + return privateDataTableAPI.get(privateParams.value); + }, + staleTime: STALE_TIME, + gcTime: GC_TIME, + enabled: computed(() => !!dataTableId.value && isPrivate.value), + }, ['WORKSPACE']); + const publicDataTableQuery = useScopedQuery({ + queryKey: publicKey, + queryFn: () => { + if (!dataTableId.value) { + throw new Error('DataTable ID is required for fetching data'); + } + return publicDataTableAPI.get(publicParams.value); + }, + enabled: computed(() => !!dataTableId.value && !isPrivate.value), + staleTime: STALE_TIME, + gcTime: GC_TIME, + }, ['DOMAIN', 'WORKSPACE']); + + + return isPrivate.value ? privateDataTableQuery : publicDataTableQuery; +}; diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-folder-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-folder-query.ts new file mode 100644 index 0000000000..69d1d4bab3 --- /dev/null +++ b/apps/web/src/services/dashboards/composables/use-dashboard-folder-query.ts @@ -0,0 +1,134 @@ +import type { Ref } from 'vue'; +import { + computed, type ComputedRef, reactive, watch, +} from 'vue'; + +import type { QueryKey } from '@tanstack/vue-query'; + +import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper'; + +import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; +import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list'; +import type { FolderModel, FolderUpdateParams } from '@/api-clients/dashboard/_types/folder-type'; +import { usePrivateFolderApi } from '@/api-clients/dashboard/private-folder/composables/use-private-folder-api'; +import type { PrivateFolderUpdateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/update'; +import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model'; +import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api'; +import type { PublicFolderUpdateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/update'; +import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; + +import { useAppContextStore } from '@/store/app-context/app-context-store'; + +const DEFAULT_LIST_DATA = { results: [] }; +const STALE_TIME = 1000 * 60 * 5; + +interface UseDashboardFolderQueryReturn { + publicFolderList: Ref; + privateFolderList: Ref; + isLoading: ComputedRef; + keys: { + publicFolderListQueryKey: ComputedRef; + privateFolderListQueryKey: ComputedRef; + }; + fetcher: { + updateFolderFn: (args: FolderUpdateParams) => Promise + }; + api: { + publicFolderAPI: ReturnType['publicFolderAPI']; + privateFolderAPI: ReturnType['privateFolderAPI']; + }; +} + +export const useDashboardFolderQuery = (): UseDashboardFolderQueryReturn => { + const { publicFolderAPI } = usePublicFolderApi(); + const { privateFolderAPI } = usePrivateFolderApi(); + + + const appContextStore = useAppContextStore(); + const publicFolderListApiQueryHelper = new ApiQueryHelper(); + + const _state = reactive({ + // Store State + isAdminMode: computed(() => appContextStore.getters.isAdminMode), + // state + publicFolderListApiQuery: publicFolderListApiQueryHelper.data, + defaultListQuery: { + sort: [{ key: 'created_at', desc: true }], + }, + }); + + /* Query Keys */ + const { key: publicFolderListQueryKey, params: publicFolderListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', { + params: computed(() => ({ + query: { + filter: _state.publicFolderListApiQuery.filter, + ..._state.defaultListQuery, + }, + })), + }); + const { key: privateFolderListQueryKey, params: privateFolderListParams } = useServiceQueryKey('dashboard', 'private-folder', 'list', { + params: computed(() => ({ + query: _state.defaultListQuery, + })), + }); + + /* Querys */ + const publicFolderListQuery = useScopedQuery, unknown, PublicFolderModel[]>({ + queryKey: publicFolderListQueryKey, + queryFn: () => publicFolderAPI.list(publicFolderListParams.value), + select: (data) => data?.results || [], + initialData: DEFAULT_LIST_DATA, + initialDataUpdatedAt: 0, + staleTime: STALE_TIME, + enabled: computed(() => !!_state.publicFolderListApiQuery?.filter), + }, ['DOMAIN', 'WORKSPACE']); + const privateFolderListQuery = useScopedQuery, unknown, PrivateFolderModel[]>({ + queryKey: privateFolderListQueryKey, + queryFn: () => privateFolderAPI.list(privateFolderListParams.value), + select: (data) => data?.results || [], + initialData: DEFAULT_LIST_DATA, + initialDataUpdatedAt: 0, + staleTime: STALE_TIME, + enabled: computed(() => !_state.isAdminMode), + }, ['WORKSPACE']); + + /* Fetchers */ + const updateFolderFn = (params: FolderUpdateParams): Promise => { + const _isPrivate = params.folder_id.startsWith('private'); + if (_isPrivate) { + return privateFolderAPI.update(params as PrivateFolderUpdateParameters); + } + return publicFolderAPI.update(params as PublicFolderUpdateParameters); + }; + + watch(() => _state.isAdminMode, () => { + publicFolderListApiQueryHelper.setFilters([]); + if (_state.isAdminMode) { + publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' }); + } else { + publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' }); + } + _state.publicFolderListApiQuery = publicFolderListApiQueryHelper.data; + }, { immediate: true }); + + const isLoading = computed(() => publicFolderListQuery.isFetching.value || privateFolderListQuery.isFetching.value); + + return { + publicFolderList: computed(() => publicFolderListQuery.data.value ?? []), + privateFolderList: computed(() => privateFolderListQuery.data.value ?? []), + isLoading, + keys: { + publicFolderListQueryKey, + privateFolderListQueryKey, + }, + fetcher: { + updateFolderFn, + }, + api: { + publicFolderAPI, + privateFolderAPI, + }, + }; +}; + diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts new file mode 100644 index 0000000000..333b3bc2e3 --- /dev/null +++ b/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts @@ -0,0 +1,111 @@ +import { + computed, type ComputedRef, reactive, watch, ref, +} from 'vue'; + + +import { isEmpty } from 'lodash'; + +import type { ConsoleFilter } from '@cloudforet/core-lib/query/type'; +import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper'; +import type { Query } from '@cloudforet/core-lib/space-connector/type'; + +import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; +import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list'; +import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api'; +import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model'; +import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api'; +import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model'; +import { ROLE_TYPE } from '@/api-clients/identity/role/constant'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; + +import { useAppContextStore } from '@/store/app-context/app-context-store'; +import { useUserStore } from '@/store/user/user-store'; + + +const DEFAULT_LIST_DATA = { results: [] }; +const STALE_TIME = 1000 * 60 * 5; + +interface UseDashboardSearchQueryOptions { + searchFilters: ComputedRef; +} + + +export const useDashboardSearchQuery = ({ searchFilters }: UseDashboardSearchQueryOptions) => { + const { publicDashboardAPI } = usePublicDashboardApi(); + const { privateDashboardAPI } = usePrivateDashboardApi(); + + const appContextStore = useAppContextStore(); + const userStore = useUserStore(); + const searchApiQueryHelper = new ApiQueryHelper(); + + const _state = reactive({ + isAdminMode: computed(() => appContextStore.getters.isAdminMode), + isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER), + }); + const searchQuery = ref({}); + + /* Query Keys */ + const { key: publicDashboardListQueryKey, params: publicDashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', { + params: computed(() => ({ + query: { + only: ['dashboard_id'], + ...searchQuery.value, + }, + })), + }); + const { key: privateDashboardListQueryKey, params: privateDashboardListParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'list', { + params: computed(() => ({ + query: { + only: ['dashboard_id'], + ...searchQuery.value, + }, + })), + }); + + /* Querys */ + const publicDashboardIdListQuery = useScopedQuery, unknown, string[]>({ + queryKey: publicDashboardListQueryKey, + queryFn: () => { + console.debug('searchQuery', searchQuery.value, publicDashboardListParams.value); + return publicDashboardAPI.list(publicDashboardListParams.value); + }, + select: (data) => data?.results?.map((item) => item.dashboard_id) ?? [], + initialData: DEFAULT_LIST_DATA, + initialDataUpdatedAt: 0, + staleTime: STALE_TIME, + enabled: computed(() => !isEmpty(searchQuery.value) && (_state.isAdminMode || _state.isWorkspaceOwner)), + }, ['DOMAIN', 'WORKSPACE']); + const privateDashboardIdListQuery = useScopedQuery, unknown, string[]>({ + queryKey: privateDashboardListQueryKey, + queryFn: () => privateDashboardAPI.list(privateDashboardListParams.value), + select: (data) => data?.results?.map((item) => item.dashboard_id) ?? [], + initialData: DEFAULT_LIST_DATA, + initialDataUpdatedAt: 0, + staleTime: STALE_TIME, + enabled: computed(() => !isEmpty(searchQuery.value) && !_state.isAdminMode), + }, ['WORKSPACE']); + + watch(searchFilters, (_searchFilters) => { + searchApiQueryHelper.setFilters(_searchFilters); + console.debug('searchFilters', searchApiQueryHelper.data, _searchFilters); + searchQuery.value = searchApiQueryHelper.data; + }, { immediate: true }); + + + return { + dashboardIdList: computed>(() => { + const publicDashboardIdList = publicDashboardIdListQuery.data.value ?? []; + const privateDashboardIdList = privateDashboardIdListQuery.data.value ?? []; + if (_state.isAdminMode) { + return new Set(publicDashboardIdList); + } + if (_state.isWorkspaceOwner) { + return new Set([...publicDashboardIdList, ...privateDashboardIdList]); + } + return new Set(privateDashboardIdList); + }), + publicDashboardSearching: computed(() => publicDashboardIdListQuery.isFetching.value), + privateDashboardSearching: computed(() => privateDashboardIdListQuery.isFetching.value), + }; +}; + From 1bc22ce4c051b2d763c0bbd012f5574caa90133f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Sun, 6 Apr 2025 18:56:35 +0900 Subject: [PATCH 04/18] fix(dashboard): apply new query key composable Signed-off-by: piggggggggy --- .../composables/use-dashboard-detail-query.ts | 84 +++++----- .../composables/use-dashboard-query.ts | 152 +++--------------- 2 files changed, 68 insertions(+), 168 deletions(-) diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts index 9049e25f79..d7e0aebabd 100644 --- a/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts +++ b/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts @@ -8,17 +8,22 @@ import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-que import type { DashboardModel, DashboardUpdateParams } from '@/api-clients/dashboard/_types/dashboard-type'; import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type'; import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api'; +import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/get'; import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update'; import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model'; import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api'; +import type { PrivateWidgetListParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/list'; import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update'; import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model'; import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api'; +import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/get'; import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update'; import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model'; import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api'; +import type { PublicWidgetListParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/list'; import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update'; import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; const DEFAULT_LIST_DATA = { results: [] }; const STALE_TIME = 1000 * 60 * 5; @@ -54,54 +59,55 @@ interface UseDashboardDetailQueryReturn { export const useDashboardDetailQuery = ({ dashboardId, }: UseDashboardDetailQueryOptions): UseDashboardDetailQueryReturn => { - const { publicDashboardAPI, publicDashboardGetQueryKey } = usePublicDashboardApi(); - const { privateDashboardAPI, privateDashboardGetQueryKey } = usePrivateDashboardApi(); - const { publicWidgetAPI, publicWidgetListQueryKey } = usePublicWidgetApi(); - const { privateWidgetAPI, privateWidgetListQueryKey } = usePrivateWidgetApi(); + const { publicDashboardAPI } = usePublicDashboardApi(); + const { privateDashboardAPI } = usePrivateDashboardApi(); + const { publicWidgetAPI } = usePublicWidgetApi(); + const { privateWidgetAPI } = usePrivateWidgetApi(); const queryClient = useQueryClient(); const isPrivate = computed(() => !!dashboardId.value?.startsWith('private')); + /* Query Keys */ - const _publicDashboardGetQueryKey = computed(() => [ - ...publicDashboardGetQueryKey.value, - dashboardId.value, - ]); - const _privateDashboardGetQueryKey = computed(() => [ - ...privateDashboardGetQueryKey.value, - dashboardId.value, - ]); - const _publicWidgetListQueryKey = computed(() => [ - ...publicWidgetListQueryKey.value, - dashboardId.value, - ]); - const _privateWidgetListQueryKey = computed(() => [ - ...privateWidgetListQueryKey.value, - dashboardId.value, - ]); + const { key: publicDashboardGetQueryKey, params: publicDashboardGetParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'get', { + contextKey: computed(() => dashboardId.value), + params: computed(() => ({ + dashboard_id: dashboardId.value as string, + })), + }); + const { key: privateDashboardGetQueryKey, params: privateDashboardGetParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'get', { + contextKey: computed(() => dashboardId.value), + params: computed(() => ({ + dashboard_id: dashboardId.value as string, + })), + }); + const { key: publicWidgetListQueryKey, params: publicWidgetListParams } = useServiceQueryKey('dashboard', 'public-widget', 'list', { + params: computed(() => ({ + dashboard_id: dashboardId.value as string, + })), + }); + const { key: privateWidgetListQueryKey, params: privateWidgetListParams } = useServiceQueryKey('dashboard', 'private-widget', 'list', { + params: computed(() => ({ + dashboard_id: dashboardId.value as string, + })), + }); /* Querys */ const publicDashboardQuery = useScopedQuery({ - queryKey: _publicDashboardGetQueryKey, - queryFn: () => publicDashboardAPI.get({ - dashboard_id: dashboardId.value as string, - }), + queryKey: publicDashboardGetQueryKey, + queryFn: () => publicDashboardAPI.get(publicDashboardGetParams.value), enabled: computed(() => !!dashboardId.value && !isPrivate.value), staleTime: STALE_TIME, }, ['DOMAIN', 'WORKSPACE']); const privateDashboardQuery = useScopedQuery({ - queryKey: _privateDashboardGetQueryKey, - queryFn: () => privateDashboardAPI.get({ - dashboard_id: dashboardId.value as string, - }), + queryKey: privateDashboardGetQueryKey, + queryFn: () => privateDashboardAPI.get(privateDashboardGetParams.value), enabled: computed(() => !!dashboardId.value && isPrivate.value), staleTime: STALE_TIME, }, ['WORKSPACE']); const publicWidgetListQuery = useScopedQuery({ - queryKey: _publicWidgetListQueryKey, - queryFn: () => publicWidgetAPI.list({ - dashboard_id: dashboardId.value as string, - }), + queryKey: publicWidgetListQueryKey, + queryFn: () => publicWidgetAPI.list(publicWidgetListParams.value), select: (data) => data?.results || [], enabled: computed(() => !!dashboardId.value && publicDashboardQuery.isSuccess && !isPrivate.value), initialData: DEFAULT_LIST_DATA, @@ -109,10 +115,8 @@ export const useDashboardDetailQuery = ({ staleTime: STALE_TIME, }, ['DOMAIN', 'WORKSPACE']); const privateWidgetListQuery = useScopedQuery({ - queryKey: _privateWidgetListQueryKey, - queryFn: () => privateWidgetAPI.list({ - dashboard_id: dashboardId.value as string, - }), + queryKey: privateWidgetListQueryKey, + queryFn: () => privateWidgetAPI.list(privateWidgetListParams.value), select: (data) => data?.results || [], enabled: computed(() => !!dashboardId.value && privateDashboardQuery.isSuccess && isPrivate.value), initialData: DEFAULT_LIST_DATA, @@ -156,10 +160,10 @@ export const useDashboardDetailQuery = ({ privateWidgetAPI, }, keys: { - publicDashboardGetQueryKey: _publicDashboardGetQueryKey, - privateDashboardGetQueryKey: _privateDashboardGetQueryKey, - publicWidgetListQueryKey: _publicWidgetListQueryKey, - privateWidgetListQueryKey: _privateWidgetListQueryKey, + publicDashboardGetQueryKey, + privateDashboardGetQueryKey, + publicWidgetListQueryKey, + privateWidgetListQueryKey, }, fetcher: { updateDashboardFn, diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts index cd1bf71229..ef6135ba60 100644 --- a/apps/web/src/services/dashboards/composables/use-dashboard-query.ts +++ b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts @@ -4,29 +4,18 @@ import { } from 'vue'; import type { QueryKey } from '@tanstack/vue-query'; -import { type QueryClient, useQueryClient } from '@tanstack/vue-query'; import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper'; import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list'; -import type { FolderModel, FolderUpdateParams } from '@/api-clients/dashboard/_types/folder-type'; import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api'; import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model'; -import { usePrivateFolderApi } from '@/api-clients/dashboard/private-folder/composables/use-private-folder-api'; -import type { PrivateFolderUpdateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/update'; -import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model'; import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api'; import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model'; -import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api'; -import type { PublicFolderUpdateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/update'; -import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; import { useAppContextStore } from '@/store/app-context/app-context-store'; -import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store'; -import { useAllReferenceStore } from '@/store/reference/all-reference-store'; -import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store'; -import { useUserStore } from '@/store/user/user-store'; const DEFAULT_LIST_DATA = { results: [] }; const STALE_TIME = 1000 * 60 * 5; @@ -34,91 +23,53 @@ const STALE_TIME = 1000 * 60 * 5; interface UseDashboardQueryReturn { publicDashboardList: Ref; privateDashboardList: Ref; - publicFolderList: Ref; - privateFolderList: Ref; isLoading: ComputedRef; keys: { publicDashboardListQueryKey: ComputedRef; privateDashboardListQueryKey: ComputedRef; - publicFolderListQueryKey: ComputedRef; - privateFolderListQueryKey: ComputedRef; - }; - fetcher: { - updateFolderFn: (args: FolderUpdateParams) => Promise }; api: { publicDashboardAPI: ReturnType['publicDashboardAPI']; privateDashboardAPI: ReturnType['privateDashboardAPI']; - publicFolderAPI: ReturnType['publicFolderAPI']; - privateFolderAPI: ReturnType['privateFolderAPI']; }; - queryClient: QueryClient; } export const useDashboardQuery = (): UseDashboardQueryReturn => { - const { publicDashboardAPI, publicDashboardListQueryKey } = usePublicDashboardApi(); - const { privateDashboardAPI, privateDashboardListQueryKey } = usePrivateDashboardApi(); - const { publicFolderAPI, publicFolderListQueryKey } = usePublicFolderApi(); - const { privateFolderAPI, privateFolderListQueryKey } = usePrivateFolderApi(); - - const queryClient = useQueryClient(); + const { publicDashboardAPI } = usePublicDashboardApi(); + const { privateDashboardAPI } = usePrivateDashboardApi(); const appContextStore = useAppContextStore(); - const userWorkspaceStore = useUserWorkspaceStore(); - const allReferenceStore = useAllReferenceStore(); - const userStore = useUserStore(); const publicDashboardListApiQueryHelper = new ApiQueryHelper(); - const publicFolderListApiQueryHelper = new ApiQueryHelper(); const _state = reactive({ // Store State isAdminMode: computed(() => appContextStore.getters.isAdminMode), - currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId), - costDataSource: computed(() => allReferenceStore.getters.costDataSource), - userId: computed(() => userStore.state.userId), // state publicDashboardListApiQuery: publicDashboardListApiQueryHelper.data, - publicFolderListApiQuery: publicFolderListApiQueryHelper.data, defaultListQuery: { - query: { - sort: [{ key: 'created_at', desc: true }], - }, + sort: [{ key: 'created_at', desc: true }], }, }); /* Query Keys */ - const _publicDashboardListQueryKey = computed(() => [ - ...publicDashboardListQueryKey.value, - _state.defaultListQuery, - _state.publicDashboardListApiQuery.filter, - ]); - const _privateDashboardListQueryKey = computed(() => [ - ...privateDashboardListQueryKey.value, - _state.defaultListQuery, - ]); - const _publicFolderListQueryKey = computed(() => [ - ...publicFolderListQueryKey.value, - _state.defaultListQuery, - _state.publicFolderListApiQuery.filter, - ]); - const _privateFolderListQueryKey = computed(() => [ - ...privateFolderListQueryKey.value, - _state.defaultListQuery, - ]); - + const { key: publicDashboardListQueryKey, params: publicDashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', { + params: computed(() => ({ + query: { + filter: _state.publicDashboardListApiQuery.filter, + ..._state.defaultListQuery, + }, + })), + }); + const { key: privateDashboardListQueryKey, params: privateDashboardListParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'list', { + params: computed(() => ({ + query: _state.defaultListQuery, + })), + }); /* Querys */ const publicDashboardListQuery = useScopedQuery, unknown, PublicDashboardModel[]>({ - queryKey: _publicDashboardListQueryKey, - queryFn: () => publicDashboardAPI.list({ - query: { - ..._state.publicDashboardListApiQuery, - sort: [{ - key: 'created_at', - desc: true, - }], - }, - }), + queryKey: publicDashboardListQueryKey, + queryFn: () => publicDashboardAPI.list(publicDashboardListParams.value), select: (data) => data?.results ?? [], initialData: DEFAULT_LIST_DATA, initialDataUpdatedAt: 0, @@ -126,39 +77,8 @@ export const useDashboardQuery = (): UseDashboardQueryReturn => { enabled: computed(() => !!_state.publicDashboardListApiQuery?.filter), }, ['DOMAIN', 'WORKSPACE']); const privateDashboardListQuery = useScopedQuery, unknown, PrivateDashboardModel[]>({ - queryKey: _privateDashboardListQueryKey, - queryFn: () => privateDashboardAPI.list({ - query: { - sort: [{ key: 'created_at', desc: true }], - }, - }), - select: (data) => data?.results || [], - initialData: DEFAULT_LIST_DATA, - initialDataUpdatedAt: 0, - staleTime: STALE_TIME, - enabled: computed(() => !_state.isAdminMode), - }, ['WORKSPACE']); - const publicFolderListQuery = useScopedQuery, unknown, PublicFolderModel[]>({ - queryKey: _publicFolderListQueryKey, - queryFn: () => publicFolderAPI.list({ - query: { - ..._state.publicFolderListApiQuery, - sort: [{ key: 'created_at', desc: true }], - }, - }), - select: (data) => data?.results || [], - initialData: DEFAULT_LIST_DATA, - initialDataUpdatedAt: 0, - staleTime: STALE_TIME, - enabled: computed(() => !!_state.publicFolderListApiQuery?.filter), - }, ['DOMAIN', 'WORKSPACE']); - const privateFolderListQuery = useScopedQuery, unknown, PrivateFolderModel[]>({ - queryKey: _privateFolderListQueryKey, - queryFn: () => privateFolderAPI.list({ - query: { - sort: [{ key: 'created_at', desc: true }], - }, - }), + queryKey: privateDashboardListQueryKey, + queryFn: () => privateDashboardAPI.list(privateDashboardListParams.value), select: (data) => data?.results || [], initialData: DEFAULT_LIST_DATA, initialDataUpdatedAt: 0, @@ -166,54 +86,30 @@ export const useDashboardQuery = (): UseDashboardQueryReturn => { enabled: computed(() => !_state.isAdminMode), }, ['WORKSPACE']); - /* Fetchers */ - const updateFolderFn = (params: FolderUpdateParams): Promise => { - const _isPrivate = params.folder_id.startsWith('private'); - if (_isPrivate) { - return privateFolderAPI.update(params as PrivateFolderUpdateParameters); - } - return publicFolderAPI.update(params as PublicFolderUpdateParameters); - }; - watch(() => _state.isAdminMode, () => { publicDashboardListApiQueryHelper.setFilters([]); - publicFolderListApiQueryHelper.setFilters([]); if (_state.isAdminMode) { publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' }); - publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' }); } else { publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' }); - publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' }); } _state.publicDashboardListApiQuery = publicDashboardListApiQueryHelper.data; - _state.publicFolderListApiQuery = publicFolderListApiQueryHelper.data; }, { immediate: true }); - const isLoading = computed(() => publicDashboardListQuery.isFetching.value || privateDashboardListQuery.isFetching.value - || publicFolderListQuery.isFetching.value || privateFolderListQuery.isFetching.value); + const isLoading = computed(() => publicDashboardListQuery.isFetching.value || privateDashboardListQuery.isFetching.value); return { publicDashboardList: computed(() => publicDashboardListQuery.data.value ?? []), privateDashboardList: computed(() => privateDashboardListQuery.data.value ?? []), - publicFolderList: computed(() => publicFolderListQuery.data.value ?? []), - privateFolderList: computed(() => privateFolderListQuery.data.value ?? []), isLoading, keys: { - publicDashboardListQueryKey: _publicDashboardListQueryKey, - privateDashboardListQueryKey: _privateDashboardListQueryKey, - publicFolderListQueryKey: _publicFolderListQueryKey, - privateFolderListQueryKey: _privateFolderListQueryKey, - }, - fetcher: { - updateFolderFn, + publicDashboardListQueryKey, + privateDashboardListQueryKey, }, api: { publicDashboardAPI, privateDashboardAPI, - publicFolderAPI, - privateFolderAPI, }, - queryClient, }; }; From 7bf79b628f25c772fcd7c5f2e0594a59f12dc241 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Sun, 6 Apr 2025 18:58:54 +0900 Subject: [PATCH 05/18] feat(widget-load): create widget load context composable Signed-off-by: piggggggggy --- .../use-widget-load-query-context.ts | 114 ++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 apps/web/src/common/modules/widgets/_composables/use-widget-load-query-context.ts diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-load-query-context.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-load-query-context.ts new file mode 100644 index 0000000000..6ec6838275 --- /dev/null +++ b/apps/web/src/common/modules/widgets/_composables/use-widget-load-query-context.ts @@ -0,0 +1,114 @@ +import { computed, type ComputedRef } from 'vue'; + +import type { WidgetLoadParams, WidgetLoadResponse, WidgetLoadSumParams } from '@/api-clients/dashboard/_types/widget-type'; +import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api'; +import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api'; +import type { QueryKeyArray } from '@/query/query-key/_types/query-key-type'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; + + + +interface UseWidgetLoadQueryContextOptions { + widgetId: ComputedRef; + params: ComputedRef; + additionalDeps?: ComputedRef; +} + +interface UseWidgetLoadQueryContextResult { + fetcher: () => Promise; + key: ComputedRef; +} + + +export const useWidgetLoadQueryContext = ({ + widgetId, + params, + additionalDeps, +}: UseWidgetLoadQueryContextOptions): UseWidgetLoadQueryContextResult => { + const { publicWidgetAPI } = usePublicWidgetApi(); + const { privateWidgetAPI } = usePrivateWidgetApi(); + + const isPrivate = computed(() => { + if (!widgetId.value) return false; + return widgetId.value.startsWith('private'); + }); + + const { key: publicWidgetLoadQueryKey, params: publicWidgetLoadParams } = useServiceQueryKey('dashboard', 'public-widget', 'load', { + contextKey: [ + widgetId.value, + ...(additionalDeps ? [additionalDeps.value] : []), + ], + params, + }); + + const { key: privateWidgetLoadQueryKey, params: privateWidgetLoadParams } = useServiceQueryKey('dashboard', 'private-widget', 'load', { + contextKey: widgetId, + params, + }); + + const fetcher = () => { + if (!params.value) { + throw new Error('Widget parameters are required'); + } + return isPrivate.value + ? privateWidgetAPI.load(privateWidgetLoadParams.value) + : publicWidgetAPI.load(publicWidgetLoadParams.value); + }; + + return { + fetcher, + key: isPrivate.value ? privateWidgetLoadQueryKey : publicWidgetLoadQueryKey, + }; +}; + + +interface UseWidgetLoadSumQueryContextOptions { + widgetId: ComputedRef; + params: ComputedRef; + additionalDeps?: ComputedRef; +} +interface UseWidgetLoadSumQueryContextResult { + fetcher: () => Promise; + key: ComputedRef; +} + +export const useWidgetLoadSumQueryContext = ({ + widgetId, + params, + additionalDeps, +}: UseWidgetLoadSumQueryContextOptions): UseWidgetLoadSumQueryContextResult => { + const { publicWidgetAPI } = usePublicWidgetApi(); + const { privateWidgetAPI } = usePrivateWidgetApi(); + + const isPrivate = computed(() => { + if (!widgetId.value) return false; + return widgetId.value.startsWith('private'); + }); + + const { key: publicWidgetLoadSumQueryKey, params: publicWidgetLoadSumParams } = useServiceQueryKey('dashboard', 'public-widget', 'load-sum', { + contextKey: [ + widgetId.value, + ...(additionalDeps ? [additionalDeps.value] : []), + ], + params, + }); + + const { key: privateWidgetLoadSumQueryKey, params: privateWidgetLoadSumParams } = useServiceQueryKey('dashboard', 'private-widget', 'load-sum', { + contextKey: widgetId, + params, + }); + + const fetcher = () => { + if (!params.value) { + throw new Error('Widget parameters are required'); + } + return isPrivate.value + ? privateWidgetAPI.loadSum(privateWidgetLoadSumParams.value) + : publicWidgetAPI.loadSum(publicWidgetLoadSumParams.value); + }; + + return { + fetcher, + key: isPrivate.value ? privateWidgetLoadSumQueryKey : publicWidgetLoadSumQueryKey, + }; +}; From 2fa0ca1683b76c1f3eea8fac0716547833db5154 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Sun, 6 Apr 2025 18:59:13 +0900 Subject: [PATCH 06/18] fix(widget): apply new query key composable Signed-off-by: piggggggggy --- .../_composables/use-widget-form-query.ts | 96 ++++++++----------- 1 file changed, 38 insertions(+), 58 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts index 4c5bac911e..86515925e0 100644 --- a/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts +++ b/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts @@ -8,9 +8,13 @@ import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-que import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type'; import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api'; import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api'; +import type { PrivateWidgetGetParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/get'; import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api'; +import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list'; import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update'; import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api'; +import type { PublicWidgetGetParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/get'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type'; @@ -31,14 +35,8 @@ interface UseWidgetFormQueryReturn { keys: { publicWidgetGetQueryKey: ComputedRef; privateWidgetGetQueryKey: ComputedRef; - publicWidgetLoadQueryKey: ComputedRef; - privateWidgetLoadQueryKey: ComputedRef; - publicWidgetLoadSumQueryKey: ComputedRef; - privateWidgetLoadSumQueryKey: ComputedRef; publicDataTableListQueryKey: ComputedRef; privateDataTableListQueryKey: ComputedRef; - publicDataTableLoadQueryKey: ComputedRef; - privateDataTableLoadQueryKey: ComputedRef; }; api: { publicWidgetAPI: ReturnType['publicWidgetAPI']; @@ -59,70 +57,60 @@ export const useWidgetFormQuery = ({ }: UseWidgetFormQueryOptions): UseWidgetFormQueryReturn => { const { publicWidgetAPI, - publicWidgetGetQueryKey, - publicWidgetLoadQueryKey, - publicWidgetLoadSumQueryKey, } = usePublicWidgetApi(); const { privateWidgetAPI, - privateWidgetGetQueryKey, - privateWidgetLoadQueryKey, - privateWidgetLoadSumQueryKey, } = usePrivateWidgetApi(); const { publicDataTableAPI, - publicDataTableListQueryKey, - publicDataTableLoadQueryKey, } = usePublicDataTableApi(); const { privateDataTableAPI, - privateDataTableListQueryKey, - privateDataTableLoadQueryKey, } = usePrivateDataTableApi(); const queryClient = useQueryClient(); const isPrivate = computed(() => !!widgetId?.value?.startsWith('private')); /* Query Keys */ - const _publicWidgetGetQueryKey = computed(() => [ - ...publicWidgetGetQueryKey.value, - widgetId?.value, - ]); - const _privateWidgetGetQueryKey = computed(() => [ - ...privateWidgetGetQueryKey.value, - widgetId?.value, - ]); - const _publicDataTableListQueryKey = computed(() => [ - ...publicDataTableListQueryKey.value, - widgetId?.value, - ]); - const _privateDataTableListQueryKey = computed(() => [ - ...privateDataTableListQueryKey.value, - widgetId?.value, - ]); + const { key: publicWidgetGetQueryKey, params: publicWidgetGetParams } = useServiceQueryKey('dashboard', 'public-widget', 'get', { + contextKey: widgetId, + params: computed(() => ({ + widget_id: widgetId?.value as string, + })), + }); + const { key: privateWidgetGetQueryKey, params: privateWidgetGetParams } = useServiceQueryKey('dashboard', 'private-widget', 'get', { + contextKey: widgetId, + params: computed(() => ({ + widget_id: widgetId?.value as string, + })), + }); + const { key: publicDataTableListQueryKey, params: publicDataTableListParams } = useServiceQueryKey('dashboard', 'public-data-table', 'list', { + params: computed(() => ({ + widget_id: widgetId?.value as string, + })), + }); + const { key: privateDataTableListQueryKey, params: privateDataTableListParams } = useServiceQueryKey('dashboard', 'private-data-table', 'list', { + params: computed(() => ({ + widget_id: widgetId?.value as string, + })), + }); /* Querys */ const publicWidgetQuery = useScopedQuery({ - queryKey: _publicWidgetGetQueryKey, - queryFn: () => publicWidgetAPI.get({ - widget_id: widgetId?.value as string, - }), + queryKey: publicWidgetGetQueryKey, + queryFn: () => publicWidgetAPI.get(publicWidgetGetParams.value), enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad), staleTime: STALE_TIME, }, ['DOMAIN', 'WORKSPACE']); const privateWidgetQuery = useScopedQuery({ - queryKey: _privateWidgetGetQueryKey, - queryFn: () => privateWidgetAPI.get({ - widget_id: widgetId?.value as string, - }), + queryKey: privateWidgetGetQueryKey, + queryFn: () => privateWidgetAPI.get(privateWidgetGetParams.value), enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad), staleTime: STALE_TIME, }, ['WORKSPACE']); const publicDataTableListQuery = useScopedQuery({ - queryKey: _publicDataTableListQueryKey, - queryFn: () => publicDataTableAPI.list({ - widget_id: widgetId?.value as string, - }), + queryKey: publicDataTableListQueryKey, + queryFn: () => publicDataTableAPI.list(publicDataTableListParams.value), select: (data) => data?.results || [], enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad), initialData: DEFAULT_LIST_DATA, @@ -130,10 +118,8 @@ export const useWidgetFormQuery = ({ staleTime: STALE_TIME, }, ['DOMAIN', 'WORKSPACE']); const privateDataTableListQuery = useScopedQuery({ - queryKey: _privateDataTableListQueryKey, - queryFn: () => privateDataTableAPI.list({ - widget_id: widgetId?.value as string, - }), + queryKey: privateDataTableListQueryKey, + queryFn: () => privateDataTableAPI.list(privateDataTableListParams.value), select: (data) => data?.results || [], enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad), initialData: DEFAULT_LIST_DATA, @@ -175,16 +161,10 @@ export const useWidgetFormQuery = ({ privateDataTableAPI, }, keys: { - publicWidgetGetQueryKey: _publicWidgetGetQueryKey, - privateWidgetGetQueryKey: _privateWidgetGetQueryKey, - publicDataTableListQueryKey: _publicDataTableListQueryKey, - privateDataTableListQueryKey: _privateDataTableListQueryKey, - publicWidgetLoadQueryKey: computed(() => publicWidgetLoadQueryKey.value), - privateWidgetLoadQueryKey: computed(() => privateWidgetLoadQueryKey.value), - publicWidgetLoadSumQueryKey: computed(() => publicWidgetLoadSumQueryKey.value), - privateWidgetLoadSumQueryKey: computed(() => privateWidgetLoadSumQueryKey.value), - publicDataTableLoadQueryKey: computed(() => publicDataTableLoadQueryKey.value), - privateDataTableLoadQueryKey: computed(() => privateDataTableLoadQueryKey.value), + publicWidgetGetQueryKey, + privateWidgetGetQueryKey, + publicDataTableListQueryKey, + privateDataTableListQueryKey, }, fetcher: { updateDataTableFn, From 0b0c5045b3be7bdb8c867f84db91cc349504c155 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Sun, 6 Apr 2025 19:12:50 +0900 Subject: [PATCH 07/18] fix(data-table-cascade-update): apply new query key composable Signed-off-by: piggggggggy --- .../_composables/use-data-table-cascade-update.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts b/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts index bfeac9b62f..715a282b31 100644 --- a/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts +++ b/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts @@ -4,6 +4,7 @@ import { } from 'vue'; import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; import ErrorHandler from '@/common/composables/error/errorHandler'; import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; @@ -39,12 +40,14 @@ export const useDataTableCascadeUpdate = ({ widgetId }: UseDataTableCascadeUpdat dataTableReferenceMap: computed>(() => createDataTableReferenceMap(dataTableList.value)), }); + const { withSuffix: privateDataTableLoadWithSuffix } = useServiceQueryKey('dashboard', 'private-data-table', 'load'); + const { withSuffix: publicDataTableLoadWithSuffix } = useServiceQueryKey('dashboard', 'public-data-table', 'load'); + const { withSuffix: privateDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'get'); + const { withSuffix: publicDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'get'); + const _invalidateLoadQueries = async (data: DataTableModel) => { await queryClient.invalidateQueries({ - queryKey: [ - ...(_state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value), - data.data_table_id, - ], + queryKey: _state.isPrivate ? privateDataTableLoadWithSuffix(data.data_table_id) : publicDataTableLoadWithSuffix(data.data_table_id), }); }; @@ -82,6 +85,7 @@ export const useDataTableCascadeUpdate = ({ widgetId }: UseDataTableCascadeUpdat } return oldData; }); + await queryClient.invalidateQueries({ queryKey: _state.isPrivate ? privateDataTableGetQueryKey(result.data_table_id) : publicDataTableGetQueryKey(result.data_table_id) }); await _invalidateLoadQueries(result); await cascadeUpdateDataTable(childId); From 089e40cb1241456709bf08d45bd5f4db8b6956a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Sun, 6 Apr 2025 19:14:25 +0900 Subject: [PATCH 08/18] fix(widget-component): apply changed composable Signed-off-by: piggggggggy --- .../WidgetFormDataSourcePopover.vue | 45 ++++++---- .../WidgetFormDataTableCardAddContents.vue | 87 +++++++++++-------- .../WidgetFormDataTableCardFilters.vue | 4 +- .../WidgetFormDataTableCardFiltersItem.vue | 9 +- .../WidgetFormDataTableCardHeaderTitle.vue | 26 ++++-- ...getFormDataTableCardTransformAddLabels.vue | 24 +---- ...dgetFormDataTableCardTransformContents.vue | 60 +++++++------ ...tFormDataTableGlobalVariableViewButton.vue | 9 +- .../widgets/_components/WidgetFormOverlay.vue | 8 +- .../WidgetFormOverlayPreviewTable.vue | 74 ++++++++-------- .../_components/WidgetFormOverlayStep2.vue | 26 ++---- .../WidgetFormOverlayStep2WidgetForm.vue | 2 +- 12 files changed, 193 insertions(+), 181 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue index 629eca906f..7a7dc9c9cb 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue @@ -3,8 +3,9 @@ import { computed, reactive, watch, } from 'vue'; import type { TranslateResult } from 'vue-i18n'; +import { useRoute } from 'vue-router/composables'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { PButton, PPopover, PSelectCard, PI, PDivider, @@ -32,6 +33,7 @@ import WidgetFormAssetSecurityDataSourcePopper import WidgetFormCostDataSourcePopper from '@/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue'; import WidgetFormUnifiedCostDataSourcePopper from '@/common/modules/widgets/_components/WidgetFormUnifiedCostDataSourcePopper.vue'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; import { DATA_SOURCE_DOMAIN, @@ -46,14 +48,13 @@ import type { } from '@/common/modules/widgets/types/widget-model'; import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; -import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store'; const widgetGenerateStore = useWidgetGenerateStore(); const widgetGenerateState = widgetGenerateStore.state; const allReferenceStore = useAllReferenceStore(); -const dashboardDetailStore = useDashboardDetailInfoStore(); -const dashboardDetailState = dashboardDetailStore.state; const userStore = useUserStore(); +const route = useRoute(); +const dashboardId = computed(() => route.params.dashboardId); const emit = defineEmits<{(e: 'scroll'): void;}>(); @@ -61,18 +62,24 @@ const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY); /* Query */ const { - dataTableList, - api, - keys: widgetQueryKeys, - queryClient, + api: widgetApi, } = useWidgetFormQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); +const { + dataTableList, + keys: dataTableKeys, + api: dataTableApi, +} = useWidgetDataTableListQuery({ + widgetId: computed(() => widgetGenerateState.widgetId), +}); +const queryClient = useQueryClient(); + const { dashboard, keys, } = useDashboardDetailQuery({ - dashboardId: computed(() => dashboardDetailState.dashboardId), + dashboardId, }); @@ -193,15 +200,15 @@ const state = reactive({ /* Api */ const widgetCreateFn = (params: WidgetCreateParams): Promise => { - if (dashboardDetailState.dashboardId?.startsWith('private')) { - return api.privateWidgetAPI.create(params); + if (dashboardId.value?.startsWith('private')) { + return widgetApi.privateWidgetAPI.create(params); } - return api.publicWidgetAPI.create(params); + return widgetApi.publicWidgetAPI.create(params); }; const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutation({ mutationFn: widgetCreateFn, onSuccess: (data) => { - const _isPrivate = dashboardDetailState.dashboardId?.startsWith('private'); + const _isPrivate = dashboardId.value?.startsWith('private'); const widgetListQueryKey = _isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey; queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse) => (oldData.results?.length ? { ...oldData, results: [...oldData.results, data], @@ -215,16 +222,16 @@ const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutatio }, }); const dataTableAddFn = (params: DataTableAddParameters): Promise => { - if (dashboardDetailState.dashboardId?.startsWith('private')) { - return api.privateDataTableAPI.add(params); + if (dashboardId.value?.startsWith('private')) { + return dataTableApi.privateDataTableAPI.add(params); } - return api.publicDataTableAPI.add(params); + return dataTableApi.publicDataTableAPI.add(params); }; const { mutateAsync: addDataTable, isPending: dataTableAddLoading } = useMutation({ mutationFn: dataTableAddFn, onSuccess: (data) => { const _isPrivate = widgetGenerateState.widgetId?.startsWith('private'); - const dataTableListQueryKey = _isPrivate ? widgetQueryKeys.privateDataTableListQueryKey : widgetQueryKeys.publicDataTableListQueryKey; + const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey; queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse) => (oldData.results?.length ? { ...oldData, results: [...oldData.results, data], } : { @@ -269,7 +276,7 @@ const handleCreateUnsavedTransform = async (operator: DataTableOperator) => { } as Partial; const _isPrivate = widgetGenerateState.widgetId?.startsWith('private'); - const dataTableListQueryKey = _isPrivate ? widgetQueryKeys.privateDataTableListQueryKey : widgetQueryKeys.publicDataTableListQueryKey; + const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey; await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse) => (oldData.results?.length ? { ...oldData, results: [...oldData.results, unsavedTransformData], } : { @@ -288,7 +295,7 @@ const handleConfirmDataSource = async () => { // create widget if (widgetGenerateState.overlayType === 'ADD' && !widgetGenerateState.widgetId) { await createWidget({ - dashboard_id: dashboardDetailState.dashboardId as string, + dashboard_id: dashboardId.value as string, tags: { created_by: userStore.state.userId }, widget_type: 'table', }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue index 8c86344cc9..8a6401c839 100644 --- 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 { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { cloneDeep, isArray, isEqual, uniq, } from 'lodash'; @@ -17,6 +17,7 @@ import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete'; import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update'; import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; import { i18n } from '@/translations'; import { useAllReferenceStore } from '@/store/reference/all-reference-store'; @@ -38,6 +39,7 @@ import WidgetFormDataTableCardSourceForm import { useDataTableCascadeUpdate, } from '@/common/modules/widgets/_composables/use-data-table-cascade-update'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; import { DATA_SOURCE_DOMAIN, @@ -53,7 +55,6 @@ import type { } from '@/common/modules/widgets/types/widget-model'; import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant'; -import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store'; interface Props { selected: boolean; @@ -68,20 +69,24 @@ const props = defineProps(); const widgetGenerateStore = useWidgetGenerateStore(); const widgetGenerateState = widgetGenerateStore.state; const allReferenceStore = useAllReferenceStore(); -const dashboardDetailStore = useDashboardDetailInfoStore(); -const dashboardDetailState = dashboardDetailStore.state; /* Query */ const { widget, - dataTableList, - keys, - api, - fetcher, - queryClient, + keys: widgetKeys, + fetcher: widgetFetcher, } = useWidgetFormQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); +const { + dataTableList, + keys: dataTableKeys, + api: dataTableApi, + fetcher: dataTableFetcher, +} = useWidgetDataTableListQuery({ + widgetId: computed(() => widgetGenerateState.widgetId), +}); +const queryClient = useQueryClient(); const { cascadeUpdateDataTable, } = useDataTableCascadeUpdate({ @@ -230,33 +235,37 @@ const modalState = reactive({ referenceDataTableName: '', }); +/* Query Keys */ +const { withSuffix: privateDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'get'); +const { withSuffix: publicDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'get'); +const { withSuffix: privateDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'load'); +const { withSuffix: publicDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'load'); +const { withSuffix: privateWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load'); +const { withSuffix: publicWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load'); +const { withSuffix: privateWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load-sum'); +const { withSuffix: publicWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load-sum'); + /* APIs */ const invalidateLoadQueries = async (data: DataTableModel) => { - await queryClient.invalidateQueries({ - queryKey: [ - ...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value), - data.data_table_id, - ], - }); - await queryClient.invalidateQueries({ - queryKey: [ - ...(state.isPrivate ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value), - dashboardDetailState.dashboardId, - widgetGenerateState.widgetId, - ], - }); - await queryClient.invalidateQueries({ - queryKey: [ - ...(state.isPrivate ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value), - dashboardDetailState.dashboardId, - widgetGenerateState.widgetId, - ], - }); + if (!widgetGenerateState.widgetId) return; + if (data.data_table_id.startsWith('private')) { + await Promise.all([ + queryClient.invalidateQueries({ queryKey: privateDataTableLoadQueryKey(state.dataTableId) }), + queryClient.invalidateQueries({ queryKey: privateWidgetLoadQueryKey(widgetGenerateState.widgetId) }), + queryClient.invalidateQueries({ queryKey: privateWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }), + ]); + } else { + await Promise.all([ + queryClient.invalidateQueries({ queryKey: publicDataTableLoadQueryKey(state.dataTableId) }), + queryClient.invalidateQueries({ queryKey: publicWidgetLoadQueryKey(widgetGenerateState.widgetId) }), + queryClient.invalidateQueries({ queryKey: publicWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }), + ]); + } }; const { mutateAsync: updateDataTableMutation } = useMutation({ - mutationFn: fetcher.updateDataTableFn, + mutationFn: dataTableFetcher.updateDataTableFn, onSuccess: async (data) => { - const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey; + const dataTableListQueryKey = state.isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey; await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse) => { if (oldData.results) { return { @@ -271,6 +280,7 @@ const { mutateAsync: updateDataTableMutation } = useMutation({ } return oldData; }); + await queryClient.invalidateQueries({ queryKey: state.isPrivate ? privateDataTableGetQueryKey(state.dataTableId) : publicDataTableGetQueryKey(state.dataTableId) }); await invalidateLoadQueries(data); setInitialDataTableForm(); @@ -284,11 +294,11 @@ const { mutateAsync: updateDataTableMutation } = useMutation({ }, }); const { mutateAsync: updateWidget } = useMutation({ - mutationFn: fetcher.updateWidgetFn, + mutationFn: widgetFetcher.updateWidgetFn, onSuccess: (data) => { const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private') - ? keys.privateWidgetGetQueryKey - : keys.publicWidgetGetQueryKey; + ? widgetKeys.privateWidgetGetQueryKey + : widgetKeys.publicWidgetGetQueryKey; queryClient.setQueryData(widgetQueryKey.value, () => data); }, onError: (e) => { @@ -363,8 +373,8 @@ const updateDataTable = async (): Promise => { }; const deleteDataTableFn = (params: DataTableDeleteParameters): Promise => { if (params.data_table_id.startsWith('private')) { - return api.privateDataTableAPI.delete(params); - } return api.publicDataTableAPI.delete(params); + return dataTableApi.privateDataTableAPI.delete(params); + } return dataTableApi.publicDataTableAPI.delete(params); }; const { mutateAsync: deleteDataTable } = useMutation({ mutationFn: deleteDataTableFn, @@ -376,7 +386,7 @@ const { mutateAsync: deleteDataTable } = useMutation({ widgetGenerateStore.setAllDataTableInvalidMap(_allDataTableInvalidMap); const _isPrivate = widgetGenerateState.widgetId?.startsWith('private'); - const dataTableListQueryKey = _isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey; + const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey; await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse) => { if (oldData.results) { return { @@ -441,6 +451,9 @@ const handleCancelModal = () => { modalState.visible = false; }; const handleUpdateDataTable = async () => { + if (!widgetGenerateState.widgetId) { + throw new Error('Widget ID is required'); + } state.loading = true; const result = await updateDataTable(); if (result) { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue index e5cd5a3d9f..1b95dc5731 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue @@ -40,7 +40,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler'; import { useProxyValue } from '@/common/composables/proxy-state'; import WidgetFormDataTableCardFiltersItem from '@/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_SOURCE_DOMAIN, DATA_TABLE_QUERY_OPERATOR, @@ -89,7 +89,7 @@ const appContextStore = useAppContextStore(); /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue index a1548c2c11..619645bdd0 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue @@ -4,6 +4,7 @@ import { onClickOutside } from '@vueuse/core/index'; import { computed, onMounted, reactive, ref, } from 'vue'; +import { useRoute } from 'vue-router/composables'; import { isArray } from 'lodash'; @@ -27,7 +28,6 @@ import { blue, gray } from '@/styles/colors'; import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper'; -import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store'; interface Props { @@ -39,16 +39,15 @@ interface Props { } const props = defineProps(); - +const route = useRoute(); +const dashboardId = computed(() => route.params.dashboardId); const emit = defineEmits<{(e: 'delete'): void; (e: 'update:selected-filter', filter: DataTableQueryFilterForDropdown): void; }>(); const operatorButtonRef = ref(null); -const dashboardDetailStore = useDashboardDetailInfoStore(); -const dashboardDetailState = dashboardDetailStore.state; const { dashboard } = useDashboardDetailQuery({ - dashboardId: computed(() => dashboardDetailState.dashboardId), + dashboardId, }); const state = reactive({ visibleMenu: false, diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue index 5fae855e2d..e52c3e6ab2 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue @@ -17,6 +17,7 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert- import ErrorHandler from '@/common/composables/error/errorHandler'; import { useProxyValue } from '@/common/composables/proxy-state'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; import { DATA_TABLE_TYPE, @@ -47,13 +48,20 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { widget, - dataTableList, - fetcher, - keys, + fetcher: widgetFetcher, + keys: widgetKeys, queryClient, } = useWidgetFormQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); +const { + dataTableList, + keys: dataTableKeys, + fetcher: dataTableFetcher, +} = useWidgetDataTableListQuery({ + widgetId: computed(() => widgetGenerateState.widgetId), +}); + const storeState = reactive({ currentDataTable: computed(() => dataTableList.value.find((dataTable) => dataTable.data_table_id === props.dataTableId)), @@ -79,7 +87,7 @@ const handleSelectDataTable = async (dataTableId: string) => { const _widgetOptions = cloneDeep(widget.value?.options); const sanitizedOptions = sanitizeWidgetOptions(_widgetOptions, widget.value?.widget_type, storeState.currentDataTable); await updateWidget({ - widget_id: widgetGenerateState.widgetId, + widget_id: widgetGenerateState.widgetId as string, state: 'INACTIVE', options: sanitizedOptions, }); @@ -121,11 +129,11 @@ const handleClickNameConfirm = async () => { /* Api */ const { mutateAsync: updateWidget } = useMutation({ - mutationFn: fetcher.updateWidgetFn, + mutationFn: widgetFetcher.updateWidgetFn, onSuccess: (data) => { const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private') - ? keys.privateWidgetQueryKey - : keys.publicWidgetQueryKey; + ? widgetKeys.privateWidgetGetQueryKey + : widgetKeys.publicWidgetGetQueryKey; queryClient.setQueryData(widgetQueryKey.value, () => data); }, onError: (e) => { @@ -134,7 +142,7 @@ const { mutateAsync: updateWidget } = useMutation({ }, }); const { mutate: updateDataTable } = useMutation({ - mutationFn: fetcher.updateDataTableFn, + mutationFn: dataTableFetcher.updateDataTableFn, onSuccess: async (data) => { await syncDataTableList(data); showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DATA_TABLE_NAME_SUCCESS'), ''); @@ -147,7 +155,7 @@ const { mutate: updateDataTable } = useMutation({ }); const syncDataTableList = async (data: DataTableModel) => { const _isPrivate = widgetGenerateState.widgetId?.startsWith('private'); - const dataTableListQueryKey = _isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey; + const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey; await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse) => { if (oldData.results) { return { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue index 103f17b60a..1251b6c7da 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue @@ -11,24 +11,17 @@ import { PIconButton, PFieldGroup, PTextInput, PButton, PFieldTitle, } from '@cloudforet/mirinae'; -import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model'; -import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model'; import { i18n } from '@/translations'; import { useProxyValue } from '@/common/composables/proxy-state'; import WidgetFormDataTableCardTransformFormWrapper from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query'; import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { isFieldNameValid } from '@/common/modules/widgets/_helpers/widget-data-table-helper'; -import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { TransformDataTableProps, TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type'; import type { AddLabelsOptions } from '@/common/modules/widgets/types/widget-model'; - - - -type DataTableModel = PublicDataTableModel|PrivateDataTableModel; interface AdditionalLabel { name: string; value: string; @@ -41,18 +34,9 @@ const emit = defineEmits<{(e: 'update:operator-options', value: AddLabelsOptions (e: 'update:invalid', value: boolean): void; }>(); -const widgetGenerateStore = useWidgetGenerateStore(); -const widgetGenerateState = widgetGenerateStore.state; /* Query */ -const { - dataTableList, -} = useWidgetFormQuery({ - widgetId: computed(() => widgetGenerateState.widgetId), -}); +const currentDataTable = useWidgetDataTableQuery(computed(() => props.originData?.data_table_id)); -const storeState = reactive({ - currentDataTable: computed|undefined>(() => dataTableList.value.find((d) => d.data_table_id === dataTableInfo.value.dataTableId)), -}); const dataTableInfo = ref({ dataTableId: props.originData?.data_table_id, @@ -68,7 +52,7 @@ const state = reactive({ const fieldNames = state.refinedLabels.map((label) => label.name); if (fieldNames.includes(DATE_FIELD)) return true; if (fieldNames.length !== new Set(fieldNames).size) return true; - if (state.refinedLabels.some((d) => !isFieldNameValid(d.name, storeState.currentDataTable))) return true; + if (state.refinedLabels.some((d) => !isFieldNameValid(d.name, currentDataTable.data.value))) return true; return false; }), }); @@ -85,7 +69,7 @@ const getInvalidText = (idx: number): TranslateResult|undefined => { if (state.refinedLabels.some((label, lIdx) => lIdx !== idx && label.name === targetName)) { return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.DUPLICATED_LABEL'); } - if (!isFieldNameValid(targetName, storeState.currentDataTable)) { + if (!isFieldNameValid(targetName, currentDataTable.data.value)) { return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DUPLICATED_FIELD_NAME'); } return undefined; diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue index 09826559f2..a011fbb0ea 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue @@ -2,6 +2,7 @@ import { computed, defineExpose, onMounted, reactive, watch, } from 'vue'; +import { useRoute } from 'vue-router/composables'; import { useMutation } from '@tanstack/vue-query'; import { @@ -14,6 +15,7 @@ import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete'; import type { DataTableTransformParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/transform'; import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; import { i18n } from '@/translations'; import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper'; @@ -45,7 +47,7 @@ import { } from '@/common/modules/widgets/_composables/use-data-table-cascade-update'; import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; import { - DATA_TABLE_TYPE, type DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP, + DATA_TABLE_TYPE, DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP, } from '@/common/modules/widgets/_constants/data-table-constant'; import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-options-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; @@ -60,7 +62,6 @@ import type { } from '@/common/modules/widgets/types/widget-model'; import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; -import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store'; @@ -75,16 +76,16 @@ interface Props { type DataTableModel = PublicDataTableModel|PrivateDataTableModel; const props = defineProps(); +const route = useRoute(); +const dashboardId = computed(() => route.params.dashboardId); const widgetGenerateStore = useWidgetGenerateStore(); const widgetGenerateState = widgetGenerateStore.state; -const dashboardDetailStore = useDashboardDetailInfoStore(); -const dashboardDetailState = dashboardDetailStore.state; /* Querys */ const { dashboard, } = useDashboardDetailQuery({ - dashboardId: computed(() => dashboardDetailState.dashboardId), + dashboardId, }); const { widget, @@ -191,6 +192,17 @@ const getAggregateFunctionMap = () => { }, {} as AggregateFunction); }; + +/* Query Keys */ +const { withSuffix: privateDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'get'); +const { withSuffix: publicDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'get'); +const { withSuffix: privateDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'load'); +const { withSuffix: publicDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'load'); +const { withSuffix: privateWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load'); +const { withSuffix: publicWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load'); +const { withSuffix: privateWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load-sum'); +const { withSuffix: publicWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load-sum'); + /* APIs */ const syncDataTableList = async (data: DataTableModel, unsavedId?: string) => { const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey; @@ -210,31 +222,26 @@ const syncDataTableList = async (data: DataTableModel, unsavedId?: string) => { }); }; const invalidateLoadQueries = async (data: DataTableModel) => { - await queryClient.invalidateQueries({ - queryKey: [ - ...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value), - data.data_table_id, - ], - }); - await queryClient.invalidateQueries({ - queryKey: [ - ...(state.isPrivate ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value), - dashboardDetailState.dashboardId, - widgetGenerateState.widgetId, - ], - }); - await queryClient.invalidateQueries({ - queryKey: [ - ...(state.isPrivate ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value), - dashboardDetailState.dashboardId, - widgetGenerateState.widgetId, - ], - }); + if (!widgetGenerateState.widgetId) return; + if (data.data_table_id.startsWith('private')) { + await Promise.all([ + queryClient.invalidateQueries({ queryKey: privateDataTableLoadQueryKey(state.dataTableId) }), + queryClient.invalidateQueries({ queryKey: privateWidgetLoadQueryKey(widgetGenerateState.widgetId) }), + queryClient.invalidateQueries({ queryKey: privateWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }), + ]); + } else { + await Promise.all([ + queryClient.invalidateQueries({ queryKey: publicDataTableLoadQueryKey(state.dataTableId) }), + queryClient.invalidateQueries({ queryKey: publicWidgetLoadQueryKey(widgetGenerateState.widgetId) }), + queryClient.invalidateQueries({ queryKey: publicWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }), + ]); + } }; const { mutateAsync: updateDataTableMutation } = useMutation({ mutationFn: fetcher.updateDataTableFn, onSuccess: async (data) => { await syncDataTableList(data); + await queryClient.invalidateQueries({ queryKey: state.isPrivate ? privateDataTableGetQueryKey(data.data_table_id) : publicDataTableGetQueryKey(data.data_table_id) }); await invalidateLoadQueries(data); setFailStatus(false); @@ -421,6 +428,9 @@ const handleCancelModal = () => { modalState.visible = false; }; const handleUpdateDataTable = async () => { + if (!widgetGenerateState.widgetId) { + throw new Error('Widget ID is required'); + } state.loading = true; const result = await updateDataTable(); if (result) { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue index 92686f51fe..fcf1430937 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue @@ -1,7 +1,7 @@ diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue index 085f0e4e73..96c64724a1 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue @@ -4,7 +4,7 @@ import { } from 'vue'; import { useRoute } from 'vue-router/composables'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae'; @@ -39,8 +39,8 @@ const { publicDashboardList, privateDashboardList, keys, - queryClient, } = useDashboardQuery(); +const queryClient = useQueryClient(); const { fetcher, keys: dashboardDetailKeys, diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue index 6ae95754cb..5167ec1e38 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue @@ -43,10 +43,10 @@ const dashboardDetailState = dashboardDetailStore.state; const { dashboard, keys, fetcher, queryClient, } = useDashboardDetailQuery({ - dashboardId: computed(() => dashboardDetailState.dashboardId), + dashboardId: computed(() => props.dashboardId), }); const { isManageable } = useDashboardManageable({ - dashboardId: computed(() => dashboardDetailState.dashboardId), + dashboardId: computed(() => props.dashboardId), }); const state = reactive({ @@ -105,7 +105,7 @@ const handleSelectRefreshIntervalOption = (option) => { if (isManageable.value) { mutate({ - dashboard_id: dashboardDetailState.dashboardId, + dashboard_id: props.dashboardId, options: { ...(dashboard.value?.options || {}), refresh_interval_option: option, diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue index b85dad62a9..8fb7205e5c 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue @@ -3,6 +3,7 @@ import { computed, onUnmounted, reactive, watch, } from 'vue'; +import { useRoute } from 'vue-router/composables'; import draggable from 'vuedraggable'; import { useMutation } from '@tanstack/vue-query'; @@ -22,13 +23,12 @@ import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/w import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper'; import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; -import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store'; type WidgetModel = PublicWidgetModel | PrivateWidgetModel; const displayStore = useDisplayStore(); -const dashboardDetailStore = useDashboardDetailInfoStore(); -const dashboardDetailState = dashboardDetailStore.state; +const route = useRoute(); +const dashboardId = computed(() => route.params.dashboardId); /* Query */ const { @@ -38,7 +38,7 @@ const { fetcher, queryClient, } = useDashboardDetailQuery({ - dashboardId: computed(() => dashboardDetailState.dashboardId), + dashboardId, }); const state = reactive({ widgetList: computed(() => { @@ -61,7 +61,7 @@ const handleChangeWidgetOrder = () => { const _widgetIdList = state.widgetList.map((w) => w.widget_id); const _updatedLayouts = [{ widgets: _widgetIdList }]; updateDashboard({ - dashboard_id: dashboardDetailState.dashboardId || '', + dashboard_id: dashboardId.value || '', layouts: _updatedLayouts, }); }; @@ -84,7 +84,7 @@ const { mutate: updateDashboard } = useMutation( }, ); -watch(() => dashboardDetailState.dashboardId, (after, before) => { +watch(() => dashboardId.value, (after, before) => { if (after !== before) { displayStore.setVisibleSidebar(false); } diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue index 4f01e9ae5e..4f777ea6e5 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue @@ -2,6 +2,7 @@ import { computed, reactive, watch, } from 'vue'; +import { useRoute } from 'vue-router/composables'; import { useMutation } from '@tanstack/vue-query'; import dayjs from 'dayjs'; @@ -33,6 +34,8 @@ const props = withDefaults(defineProps(), { const { i18nDayjs } = useI18nDayjs(); const dashboardDetailStore = useDashboardDetailInfoStore(); const dashboardDetailState = dashboardDetailStore.state; +const route = useRoute(); +const dashboardId = computed(() => route.params.dashboardId); /* Query */ const { @@ -41,10 +44,10 @@ const { keys, queryClient, } = useDashboardDetailQuery({ - dashboardId: computed(() => dashboardDetailState.dashboardId), + dashboardId, }); const { isManageable } = useDashboardManageable({ - dashboardId: computed(() => dashboardDetailState.dashboardId), + dashboardId, }); const state = reactive({ monthMenuItems: computed(() => { @@ -114,7 +117,7 @@ const handleSelectMonthMenuItem = (selected: string) => { if (isManageable.value && !props.widgetMode) { mutate({ - dashboard_id: dashboardDetailState.dashboardId, + dashboard_id: dashboardId.value, options: { ...(dashboard.value?.options || {}), date_range: state.selectedDateRange, diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue index 8185722b9a..0795113c72 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue @@ -1,5 +1,6 @@ @@ -357,7 +314,7 @@ onUnmounted(() => { @change="handleQueryChange" @refresh="handleQueryChange()" /> - diff --git a/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue b/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue index c9fd3b2ceb..b0a1607593 100644 --- a/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue +++ b/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue @@ -32,6 +32,7 @@ import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store'; import { BACKGROUND_COLOR } from '@/styles/colorsets'; +import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query'; import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query'; import ProjectAlertTab from '@/services/project/v1/components/ProjectAlertTab.vue'; import ProjectDetailTab from '@/services/project/v1/components/ProjectDetailTab.vue'; @@ -59,8 +60,10 @@ const { visibleContents } = useContentsAccessibility(MENU_ID.ALERT_MANAGER); /* Query */ const { publicDashboardList, - publicFolderList, } = useDashboardQuery(); +const { + publicFolderList, +} = useDashboardFolderQuery(); const storeState = reactive({ visibleAlertTab: computed(() => visibleContents.value && projectDetailPageState.visibleAlertTab), diff --git a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue b/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue index da91f08b6a..847cec57ff 100644 --- a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue +++ b/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue @@ -29,6 +29,7 @@ import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store'; import { BACKGROUND_COLOR } from '@/styles/colorsets'; +import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query'; import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query'; import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue'; import ProjectTabs from '@/services/project/v2/components/ProjectTabs.vue'; @@ -49,9 +50,10 @@ const userStore = useUserStore(); /* Query */ const { publicDashboardList, - publicFolderList, } = useDashboardQuery(); - +const { + publicFolderList, +} = useDashboardFolderQuery(); const storeState = reactive({ projectGroups: computed(() => allReferenceStore.getters.projectGroup), From 37c5ec46dc1899ecc52b7af2f2ebb17c68616068 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Mon, 7 Apr 2025 08:46:29 +0900 Subject: [PATCH 12/18] chore(widget-form-query): change composable name & narrow context Signed-off-by: piggggggggy --- .../widgets/_composables/use-widget-query.ts | 108 ++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 apps/web/src/common/modules/widgets/_composables/use-widget-query.ts diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-query.ts new file mode 100644 index 0000000000..6702f3d924 --- /dev/null +++ b/apps/web/src/common/modules/widgets/_composables/use-widget-query.ts @@ -0,0 +1,108 @@ +import type { ComputedRef } from 'vue'; +import { computed } from 'vue'; + +import type { QueryKey } from '@tanstack/vue-query'; + +import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; +import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type'; +import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api'; +import type { PrivateWidgetGetParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/get'; +import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api'; +import type { PublicWidgetGetParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/get'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; + + +const STALE_TIME = 1000 * 60 * 5; + +interface UseWidgetFormQueryOptions { + widgetId?: ComputedRef; + preventLoad?: boolean; +} + +interface UseWidgetFormQueryReturn { + widget: ComputedRef; + widgetLoading: ComputedRef; + keys: { + publicWidgetGetQueryKey: ComputedRef; + privateWidgetGetQueryKey: ComputedRef; + }; + api: { + publicWidgetAPI: ReturnType['publicWidgetAPI']; + privateWidgetAPI: ReturnType['privateWidgetAPI']; + }; + fetcher: { + updateWidgetFn: (params: WidgetUpdateParams) => Promise; + }; +} + +export const useWidgetQuery = ({ + widgetId, + preventLoad = false, +}: UseWidgetFormQueryOptions): UseWidgetFormQueryReturn => { + const { + publicWidgetAPI, + } = usePublicWidgetApi(); + const { + privateWidgetAPI, + } = usePrivateWidgetApi(); + + const isPrivate = computed(() => !!widgetId?.value?.startsWith('private')); + + /* Query Keys */ + const { key: publicWidgetGetQueryKey, params: publicWidgetGetParams } = useServiceQueryKey('dashboard', 'public-widget', 'get', { + contextKey: widgetId, + params: computed(() => ({ + widget_id: widgetId?.value as string, + })), + }); + const { key: privateWidgetGetQueryKey, params: privateWidgetGetParams } = useServiceQueryKey('dashboard', 'private-widget', 'get', { + contextKey: widgetId, + params: computed(() => ({ + widget_id: widgetId?.value as string, + })), + }); + + /* Querys */ + const publicWidgetQuery = useScopedQuery({ + queryKey: publicWidgetGetQueryKey, + queryFn: () => publicWidgetAPI.get(publicWidgetGetParams.value), + enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad), + staleTime: STALE_TIME, + }, ['DOMAIN', 'WORKSPACE']); + const privateWidgetQuery = useScopedQuery({ + queryKey: privateWidgetGetQueryKey, + queryFn: () => privateWidgetAPI.get(privateWidgetGetParams.value), + enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad), + staleTime: STALE_TIME, + }, ['WORKSPACE']); + + + /* Fetchers */ + const updateWidgetFn = (params: WidgetUpdateParams): Promise => { + if (isPrivate.value) { + return privateWidgetAPI.update(params); + } + return publicWidgetAPI.update(params); + }; + + /* State */ + const widgetLoading = computed(() => (isPrivate.value + ? privateWidgetQuery.isFetching.value + : publicWidgetQuery.isFetching.value)); + + return { + widget: computed(() => (isPrivate.value ? privateWidgetQuery.data.value : publicWidgetQuery.data.value)), + widgetLoading, + api: { + publicWidgetAPI, + privateWidgetAPI, + }, + keys: { + publicWidgetGetQueryKey, + privateWidgetGetQueryKey, + }, + fetcher: { + updateWidgetFn, + }, + }; +}; From 5af942758a22160c4aba1c3999f3d30c086e3d2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Mon, 7 Apr 2025 08:48:14 +0900 Subject: [PATCH 13/18] fix(widget): apply changed query composables Signed-off-by: piggggggggy --- .../WidgetFormDataSourcePopover.vue | 4 +-- .../WidgetFormDataTableCardAddContents.vue | 4 +-- .../WidgetFormDataTableCardHeaderTitle.vue | 8 ++--- ...getFormDataTableCardTransformAggregate.vue | 4 +-- ...dgetFormDataTableCardTransformContents.vue | 35 ++++++++++++------- ...ataTableCardTransformDataTableDropdown.vue | 4 +-- ...dgetFormDataTableCardTransformEvaluate.vue | 4 +-- .../WidgetFormDataTableCardTransformJoin.vue | 4 +-- ...getFormDataTableCardTransformPivotForm.vue | 4 +-- ...FormDataTableCardTransformValueMapping.vue | 4 +-- .../widgets/_components/WidgetFormOverlay.vue | 16 ++++++--- .../WidgetFormOverlayPreviewTable.vue | 4 +-- .../_components/WidgetFormOverlayStep1.vue | 4 +-- .../_components/WidgetFormOverlayStep2.vue | 12 +++++-- .../WidgetFormOverlayStep2WidgetForm.vue | 15 +++++--- .../use-data-table-cascade-update.ts | 14 +++++--- .../widgets/_composables/use-widget-frame.ts | 4 +-- .../category-by/WidgetFieldCategoryBy.vue | 4 +-- .../WidgetFieldCustomTableColumnWidth.vue | 4 +-- .../WidgetFieldDataFieldHeatmapColor.vue | 4 +-- .../data-field/WidgetFieldDataField.vue | 5 +-- .../format-rules/WidgetFieldFormatRules.vue | 4 +-- .../group-by/WidgetFieldGroupBy.vue | 4 +-- .../number-format/WidgetFieldNumberFormat.vue | 4 +-- .../WidgetFieldSankeyDimensions.vue | 4 +-- .../stack-by/WidgetFieldStackBy.vue | 4 +-- .../sub-total/WidgetFieldSubTotal.vue | 4 +-- .../WidgetFieldTableColumnComparison.vue | 4 +-- .../x-axis/WidgetFieldXAxis.vue | 4 +-- .../y-axis/WidgetFieldYAxis.vue | 4 +-- 30 files changed, 114 insertions(+), 83 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue index 7a7dc9c9cb..b61b301797 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue @@ -34,7 +34,7 @@ import WidgetFormCostDataSourcePopper from '@/common/modules/widgets/_components import WidgetFormUnifiedCostDataSourcePopper from '@/common/modules/widgets/_components/WidgetFormUnifiedCostDataSourcePopper.vue'; import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query'; import { DATA_SOURCE_DOMAIN, DATA_TABLE_OPERATOR, @@ -63,7 +63,7 @@ const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY); /* Query */ const { api: widgetApi, -} = useWidgetFormQuery({ +} = useWidgetQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); const { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue index 8a6401c839..9a4269820e 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue @@ -40,7 +40,7 @@ import { useDataTableCascadeUpdate, } from '@/common/modules/widgets/_composables/use-data-table-cascade-update'; import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query'; import { DATA_SOURCE_DOMAIN, DATA_TABLE_OPERATOR, @@ -75,7 +75,7 @@ const { widget, keys: widgetKeys, fetcher: widgetFetcher, -} = useWidgetFormQuery({ +} = useWidgetQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); const { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue index e52c3e6ab2..50e17a7d08 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue @@ -2,7 +2,7 @@ import { computed, reactive } from 'vue'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { cloneDeep } from 'lodash'; import { @@ -18,7 +18,7 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert- import ErrorHandler from '@/common/composables/error/errorHandler'; import { useProxyValue } from '@/common/composables/proxy-state'; import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query'; import { DATA_TABLE_TYPE, } from '@/common/modules/widgets/_constants/data-table-constant'; @@ -50,8 +50,7 @@ const { widget, fetcher: widgetFetcher, keys: widgetKeys, - queryClient, -} = useWidgetFormQuery({ +} = useWidgetQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); const { @@ -61,6 +60,7 @@ const { } = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); +const queryClient = useQueryClient(); const storeState = reactive({ diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue index b2bac9bb7a..5a3e440fae 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue @@ -18,7 +18,7 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper'; import { useProxyValue } from '@/common/composables/proxy-state'; import WidgetFormDataTableCardTransformFormWrapper from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR, } from '@/common/modules/widgets/_constants/data-table-constant'; @@ -40,7 +40,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue index a011fbb0ea..b7340d2363 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue @@ -4,7 +4,7 @@ import { } from 'vue'; import { useRoute } from 'vue-router/composables'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { cloneDeep, intersection, isEmpty, isEqual, } from 'lodash'; @@ -45,7 +45,8 @@ import WidgetFormDataTableCardTransformValueMapping import { useDataTableCascadeUpdate, } from '@/common/modules/widgets/_composables/use-data-table-cascade-update'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; +import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query'; import { DATA_TABLE_TYPE, DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP, } from '@/common/modules/widgets/_constants/data-table-constant'; @@ -89,14 +90,22 @@ const { }); const { widget, - dataTableList, + keys: widgetKeys, + fetcher: widgetFetcher, +} = useWidgetQuery({ + widgetId: computed(() => widgetGenerateState.widgetId), +}); +const { api, - keys, - fetcher, - queryClient, -} = useWidgetFormQuery({ + keys: dataTableKeys, + fetcher: dataTableFetcher, + dataTableList, +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); +const queryClient = useQueryClient(); + + const { cascadeUpdateDataTable, } = useDataTableCascadeUpdate({ @@ -205,7 +214,7 @@ const { withSuffix: publicWidgetLoadSumQueryKey } = useServiceQueryKey('dashboar /* APIs */ const syncDataTableList = async (data: DataTableModel, unsavedId?: string) => { - const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey; + const dataTableListQueryKey = state.isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey; await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse) => { if (oldData.results) { return { @@ -238,7 +247,7 @@ const invalidateLoadQueries = async (data: DataTableModel) => { } }; const { mutateAsync: updateDataTableMutation } = useMutation({ - mutationFn: fetcher.updateDataTableFn, + mutationFn: dataTableFetcher.updateDataTableFn, onSuccess: async (data) => { await syncDataTableList(data); await queryClient.invalidateQueries({ queryKey: state.isPrivate ? privateDataTableGetQueryKey(data.data_table_id) : publicDataTableGetQueryKey(data.data_table_id) }); @@ -253,11 +262,11 @@ const { mutateAsync: updateDataTableMutation } = useMutation({ }, }); const { mutateAsync: updateWidget } = useMutation({ - mutationFn: fetcher.updateWidgetFn, + mutationFn: widgetFetcher.updateWidgetFn, onSuccess: (data) => { const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private') - ? keys.privateWidgetGetQueryKey - : keys.publicWidgetGetQueryKey; + ? widgetKeys.privateWidgetGetQueryKey + : widgetKeys.publicWidgetGetQueryKey; queryClient.setQueryData(widgetQueryKey.value, () => data); }, onError: (e) => { @@ -458,7 +467,7 @@ const clearDataTableInvalidStatus = async (dataTableId: string) => { delete _allDataTableInvalidMap[dataTableId]; widgetGenerateStore.setAllDataTableInvalidMap(_allDataTableInvalidMap); - const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey; + const dataTableListQueryKey = state.isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey; await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse) => { if (oldData.results) { return { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue index 4cff59106e..65569beee9 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue @@ -9,7 +9,7 @@ import { PI, PContextMenu, PFieldTitle } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; import { useProxyValue } from '@/common/composables/proxy-state'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type'; @@ -34,7 +34,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue index e942f3bbec..220c471d2e 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue @@ -22,7 +22,7 @@ import WidgetFormDataTableCardTransformFormWrapper from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue'; import WidgetFormDataTableGlobalVariableViewButton from '@/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_FIELD_TYPE, DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type'; @@ -52,7 +52,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue index 335ff707f2..65c94e75f3 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue @@ -13,7 +13,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/ import { useProxyValue } from '@/common/composables/proxy-state'; import WidgetFormDataTableCardTransformFormWrapper from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR, JOIN_TYPE, } from '@/common/modules/widgets/_constants/data-table-constant'; @@ -47,7 +47,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue index 7d4f8ee90e..cd5e50b501 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue @@ -18,7 +18,7 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper'; import { useProxyValue } from '@/common/composables/proxy-state'; import WidgetFormDataTableCardTransformFormWrapper from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP, } from '@/common/modules/widgets/_constants/data-table-constant'; @@ -39,7 +39,7 @@ const widgetGenerateState = widgetGenerateStore.state; const { dataTableList, api, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue index 9ddd1aca9b..3aa564b6dc 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue @@ -19,7 +19,7 @@ import { i18n } from '@/translations'; import { useProxyValue } from '@/common/composables/proxy-state'; import WidgetFormDataTableCardTransformFormWrapper from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_FIELD_TYPE, DATA_TABLE_OPERATOR, @@ -46,7 +46,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue index c57a56d801..326fd1a81c 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue @@ -5,7 +5,7 @@ import { import type { TranslateResult } from 'vue-i18n'; import { useRoute } from 'vue-router/composables'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { cloneDeep } from 'lodash'; import { @@ -22,7 +22,8 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper'; import ErrorHandler from '@/common/composables/error/errorHandler'; import WidgetFormOverlayStep1 from '@/common/modules/widgets/_components/WidgetFormOverlayStep1.vue'; import WidgetFormOverlayStep2 from '@/common/modules/widgets/_components/WidgetFormOverlayStep2.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; +import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query'; import { UNSUPPORTED_CHARTS_IN_PIVOT } from '@/common/modules/widgets/_constants/widget-constant'; import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-options-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; @@ -30,6 +31,7 @@ import type { DataTableModel } from '@/common/modules/widgets/types/widget-data- + const widgetGenerateStore = useWidgetGenerateStore(); const widgetGenerateGetters = widgetGenerateStore.getters; const widgetGenerateState = widgetGenerateStore.state; @@ -39,14 +41,18 @@ const dashboardId = computed(() => route.params.dashboardId); /* Query */ const { widget, - dataTableList, api, keys, fetcher, - queryClient, -} = useWidgetFormQuery({ +} = useWidgetQuery({ + widgetId: computed(() => widgetGenerateState.widgetId), +}); +const { + dataTableList, +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); +const queryClient = useQueryClient(); const state = reactive({ selectedDataTable: computed(() => dataTableList.value?.find((item) => item.data_table_id === widgetGenerateState.selectedDataTableId)), diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue index 4fcb28fe8d..7f89e0c01a 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue @@ -28,7 +28,7 @@ import { i18n } from '@/translations'; import { useAllReferenceStore } from '@/store/reference/all-reference-store'; import type { ProjectReferenceMap } from '@/store/reference/project-reference-store'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { REFERENCE_FIELD_MAP, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant'; import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper'; @@ -69,7 +69,7 @@ const { /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); const { dashboard } = useDashboardDetailQuery({ diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue index b5a5b2a111..54023d0a27 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue @@ -19,7 +19,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler'; import WidgetFormDataSourcePopover from '@/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue'; import WidgetFormDataTableCard from '@/common/modules/widgets/_components/WidgetFormDataTableCard.vue'; import WidgetFormOverlayPreviewTable from '@/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { createDataTableReferenceMap, getDataTableReferenceMapExecutionOrder, @@ -40,7 +40,7 @@ const scrollContainerRef = ref(null); /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue index 9465018b49..67a226ef3e 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue @@ -23,8 +23,9 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper'; import ErrorHandler from '@/common/composables/error/errorHandler'; import WidgetFormOverlayStep2WidgetForm from '@/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { useWidgetOptionsComplexValidation } from '@/common/modules/widgets/_composables/use-widget-options-complex-validation'; +import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query'; import { WIDGET_WIDTH_RANGE_LIST } from '@/common/modules/widgets/_constants/widget-display-constant'; import { getWidgetComponent } from '@/common/modules/widgets/_helpers/widget-component-helper'; import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper'; @@ -74,11 +75,16 @@ const { }); const { widget, - dataTableList, keys: widgetKeys, fetcher: wigetFetcher, widgetLoading, -} = useWidgetFormQuery({ +} = useWidgetQuery({ + widgetId: computed(() => widgetGenerateState.widgetId), +}); + +const { + dataTableList, +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue index 565c6c0b5d..f0d9fa381d 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue @@ -4,7 +4,7 @@ import { } from 'vue'; import type { TranslateResult } from 'vue-i18n'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { cloneDeep, sortBy } from 'lodash'; import { @@ -19,7 +19,8 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper'; import NewMark from '@/common/components/marks/NewMark.vue'; import ErrorHandler from '@/common/composables/error/errorHandler'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; +import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query'; import { DATA_TABLE_OPERATOR, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant'; import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/widget-components-constant'; import { CONSOLE_WIDGET_CONFIG } from '@/common/modules/widgets/_constants/widget-config-list-constant'; @@ -61,13 +62,17 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { - dataTableList, fetcher, keys, - queryClient, -} = useWidgetFormQuery({ +} = useWidgetQuery({ + widgetId: computed(() => widgetGenerateState.widgetId), +}); +const { + dataTableList, +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); +const queryClient = useQueryClient(); const state = reactive({ selectedDataTable: computed(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)), diff --git a/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts b/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts index 715a282b31..3f307da111 100644 --- a/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts +++ b/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts @@ -3,16 +3,20 @@ import { computed, reactive, } from 'vue'; +import { useQueryClient } from '@tanstack/vue-query'; + import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list'; import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; import ErrorHandler from '@/common/composables/error/errorHandler'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { createDataTableReferenceMap } from '@/common/modules/widgets/_helpers/widget-data-table-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { DataTableModel, DataTableReference } from '@/common/modules/widgets/types/widget-data-table-type'; + + interface UseDataTableCascadeUpdateOptions { widgetId: ComputedRef; } @@ -27,13 +31,13 @@ export const useDataTableCascadeUpdate = ({ widgetId }: UseDataTableCascadeUpdat /* Query */ const { - dataTableList, - fetcher, keys, - queryClient, - } = useWidgetFormQuery({ + fetcher, + dataTableList, + } = useWidgetDataTableListQuery({ widgetId: computed(() => widgetId.value), }); + const queryClient = useQueryClient(); const _state = reactive({ isPrivate: computed(() => !!widgetId.value?.startsWith('private')), diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts index 489004db5c..872bde8d3a 100644 --- a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts +++ b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts @@ -19,7 +19,7 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp import { arrayToQueryString, objectToQueryString, primitiveToQueryString } from '@/lib/router-query-string'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_SOURCE_DOMAIN, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant'; import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper'; import type { DisplayAnnotationValue } from '@/common/modules/widgets/_widget-fields/display-annotation/type'; @@ -155,7 +155,7 @@ export const useWidgetFrame = ( /* Query */ const { dataTableList, - } = useWidgetFormQuery({ + } = useWidgetDataTableListQuery({ widgetId: computed(() => props.widgetId), }); const appContextStore = useAppContextStore(); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue index c7e70d314b..d5fb8f0e17 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue @@ -7,7 +7,7 @@ import { PFieldGroup } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { @@ -27,7 +27,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue b/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue index 6fff3a6a09..134a1d8180 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue @@ -16,7 +16,7 @@ import getRandomId from '@/lib/random-id-generator'; import type { } from '@/common/modules/widgets/types/widget-field-value-type'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant'; import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper'; @@ -43,7 +43,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue b/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue index aeefc4a5c0..e0566f96ae 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue @@ -11,7 +11,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/ import { i18n } from '@/translations'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { DATA_FIELD_HEATMAP_COLOR } from '@/common/modules/widgets/_constants/widget-field-constant'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; @@ -36,7 +36,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue b/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue index da1c28077c..9dc5d7193d 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue @@ -3,10 +3,11 @@ import { computed, reactive, } from 'vue'; + import { PSelectDropdown, PFieldGroup } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; @@ -30,7 +31,7 @@ const validator = widgetValidatorRegistry[FIELD_KEY]; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue index 8bb93ebebd..b5c076365e 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue @@ -11,7 +11,7 @@ import { import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; import ColorInput from '@/common/components/inputs/ColorInput.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { FORMAT_RULE_TYPE, } from '@/common/modules/widgets/_constants/widget-field-constant'; @@ -40,7 +40,7 @@ const validator = widgetValidatorRegistry[FIELD_KEY]; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue index 6c35461472..93c7cf0a30 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue @@ -10,7 +10,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t import { i18n } from '@/translations'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import { @@ -38,7 +38,7 @@ const validator = widgetValidatorRegistry[FIELD_KEY]; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue b/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue index 64fa46d06f..ccaf3dc07b 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue @@ -11,7 +11,7 @@ import { customNumberFormatter } from '@cloudforet/utils'; import { i18n } from '@/translations'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { NUMBER_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; @@ -42,7 +42,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue b/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue index 3efee950d2..699afcfe85 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue @@ -14,7 +14,7 @@ import { i18n } from '@/translations'; import { showErrorMessage } from '@/lib/helper/notice-alert-helper'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import { @@ -41,7 +41,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue index 4e971dcdd3..60711fc3c0 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue @@ -7,7 +7,7 @@ import { PFieldGroup } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { StackByOptions } from '@/common/modules/widgets/_widget-fields/stack-by/type'; @@ -26,7 +26,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue b/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue index 634e36632e..d06f48b25e 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue @@ -5,7 +5,7 @@ import { PFieldTitle, PToggleButton, PI, PTooltip, PCheckbox, } from '@cloudforet/mirinae'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { SubTotalOptions, SubTotalValue } from '@/common/modules/widgets/_widget-fields/sub-total/type'; @@ -25,7 +25,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue b/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue index 3ce07dfeb8..6ed29f4dd8 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue @@ -14,7 +14,7 @@ import { i18n } from '@/translations'; import ColorInput from '@/common/components/inputs/ColorInput.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import { @@ -40,7 +40,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue b/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue index cd52890579..4eed195e12 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue @@ -7,7 +7,7 @@ import { PFieldGroup } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { XAxisOptions } from '@/common/modules/widgets/_widget-fields/x-axis/type'; @@ -26,7 +26,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); diff --git a/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue b/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue index 51a70bf4a4..e4cf544b7e 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue @@ -7,7 +7,7 @@ import { PFieldGroup } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue'; -import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query'; +import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query'; import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper'; import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store'; import type { YAxisOptions } from '@/common/modules/widgets/_widget-fields/y-axis/type'; @@ -26,7 +26,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Query */ const { dataTableList, -} = useWidgetFormQuery({ +} = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); From 01adc752a9ca0b5da14b5e4f0c5b2c5660ccfdb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Mon, 7 Apr 2025 08:49:32 +0900 Subject: [PATCH 14/18] chore: small fix Signed-off-by: piggggggggy --- .../_composables/use-widget-form-query.ts | 175 ------------------ 1 file changed, 175 deletions(-) delete mode 100644 apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts deleted file mode 100644 index 86515925e0..0000000000 --- a/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts +++ /dev/null @@ -1,175 +0,0 @@ -import type { ComputedRef } from 'vue'; -import { computed } from 'vue'; - -import type { QueryClient, QueryKey } from '@tanstack/vue-query'; -import { useQueryClient } from '@tanstack/vue-query'; - -import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; -import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type'; -import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api'; -import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api'; -import type { PrivateWidgetGetParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/get'; -import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api'; -import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list'; -import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update'; -import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api'; -import type { PublicWidgetGetParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/get'; -import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; - -import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type'; - -const DEFAULT_LIST_DATA = { results: [] }; -// const DEFAULT_LOAD_DATA = { results: {}, labels_info: {}, data_info: {} }; -const STALE_TIME = 1000 * 60 * 5; - -interface UseWidgetFormQueryOptions { - widgetId?: ComputedRef; - preventLoad?: boolean; -} - -interface UseWidgetFormQueryReturn { - widget: ComputedRef; - dataTableList: ComputedRef; - dataTableListLoading: ComputedRef; - widgetLoading: ComputedRef; - keys: { - publicWidgetGetQueryKey: ComputedRef; - privateWidgetGetQueryKey: ComputedRef; - publicDataTableListQueryKey: ComputedRef; - privateDataTableListQueryKey: ComputedRef; - }; - api: { - publicWidgetAPI: ReturnType['publicWidgetAPI']; - privateWidgetAPI: ReturnType['privateWidgetAPI']; - publicDataTableAPI: ReturnType['publicDataTableAPI']; - privateDataTableAPI: ReturnType['privateDataTableAPI']; - }; - fetcher: { - updateDataTableFn: (params: DataTableUpdateParameters) => Promise; - updateWidgetFn: (params: WidgetUpdateParams) => Promise; - }; - queryClient: QueryClient; -} - -export const useWidgetFormQuery = ({ - widgetId, - preventLoad = false, -}: UseWidgetFormQueryOptions): UseWidgetFormQueryReturn => { - const { - publicWidgetAPI, - } = usePublicWidgetApi(); - const { - privateWidgetAPI, - } = usePrivateWidgetApi(); - const { - publicDataTableAPI, - } = usePublicDataTableApi(); - const { - privateDataTableAPI, - } = usePrivateDataTableApi(); - const queryClient = useQueryClient(); - - const isPrivate = computed(() => !!widgetId?.value?.startsWith('private')); - - /* Query Keys */ - const { key: publicWidgetGetQueryKey, params: publicWidgetGetParams } = useServiceQueryKey('dashboard', 'public-widget', 'get', { - contextKey: widgetId, - params: computed(() => ({ - widget_id: widgetId?.value as string, - })), - }); - const { key: privateWidgetGetQueryKey, params: privateWidgetGetParams } = useServiceQueryKey('dashboard', 'private-widget', 'get', { - contextKey: widgetId, - params: computed(() => ({ - widget_id: widgetId?.value as string, - })), - }); - const { key: publicDataTableListQueryKey, params: publicDataTableListParams } = useServiceQueryKey('dashboard', 'public-data-table', 'list', { - params: computed(() => ({ - widget_id: widgetId?.value as string, - })), - }); - const { key: privateDataTableListQueryKey, params: privateDataTableListParams } = useServiceQueryKey('dashboard', 'private-data-table', 'list', { - params: computed(() => ({ - widget_id: widgetId?.value as string, - })), - }); - - /* Querys */ - const publicWidgetQuery = useScopedQuery({ - queryKey: publicWidgetGetQueryKey, - queryFn: () => publicWidgetAPI.get(publicWidgetGetParams.value), - enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad), - staleTime: STALE_TIME, - }, ['DOMAIN', 'WORKSPACE']); - const privateWidgetQuery = useScopedQuery({ - queryKey: privateWidgetGetQueryKey, - queryFn: () => privateWidgetAPI.get(privateWidgetGetParams.value), - enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad), - staleTime: STALE_TIME, - }, ['WORKSPACE']); - const publicDataTableListQuery = useScopedQuery({ - queryKey: publicDataTableListQueryKey, - queryFn: () => publicDataTableAPI.list(publicDataTableListParams.value), - select: (data) => data?.results || [], - enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad), - initialData: DEFAULT_LIST_DATA, - initialDataUpdatedAt: 0, - staleTime: STALE_TIME, - }, ['DOMAIN', 'WORKSPACE']); - const privateDataTableListQuery = useScopedQuery({ - queryKey: privateDataTableListQueryKey, - queryFn: () => privateDataTableAPI.list(privateDataTableListParams.value), - select: (data) => data?.results || [], - enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad), - initialData: DEFAULT_LIST_DATA, - initialDataUpdatedAt: 0, - staleTime: STALE_TIME, - }, ['WORKSPACE']); - - /* Fetchers */ - const updateDataTableFn = (params: DataTableUpdateParameters): Promise => { - if (isPrivate.value) { - return privateDataTableAPI.update(params); - } - return publicDataTableAPI.update(params); - }; - const updateWidgetFn = (params: WidgetUpdateParams): Promise => { - if (isPrivate.value) { - return privateWidgetAPI.update(params); - } - return publicWidgetAPI.update(params); - }; - - /* State */ - const dataTableListLoading = computed(() => (isPrivate.value - ? privateDataTableListQuery.isFetching.value - : publicDataTableListQuery.isFetching.value)); - const widgetLoading = computed(() => (isPrivate.value - ? privateWidgetQuery.isFetching.value - : publicWidgetQuery.isFetching.value)); - - return { - widget: computed(() => (isPrivate.value ? privateWidgetQuery.data.value : publicWidgetQuery.data.value)), - dataTableList: computed(() => (isPrivate.value ? privateDataTableListQuery.data.value : publicDataTableListQuery.data.value) ?? []), - dataTableListLoading, - widgetLoading, - api: { - publicWidgetAPI, - privateWidgetAPI, - publicDataTableAPI, - privateDataTableAPI, - }, - keys: { - publicWidgetGetQueryKey, - privateWidgetGetQueryKey, - publicDataTableListQueryKey, - privateDataTableListQueryKey, - }, - fetcher: { - updateDataTableFn, - updateWidgetFn, - }, - queryClient, - }; -}; From 8826137c62b367ede1e83459cec6696075942897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Mon, 7 Apr 2025 09:24:42 +0900 Subject: [PATCH 15/18] fix(dashboard-query): separate dashboard query context Signed-off-by: piggggggggy --- .../composables/use-dashboard-get-query.ts | 111 ++++++++++++++++++ ....ts => use-dashboard-widget-list-query.ts} | 80 ++----------- 2 files changed, 122 insertions(+), 69 deletions(-) create mode 100644 apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts rename apps/web/src/services/dashboards/composables/{use-dashboard-detail-query.ts => use-dashboard-widget-list-query.ts} (50%) diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts new file mode 100644 index 0000000000..ac013223ad --- /dev/null +++ b/apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts @@ -0,0 +1,111 @@ +import type { ComputedRef } from 'vue'; +import { computed } from 'vue'; + +import type { QueryKey } from '@tanstack/vue-query'; + +import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; +import type { DashboardModel, DashboardUpdateParams } from '@/api-clients/dashboard/_types/dashboard-type'; +import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api'; +import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/get'; +import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update'; +import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model'; +import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api'; +import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/get'; +import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update'; +import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model'; +import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; + +const STALE_TIME = 1000 * 60 * 5; + +interface UseDashboardGetQueryOptions { + dashboardId: ComputedRef; +} + +interface UseDashboardGetQueryReturn { + dashboard: ComputedRef; + isLoading: ComputedRef; + isError: ComputedRef; + keys: { + publicDashboardGetQueryKey: ComputedRef; + privateDashboardGetQueryKey: ComputedRef; + }; + api: { + publicDashboardAPI: ReturnType['publicDashboardAPI']; + privateDashboardAPI: ReturnType['privateDashboardAPI']; + }; + fetcher: { + updateDashboardFn: (args: DashboardUpdateParams) => Promise + }; +} + +export const useDashboardGetQuery = ({ + dashboardId, +}: UseDashboardGetQueryOptions): UseDashboardGetQueryReturn => { + const { publicDashboardAPI } = usePublicDashboardApi(); + const { privateDashboardAPI } = usePrivateDashboardApi(); + + const isPrivate = computed(() => !!dashboardId.value?.startsWith('private')); + + + /* Query Keys */ + const { key: publicDashboardGetQueryKey, params: publicDashboardGetParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'get', { + contextKey: computed(() => dashboardId.value), + params: computed(() => ({ + dashboard_id: dashboardId.value as string, + })), + }); + const { key: privateDashboardGetQueryKey, params: privateDashboardGetParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'get', { + contextKey: computed(() => dashboardId.value), + params: computed(() => ({ + dashboard_id: dashboardId.value as string, + })), + }); + + /* Querys */ + const publicDashboardQuery = useScopedQuery({ + queryKey: publicDashboardGetQueryKey, + queryFn: () => publicDashboardAPI.get(publicDashboardGetParams.value), + enabled: computed(() => !!dashboardId.value && !isPrivate.value), + staleTime: STALE_TIME, + }, ['DOMAIN', 'WORKSPACE']); + const privateDashboardQuery = useScopedQuery({ + queryKey: privateDashboardGetQueryKey, + queryFn: () => privateDashboardAPI.get(privateDashboardGetParams.value), + enabled: computed(() => !!dashboardId.value && isPrivate.value), + staleTime: STALE_TIME, + }, ['WORKSPACE']); + + /* Functions */ + const updateDashboardFn = (params: DashboardUpdateParams): Promise => { + const _isPrivate = params.dashboard_id.startsWith('private'); + if (_isPrivate) { + return privateDashboardAPI.update(params as PrivateDashboardUpdateParameters); + } + return publicDashboardAPI.update(params as PublicDashboardUpdateParameters); + }; + + /* State */ + const isLoading = computed(() => (isPrivate.value + ? (privateDashboardQuery.isFetching.value) + : (publicDashboardQuery.isFetching.value))); + const isError = computed(() => (isPrivate.value + ? (privateDashboardQuery.isError.value) + : (publicDashboardQuery.isError.value))); + + return { + dashboard: computed(() => (isPrivate.value ? privateDashboardQuery.data?.value : publicDashboardQuery.data?.value)), + isLoading, + isError, + api: { + publicDashboardAPI, + privateDashboardAPI, + }, + keys: { + publicDashboardGetQueryKey, + privateDashboardGetQueryKey, + }, + fetcher: { + updateDashboardFn, + }, + }; +}; diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts similarity index 50% rename from apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts rename to apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts index d7e0aebabd..683e6ec0b0 100644 --- a/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts +++ b/apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts @@ -1,24 +1,14 @@ import type { ComputedRef } from 'vue'; import { computed } from 'vue'; -import type { QueryClient, QueryKey } from '@tanstack/vue-query'; -import { useQueryClient } from '@tanstack/vue-query'; +import type { QueryKey } from '@tanstack/vue-query'; import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query'; -import type { DashboardModel, DashboardUpdateParams } from '@/api-clients/dashboard/_types/dashboard-type'; import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type'; -import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api'; -import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/get'; -import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update'; -import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model'; import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api'; import type { PrivateWidgetListParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/list'; import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update'; import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model'; -import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api'; -import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/get'; -import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update'; -import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model'; import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api'; import type { PublicWidgetListParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/list'; import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update'; @@ -28,59 +18,37 @@ import { useServiceQueryKey } from '@/query/query-key/use-service-query-key'; const DEFAULT_LIST_DATA = { results: [] }; const STALE_TIME = 1000 * 60 * 5; -interface UseDashboardDetailQueryOptions { +interface UseDashboardWidgetListQueryOptions { dashboardId: ComputedRef; } -interface UseDashboardDetailQueryReturn { - dashboard: ComputedRef; +interface UseDashboardWidgetListQueryReturn { widgetList: ComputedRef<(PublicWidgetModel|PrivateWidgetModel)[]>; isLoading: ComputedRef; isError: ComputedRef; keys: { - publicDashboardGetQueryKey: ComputedRef; - privateDashboardGetQueryKey: ComputedRef; publicWidgetListQueryKey: ComputedRef; privateWidgetListQueryKey: ComputedRef; }; api: { - publicDashboardAPI: ReturnType['publicDashboardAPI']; - privateDashboardAPI: ReturnType['privateDashboardAPI']; publicWidgetAPI: ReturnType['publicWidgetAPI']; privateWidgetAPI: ReturnType['privateWidgetAPI']; }; fetcher: { - updateDashboardFn: (args: DashboardUpdateParams) => Promise updateWidgetFn: (args: WidgetUpdateParams) => Promise }; - queryClient: QueryClient; } -export const useDashboardDetailQuery = ({ +export const useDashboardWidgetListQuery = ({ dashboardId, -}: UseDashboardDetailQueryOptions): UseDashboardDetailQueryReturn => { - const { publicDashboardAPI } = usePublicDashboardApi(); - const { privateDashboardAPI } = usePrivateDashboardApi(); +}: UseDashboardWidgetListQueryOptions): UseDashboardWidgetListQueryReturn => { const { publicWidgetAPI } = usePublicWidgetApi(); const { privateWidgetAPI } = usePrivateWidgetApi(); - const queryClient = useQueryClient(); const isPrivate = computed(() => !!dashboardId.value?.startsWith('private')); /* Query Keys */ - const { key: publicDashboardGetQueryKey, params: publicDashboardGetParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'get', { - contextKey: computed(() => dashboardId.value), - params: computed(() => ({ - dashboard_id: dashboardId.value as string, - })), - }); - const { key: privateDashboardGetQueryKey, params: privateDashboardGetParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'get', { - contextKey: computed(() => dashboardId.value), - params: computed(() => ({ - dashboard_id: dashboardId.value as string, - })), - }); const { key: publicWidgetListQueryKey, params: publicWidgetListParams } = useServiceQueryKey('dashboard', 'public-widget', 'list', { params: computed(() => ({ dashboard_id: dashboardId.value as string, @@ -93,23 +61,11 @@ export const useDashboardDetailQuery = ({ }); /* Querys */ - const publicDashboardQuery = useScopedQuery({ - queryKey: publicDashboardGetQueryKey, - queryFn: () => publicDashboardAPI.get(publicDashboardGetParams.value), - enabled: computed(() => !!dashboardId.value && !isPrivate.value), - staleTime: STALE_TIME, - }, ['DOMAIN', 'WORKSPACE']); - const privateDashboardQuery = useScopedQuery({ - queryKey: privateDashboardGetQueryKey, - queryFn: () => privateDashboardAPI.get(privateDashboardGetParams.value), - enabled: computed(() => !!dashboardId.value && isPrivate.value), - staleTime: STALE_TIME, - }, ['WORKSPACE']); const publicWidgetListQuery = useScopedQuery({ queryKey: publicWidgetListQueryKey, queryFn: () => publicWidgetAPI.list(publicWidgetListParams.value), select: (data) => data?.results || [], - enabled: computed(() => !!dashboardId.value && publicDashboardQuery.isSuccess && !isPrivate.value), + enabled: computed(() => !!dashboardId.value && !isPrivate.value), initialData: DEFAULT_LIST_DATA, initialDataUpdatedAt: 0, staleTime: STALE_TIME, @@ -118,20 +74,13 @@ export const useDashboardDetailQuery = ({ queryKey: privateWidgetListQueryKey, queryFn: () => privateWidgetAPI.list(privateWidgetListParams.value), select: (data) => data?.results || [], - enabled: computed(() => !!dashboardId.value && privateDashboardQuery.isSuccess && isPrivate.value), + enabled: computed(() => !!dashboardId.value && isPrivate.value), initialData: DEFAULT_LIST_DATA, initialDataUpdatedAt: 0, staleTime: STALE_TIME, }, ['WORKSPACE']); /* Functions */ - const updateDashboardFn = (params: DashboardUpdateParams): Promise => { - const _isPrivate = params.dashboard_id.startsWith('private'); - if (_isPrivate) { - return privateDashboardAPI.update(params as PrivateDashboardUpdateParameters); - } - return publicDashboardAPI.update(params as PublicDashboardUpdateParameters); - }; const updateWidgetFn = (params: WidgetUpdateParams): Promise => { const _isPrivate = params.widget_id.startsWith('private'); if (_isPrivate) { @@ -142,33 +91,26 @@ export const useDashboardDetailQuery = ({ /* State */ const isLoading = computed(() => (isPrivate.value - ? (privateDashboardQuery.isFetching.value || privateWidgetListQuery.isFetching.value) - : (publicWidgetListQuery.isFetching.value || publicDashboardQuery.isFetching.value))); + ? privateWidgetListQuery.isFetching.value + : publicWidgetListQuery.isFetching.value)); const isError = computed(() => (isPrivate.value - ? (privateDashboardQuery.isError.value || privateWidgetListQuery.isError.value) - : (publicDashboardQuery.isError.value || publicWidgetListQuery.isError.value))); + ? privateWidgetListQuery.isError.value + : publicWidgetListQuery.isError.value)); return { - dashboard: computed(() => (isPrivate.value ? privateDashboardQuery.data?.value : publicDashboardQuery.data?.value)), widgetList: computed(() => (isPrivate.value ? privateWidgetListQuery.data?.value : publicWidgetListQuery.data?.value) ?? []), isLoading, isError, api: { - publicDashboardAPI, - privateDashboardAPI, publicWidgetAPI, privateWidgetAPI, }, keys: { - publicDashboardGetQueryKey, - privateDashboardGetQueryKey, publicWidgetListQueryKey, privateWidgetListQueryKey, }, fetcher: { - updateDashboardFn, updateWidgetFn, }, - queryClient, }; }; From f4d02eac49ac05f18f03ecd266d8d62aac459362 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Mon, 7 Apr 2025 09:25:06 +0900 Subject: [PATCH 16/18] fix(dashboard): apply changed dashboard query composables Signed-off-by: piggggggggy --- .../WidgetFormDataSourcePopover.vue | 13 +++-- .../WidgetFormDataTableCardFiltersItem.vue | 4 +- ...dgetFormDataTableCardTransformContents.vue | 4 +- ...tFormDataTableGlobalVariableViewButton.vue | 4 +- .../WidgetFormOverlayPreviewTable.vue | 4 +- .../_components/WidgetFormOverlayStep2.vue | 21 +++++--- .../DashboardDetailHeader.vue | 4 +- .../DashboardGlobalVariableFilterEnum.vue | 4 +- ...shboardGlobalVariableFilterNumberInput.vue | 4 +- ...hboardGlobalVariableFilterNumberSlider.vue | 4 +- ...DashboardGlobalVariableFilterReference.vue | 4 +- ...DashboardGlobalVariableFilterTextInput.vue | 4 +- .../dashboard-detail/DashboardLabels.vue | 4 +- .../DashboardLabelsButton.vue | 8 +-- .../DashboardManageVariableImportModal.vue | 12 ++--- .../DashboardManageVariableOverlay.vue | 8 +-- .../DashboardNameEditModal.vue | 4 +- .../DashboardRefreshDropdown.vue | 9 ++-- .../DashboardReorderSidebar.vue | 16 +++--- .../DashboardShareWithCodeModal.vue | 5 +- .../DashboardToolsetDateDropdown.vue | 8 +-- .../DashboardVariablesFormModal.vue | 8 +-- .../DashboardVariablesMoreButton.vue | 8 +-- .../dashboard-detail/DashboardVariablesV2.vue | 4 +- .../DashboardWidgetContainerV2.vue | 53 +++++++++++-------- .../components/legacy/DashboardVariables.vue | 4 +- .../legacy/DashboardWidgetContainer.vue | 4 +- .../components/legacy/WidgetFullModeModal.vue | 4 +- .../composables/use-dashboard-manageable.ts | 4 +- .../dashboards/pages/DashboardDetailPage.vue | 39 ++++++++------ .../project/v1/pages/ProjectDashboardPage.vue | 35 +++++++----- 31 files changed, 177 insertions(+), 134 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue index b61b301797..445cfc3958 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue @@ -47,7 +47,8 @@ import type { DataTableDataType, DataTableSourceType, DataTableOperator, DataTableAddOptions, DataTableTransformOptions, } from '@/common/modules/widgets/types/widget-model'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; +import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query'; const widgetGenerateStore = useWidgetGenerateStore(); const widgetGenerateState = widgetGenerateStore.state; @@ -77,8 +78,12 @@ const queryClient = useQueryClient(); const { dashboard, - keys, -} = useDashboardDetailQuery({ +} = useDashboardGetQuery({ + dashboardId, +}); +const { + keys: widgetKeys, +} = useDashboardWidgetListQuery({ dashboardId, }); @@ -209,7 +214,7 @@ const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutatio mutationFn: widgetCreateFn, onSuccess: (data) => { const _isPrivate = dashboardId.value?.startsWith('private'); - const widgetListQueryKey = _isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey; + const widgetListQueryKey = _isPrivate ? widgetKeys.privateWidgetListQueryKey : widgetKeys.publicWidgetListQueryKey; queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse) => (oldData.results?.length ? { ...oldData, results: [...oldData.results, data], } : { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue index 619645bdd0..d95158238b 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue @@ -26,7 +26,7 @@ import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/t import { blue, gray } from '@/styles/colors'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper'; @@ -46,7 +46,7 @@ const emit = defineEmits<{(e: 'delete'): void; }>(); const operatorButtonRef = ref(null); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); const state = reactive({ diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue index b7340d2363..7b37cb4929 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue @@ -62,7 +62,7 @@ import type { JoinOptions, ValueMappingOptions, ConcatOptions, AggregateOptions, AggregateFunction, } from '@/common/modules/widgets/types/widget-model'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; @@ -85,7 +85,7 @@ const widgetGenerateState = widgetGenerateStore.state; /* Querys */ const { dashboard, -} = useDashboardDetailQuery({ +} = useDashboardGetQuery({ dashboardId, }); const { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue index fcf1430937..7092613f88 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue @@ -7,13 +7,13 @@ import { PButton, PPopover, PCopyButton } from '@cloudforet/mirinae'; import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper'; const route = useRoute(); const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue index 7f89e0c01a..fcda190860 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue @@ -40,7 +40,7 @@ import { gray, white } from '@/styles/colors'; import { SIZE_UNITS } from '@/services/asset-inventory/constants/asset-analysis-constant'; import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant'; import type { Granularity } from '@/services/cost-explorer/types/cost-explorer-query-type'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; @@ -72,7 +72,7 @@ const { } = useWidgetDataTableListQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue index 67a226ef3e..66977f6351 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue @@ -4,7 +4,7 @@ import { } from 'vue'; import { useRoute } from 'vue-router/composables'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { cloneDeep, isEqual } from 'lodash'; import { @@ -37,7 +37,8 @@ import type { WidgetType } from '@/common/modules/widgets/types/widget-model'; import DashboardToolsetDateDropdown from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue'; import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; +import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query'; import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store'; import { useAllReferenceTypeInfoStore, @@ -66,11 +67,14 @@ const storeState = reactive({ /* Query */ const { dashboard, + keys: dashboardKeys, + fetcher: dashboardFetcher, +} = useDashboardGetQuery({ + dashboardId, +}); +const { widgetList, - keys, - fetcher, - queryClient, -} = useDashboardDetailQuery({ +} = useDashboardWidgetListQuery({ dashboardId, }); const { @@ -81,6 +85,7 @@ const { } = useWidgetQuery({ widgetId: computed(() => widgetGenerateState.widgetId), }); +const queryClient = useQueryClient(); const { dataTableList, @@ -209,9 +214,9 @@ const updateWidget = async () => { const { mutate: updateDashboard } = useMutation( { - mutationFn: fetcher.updateDashboardFn, + mutationFn: dashboardFetcher.updateDashboardFn, onSuccess: (data) => { - const dashboardQueryKey = state.isPrivate ? keys.privateDashboardGetQueryKey : keys.publicDashboardGetQueryKey; + const dashboardQueryKey = state.isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey; queryClient.setQueryData(dashboardQueryKey.value, () => data); }, }, diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue index 0c8de56f7a..1fc3712ea1 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue @@ -19,8 +19,8 @@ import { gray } from '@/styles/colors'; import DashboardControlButtons from '@/services/dashboards/components/dashboard-detail/DashboardControlButtons.vue'; import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue'; import { useDashboardControlMenuItems } from '@/services/dashboards/composables/use-dashboard-control-menu-items'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable'; import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query'; import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store'; @@ -47,7 +47,7 @@ const { } = useDashboardFolderQuery(); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId: computed(() => props.dashboardId), }); const { isManageable } = useDashboardManageable({ diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue index f0a4d6fc77..a086f0d9c2 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue @@ -21,7 +21,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ import { useProxyValue } from '@/common/composables/proxy-state'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; interface Props { @@ -37,7 +37,7 @@ const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue index 339da945da..5eabc185cd 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue @@ -22,7 +22,7 @@ import { i18n } from '@/translations'; import { useProxyValue } from '@/common/composables/proxy-state'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; interface Props { variable: DashboardGlobalVariable; @@ -34,7 +34,7 @@ const props = defineProps(); const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>(); const route = useRoute(); const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue index 55638d561a..e66dbfc921 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue @@ -17,7 +17,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ import { useProxyValue } from '@/common/composables/proxy-state'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; interface Props { variable: DashboardGlobalVariable; @@ -29,7 +29,7 @@ const props = defineProps(); const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>(); const route = useRoute(); const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue index b12b896e3a..7dad113689 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue @@ -37,7 +37,7 @@ import { useProxyValue } from '@/common/composables/proxy-state'; import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue'; import { getWorkspaceInfo } from '@/services/advanced/composables/refined-table-data'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; interface Props { variable: DashboardGlobalVariable; @@ -51,7 +51,7 @@ const userWorkspaceStore = useUserWorkspaceStore(); const workspaceStoreGetters = userWorkspaceStore.getters; const route = useRoute(); const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue index 9f9c5cceef..50e106b880 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue @@ -18,7 +18,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ import { useProxyValue } from '@/common/composables/proxy-state'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; interface Props { variable: DashboardGlobalVariable; @@ -30,7 +30,7 @@ const props = defineProps(); const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>(); const route = useRoute(); const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); const state = reactive({ diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue index f0aca7065d..c75bb12d9a 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue @@ -15,7 +15,7 @@ import { i18n } from '@/translations'; import { useFormValidator } from '@/common/composables/form-validator'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; interface Props { @@ -43,7 +43,7 @@ const { const route = useRoute(); const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue index 1d81484692..927dfabbe4 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue @@ -2,7 +2,7 @@ import { onClickOutside } from '@vueuse/core'; import { computed, reactive, ref } from 'vue'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { PButton, PBadge, PPopover } from '@cloudforet/mirinae'; @@ -12,7 +12,7 @@ import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashbo import ErrorHandler from '@/common/composables/error/errorHandler'; import DashboardLabels from '@/services/dashboards/components/dashboard-detail/DashboardLabels.vue'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable'; @@ -28,13 +28,13 @@ const { dashboard, fetcher, keys, - queryClient, -} = useDashboardDetailQuery({ +} = useDashboardGetQuery({ dashboardId: computed(() => props.dashboardId), }); const { isManageable } = useDashboardManageable({ dashboardId: computed(() => props.dashboardId), }); +const queryClient = useQueryClient(); const state = reactive({ visible: false, dashboardLabels: computed(() => dashboard.value?.labels || []), diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue index ad1d134f15..a1abf649b3 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue @@ -2,7 +2,7 @@ import { computed, reactive, watch } from 'vue'; import { useRoute } from 'vue-router/composables'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { cloneDeep } from 'lodash'; import { @@ -25,8 +25,8 @@ import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSB import DashboardManageVariableImportModalTree from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query'; import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper'; @@ -56,10 +56,10 @@ const { dashboard, fetcher, keys, - queryClient, -} = useDashboardDetailQuery({ +} = useDashboardGetQuery({ dashboardId, }); +const queryClient = useQueryClient(); const storeState = reactive({ isAdminMode: computed(() => appContextStore.getters.isAdminMode), @@ -173,7 +173,7 @@ watch(() => state.selectedDashboardId, () => { -
route.params.dashboardId); const dashboardDetailStore = useDashboardDetailInfoStore(); const dashboardDetailState = dashboardDetailStore.state; const dashboardDetailGetters = dashboardDetailStore.getters; -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore(); diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue b/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue index bbef35f2ed..ce66b7c0f2 100644 --- a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue +++ b/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue @@ -15,7 +15,7 @@ import WidgetFullModeModal from '@/services/dashboards/components/legacy/WidgetF import { useDashboardContainerWidth, } from '@/services/dashboards/composables/use-dashboard-container-width'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; import type { ReformedWidgetInfo } from '@/services/dashboards/composables/use-reformed-widget-info-list'; import { useReformedWidgetInfoList, @@ -36,7 +36,7 @@ const dashboardDetailGetters = dashboardDetailStore.getters; const dashboardDetailState = dashboardDetailStore.state; const route = useRoute(); const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue b/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue index b06a6159ef..1bf3347ee2 100644 --- a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue +++ b/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue @@ -23,7 +23,7 @@ import { gray } from '@/styles/colors'; import DashboardToolsetDateDropdown from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue'; import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; import { getDashboardWidgetInfoList } from '@/services/dashboards/helpers/dashboard-widget-info-helper'; import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store'; import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store'; @@ -60,7 +60,7 @@ const widgetFormGetters = widgetFormStore.getters; const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore(); const route = useRoute(); const dashboardId = computed(() => route.params.dashboardId); -const { dashboard } = useDashboardDetailQuery({ +const { dashboard } = useDashboardGetQuery({ dashboardId, }); diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts index 4d6b9050e4..b1573ac620 100644 --- a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts +++ b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts @@ -7,7 +7,7 @@ import { ROLE_TYPE } from '@/api-clients/identity/role/constant'; import { useAppContextStore } from '@/store/app-context/app-context-store'; import { useUserStore } from '@/store/user/user-store'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; interface UseDashboardManageableOptions { dashboardId: ComputedRef; @@ -26,7 +26,7 @@ export const useDashboardManageable = ({ dashboardId }: UseDashboardManageableOp isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER), }); - const { dashboard } = useDashboardDetailQuery({ + const { dashboard } = useDashboardGetQuery({ dashboardId: computed(() => dashboardId.value), }); diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue index 882957efd2..461fbe6d7e 100644 --- a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue +++ b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue @@ -5,7 +5,7 @@ import { } from 'vue'; import { useRouter } from 'vue-router/composables'; -import { useMutation } from '@tanstack/vue-query'; +import { useMutation, useQueryClient } from '@tanstack/vue-query'; import { PDivider, PI, @@ -33,8 +33,9 @@ import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-det import DashboardWidgetContainerV2 from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue'; import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue'; import DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable'; +import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query'; import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant'; import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant'; import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store'; @@ -57,15 +58,23 @@ const router = useRouter(); /* Query */ const { dashboard, + isError: dashboardError, + isLoading: dashboardLoading, + keys: dashboardKeys, + fetcher: dashboardFetcher, +} = useDashboardGetQuery({ + dashboardId: computed(() => props.dashboardId), +}); +const { widgetList, - isError, - isLoading, - keys, - fetcher, - queryClient, -} = useDashboardDetailQuery({ + isLoading: widgetLoading, + isError: widgetError, + keys: widgetListKeys, +} = useDashboardWidgetListQuery({ dashboardId: computed(() => props.dashboardId), }); + +const queryClient = useQueryClient(); const { isManageable } = useDashboardManageable({ dashboardId: computed(() => props.dashboardId), }); @@ -83,7 +92,7 @@ const state = reactive({ const handleRefresh = async () => { if (dashboard.value?.version !== '1.0') { const isPrivate = props.dashboardId.startsWith('private'); - const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey; + const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey; await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value }); } // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -100,10 +109,10 @@ const handleUpdateDashboardVariables = (params) => { const { mutate: updateDashboard, isPending: dashboardUpdateLoading } = useMutation( { - mutationFn: fetcher.updateDashboardFn, + mutationFn: dashboardFetcher.updateDashboardFn, onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => { const isPrivate = _dashboard.dashboard_id.startsWith('private'); - const dashboardQueryKey = isPrivate ? keys.privateDashboardGetQueryKey : keys.publicDashboardGetQueryKey; + const dashboardQueryKey = isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey; queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => { if (!oldDashboard) return _dashboard; return { @@ -142,9 +151,9 @@ watch(widgetList, (_widgetList) => { dashboardDetailStore.setDashboardWidgets(_widgetList); } }); -watch(isError, (error) => { - if (error) { - ErrorHandler.handleError(error); +watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => { + if (_dashboardError || _widgetError) { + ErrorHandler.handleError(_dashboardError || _widgetError); const dashboardRouteName = state.isAdminMode ? ADMIN_DASHBOARDS_ROUTE._NAME : DASHBOARDS_ROUTE._NAME; router.push({ name: dashboardRouteName }); } @@ -192,7 +201,7 @@ onUnmounted(() => {
diff --git a/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue b/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue index 2ae48b1e25..a08f99ecd7 100644 --- a/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue +++ b/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue @@ -6,6 +6,8 @@ import { } from 'vue'; import { useRoute, useRouter } from 'vue-router/composables'; +import { useQueryClient } from '@tanstack/vue-query'; + import { PSkeleton } from '@cloudforet/mirinae'; @@ -19,7 +21,8 @@ import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-det import DashboardWidgetContainerV2 from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue'; import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue'; -import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query'; +import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query'; +import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query'; import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store'; import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant'; @@ -40,17 +43,23 @@ const router = useRouter(); /* Query */ const { dashboard, + isError: dashboardError, + isLoading: dashboardLoading, +} = useDashboardGetQuery({ + dashboardId: computed(() => route.params.dashboardId), +}); +const { widgetList, - isError, - isLoading, - keys, - queryClient, -} = useDashboardDetailQuery({ + isLoading: widgetLoading, + isError: widgetError, + keys: widgetListKeys, +} = useDashboardWidgetListQuery({ dashboardId: computed(() => route.params.dashboardId), }); +const queryClient = useQueryClient(); const handleRefresh = async () => { - await queryClient.invalidateQueries({ queryKey: keys.publicWidgetListQueryKey.value }); + await queryClient.invalidateQueries({ queryKey: widgetListKeys.publicWidgetListQueryKey.value }); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget(); @@ -69,9 +78,9 @@ watch(widgetList, (_widgetList) => { dashboardDetailStore.setDashboardWidgets(_widgetList); } }); -watch(isError, (error) => { - if (error) { - ErrorHandler.handleError(error); +watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => { + if (_dashboardError || _widgetError) { + ErrorHandler.handleError(_dashboardError || _widgetError); router.push({ name: PROJECT_ROUTE_V1.DETAIL._NAME }); } }); @@ -105,18 +114,18 @@ onUnmounted(() => {
-
From 042f478e47e2b663216b4612f87b4cdbf6f316a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Mon, 7 Apr 2025 09:50:25 +0900 Subject: [PATCH 17/18] chore: small fix Signed-off-by: piggggggggy --- .../dashboards/composables/use-dashboard-search-query.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts index 333b3bc2e3..8e65be0a9a 100644 --- a/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts +++ b/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts @@ -65,10 +65,7 @@ export const useDashboardSearchQuery = ({ searchFilters }: UseDashboardSearchQue /* Querys */ const publicDashboardIdListQuery = useScopedQuery, unknown, string[]>({ queryKey: publicDashboardListQueryKey, - queryFn: () => { - console.debug('searchQuery', searchQuery.value, publicDashboardListParams.value); - return publicDashboardAPI.list(publicDashboardListParams.value); - }, + queryFn: () => publicDashboardAPI.list(publicDashboardListParams.value), select: (data) => data?.results?.map((item) => item.dashboard_id) ?? [], initialData: DEFAULT_LIST_DATA, initialDataUpdatedAt: 0, From 4640bd9e5289defb5f69abf364c0f119c375f5ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= Date: Mon, 7 Apr 2025 09:55:22 +0900 Subject: [PATCH 18/18] chore: remove log Signed-off-by: piggggggggy --- .../dashboards/composables/use-dashboard-search-query.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts index 8e65be0a9a..877f5ff1aa 100644 --- a/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts +++ b/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts @@ -84,7 +84,6 @@ export const useDashboardSearchQuery = ({ searchFilters }: UseDashboardSearchQue watch(searchFilters, (_searchFilters) => { searchApiQueryHelper.setFilters(_searchFilters); - console.debug('searchFilters', searchApiQueryHelper.data, _searchFilters); searchQuery.value = searchApiQueryHelper.data; }, { immediate: true });