From 22a05af64e44d02f0c5356355209481e4580c951 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piggy=20Park=20=28=EB=B0=95=EC=9A=A9=ED=83=9C=29?= Date: Tue, 7 Jan 2025 08:56:03 +0900 Subject: [PATCH] chore(widget-form): apply widget form field sorting planning (#5442) Signed-off-by: samuel.park --- .../WidgetFormOverlayStep2WidgetForm.vue | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue index 678b1d03b6..449fd9d86d 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 { cloneDeep } from 'lodash'; +import { cloneDeep, sortBy } from 'lodash'; import { PFieldGroup, PSelectDropdown, PButton, PI, PButtonModal, PTooltip, @@ -36,7 +36,7 @@ const FORM_TITLE_MAP = { REQUIRED_FIELDS: 'REQUIRED_FIELDS', OPTIONAL_FIELDS: 'OPTIONAL_FIELDS', }; -const DATE_CONFIG_FIELD_KEYS = ['granularity', 'dateRange', 'dateFormat']; +const DATE_CONFIG_FIELD_KEYS = ['granularity', 'dateFormat', 'dateRange']; interface Props { widgetValidationInvalid?: boolean; @@ -63,10 +63,14 @@ const state = reactive({ defaultValidationConfig: computed(() => state.widgetConfig.meta?.defaultValidationConfig), widgetDefaultValidationModalVisible: false, formErrorModalValue: undefined as number|undefined, - widgetDateConfigSchemaMap: computed(() => Object.entries({ - ...state.widgetConfig.requiredFieldsSchema, - ...state.widgetConfig.optionalFieldsSchema, - }).filter(([key]) => DATE_CONFIG_FIELD_KEYS.includes(key))), + widgetDateConfigSchemaMap: computed(() => { + const dateConfigFields = Object.entries({ + ...state.widgetConfig.requiredFieldsSchema, + ...state.widgetConfig.optionalFieldsSchema, + }) + .filter(([key]) => DATE_CONFIG_FIELD_KEYS.includes(key)); + return sortBy(dateConfigFields, ([key]) => DATE_CONFIG_FIELD_KEYS.indexOf(key)); + }), widgetRequiredFieldSchemaMap: computed(() => Object.entries(state.widgetConfig.requiredFieldsSchema).filter(([key]) => !DATE_CONFIG_FIELD_KEYS.includes(key))), widgetOptionalFieldSchemaMap: computed(() => Object.entries(state.widgetConfig.optionalFieldsSchema).filter(([key]) => !DATE_CONFIG_FIELD_KEYS.includes(key))), // display