diff --git a/apps/web/src/schema/dashboard/_types/dashboard-global-variable-type.ts b/apps/web/src/schema/dashboard/_types/dashboard-global-variable-type.ts index ca49e1e6bd..2a0624a370 100644 --- a/apps/web/src/schema/dashboard/_types/dashboard-global-variable-type.ts +++ b/apps/web/src/schema/dashboard/_types/dashboard-global-variable-type.ts @@ -65,6 +65,7 @@ export interface NumberEnumVariable extends DashboardGlobalVariableBase { values: Array<{label: string; key: number;}>; options: { selectionType: 'multi'|'single'; + displayKey?: boolean; } } diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue index 171138d41a..92da5b3d69 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue @@ -7,6 +7,7 @@ import { cloneDeep, flattenDeep, isEqual } from 'lodash'; import { PSelectDropdown } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type'; +import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/inputs/dropdown/select-dropdown/type'; import type { DashboardGlobalVariable, @@ -29,13 +30,15 @@ const dashboardDetailGetters = dashboardDetailStore.getters; const state = reactive({ - variable: computed(() => { - const enumVariable = props.variable as TextEnumVariable|NumberEnumVariable; - return enumVariable; + variable: computed(() => props.variable as TextEnumVariable | NumberEnumVariable), + multiSelectable: computed(() => state.variable.options.selectionType === 'multi'), + menuItems: computed(() => { + if (state.variable.type === 'number' && state.variable.options.displayKey) { + return state.variable.values.map((value) => ({ label: `${value.label} (${value.key})`, name: value.key })); + } + return state.variable.values.map((value) => ({ label: value.label, name: value.key })); }), - multiSelectable: computed(() => state.variable.options.selectionType === 'multi'), - menuItems: computed(() => state.variable.values.map((value) => ({ label: value.label, name: value.key }))), - selected: [], + selected: [] as SelectDropdownMenuItem[], isNumber: computed(() => state.variable.type === 'number'), }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue index 23672e550f..e6aaecdf99 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue @@ -2,7 +2,8 @@ import { computed, reactive, watch } from 'vue'; import { - PFieldGroup, PTextInput, PSelectDropdown, PRadioGroup, PRadio, PButton, PIconButton, PDivider, + PFieldGroup, PTextInput, PSelectDropdown, PRadioGroup, PRadio, PButton, PIconButton, PDivider, PCheckbox, + PTooltip, PI, } from '@cloudforet/mirinae'; import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/inputs/dropdown/select-dropdown/type'; @@ -56,6 +57,7 @@ const state = reactive({ if (state.selectedValuesType === VALUES_TYPE.ANY_VALUE) { if (state.selectedType === 'text') return true; if (Number.isNaN(Number(state.min)) || Number.isNaN(Number(state.max))) return false; + if (state.isStepValid === false) return false; return state.min !== undefined && state.max !== undefined; } const keys = state.enumValues.map((d) => d.key); @@ -92,6 +94,7 @@ const state = reactive({ values: state.enumValues, options: { selectionType: state.selectedSelectionType, + ...(state.selectedType === 'number' ? { displayKey: state.displayKeyWithLabel } : {}), }, }; }), @@ -103,11 +106,16 @@ const state = reactive({ selectedValuesType: VALUES_TYPE.ANY_VALUE as ValuesType, defaultTextValue: undefined as string|undefined, enumValues: [] as EnumValue[], + displayKeyWithLabel: false, selectedSelectionType: 'multi' as SelectionType, min: undefined as number|undefined, max: undefined as number|undefined, step: undefined as number|undefined, selectedNumberInputType: NUMBER_INPUT_TYPE.NUMBER_INPUT as NumberInputType, + isStepValid: computed(() => { + if (state.max === undefined || state.min === undefined || state.step === undefined) return true; + return state.max % state.step === 0; + }), }); /* Util */ @@ -130,6 +138,7 @@ const initExistingVariable = (originalData: DashboardGlobalVariable) => { } else { state.enumValues = originalData.values; state.selectedSelectionType = originalData.options.selectionType; + state.displayKeyWithLabel = originalData.options.displayKey; } }; @@ -141,10 +150,12 @@ const handleChangeType = (type: 'text'|'number') => { state.min = undefined; state.max = undefined; state.enumValues = [{ key: '', label: '' }]; + state.displayKeyWithLabel = false; }; const handleChangeValuesType = (type: ValuesType) => { if (state.selectedValuesType === type) return; state.selectedValuesType = type; + state.displayKeyWithLabel = false; if (type === VALUES_TYPE.LIST_OF_VALUES) { state.enumValues = [{ key: '', label: '' }]; } else { @@ -169,6 +180,9 @@ const handleUpdateEnumKey = (idx: number, value: string) => { const handleChangeNumberInputType = (type: NumberInputType) => { state.selectedNumberInputType = type; }; +const handleUpdateDisplayKey = (value: boolean[]) => { + state.displayKeyWithLabel = value[0]; +}; /* Watcher */ watch(() => state.manualGlobalVariableData, (data) => { @@ -231,32 +245,47 @@ watch(() => props.originalData, (originalData) => {
- - - - - - +
+ + + + + + +
+ props.originalData, (originalData) => { > {{ $t('DASHBOARDS.DETAIL.VARIABLES.ADD_VALUE') }} + + {{ $t('DASHBOARDS.DETAIL.VARIABLES.DISPLAY_KEY_WITH_LABEL') }} + (() => { - if (props.modalType === 'CREATE' || !props.variableKey) return undefined; - return dashboardDetailGetters.dashboardVarsSchemaProperties[props.variableKey]; + if (props.modalType === 'CREATE' || !props.variableKey || !props.visible) return undefined; + return cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties[props.variableKey]); }), existingVariableNameList: computed(() => { const _nameList: string[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties).map((d) => d.name); @@ -227,7 +227,7 @@ const handleChangeMethod = (method: MethodType) => { watch(() => state.proxyVisible, (visible) => { if (visible) { if (props.modalType === 'UPDATE' && props.variableKey) { - const _targetProperty = dashboardDetailGetters.dashboardVarsSchemaProperties[props.variableKey]; + const _targetProperty = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties[props.variableKey]); if (isEmpty(_targetProperty)) return; initSelectedVariable(_targetProperty); } diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel index 55c3392989..6ba7ef00eb 100644 --- a/packages/language-pack/console-translation-2.8.babel +++ b/packages/language-pack/console-translation-2.8.babel @@ -38601,6 +38601,27 @@ + + DISPLAY_KEY_WITH_LABEL + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + DUPLICATED_NAME_WARNING false @@ -39210,6 +39231,27 @@ + + STEP_TOOLTIP + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + TEXT false diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json index cf13dafb6a..ae2c996449 100644 --- a/packages/language-pack/en.json +++ b/packages/language-pack/en.json @@ -2142,6 +2142,7 @@ "DEFAULT_VALUE": "Default Value", "DELETE_MODAL_TITLE": "Are you sure you want to delete variable?", "DELETE_WARNING": "When a variable is deleted, the value of that variable set in the dashboard will be reset.", + "DISPLAY_KEY_WITH_LABEL": "Display Key with Label", "DUPLICATED_NAME_WARNING": "Variables with the same name as those in the current dashboard cannot be imported. Please update the variable names (in the current dashboard) before proceeding.", "DYNAMIC_LIST_FROM_SOURCE": "Dynamic List from Source", "EDIT_VARIABLE": "Edit Variable", @@ -2171,6 +2172,7 @@ "SLIDER": "Slider", "SOURCE_FROM": "Source From", "STEP": "Step", + "STEP_TOOLTIP": "Only divisors of the maximum value are allowed", "TEXT": "Text", "TYPE": "Type", "UPDATE_WARNING": "When a variable is modified, the value of that variable set in the dashboard will be reset.", diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json index 4630d56ead..ce8af2148e 100644 --- a/packages/language-pack/ja.json +++ b/packages/language-pack/ja.json @@ -2142,6 +2142,7 @@ "DEFAULT_VALUE": "", "DELETE_MODAL_TITLE": "", "DELETE_WARNING": "", + "DISPLAY_KEY_WITH_LABEL": "", "DUPLICATED_NAME_WARNING": "", "DYNAMIC_LIST_FROM_SOURCE": "", "EDIT_VARIABLE": "", @@ -2171,6 +2172,7 @@ "SLIDER": "", "SOURCE_FROM": "", "STEP": "", + "STEP_TOOLTIP": "最大値の約数のみ入力可能です", "TEXT": "", "TYPE": "", "UPDATE_WARNING": "", diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json index 160d88fbfb..bc572e1e64 100644 --- a/packages/language-pack/ko.json +++ b/packages/language-pack/ko.json @@ -2142,6 +2142,7 @@ "DEFAULT_VALUE": "", "DELETE_MODAL_TITLE": "", "DELETE_WARNING": "", + "DISPLAY_KEY_WITH_LABEL": "", "DUPLICATED_NAME_WARNING": "", "DYNAMIC_LIST_FROM_SOURCE": "", "EDIT_VARIABLE": "", @@ -2171,6 +2172,7 @@ "SLIDER": "", "SOURCE_FROM": "", "STEP": "", + "STEP_TOOLTIP": "최대값의 약수만 입력 가능합니다", "TEXT": "", "TYPE": "", "UPDATE_WARNING": "",