feat: apply user select dropdown at opsFlow

apps/web/src/common/modules/user/UserSelectDropdown.vue

@@ -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;
@@ -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,
@@ -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) {
@@ -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,
             };
         });
     }
@@ -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,
         };
     });
 };
@@ -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'"
@@ -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>

apps/web/src/router/alert-manager-v1-admin-routes.ts

@@ -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';
 
 
@@ -17,4 +18,5 @@ export const alertManagerV1AdminRoutes: RouteConfig[] = [
     adminIamRoutes,
     adminAdvancedRoutes,
     adminInfoRoute,
+    adminOpsFlowRoutes,
 ];

apps/web/src/router/alert-manager-v1-workspace-routes.ts

@@ -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';
 
@@ -19,4 +20,5 @@ export const alertManagerV1WorkspaceRoutes: RouteConfig[] = [
     alertManagerRouteV1,
     costExplorerRoute,
     infoRoute,
+    opsFlowRoutes,
 ];

apps/web/src/services/ops-flow/components/BoardTaskFilters.vue

@@ -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>

apps/web/src/services/ops-flow/components/TaskTypeForm.vue

@@ -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')">

apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue

@@ -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>