Skip to content

Commit

Permalink
feat: apply user select dropdown at opsFlow (#5401)
Browse files Browse the repository at this point in the history 
* feat: apply opsFlow route at v1

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

* feat: apply user select dropdown at opsFlow

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

---------

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
  • Loading branch information
@skdud4659
skdud4659 authored Jan 3, 2025
1 parent f9933e5 commit 4751fd0
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 21 deletions.
38 changes: 25 additions & 13 deletions apps/web/src/common/modules/user/UserSelectDropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,16 @@ const props = withDefaults(defineProps<{
selectedId?: string;
selectedIds?: string[];
selectionType?: 'single'|'multiple';
appearanceType?: 'badge'|'stack';
styleType?: string;
block?: boolean;
useFixedMenuStyle?: boolean;
selectionLabel?: string;
invalid?: boolean;
disabled?: boolean;
readonly?: boolean;
userPool?: string[];
userGroupPool?: string[];
appearanceType?: 'badge'|'stack';
showUserList?: boolean;
showUserGroupList?: boolean;
showCategoryTitle?: boolean;
Expand All @@ -53,12 +56,16 @@ const props = withDefaults(defineProps<{
selectedId: undefined,
selectedIds: undefined,
selectionType: 'single',
appearanceType: 'stack',
styleType: undefined,
block: undefined,
useFixedMenuStyle: false,
selectionLabel: undefined,
invalid: false,
disabled: false,
readonly: false,
userPool: undefined,
userGroupPool: undefined,
appearanceType: 'badge',
showUserList: true,
showUserGroupList: true,
showCategoryTitle: true,
Expand Down Expand Up @@ -134,7 +141,7 @@ const state = reactive({
const checkUserGroup = (id: string): boolean => state.allUserGroupItems.some((i) => i.name === id);
const menuItemsHandler = (): AutocompleteHandler => async (keyword: string, pageStart = 1, pageLimit = 10, filters, resultIndex) => {
const _totalCount = pageStart - 1 + pageLimit;
const _totalCount = Number((pageStart - 1 || 0) + pageLimit);
const filterItems = (items: SelectDropdownMenuItem[]) => items.filter((item) => getTextHighlightRegex(keyword).test(item.name)).slice(pageStart - 1, _totalCount);
if (resultIndex === undefined) {
Expand All @@ -149,7 +156,7 @@ const menuItemsHandler = (): AutocompleteHandler => async (keyword: string, page
}
return {
results: _slicedItems,
more: _totalCount < items.length,
more: pageLimit <= _slicedItems.length - 1 && _totalCount < items.length,
};
});
}
Expand All @@ -160,7 +167,7 @@ const menuItemsHandler = (): AutocompleteHandler => async (keyword: string, page
if (i !== resultIndex) return { results: [], title: c.title };
return {
results: _slicedItems,
more: _totalCount < items.length,
more: pageLimit <= _slicedItems.length - 1 && _totalCount < items.length,
};
});
};
Expand Down Expand Up @@ -248,20 +255,23 @@ watch([() => props.selectedId, () => props.selectedIds], ([newUserId, newUserIds
</script>
<template>
<p-select-dropdown show-select-marker
class="user-select-dropdown"
<p-select-dropdown class="user-select-dropdown"
page-size="10"
show-select-marker
is-filterable
show-delete-all-button
:selected="state.selectedItems"
:handler="menuItemsHandler()"
is-filterable
:selection-label="props.selectionLabel"
:invalid="props.invalid"
:disabled="props.disabled"
:readonly="props.readonly"
page-size="10"
:use-fixed-menu-style="props.useFixedMenuStyle"
show-delete-all-button
:multi-selectable="props.selectionType === 'multiple'"
:appearance-type="props.appearanceType"
:style-type="props.styleType"
:placeholder="props.placeholder"
:block="props.block"
@update:selected="handleUpdateSelectedUserItems"
>
<template v-if="props.appearanceType === 'stack'"
Expand Down Expand Up @@ -306,11 +316,13 @@ watch([() => props.selectedId, () => props.selectedIds], ([newUserId, newUserIds
size="xs"
/>
</div>
<span>{{ item.label }}</span>
<span class="text-gray-500">
<p class="label truncate">
{{ item.label }}
</p>
<p class="text-gray-500">
<span v-if="checkUserGroup(item.name)">({{ item?.members || 0 }} {{ $t('ALERT_MANAGER.ALERTS.MEMBERS') }})</span>
<span v-else-if="item?.userName">({{ item?.userName }})</span>
</span>
</p>
</div>
</template>
</p-select-dropdown>
Expand Down
2 changes: 2 additions & 0 deletions apps/web/src/router/alert-manager-v1-admin-routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import adminCostExplorerRoutes from '@/services/cost-explorer/routes/admin/route
import adminDashboardsRoutes from '@/services/dashboards/routes/admin/routes';
import adminIamRoutes from '@/services/iam/routes/admin/routes';
import adminInfoRoute from '@/services/info/routes/admin/routes';
import adminOpsFlowRoutes from '@/services/ops-flow/routes/admin/routes';
import adminWorkspaceHomeRoutes from '@/services/workspace-home/routes/admin/routes';


Expand All @@ -17,4 +18,5 @@ export const alertManagerV1AdminRoutes: RouteConfig[] = [
adminIamRoutes,
adminAdvancedRoutes,
adminInfoRoute,
adminOpsFlowRoutes,
];
2 changes: 2 additions & 0 deletions apps/web/src/router/alert-manager-v1-workspace-routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import costExplorerRoute from '@/services/cost-explorer/routes/routes';
import dashboardsRoute from '@/services/dashboards/routes/routes';
import iamRoutes from '@/services/iam/routes/routes';
import infoRoute from '@/services/info/routes/routes';
import opsFlowRoutes from '@/services/ops-flow/routes/routes';
import projectRouteV1 from '@/services/project-v1/routes/routes';
import workspaceHomeRoute from '@/services/workspace-home/routes/routes';

Expand All @@ -19,4 +20,5 @@ export const alertManagerV1WorkspaceRoutes: RouteConfig[] = [
alertManagerRouteV1,
costExplorerRoute,
infoRoute,
opsFlowRoutes,
];
12 changes: 8 additions & 4 deletions apps/web/src/services/ops-flow/components/BoardTaskFilters.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,22 +130,26 @@ watch(taskFilters, (newValue, oldValue) => {
/>
<div>
<user-select-dropdown multi-selectable
:user-ids="selectedCreatedBy"
use-fixed-menu-style
:selected-ids="selectedCreatedBy"
:selection-label="$t('OPSFLOW.CREATED_BY')"
style-type="rounded"
:show-user-group-list="false"
appearance-type="badge"
selection-type="multiple"
@update:user-ids="handleUpdateCreatedBy"
@update:selected-ids="handleUpdateCreatedBy"
/>
</div>
<div>
<user-select-dropdown multi-selectable
:user-ids="selectedAssignee"
use-fixed-menu-style
:selected-ids="selectedAssignee"
:selection-label="$t('OPSFLOW.ASSIGNEE')"
style-type="rounded"
:show-user-group-list="false"
appearance-type="badge"
selection-type="multiple"
@update:user-ids="handleUpdateAssignee"
@update:selected-ids="handleUpdateAssignee"
/>
</div>
</div>
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/services/ops-flow/components/TaskTypeForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,10 +255,12 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
</p-radio-group>
</p-field-group>
<p-field-group :label="$t('OPSFLOW.ASSIGNEE_POOL')">
<user-select-dropdown :selected-user-ids="assigneePool"
<user-select-dropdown :selected-ids="assigneePool"
appearance-type="stack"
:show-user-group-list="false"
selection-type="multiple"
block
@update:user-ids="setForm('assigneePool', $event)"
@update:selected-ids="setForm('assigneePool', $event)"
/>
</p-field-group>
<p-field-group :label="$t('OPSFLOW.DESCRIPTION')">
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,13 @@ const {
no-spacing
>
<user-select-dropdown class="my-1"
:user-ids="fieldValue"
:selected-ids="fieldValue"
selection-type="multiple"
appearance-type="badge"
:show-user-group-list="false"
:invalid="isInvalid"
:readonly="props.readonly"
@update:user-ids="updateFieldValue"
@update:selected-ids="updateFieldValue"
/>
</p-field-group>
</template>

0 comments on commit 4751fd0

Please sign in to comment.