From b64bcdf748bab0cafce4d832599b04b6f6e1be8a Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Sat, 22 Feb 2025 17:02:04 +0900
Subject: [PATCH 1/2] chore(data-table): solve transform data-table update bug

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../_components/WidgetFormDataTableCardTransformContents.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
index d019953a45..7a24449c1d 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -251,7 +251,6 @@ const { mutateAsync: updateWidget } = useMutation({
             : keys.publicWidgetQueryKey;
         queryClient.setQueryData(widgetQueryKey.value, () => data);
         showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_SUCCESS'), '');
-        widgetGenerateStore.setSelectedDataTableId(state.dataTableId);
     },
     onError: (e) => {
         showErrorMessage(e.message, e);
@@ -431,6 +430,7 @@ const handleUpdateDataTable = async () => {
             state: 'INACTIVE',
             options: sanitizedOptions,
         });
+        widgetGenerateStore.setSelectedDataTableId(result.data_table_id);
         await cascadeUpdateDataTable(result.data_table_id);
     }
     setTimeout(() => {

From 7196ba4e2ed8a5329ab68b32980ad28db668ce9c Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Sat, 22 Feb 2025 17:45:18 +0900
Subject: [PATCH 2/2] fix(data-table): improve data-table cascading update UX

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../WidgetFormDataTableCardAddContents.vue    |  4 +-
 .../WidgetFormDataTableCardFooter.vue         |  6 +-
 ...dgetFormDataTableCardTransformContents.vue |  6 +-
 .../use-data-table-cascade-update.ts          | 77 +++++++++++++------
 .../widgets/_store/widget-generate-store.ts   |  5 ++
 5 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
index bbb59f4867..b6b67531db 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
@@ -82,7 +82,9 @@ const {
 } = useWidgetFormQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
-const { cascadeUpdateDataTable } = useDataTableCascadeUpdate({
+const {
+    cascadeUpdateDataTable,
+} = useDataTableCascadeUpdate({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue
index 0938b6c461..9ec674d612 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PButton, PSpinner } from '@cloudforet/mirinae';
+import { PButton } from '@cloudforet/mirinae';
 
 interface Props {
    disabled: boolean;
@@ -44,13 +44,11 @@ const handleUpdateDataTable = () => {
             </p-button>
             <p-button style-type="secondary"
                       class="apply-button"
+                      :loading="props.loading"
                       :disabled="props.disabled || props.isLegacyDataTable"
                       @click="handleUpdateDataTable"
             >
                 <div class="button-contents-wrapper">
-                    <p-spinner v-if="props.loading"
-                               size="sm"
-                    />
                     {{ $t('COMMON.WIDGETS.APPLY') }}
                 </div>
                 <div v-if="props.changed"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
index 7a24449c1d..500b787140 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -96,7 +96,9 @@ const {
 } = useWidgetFormQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
-const { cascadeUpdateDataTable } = useDataTableCascadeUpdate({
+const {
+    cascadeUpdateDataTable,
+} = useDataTableCascadeUpdate({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
@@ -559,7 +561,7 @@ defineExpose({
         />
         <widget-form-data-table-card-footer :disabled="state.applyDisabled"
                                             :changed="state.optionsChanged"
-                                            :loading="state.loading || props.loading"
+                                            :loading="state.loading || props.loading || !!widgetGenerateState.dataTableCasCadeUpdateLoadingMap?.[props.item.data_table_id]"
                                             @delete="handleClickDeleteDataTable"
                                             @reset="handleClickResetDataTable"
                                             @update="handleUpdateDataTable"
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 7e518e52f8..bfeac9b62f 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
@@ -1,10 +1,14 @@
 import type { ComputedRef } from 'vue';
-import { computed, reactive } from 'vue';
+import {
+    computed, reactive,
+} from 'vue';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-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';
 
 
@@ -17,6 +21,9 @@ interface UseDataTableCascadeUpdateReturn {
 }
 
 export const useDataTableCascadeUpdate = ({ widgetId }: UseDataTableCascadeUpdateOptions): UseDataTableCascadeUpdateReturn => {
+    const widgetGenerateStore = useWidgetGenerateStore();
+    const widgetGenerateState = widgetGenerateStore.state;
+
     /* Query */
     const {
         dataTableList,
@@ -44,30 +51,50 @@ export const useDataTableCascadeUpdate = ({ widgetId }: UseDataTableCascadeUpdat
     const cascadeUpdateDataTable = async (dataTableId: string) => {
         const children = _state.dataTableReferenceMap[dataTableId].children;
         return children.reduce((chain, childId) => chain.then(async () => {
-            const currentDataTable = dataTableList.value.find(
-                (_dataTable) => _dataTable.data_table_id === childId,
-            ) as DataTableModel;
-
-            const result = await fetcher.updateDataTableFn({
-                data_table_id: childId,
-                name: currentDataTable?.name,
-                options: {
-                    ...(currentDataTable?.options ?? {}),
-                },
-            });
-            const dataTableListQueryKey = _state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
-            await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => {
-                if (oldData.results) {
-                    return {
-                        ...oldData,
-                        results: oldData.results.map((item) => (item.data_table_id === result.data_table_id ? result : item)),
-                    };
-                }
-                return oldData;
-            });
-            await _invalidateLoadQueries(result);
-
-            return cascadeUpdateDataTable(childId);
+            try {
+                widgetGenerateStore.setDataTableCasCadeUpdateLoadingMap({
+                    ...widgetGenerateState.dataTableCasCadeUpdateLoadingMap,
+                    [childId]: true,
+                });
+
+                const currentDataTable = dataTableList.value.find(
+                    (_dataTable) => _dataTable.data_table_id === childId,
+                ) as DataTableModel;
+
+                const result = await fetcher.updateDataTableFn({
+                    data_table_id: childId,
+                    name: currentDataTable?.name,
+                    options: {
+                        ...(currentDataTable?.options ?? {}),
+                    },
+                });
+
+                const dataTableListQueryKey = _state.isPrivate
+                    ? keys.privateDataTableListQueryKey
+                    : keys.publicDataTableListQueryKey;
+
+                await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => {
+                    if (oldData?.results) {
+                        return {
+                            ...oldData,
+                            results: oldData.results.map((item) => (item.data_table_id === result.data_table_id ? result : item)),
+                        };
+                    }
+                    return oldData;
+                });
+
+                await _invalidateLoadQueries(result);
+                await cascadeUpdateDataTable(childId);
+            } catch (error) {
+                ErrorHandler.handleError(error);
+            } finally {
+                setTimeout(() => {
+                    widgetGenerateStore.setDataTableCasCadeUpdateLoadingMap({
+                        ...widgetGenerateState.dataTableCasCadeUpdateLoadingMap,
+                        [childId]: false,
+                    });
+                }, 500);
+            }
         }), Promise.resolve());
     };
 
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
index ce5b93b8ef..055a4c7cf3 100644
--- a/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
+++ b/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
@@ -30,6 +30,7 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
         joinRestrictedMap: {} as JoinRestrictedMap, // Flag for handling Join type EXCEPTION RESTRICTION cases. (duplicated data field). Example - { '{dataTalbeId}': true, }
         allDataTableInvalidMap: {} as Record<string, boolean>, // Flag for handling all data table invalid cases. Example - { '{dataTalbeId}': true, }
         dataTableLoadFailed: false,
+        dataTableCasCadeUpdateLoadingMap: {} as Record<string, boolean>,
     });
 
     const getters = reactive({
@@ -80,6 +81,9 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
     const setDataTableLoadFailed = (status: boolean) => {
         state.dataTableLoadFailed = status;
     };
+    const setDataTableCasCadeUpdateLoadingMap = (value: Record<string, boolean>) => {
+        state.dataTableCasCadeUpdateLoadingMap = value;
+    };
 
     const mutations = {
         setWidgetId,
@@ -95,6 +99,7 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
         setAllDataTableInvalidMap,
         setDataTableCreateLoading,
         setDataTableLoadFailed,
+        setDataTableCasCadeUpdateLoadingMap,
     };
     const actions = {
         /* Step 2 */