Skip to content

Commit

Permalink
feat: apply user select dropdown at service create step1 (#5253)
Browse files Browse the repository at this point in the history 
* feat: apply user select dropdown at service create step1

Signed-off-by: NaYeong,Kim <[email protected]>

* refactor: redefine container button function

Signed-off-by: NaYeong,Kim <[email protected]>

* chore: update translation

Signed-off-by: NaYeong,Kim <[email protected]>

---------

Signed-off-by: NaYeong,Kim <[email protected]>
Signed-off-by: NaYeong,Kim <[email protected]>
  • Loading branch information
@skdud4659
skdud4659 authored Dec 18, 2024
1 parent e32eae7 commit e25fbb1
Show file tree
Hide file tree
Showing 7 changed files with 67 additions and 782 deletions.
2 changes: 1 addition & 1 deletion apps/web/src/common/modules/user/UserSelectDropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const state = reactive({
}
return Object.values(storeState.userReferenceMap).map((u: UserReferenceMap[string]) => ({
name: u.key,
label: u.label || u.name || u.key,
label: u.key,
userName: u.name,
})).sort((a, b) => a.label.localeCompare(b.label));
}),
Expand Down
108 changes: 14 additions & 94 deletions apps/web/src/services/alert-manager-v2/components/ServiceCreateStep1.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,52 +5,35 @@ import {
import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
import {
PFieldGroup, PTextInput, PTooltip, PI, PSelectDropdown, PAvatar,
PFieldGroup, PTextInput, PTooltip, PI,
} from '@cloudforet/mirinae';
import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
import type { ListResponse } from '@/schema/_common/api-verbs/list';
import type { ServiceCreateParameters } from '@/schema/alert-manager/service/api-verbs/create';
import type { ServiceListParameters } from '@/schema/alert-manager/service/api-verbs/list';
import type { ServiceModel } from '@/schema/alert-manager/service/model';
import type { WorkspaceUserListParameters } from '@/schema/identity/workspace-user/api-verbs/list';
import type { WorkspaceUserModel } from '@/schema/identity/workspace-user/model';
import { i18n } from '@/translations';
import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
import ErrorHandler from '@/common/composables/error/errorHandler';
import { useFormValidator } from '@/common/composables/form-validator';
import { indigo } from '@/styles/colors';
import type { SelectedUserDropdownIdsType } from '@/common/modules/user/typte';
import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
import ServiceCreateStepContainer from '@/services/alert-manager-v2/components/ServiceCreateStepContainer.vue';
import { useServiceCreateFormStore } from '@/services/alert-manager-v2/stores/service-create-form-store';
const serviceFormStore = useServiceCreateFormStore();
const dropdownState = reactive({
loading: false,
workspaceUsersData: [] as WorkspaceUserModel[],
// TODO: Add user group model type
userGroupData: [] as any[],
userDropdownData: computed<SelectDropdownMenuItem[]>(() => [
{ type: 'header', label: i18n.t('ALERT_MANAGER.SERVICE.USER') },
...dropdownState.workspaceUsersData.map((i) => ({
label: i.user_id,
name: i.user_id,
})),
{ type: 'header', label: i18n.t('ALERT_MANAGER.SERVICE.USER_GROUP') },
...dropdownState.userGroupData.map((i) => ({
label: i.name,
name: i.user_group_id,
})),
]),
selectedMemberItems: [] as SelectDropdownMenuItem[],
selectedMemberItems: [] as SelectedUserDropdownIdsType[],
});
const state = reactive({
isFocusedKey: false,
isAllFormValid: computed<boolean>(() => (isAllValid && (name && name.value !== '') && (key && key.value !== ''))),
selectedWorkspaceMemberList: computed<string[]>(() => dropdownState.selectedMemberItems.filter((i) => !checkUserGroup(i.name)).map((i) => i.name)),
selectedUserGroupList: computed<string[]>(() => dropdownState.selectedMemberItems.filter((i) => checkUserGroup(i.name)).map((i) => i.name)),
selectedWorkspaceMemberList: computed<string[]>(() => dropdownState.selectedMemberItems.filter((i) => i.type === 'USER').map((i) => i.value)),
selectedUserGroupList: computed<string[]>(() => dropdownState.selectedMemberItems.filter((i) => i.type === 'USER_GROUP').map((i) => i.value)),
serviceList: [] as ServiceModel[],
});
Expand Down Expand Up @@ -93,43 +76,11 @@ const convertToSnakeCase = (str) => {
.filter((word) => word.trim() !== '')
.join('_');
};
const getUserName = (id: string): string => dropdownState.workspaceUsersData.find((i) => i.user_id === id)?.name;
const checkUserGroup = (id: string): boolean => dropdownState.userGroupData.some((i) => i.user_group_id === id);
const handleChangeInput = (label: 'name'|'key'|'description', value?: string) => {
setForm(label, value);
};
const getUserDropdownData = async () => {
dropdownState.loading = true;
try {
await fetchWorkspaceUsersList();
await fetchUserGroupList();
} catch (e) {
ErrorHandler.handleError(e);
} finally {
dropdownState.loading = false;
}
};
const fetchWorkspaceUsersList = async () => {
try {
const { results } = await SpaceConnector.clientV2.identity.workspaceUser.list<WorkspaceUserListParameters, ListResponse<WorkspaceUserModel>>();
dropdownState.workspaceUsersData = results || [];
} catch (e) {
ErrorHandler.handleError(e);
dropdownState.workspaceUsersData = [];
}
};
const fetchUserGroupList = async () => {
try {
// TODO: Add user group params type
const { results } = await SpaceConnector.clientV2.identity.userGroup.list();
dropdownState.userGroupData = results || [];
} catch (e) {
ErrorHandler.handleError(e);
dropdownState.userGroupData = [];
}
};
const fetchServiceList = async () => {
try {
const { results } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>();
Expand All @@ -150,6 +101,7 @@ const handleCreateService = async () => {
},
description: description.value,
});
showSuccessMessage(i18n.t('ALERT_MANAGER.SERVICE.ALT_S_CREATE_SERVICE'), '');
serviceFormStore.setCreatedServiceId(createdServiceInfo.service_id);
serviceFormStore.setCurrentStep(2);
} catch (e) {
Expand All @@ -164,7 +116,6 @@ watch(() => state.isFocusedKey, (isFocusedKey) => {
});
onMounted(async () => {
await getUserDropdownData();
await fetchServiceList();
});
</script>
Expand Down Expand Up @@ -213,33 +164,11 @@ onMounted(async () => {
</template>
</p-field-group>
<p-field-group :label="$t('ALERT_MANAGER.SERVICE.MEMBER')">
<p-select-dropdown :loading="dropdownState.loading"
:menu="dropdownState.userDropdownData"
:selected.sync="dropdownState.selectedMemberItems"
multi-selectable
appearance-type="stack"
use-fixed-menu-style
is-filterable
show-delete-all-button
show-select-marker
>
<template #menu-item--format="{ item }">
<div class="member-menu-item">
<p-avatar v-if="checkUserGroup(item.name)"
class="menu-icon"
icon="ic_member"
:color="indigo[300]"
size="xs"
/>
<p-avatar v-else
class="menu-icon"
size="xs"
/>
<span>{{ item.label }}</span>
<span v-if="getUserName(item.name)">({{ getUserName(item.name) }})</span>
</div>
</template>
</p-select-dropdown>
<user-select-dropdown selection-type="multiple"
appearance-type="stack"
use-fixed-menu-style
:selected-ids.sync="dropdownState.selectedMemberItems"
/>
</p-field-group>
<p-field-group :label="$t('ALERT_MANAGER.DESCRIPTION')">
<p-text-input :value="description"
Expand All @@ -250,12 +179,3 @@ onMounted(async () => {
</div>
</service-create-step-container>
</template>

<style scoped lang="postcss">
.service-create-step1 {
.member-menu-item {
@apply flex items-center;
gap: 0.25rem;
}
}
</style>
41 changes: 21 additions & 20 deletions apps/web/src/services/alert-manager-v2/components/ServiceCreateStepContainer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,8 @@ import { ALERT_MANAGER_ROUTE_V2 } from '@/services/alert-manager-v2/routes/route
import { useServiceCreateFormStore } from '@/services/alert-manager-v2/stores/service-create-form-store';
type actionButtonType = {
label: TranslateResult,
hasIcon?: boolean,
isLast?: boolean,
label: TranslateResult;
type: 'create' | 'select' | 'continue' | 'set_up';
};
interface Props {
Expand All @@ -41,6 +40,7 @@ const { getProperRouteLocation } = useProperRouteLocation();
const storeState = reactive({
currentStep: computed<number>(() => serviceFormState.currentStep),
currentSubStep: computed<number>(() => serviceFormState.currentSubStep),
createdServiceId: computed<string>(() => serviceFormState.createdServiceId),
});
const state = reactive({
previousStep: computed<number>(() => serviceFormState.currentStep - 1),
Expand All @@ -49,25 +49,28 @@ const state = reactive({
nextSubStep: computed<number>(() => serviceFormState.currentSubStep + 1),
actionButtonInfoMap: computed<Record<string, actionButtonType>>(() => ({
1: {
label: i18n.t('ALERT_MANAGER.CONTINUE'),
hasIcon: true,
label: i18n.t('ALERT_MANAGER.CREATE'),
type: 'create',
},
'2-1': {
label: i18n.t('ALERT_MANAGER.SERVICE.SELECT'),
type: 'select',
},
'2-2': {
label: i18n.t('ALERT_MANAGER.CREATE'),
type: 'create',
},
'2-3': {
label: i18n.t('ALERT_MANAGER.CONTINUE'),
hasIcon: true,
type: 'continue',
},
'3-1': {
label: i18n.t('ALERT_MANAGER.SERVICE.SELECT'),
type: 'select',
},
'3-2': {
label: i18n.t('ALERT_MANAGER.SET_UP'),
isLast: true,
type: 'set_up',
},
})),
actionButtonInfo: computed<actionButtonType>(() => {
Expand All @@ -79,6 +82,9 @@ const state = reactive({
}),
});
const handleCancel = () => {
router.push(getProperRouteLocation({ name: ALERT_MANAGER_ROUTE_V2.SERVICE._NAME }));
};
const handleNavigation = (direction: 'prev' | 'next') => {
if (direction === 'prev') {
handlePrevNavigation();
Expand All @@ -94,7 +100,7 @@ const handlePrevNavigation = () => {
if (storeState.currentStep === 2) {
if (props.selectedItemId) {
if (storeState.currentSubStep === 3) {
router.push({ name: ALERT_MANAGER_ROUTE_V2.SERVICE._NAME });
router.push(getProperRouteLocation({ name: ALERT_MANAGER_ROUTE_V2.SERVICE._NAME }));
return;
}
serviceFormStore.setCurrentSubStep(state.previousSubStep);
Expand All @@ -115,14 +121,9 @@ const handleNextNavigation = () => {
};
const handleActionButton = () => {
if (storeState.currentStep === 1) {
emit('create');
return;
}
if (state.actionButtonInfo.hasIcon) {
if (state.actionButtonInfo.type === 'continue') {
handleNavigation('next');
} else if (storeState.currentSubStep === 1) {
} else if (state.actionButtonInfo.type === 'select') {
handleClickSelectButton();
} else {
emit('create');
Expand All @@ -138,7 +139,7 @@ const handleClickSkipButton = () => {
router.push(getProperRouteLocation({
name: ALERT_MANAGER_ROUTE_V2.SERVICE.DETAIL._NAME,
params: {
serviceId: 'temp id',
serviceId: storeState.createdServiceId,
},
query: {
tab: SERVICE_DETAIL_TABS.SETTINGS,
Expand All @@ -155,11 +156,11 @@ const handleClickSkipButton = () => {
<p-button v-if="storeState.currentStep === 1 || storeState.currentSubStep === 3"
style-type="transparent"
size="lg"
@click="handleNavigation('prev')"
@click="handleCancel"
>
{{ $t('ALERT_MANAGER.CANCEL') }}
</p-button>
<p-button v-else
<p-button v-else-if="storeState.currentSubStep === 2"
style-type="transparent"
size="lg"
icon-left="ic_arrow-left"
Expand All @@ -178,8 +179,8 @@ const handleClickSkipButton = () => {
</p-button>
<p-button :disabled="!props.isAllFormValid"
class="step-right-button"
:style-type="state.actionButtonInfo?.isLast ? 'primary' : 'substitutive'"
:icon-right="state.actionButtonInfo?.hasIcon ? 'ic_arrow-right' : undefined"
:style-type="state.actionButtonInfo?.type === 'set_up' ? 'primary' : 'substitutive'"
:icon-right="state.actionButtonInfo?.type === 'continue' ? 'ic_arrow-right' : undefined"
size="lg"
@click="handleActionButton"
>
Expand Down
Loading

0 comments on commit e25fbb1

Please sign in to comment.