fix(widget-header): apply new widget header planning

Signed-off-by: samuel.park <samuel.park@megazone.com>
cloudforet-io · Jan 7, 2025 · 2c91733 · 2c91733
1 parent b355b2d
commit 2c91733
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
@@ -99,6 +99,11 @@ const handleClickContinue = async () => {
             if (widgetGenerateState.widget?.state === 'ACTIVE') {
                 _updateParams.state = 'INACTIVE';
             }
+            if (widgetGenerateState.widget?.options?.widgetHeader) {
+                _updateParams.options = {
+                    widgetHeader: widgetGenerateState.widget?.options?.widgetHeader,
+                };
+            }
             await widgetGenerateStore.updateWidget(_updateParams);
         }
         widgetGenerateStore.setOverlayStep(2);

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
@@ -155,8 +155,6 @@ const changeWidgetType = (widgetName: string) => {
     checkDefaultValidation();
 };
 
-// const checkFormDependencies = (changedFieldName: string):string[] => state.widgetConfigDependencies[changedFieldName] || [];
-
 onMounted(() => {
     if (widgetGenerateGetters.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT && UNSUPPORTED_CHARTS_IN_PIVOT.includes(widgetGenerateState.selectedWidgetName)) {
         changeWidgetType('table');

diff --git a/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts b/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
@@ -315,7 +315,14 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
                         vars: dashboardDetailGetters.dashboardInfo?.vars || {},
                     });
                     if (state.widget?.state === 'ACTIVE') {
-                        await actions.updateWidget({ state: 'INACTIVE' });
+                        await actions.updateWidget({
+                            state: 'INACTIVE',
+                            options: {
+                                widgetHeader: {
+                                    ...state.widget?.options?.widgetHeader,
+                                },
+                            },
+                        });
                     }
                 }
                 state.dataTables = state.dataTables.map((dataTable) => (dataTable.data_table_id === result.data_table_id ? result : dataTable));

diff --git a/...src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts b/...src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
@@ -90,7 +90,9 @@ export const widgetFieldDefaultValueMap: DefaultValueRegistry = {
     },
     groupBy: {},
     widgetHeader: {
-        toggleValue: false,
+        toggleValue: true,
+        title: '',
+        description: '',
     },
     icon: {
         toggleValue: true,
@@ -338,7 +340,14 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
 
         return result;
     },
-    widgetHeader: () => cloneDeep(widgetFieldDefaultValueMap.widgetHeader),
+    widgetHeader: (widgetConfig) => {
+        const result = cloneDeep(widgetFieldDefaultValueMap.widgetHeader);
+
+        return {
+            ...result,
+            title: widgetConfig.meta.title,
+        };
+    },
     icon: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const iconOptions = (_fieldsSchema.icon?.options ?? {}) as IconOptions;

diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
@@ -116,14 +116,20 @@ export default class WidgetFieldValueManager {
 
     updateWidgetType(newWidgetConfig: WidgetConfig): void {
         this.updateWidgetConfig(newWidgetConfig);
-        this.updateModifiedData(WidgetFieldValueManager.applyDefaultValue({}, newWidgetConfig, this.dataTable));
+        const originDataWithExistingHeaderValue = {
+            widgetHeader: this.originData.value.widgetHeader,
+        };
+        this.updateModifiedData(WidgetFieldValueManager.applyDefaultValue(originDataWithExistingHeaderValue, newWidgetConfig, this.dataTable));
         this.validationErrors = {};
     }
 
     updateDataTableAndOriginData(dataTable: PublicDataTableModel|PrivateDataTableModel, data: WidgetFieldValueMap): void {
         this.dataTable = dataTable;
-        this.originData.value = { ...data };
-        this.updateModifiedData(WidgetFieldValueManager.applyDefaultValue(data, this.widgetConfig, dataTable));
+        this.originData.value = {
+            ...data,
+            widgetHeader: this.originData.value.widgetHeader,
+        };
+        this.updateModifiedData(WidgetFieldValueManager.applyDefaultValue(this.originData.value, this.widgetConfig, dataTable));
         this.validationErrors = {};
     }
 }