Skip to content

Commit

Permalink
feat: add 'display key' checkbox to GV number enum form & step tooltip (
Browse files Browse the repository at this point in the history 
#4986)

* fix: fix init bug in gv form modal

Signed-off-by: yuda <[email protected]>

* feat: add 'display key' checkbox to GV number enum form

Signed-off-by: yuda <[email protected]>

* feat: add step validation to GV number any

Signed-off-by: yuda <[email protected]>

* chore: check step valid when confirm

Signed-off-by: yuda <[email protected]>

* chore: display enum key when `displayKey === true`

Signed-off-by: yuda <[email protected]>

---------

Signed-off-by: yuda <[email protected]>
  • Loading branch information
@yuda110
yuda110 authored Nov 4, 2024
1 parent ea0d04e commit 308f6cd
Show file tree
Hide file tree
Showing 8 changed files with 118 additions and 29 deletions.
1 change: 1 addition & 0 deletions apps/web/src/schema/dashboard/_types/dashboard-global-variable-type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export interface NumberEnumVariable extends DashboardGlobalVariableBase {
values: Array<{label: string; key: number;}>;
options: {
selectionType: 'multi'|'single';
displayKey?: boolean;
}
}

Expand Down
15 changes: 9 additions & 6 deletions ...src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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<boolean>(() => state.variable.options.selectionType === 'multi'),
menuItems: computed<SelectDropdownMenuItem[]>(() => {
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<boolean>(() => state.variable.type === 'number'),
});
Expand Down
77 changes: 57 additions & 20 deletions .../web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -92,6 +94,7 @@ const state = reactive({
values: state.enumValues,
options: {
selectionType: state.selectedSelectionType,
...(state.selectedType === 'number' ? { displayKey: state.displayKeyWithLabel } : {}),
},
};
}),
Expand All @@ -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<boolean>(() => {
if (state.max === undefined || state.min === undefined || state.step === undefined) return true;
return state.max % state.step === 0;
}),
});
/* Util */
Expand All @@ -130,6 +138,7 @@ const initExistingVariable = (originalData: DashboardGlobalVariable) => {
} else {
state.enumValues = originalData.values;
state.selectedSelectionType = originalData.options.selectionType;
state.displayKeyWithLabel = originalData.options.displayKey;
}
};
Expand All @@ -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 {
Expand All @@ -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) => {
Expand Down Expand Up @@ -231,32 +245,47 @@ watch(() => props.originalData, (originalData) => {
<div v-else
class="grid grid-cols-12 gap-2"
>
<p-field-group :label="$t('DASHBOARDS.DETAIL.VARIABLES.MIN')"
required
class="col-span-5"
>
<p-text-input :value.sync="state.min"
type="number"
block
/>
</p-field-group>
<p-field-group :label="$t('DASHBOARDS.DETAIL.VARIABLES.MAX')"
required
class="col-span-5"
>
<p-text-input :value.sync="state.max"
type="number"
block
/>
</p-field-group>
<div class="col-span-9 grid grid-cols-12 gap-2">
<p-field-group :label="$t('DASHBOARDS.DETAIL.VARIABLES.MIN')"
required
class="col-span-6"
>
<p-text-input :value.sync="state.min"
type="number"
block
/>
</p-field-group>
<p-field-group :label="$t('DASHBOARDS.DETAIL.VARIABLES.MAX')"
required
class="col-span-6"
>
<p-text-input :value.sync="state.max"
type="number"
block
/>
</p-field-group>
</div>
<p-field-group :label="$t('DASHBOARDS.DETAIL.VARIABLES.STEP')"
class="col-span-2"
class="col-span-3"
>
<p-text-input :value.sync="state.step"
block
type="number"
class="step-input"
:invalid="!state.isStepValid"
/>
<template #label-extra>
<p-tooltip position="bottom"
:contents="$t('DASHBOARDS.DETAIL.VARIABLES.STEP_TOOLTIP')"
>
<p-i name="ic_info-circle"
height="0.75rem"
width="0.75rem"
color="inherit"
class="ml-2"
/>
</p-tooltip>
</template>
</p-field-group>
<!-- Input Type -->
<p-field-group :label="$t('DASHBOARDS.DETAIL.VARIABLES.INPUT_TYPE')"
Expand Down Expand Up @@ -316,6 +345,14 @@ watch(() => props.originalData, (originalData) => {
>
{{ $t('DASHBOARDS.DETAIL.VARIABLES.ADD_VALUE') }}
</p-button>
<p-checkbox v-if="state.selectedType === 'number'"
:selected="state.displayKeyWithLabel"
:value="true"
class="pt-3 block"
@change="handleUpdateDisplayKey"
>
{{ $t('DASHBOARDS.DETAIL.VARIABLES.DISPLAY_KEY_WITH_LABEL') }}
</p-checkbox>
<!-- Selection Type -->
<p-divider class="divider" />
<p-field-group :label="$t('DASHBOARDS.DETAIL.VARIABLES.SELECTION_TYPE')"
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ const state = reactive({
return state.isDynamicFormValid;
}),
targetVariable: computed<DashboardGlobalVariable|undefined>(() => {
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<string[]>(() => {
const _nameList: string[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties).map((d) => d.name);
Expand Down Expand Up @@ -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);
}
Expand Down
42 changes: 42 additions & 0 deletions packages/language-pack/console-translation-2.8.babel
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38601,6 +38601,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>DISPLAY_KEY_WITH_LABEL</name>
<definition_loaded>false</definition_loaded>
<description/>
<comment/>
<default_text/>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>ja-JP</language>
<approved>false</approved>
</translation>
<translation>
<language>ko-KR</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>DUPLICATED_NAME_WARNING</name>
<definition_loaded>false</definition_loaded>
Expand Down Expand Up @@ -39210,6 +39231,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>STEP_TOOLTIP</name>
<definition_loaded>false</definition_loaded>
<description/>
<comment/>
<default_text/>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>ja-JP</language>
<approved>false</approved>
</translation>
<translation>
<language>ko-KR</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>TEXT</name>
<definition_loaded>false</definition_loaded>
Expand Down
2 changes: 2 additions & 0 deletions packages/language-pack/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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.",
Expand Down
2 changes: 2 additions & 0 deletions packages/language-pack/ja.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2142,6 +2142,7 @@
"DEFAULT_VALUE": "",
"DELETE_MODAL_TITLE": "",
"DELETE_WARNING": "",
"DISPLAY_KEY_WITH_LABEL": "",
"DUPLICATED_NAME_WARNING": "",
"DYNAMIC_LIST_FROM_SOURCE": "",
"EDIT_VARIABLE": "",
Expand Down Expand Up @@ -2171,6 +2172,7 @@
"SLIDER": "",
"SOURCE_FROM": "",
"STEP": "",
"STEP_TOOLTIP": "最大値の約数のみ入力可能です",
"TEXT": "",
"TYPE": "",
"UPDATE_WARNING": "",
Expand Down
2 changes: 2 additions & 0 deletions packages/language-pack/ko.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2142,6 +2142,7 @@
"DEFAULT_VALUE": "",
"DELETE_MODAL_TITLE": "",
"DELETE_WARNING": "",
"DISPLAY_KEY_WITH_LABEL": "",
"DUPLICATED_NAME_WARNING": "",
"DYNAMIC_LIST_FROM_SOURCE": "",
"EDIT_VARIABLE": "",
Expand Down Expand Up @@ -2171,6 +2172,7 @@
"SLIDER": "",
"SOURCE_FROM": "",
"STEP": "",
"STEP_TOOLTIP": "최대값의 약수만 입력 가능합니다",
"TEXT": "",
"TYPE": "",
"UPDATE_WARNING": "",
Expand Down

0 comments on commit 308f6cd

Please sign in to comment.