Skip to content

Commit da99b18

Browse files
piggggggggypiggggggggy
committed
chore: remove shared dashboard concern from common widget modules
Signed-off-by: samuel.park <[email protected]>
1 parent 7aefa01 commit da99b18

16 files changed

+152
-95
lines changed

Diff for: ‎apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts

-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
// Base Model
2-
import type { GLOBAL_VARIABLE_FILTER_TYPE_MAP } from '@/services/_shared/dashboard/dashboard-detail/constants/dashboard-global-variable';
3-
42
interface DashboardGlobalVariableBase {
53
key: string; // new_variable
64
name: string; // New Variable
@@ -79,4 +77,3 @@ export type DashboardGlobalVariable =
7977

8078

8179

82-
export type GlobalVariableFilterType = keyof typeof GLOBAL_VARIABLE_FILTER_TYPE_MAP;

Diff for: ‎apps/web/src/common/modules/widgets/WidgetFormOverlayLayout.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
import { watch } from 'vue';
3+
4+
import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
5+
6+
import WidgetFormOverlay from '@/common/modules/widgets/_components/WidgetFormOverlay.vue';
7+
import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
8+
9+
interface Props {
10+
dashboard?: DashboardModel;
11+
}
12+
13+
const props = defineProps<Props>();
14+
15+
const widgetContextStore = useWidgetContextStore();
16+
17+
18+
watch(() => props.dashboard, (dashboard) => {
19+
widgetContextStore.setDashboard(dashboard);
20+
}, { immediate: true, deep: true });
21+
22+
</script>
23+
24+
<template>
25+
<widget-form-overlay />
26+
</template>

Diff for: ‎apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue

+24-29
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
computed, reactive, watch,
44
} from 'vue';
55
import type { TranslateResult } from 'vue-i18n';
6-
import { useRoute } from 'vue-router/composables';
76
87
import { useMutation, useQueryClient } from '@tanstack/vue-query';
98
@@ -13,6 +12,7 @@ import {
1312
1413
import type { WidgetCreateParams, WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
1514
import type { DataTableAddParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/add';
15+
import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
1616
import { i18n } from '@/translations';
1717
1818
import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -41,21 +41,22 @@ import {
4141
DATA_TABLE_TYPE, TRANSFORM_DATA_TABLE_DEFAULT_OPTIONS,
4242
} from '@/common/modules/widgets/_constants/data-table-constant';
4343
import { getDuplicatedDataTableName } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
44+
import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
4445
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
4546
import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
4647
import type {
4748
DataTableDataType, DataTableSourceType, DataTableOperator, DataTableAddOptions, DataTableTransformOptions,
4849
} from '@/common/modules/widgets/types/widget-model';
4950
50-
import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
51-
import { useDashboardWidgetListQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query';
5251
5352
const widgetGenerateStore = useWidgetGenerateStore();
5453
const widgetGenerateState = widgetGenerateStore.state;
5554
const allReferenceStore = useAllReferenceStore();
55+
const widgetContextStore = useWidgetContextStore();
56+
const widgetContextState = widgetContextStore.state;
57+
const widgetContextGetters = widgetContextStore.getters;
5658
const userStore = useUserStore();
57-
const route = useRoute();
58-
const dashboardId = computed(() => route.params.dashboardId);
59+
const dashboardId = computed(() => widgetContextGetters.dashboardId);
5960
6061
const emit = defineEmits<{(e: 'scroll'): void;}>();
6162
@@ -76,18 +77,6 @@ const {
7677
});
7778
const queryClient = useQueryClient();
7879
79-
const {
80-
dashboard,
81-
} = useDashboardGetQuery({
82-
dashboardId,
83-
});
84-
const {
85-
keys: widgetKeys,
86-
} = useDashboardWidgetListQuery({
87-
dashboardId,
88-
});
89-
90-
9180
const storeState = reactive({
9281
metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
9382
costDataSources: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
@@ -204,30 +193,33 @@ const state = reactive({
204193
});
205194
206195
/* Api */
196+
const { withSuffix: privateWidgetListWithSuffix } = useServiceQueryKey('dashboard', 'private-widget', 'list');
197+
const { withSuffix: publicWidgetListWithSuffix } = useServiceQueryKey('dashboard', 'public-widget', 'list');
198+
207199
const widgetCreateFn = (params: WidgetCreateParams): Promise<WidgetModel> => {
208-
if (dashboardId.value?.startsWith('private')) {
200+
if (!params.dashboard_id) {
201+
throw new Error('dashboardId is undefined');
202+
}
203+
204+
if (params.dashboard_id.startsWith('private')) {
209205
return widgetApi.privateWidgetAPI.create(params);
210206
}
211207
return widgetApi.publicWidgetAPI.create(params);
212208
};
213209
const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutation({
214210
mutationFn: widgetCreateFn,
215-
onSuccess: (data) => {
216-
const _isPrivate = dashboardId.value?.startsWith('private');
217-
const widgetListQueryKey = _isPrivate ? widgetKeys.privateWidgetListQueryKey : widgetKeys.publicWidgetListQueryKey;
218-
queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse<WidgetModel>) => (oldData.results?.length ? {
219-
...oldData, results: [...oldData.results, data],
220-
} : {
221-
...oldData, results: [data],
222-
}));
211+
onSuccess: (data, variables) => {
212+
const _isPrivate = variables.dashboard_id.startsWith('private');
213+
const widgetListQueryKey = _isPrivate ? privateWidgetListWithSuffix(variables.dashboard_id) : publicWidgetListWithSuffix(variables.dashboard_id);
214+
queryClient.invalidateQueries({ queryKey: widgetListQueryKey });
223215
widgetGenerateStore.setWidgetFormInfo(data);
224216
},
225217
onError: (e) => {
226218
ErrorHandler.handleError(e);
227219
},
228220
});
229221
const dataTableAddFn = (params: DataTableAddParameters): Promise<DataTableModel> => {
230-
if (dashboardId.value?.startsWith('private')) {
222+
if (params.widget_id.startsWith('private')) {
231223
return dataTableApi.privateDataTableAPI.add(params);
232224
}
233225
return dataTableApi.publicDataTableAPI.add(params);
@@ -297,10 +289,13 @@ const handleSelectPopperCondition = (condition: DataTableDataType) => {
297289
state.selectedPopperCondition = condition;
298290
};
299291
const handleConfirmDataSource = async () => {
292+
if (!dashboardId.value) {
293+
throw new Error('dashboardId is undefined');
294+
}
300295
// create widget
301296
if (widgetGenerateState.overlayType === 'ADD' && !widgetGenerateState.widgetId) {
302297
await createWidget({
303-
dashboard_id: dashboardId.value as string,
298+
dashboard_id: dashboardId.value,
304299
tags: { created_by: userStore.state.userId },
305300
widget_type: 'table',
306301
});
@@ -355,7 +350,7 @@ const handleConfirmDataSource = async () => {
355350
356351
const mergedParams = {
357352
...addParameters,
358-
vars: dashboard.value?.vars || {},
353+
vars: widgetContextState.dashboard?.vars || {},
359354
};
360355
if (state.selectedDataSourceDomain === DATA_SOURCE_DOMAIN.COST) {
361356
mergedParams.options = costOptions;

Diff for: ‎apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue

+6-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { onClickOutside } from '@vueuse/core/index';
44
import {
55
computed, onMounted, reactive, ref,
66
} from 'vue';
7-
import { useRoute } from 'vue-router/composables';
87
98
import { isArray } from 'lodash';
109
@@ -22,11 +21,11 @@ import {
2221
KEYWORD_FILTER_DISABLED_KEYS,
2322
} from '@/common/modules/widgets/_constants/data-table-constant';
2423
import { isGlobalVariableFormat } from '@/common/modules/widgets/_helpers/global-variable-helper';
24+
import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
2525
import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/types/widget-data-table-type';
2626
2727
import { blue, gray } from '@/styles/colors';
2828
29-
import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
3029
import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
3130
3231
@@ -39,16 +38,15 @@ interface Props {
3938
}
4039
4140
const props = defineProps<Props>();
42-
const route = useRoute();
43-
const dashboardId = computed(() => route.params.dashboardId);
4441
const emit = defineEmits<{(e: 'delete'): void;
4542
(e: 'update:selected-filter', filter: DataTableQueryFilterForDropdown): void;
4643
}>();
44+
45+
const widgetContextStore = useWidgetContextStore();
46+
const widgetContextState = widgetContextStore.state;
47+
4748
const operatorButtonRef = ref<HTMLElement | null>(null);
4849
49-
const { dashboard } = useDashboardGetQuery({
50-
dashboardId,
51-
});
5250
const state = reactive({
5351
visibleMenu: false,
5452
operatorMenu: computed<MenuItem[]>(() => {
@@ -102,7 +100,7 @@ const state = reactive({
102100
selectedOperator: [] as MenuItem[],
103101
proxySelectedFilter: useProxyValue<DataTableQueryFilterForDropdown>('selectedFilter', props, emit),
104102
globalVariableItems: computed<MenuItem[]>(() => {
105-
const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboard.value?.vars_schema?.properties ?? {});
103+
const _refinedProperties: DashboardGlobalVariable[] = Object.values(widgetContextState.dashboard?.vars_schema?.properties ?? {});
106104
const _orderedVariables = getOrderedGlobalVariables(_refinedProperties);
107105
return _orderedVariables.map((variable) => ({
108106
name: `{{ global.${variable.key} }}`,

Diff for: ‎apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -214,10 +214,10 @@ const syncDataTableList = async (data: DataTableModel) => {
214214
height="1.25rem"
215215
/>
216216
<p-tooltip class="data-table-name"
217-
:contents="storeState.currentDataTable.name"
217+
:contents="storeState.currentDataTable?.name"
218218
>
219219
<p>
220-
{{ storeState.currentDataTable.name }}
220+
{{ storeState.currentDataTable?.name }}
221221
</p>
222222
</p-tooltip>
223223
<p-icon-button class="edit-button"

Diff for: ‎apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue

+7-13
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import {
33
computed, defineExpose, onMounted, reactive, watch,
44
} from 'vue';
5-
import { useRoute } from 'vue-router/composables';
65
76
import { useMutation, useQueryClient } from '@tanstack/vue-query';
87
import {
@@ -51,6 +50,7 @@ import {
5150
DATA_TABLE_TYPE, DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
5251
} from '@/common/modules/widgets/_constants/data-table-constant';
5352
import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-options-helper';
53+
import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
5454
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
5555
import type {
5656
DataTableAlertModalMode, TransformDataTableInfo,
@@ -62,10 +62,6 @@ import type {
6262
JoinOptions, ValueMappingOptions, ConcatOptions, AggregateOptions, AggregateFunction,
6363
} from '@/common/modules/widgets/types/widget-model';
6464
65-
import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
66-
67-
68-
6965
7066
7167
@@ -77,17 +73,12 @@ interface Props {
7773
type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
7874
7975
const props = defineProps<Props>();
80-
const route = useRoute();
81-
const dashboardId = computed(() => route.params.dashboardId);
76+
const widgetContextStore = useWidgetContextStore();
77+
const widgetContextState = widgetContextStore.state;
8278
8379
const widgetGenerateStore = useWidgetGenerateStore();
8480
const widgetGenerateState = widgetGenerateStore.state;
8581
/* Querys */
86-
const {
87-
dashboard,
88-
} = useDashboardGetQuery({
89-
dashboardId,
90-
});
9182
const {
9283
widget,
9384
keys: widgetKeys,
@@ -359,11 +350,14 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
359350
}
360351
};
361352
if (firstUpdating) {
353+
if (!widgetGenerateState.widgetId) {
354+
throw new Error('Widget ID is required');
355+
}
362356
const createParams = {
363357
name: state.dataTableName,
364358
widget_id: widgetGenerateState.widgetId,
365359
operator: state.operator,
366-
vars: dashboard.value?.vars || {},
360+
vars: widgetContextState.dashboard?.vars || {},
367361
options: { [state.operator]: options() },
368362
};
369363
const dataTable = await transformDataTableFn(createParams);

Diff for: ‎apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const getInvalidFieldNameText = (fieldName?: string): TranslateResult|undefined
119119
if (!isFieldNameValid(fieldName, storeState.currentDataTable)) return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DUPLICATED_FIELD_NAME');
120120
return undefined;
121121
};
122-
const isFieldNameValid = (fieldName: string, dataTable?: PublicDataTableModel|PrivateDataTableModel): boolean => {
122+
const isFieldNameValid = (fieldName: string, dataTable?: Partial<PublicDataTableModel|PrivateDataTableModel>): boolean => {
123123
if (!dataTable) return true;
124124
const _dataInfoKeys = Object.keys(dataTable.data_info || {});
125125
return !_dataInfoKeys.includes(fieldName);

Diff for: ‎apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
11
<script setup lang="ts">
22
33
import { computed, reactive } from 'vue';
4-
import { useRoute } from 'vue-router/composables';
54
65
import { PButton, PPopover, PCopyButton } from '@cloudforet/mirinae';
76
87
import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
98
10-
import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
11-
import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
9+
import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
1210
13-
const route = useRoute();
14-
const dashboardId = computed(() => route.params.dashboardId);
11+
import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
1512
16-
const { dashboard } = useDashboardGetQuery({
17-
dashboardId,
18-
});
13+
const widgetContextStore = useWidgetContextStore();
14+
const widgetContextState = widgetContextStore.state;
1915
2016
const state = reactive({
2117
popperVisible: false,
2218
variableItems: computed<DashboardGlobalVariable[]>(() => {
23-
const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboard.value?.vars_schema?.properties || {})
19+
const _refinedProperties: DashboardGlobalVariable[] = Object.values(widgetContextState.dashboard?.vars_schema?.properties || {})
2420
.map((property) => ({
2521
key: property.key,
2622
name: property.name,

Diff for: ‎apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue

-3
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,6 @@ import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-
2828
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
2929
import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
3030
31-
32-
33-
3431
const widgetGenerateStore = useWidgetGenerateStore();
3532
const widgetGenerateGetters = widgetGenerateStore.getters;
3633
const widgetGenerateState = widgetGenerateStore.state;

0 commit comments

Comments
 (0)