fix(field-default-value): update widget-field default value setter (#…

…5238) * fix(field-default-value): update widget-field default value setter Signed-off-by: samuel.park <[email protected]> * chore: edit field file name Signed-off-by: samuel.park <[email protected]> --------- Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Dec 17, 2024 · f905417 · f905417
1 parent 9aba5b2
commit f905417
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 87 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue b/apps/web/src/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    computed, reactive, watch,
+    computed, reactive,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
@@ -11,19 +11,16 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 
 import { i18n } from '@/translations';
 
-import { useProxyValue } from '@/common/composables/proxy-state';
-import {
-    getDefaultMenuItemIndex,
-    getInitialSelectedMenuItem,
-} from '@/common/modules/widgets/_helpers/widget-field-helper';
-
+import type WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-value-manager';
+import type { WidgetFieldTypeMap } from '@/common/modules/widgets/_widget-field-value-manager/type';
 
 const props = withDefaults(defineProps<{
+    fieldKey: keyof WidgetFieldTypeMap;
+    fieldManager: WidgetFieldValueManager;
     defaultCount?: number;
     max?: number;
     menuItems: MenuItem[];
     fieldName?:string|TranslateResult;
-    defaultIndex?: number;
     excludeDateField?: boolean;
     value?: {value?: string; count?: number};
     commonInvalidState?: boolean;
@@ -36,59 +33,29 @@ const props = withDefaults(defineProps<{
     excludeDateField: false,
     value: () => ({}),
 });
-const emit = defineEmits<{(e: 'update:is-valid', isValid:boolean): void;
-    (e: 'update:value', value: {value: string; count: number}): void;
-}>();
+
 const state = reactive({
     isInitiated: false,
-    proxyValue: useProxyValue('value', props, emit),
-    isMaxValid: computed<boolean>(() => (props.max ? ((state.proxyValue?.count <= props.max) && !!state.proxyValue?.count) : true)),
+    fieldValue: computed<WidgetFieldTypeMap[typeof props.fieldKey]['value']>(() => props.fieldManager.data[props.fieldKey].value),
+    isMaxValid: computed<boolean>(() => (props.max ? ((state.fieldValue.count <= props.max) && !!state.fieldValue.count) : true)),
+    dataInvalid: computed<boolean>(() => !props.menuItems?.length || !state.fieldValue.data),
     tooltipDesc: computed(() => i18n.t('COMMON.WIDGETS.MAX_ITEMS_DESC', {
         fieldName: props.fieldName,
         max: props.max,
     })),
-    isAllValid: computed<boolean>(() => ((props.menuItems.length) ? state.isMaxValid : false)),
     selectedItem: undefined as undefined | MenuItem[],
 });
 
 /* Event */
 const handleUpdateSelect = (val: string) => {
-    if (val === state.proxyValue.value) return;
-    state.proxyValue = { ...state.proxyValue, value: val };
+    if (val === state.fieldValue.data) return;
+    props.fieldManager.setFieldValue(props.fieldKey, { ...state.fieldValue, data: val });
 };
 const handleUpdateCount = (val: number) => {
-    if (val === state.proxyValue.count) return;
-    state.proxyValue = { ...state.proxyValue, count: val ?? 1 };
-};
-
-/* Watcher */
-watch(() => state.isAllValid, (isValid) => {
-    emit('update:is-valid', isValid);
-}, { immediate: true });
-
-/* Init */
-const initValue = () => {
-    state.proxyValue = {
-        ...state.proxyValue,
-        value: props.value?.value,
-        count: props.value?.count,
-    };
+    if (val === state.fieldValue.count) return;
+    props.fieldManager.setFieldValue(props.fieldKey, { ...state.fieldValue, count: val ?? 1 });
 };
-watch(() => props.menuItems, (menuItems) => {
-    if (!state.isInitiated) {
-        initValue();
-        state.isInitiated = true;
-    }
-
-    if (!menuItems?.length) return;
 
-    const _defaultIndex = getDefaultMenuItemIndex(props.menuItems, props.defaultIndex, props.excludeDateField);
-    const _value = getInitialSelectedMenuItem(menuItems, state.proxyValue?.value, _defaultIndex);
-    state.proxyValue = {
-        value: _value,
-        count: props.value?.count ?? props.defaultCount ?? 5,
-    };
-}, { immediate: true });
 </script>
 
 <template>
@@ -99,8 +66,8 @@ watch(() => props.menuItems, (menuItems) => {
                        class="w-full"
         >
             <p-select-dropdown :menu="props.menuItems"
-                               :selected="state.proxyValue?.value"
-                               :invalid="props.commonInvalidState"
+                               :selected="state.fieldValue?.data"
+                               :invalid="state.dataInvalid"
                                use-fixed-menu-style
                                block
                                @update:selected="handleUpdateSelect"
@@ -117,7 +84,7 @@ watch(() => props.menuItems, (menuItems) => {
                           :min="1"
                           :max="props.max"
                           :invalid="!state.isMaxValid"
-                          :value="state.proxyValue?.count"
+                          :value="state.fieldValue?.count"
                           @update:value="handleUpdateCount"
             />
             <template #label-extra>

diff --git a/...components/_WidgetFieldDropdownAndMax.vue → ...omponents/__WidgetFieldDropdownAndMax.vue b/...components/_WidgetFieldDropdownAndMax.vue → ...omponents/__WidgetFieldDropdownAndMax.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    computed, reactive,
+    computed, reactive, watch,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
@@ -11,16 +11,19 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 
 import { i18n } from '@/translations';
 
-import type WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-value-manager';
-import type { WidgetFieldTypeMap } from '@/common/modules/widgets/_widget-field-value-manager/type';
+import { useProxyValue } from '@/common/composables/proxy-state';
+import {
+    getDefaultMenuItemIndex,
+    getInitialSelectedMenuItem,
+} from '@/common/modules/widgets/_helpers/widget-field-helper';
+
 
 const props = withDefaults(defineProps<{
-    fieldKey: keyof WidgetFieldTypeMap;
-    fieldManager: WidgetFieldValueManager;
     defaultCount?: number;
     max?: number;
     menuItems: MenuItem[];
     fieldName?:string|TranslateResult;
+    defaultIndex?: number;
     excludeDateField?: boolean;
     value?: {value?: string; count?: number};
     commonInvalidState?: boolean;
@@ -33,29 +36,59 @@ const props = withDefaults(defineProps<{
     excludeDateField: false,
     value: () => ({}),
 });
-
+const emit = defineEmits<{(e: 'update:is-valid', isValid:boolean): void;
+    (e: 'update:value', value: {value: string; count: number}): void;
+}>();
 const state = reactive({
     isInitiated: false,
-    fieldValue: computed<WidgetFieldTypeMap[typeof props.fieldKey]['value']>(() => props.fieldManager.data[props.fieldKey].value),
-    isMaxValid: computed<boolean>(() => (props.max ? ((state.fieldValue.count <= props.max) && !!state.fieldValue.count) : true)),
-    dataInvalid: computed<boolean>(() => !props.menuItems?.length || !state.fieldValue.data),
+    proxyValue: useProxyValue('value', props, emit),
+    isMaxValid: computed<boolean>(() => (props.max ? ((state.proxyValue?.count <= props.max) && !!state.proxyValue?.count) : true)),
     tooltipDesc: computed(() => i18n.t('COMMON.WIDGETS.MAX_ITEMS_DESC', {
         fieldName: props.fieldName,
         max: props.max,
     })),
+    isAllValid: computed<boolean>(() => ((props.menuItems.length) ? state.isMaxValid : false)),
     selectedItem: undefined as undefined | MenuItem[],
 });
 
 /* Event */
 const handleUpdateSelect = (val: string) => {
-    if (val === state.fieldValue.data) return;
-    props.fieldManager.setFieldValue(props.fieldKey, { ...state.fieldValue, data: val });
+    if (val === state.proxyValue.value) return;
+    state.proxyValue = { ...state.proxyValue, value: val };
 };
 const handleUpdateCount = (val: number) => {
-    if (val === state.fieldValue.count) return;
-    props.fieldManager.setFieldValue(props.fieldKey, { ...state.fieldValue, count: val ?? 1 });
+    if (val === state.proxyValue.count) return;
+    state.proxyValue = { ...state.proxyValue, count: val ?? 1 };
+};
+
+/* Watcher */
+watch(() => state.isAllValid, (isValid) => {
+    emit('update:is-valid', isValid);
+}, { immediate: true });
+
+/* Init */
+const initValue = () => {
+    state.proxyValue = {
+        ...state.proxyValue,
+        value: props.value?.value,
+        count: props.value?.count,
+    };
 };
+watch(() => props.menuItems, (menuItems) => {
+    if (!state.isInitiated) {
+        initValue();
+        state.isInitiated = true;
+    }
+
+    if (!menuItems?.length) return;
 
+    const _defaultIndex = getDefaultMenuItemIndex(props.menuItems, props.defaultIndex, props.excludeDateField);
+    const _value = getInitialSelectedMenuItem(menuItems, state.proxyValue?.value, _defaultIndex);
+    state.proxyValue = {
+        value: _value,
+        count: props.value?.count ?? props.defaultCount ?? 5,
+    };
+}, { immediate: true });
 </script>
 
 <template>
@@ -66,8 +99,8 @@ const handleUpdateCount = (val: number) => {
                        class="w-full"
         >
             <p-select-dropdown :menu="props.menuItems"
-                               :selected="state.fieldValue?.data"
-                               :invalid="state.dataInvalid"
+                               :selected="state.proxyValue?.value"
+                               :invalid="props.commonInvalidState"
                                use-fixed-menu-style
                                block
                                @update:selected="handleUpdateSelect"
@@ -84,7 +117,7 @@ const handleUpdateCount = (val: number) => {
                           :min="1"
                           :max="props.max"
                           :invalid="!state.isMaxValid"
-                          :value="state.fieldValue?.count"
+                          :value="state.proxyValue?.count"
                           @update:value="handleUpdateCount"
             />
             <template #label-extra>

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
@@ -1,5 +1,5 @@
 import {
-    COLOR_SCHEMA, DATE_FORMAT, DEFAULT_COMPARISON_COLOR, NUMBER_FORMAT, TABLE_DEFAULT_MINIMUM_WIDTH, WIDGET_HEIGHT,
+    COLOR_SCHEMA, DATA_FIELD_HEATMAP_COLOR, DATE_FORMAT, DEFAULT_COMPARISON_COLOR, NUMBER_FORMAT, TABLE_DEFAULT_MINIMUM_WIDTH, WIDGET_HEIGHT,
 } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { integrateFieldsSchema } from '@/common/modules/widgets/_helpers/widget-field-helper';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
@@ -8,6 +8,7 @@ import type { FormatRulesOptions } from '@/common/modules/widgets/_widget-fields
 import type { CategoryByOptions } from '@/common/modules/widgets/_widget-fields/category-by/type';
 import type { _ColorSchemaOptions as ColorSchemaOptions } from '@/common/modules/widgets/_widget-fields/color-schema/type';
 import type { ComparisonOptions } from '@/common/modules/widgets/_widget-fields/comparison/type';
+import type { DataFieldHeatmapColorOptions, DataFieldHeatmapColorValue } from '@/common/modules/widgets/_widget-fields/data-field-heatmap-color/type';
 import type { DataFieldOptions } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateFormatOptions } from '@/common/modules/widgets/_widget-fields/date-format/type';
 import type { _GroupByOptions } from '@/common/modules/widgets/_widget-fields/group-by/type';
@@ -243,7 +244,20 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         };
     },
     customTableColumnWidth: () => widgetFieldDefaultValueMap.customTableColumnWidth,
-    dataFieldHeatmapColor: () => widgetFieldDefaultValueMap.dataFieldHeatmapColor,
+    dataFieldHeatmapColor: (widgetConfig, dataTable) => {
+        const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
+        const dataFieldheatmapColorOptions = (_fieldsSchema.dataFieldHeatmapColor?.options ?? {}) as DataFieldHeatmapColorOptions;
+
+        const dataKeys = Object.keys(dataTable?.data_info ?? {}) as string[];
+
+        const result: DataFieldHeatmapColorValue = widgetFieldDefaultValueMap.dataFieldHeatmapColor;
+        dataKeys.forEach((key) => {
+            result[key] = {
+                colorInfo: dataFieldheatmapColorOptions?.default ?? DATA_FIELD_HEATMAP_COLOR.NONE.key,
+            };
+        });
+        return result;
+    },
     dateFormat: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const dateFormatOptions = (_fieldsSchema.dateFormat?.options ?? {}) as DateFormatOptions;
@@ -275,7 +289,6 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
             result.count = groupByOptions.defaultMaxCount ? groupByOptions.defaultMaxCount : 5;
         }
 
-        console.debug('[DEFAULT_GROUP', result);
         return result;
     },
     header: () => widgetFieldDefaultValueMap.header,
@@ -349,17 +362,13 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
 
         const dataKeys = Object.keys(dataTable?.data_info ?? {}) as string[];
 
-        if (numberFormatOptions.default) {
-            const result: NumberFormatValue = {};
-            dataKeys.forEach((key) => {
-                result[key] = {
-                    format: numberFormatOptions.default ?? NUMBER_FORMAT.AUTO,
-                };
-            });
-            return result;
-        }
-
-        return widgetFieldDefaultValueMap.numberFormat;
+        const result: NumberFormatValue = widgetFieldDefaultValueMap.numberFormat;
+        dataKeys.forEach((key) => {
+            result[key] = {
+                format: numberFormatOptions.default ?? NUMBER_FORMAT.AUTO,
+            };
+        });
+        return result;
     },
     pieChartType: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);

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
@@ -6,7 +6,7 @@ import {
 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 WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type {

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
@@ -6,7 +6,7 @@ import {
 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 WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/__WidgetFieldDropdownAndMax.vue';
 import { useGranularityMenuItem } from '@/common/modules/widgets/_composables/use-granularity-menu-items';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { CategoryByValue, CategoryByOptions } from '@/common/modules/widgets/_widget-fields/category-by/type';

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
@@ -6,7 +6,7 @@ import {
 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 WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
 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';

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
@@ -6,7 +6,7 @@ import {
 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 WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/__WidgetFieldDropdownAndMax.vue';
 import { useGranularityMenuItem } from '@/common/modules/widgets/_composables/use-granularity-menu-items';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { StackByValue, StackByOptions } from '@/common/modules/widgets/_widget-fields/stack-by/type';

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
@@ -6,7 +6,7 @@ import {
 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 WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
 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';

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
@@ -7,7 +7,7 @@ import {
 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 WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/__WidgetFieldDropdownAndMax.vue';
 import { useGranularityMenuItem } from '@/common/modules/widgets/_composables/use-granularity-menu-items';
 import {
     useWidgetOptionsComplexValidation,

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
@@ -6,7 +6,7 @@ import {
 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 WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
 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';

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
@@ -7,7 +7,7 @@ import {
 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 WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/__WidgetFieldDropdownAndMax.vue';
 import { useGranularityMenuItem } from '@/common/modules/widgets/_composables/use-granularity-menu-items';
 import {
     useWidgetOptionsComplexValidation,