feat: add task management languages and deletion scenarios

apps/web/package.json

@@ -54,6 +54,7 @@
     "diff-match-patch": "^1.0.5",
     "echarts": "^5.5.0",
     "ejs": "^3.1.10",
+    "hangul-js": "^0.2.6",
     "hashids": "^2.2.1",
     "highlight.js": "^11.5.1",
     "html-to-image": "^1.9.0",

apps/web/src/common/components/inputs/LabelsInput.vue

@@ -46,7 +46,7 @@ const handleKeyEscape = () => {
     setValue('');
 };
 const handleKeyEnter = (e: KeyboardEvent) => {
-    if (e.isComposing || !value.value || isInvalid) return;
+    if (e.isComposing || !value.value || isInvalid.value) return;
     labelList.value.push(value.value);
     setValue('');
     emit('update:labels', labelList.value);
@@ -89,7 +89,7 @@ watch(() => props.labels, (newLabels) => {
                     {{ $t('DASHBOARDS.CUSTOMIZE.ADD_LABEL') }}
                 </span>
                 <div v-else
-                     class="flex items-center justify-center w-full h-20 text-gray-300"
+                     class="text-gray-300 text-xs"
                 >
                     {{ $t('DASHBOARDS.CUSTOMIZE.NO_LABEL') }}
                 </div>

apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue

@@ -114,12 +114,20 @@ const handleMenuDescription = (value?: boolean) => {
 const handleMinimizedGnbRail = () => {
     gnbStore.createMinimizeNavRail(!gnbGetters.isMinimizeNavRail);
 };
-const convertGNBMenuToMenuItem = (menuList: DisplayMenu[], menuType: ContextMenuType = 'item'): GNBMenuType[] => menuList.map((menu) => ({
-    ...menu,
-    name: menu.id,
-    type: menuType,
-    disabled: menuType === 'header' && menu.id.includes('cost'),
-}));
+const convertGNBMenuToMenuItem = (menuList: DisplayMenu[], menuType: ContextMenuType = 'item'): GNBMenuType[] => {
+    const results: GNBMenuType[] = [];
+    menuList.forEach((menu) => {
+        if (!menu.hideOnGNB && !menu.hideOnSiteMap) {
+            results.push({
+                ...menu,
+                name: menu.id,
+                type: menuType,
+                disabled: menuType === 'header' && menu.id.includes('cost'),
+            });
+        }
+    });
+    return results;
+};
 const refinedMenuList = (list, value) => {
     const index = list.findIndex((d) => d.id === value);
     if (index !== -1) {

apps/web/src/common/modules/project/ProjectSelectDropdown.vue

@@ -47,6 +47,9 @@ interface Props {
     workspaceId?: string;
     isInitSelectedItem?: boolean;
     block?: boolean;
+    styleType?: string;
+    appearanceType?: 'stack';
+    showDeleteAllButton?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -64,6 +67,9 @@ const props = withDefaults(defineProps<Props>(), {
     hideCreateButton: false,
     workspaceId: undefined,
     isInitSelectedItem: false,
+    styleType: undefined,
+    appearanceType: undefined,
+    showDeleteAllButton: undefined,
 });
 
 const emit = defineEmits<{(e: 'select', value: ProjectTreeNodeData[]): void;
@@ -303,8 +309,10 @@ watch(() => state._selectedProjectIds, (selectedProjectIds) => {
                            :readonly="props.readonly"
                            :menu-position="props.position"
                            disable-handler
+                           :show-delete-all-button="props.showDeleteAllButton"
+                           :style-type="props.styleType"
                            :block="props.block"
-                           appearance-type="stack"
+                           :appearance-type="props.appearanceType"
                            :is-filterable="!props.readonly"
                            @update:visible-menu="handleUpdateVisibleMenu"
                            @delete-tag="handleDeleteTag"

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

@@ -28,6 +28,10 @@ const props = withDefaults(defineProps<{
      disabled?: boolean;
      readonly?: boolean;
      userPool?: string[];
+     selectionLabel?: string;
+     appearanceType?: string;
+     styleType?: string;
+     block?: boolean;
 }>(), {
     userId: '',
     userIds: () => [],
@@ -36,6 +40,10 @@ const props = withDefaults(defineProps<{
     invalid: false,
     disabled: false,
     userPool: undefined,
+    selectionLabel: undefined,
+    appearanceType: 'badge',
+    styleType: undefined,
+    block: undefined,
 });
 
 const emit = defineEmits<{(event: 'update:user-ids', value: string[]): void;
@@ -122,7 +130,8 @@ watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId,
 </script>
 
 <template>
-    <p-select-dropdown show-select-marker
+    <p-select-dropdown class="user-select-dropdown"
+                       show-select-marker
                        :selected="selectedUserItems"
                        :handler="userMenuItemsHandler"
                        :page-size="10"
@@ -133,7 +142,16 @@ watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId,
                        :use-fixed-menu-style="useFixedMenuStyle"
                        show-delete-all-button
                        :multi-selectable="props.selectionType === 'multiple'"
-                       appearance-type="badge"
+                       :selection-label="props.selectionLabel"
+                       :appearance-type="props.appearanceType"
+                       :style-type="props.styleType"
+                       :block="props.block"
                        @update:selected="handleUpdateSelectedUserItems"
     />
 </template>
+
+<style scoped lang="postcss">
+.user-select-dropdown {
+    width: fit-content;
+}
+</style>

apps/web/src/lib/access-control/config.ts

@@ -47,7 +47,7 @@ export const WORKSPACE_OWNER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.NOTICE,
     MENU_ID.OPS_FLOW,
     MENU_ID.OPS_FLOW_LANDING,
-    MENU_ID.BOARD,
+    MENU_ID.TASK_BOARD,
 ];
 export const WORKSPACE_MEMBER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.WORKSPACE_HOME,
@@ -73,7 +73,7 @@ export const WORKSPACE_MEMBER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.NOTICE,
     MENU_ID.OPS_FLOW,
     MENU_ID.OPS_FLOW_LANDING,
-    MENU_ID.BOARD,
+    MENU_ID.TASK_BOARD,
 ];
 
 // HACK: this need to be changed with new SYSTEM domain planning

apps/web/src/lib/menu/config.ts

@@ -43,8 +43,7 @@ export const MENU_ID = Object.freeze({
     METRIC_EXPLORER: 'metric_explorer',
     OPS_FLOW: 'ops_flow',
     OPS_FLOW_LANDING: 'ops_flow_landing',
-    WORKFLOW: 'workflow',
-    BOARD: 'board',
+    TASK_BOARD: 'task_board',
     TASK_MANAGEMENT: 'task_management',
 } as const);
 

apps/web/src/lib/menu/menu-architecture.ts

@@ -46,7 +46,7 @@ export const MENU_LIST: Menu[] = [
         needPermissionByRole: true,
         subMenuList: [
             { id: MENU_ID.OPS_FLOW_LANDING },
-            { id: MENU_ID.BOARD },
+            { id: MENU_ID.TASK_BOARD },
         ],
     },
     {

apps/web/src/lib/menu/menu-info.ts

@@ -253,25 +253,25 @@ export const MENU_INFO_MAP: Record<MenuId, MenuInfo> = Object.freeze({
     [MENU_ID.OPS_FLOW]: {
         menuId: MENU_ID.OPS_FLOW,
         routeName: OPS_FLOW_ROUTE._NAME,
-        translationId: 'Ops Flow', // TODO: change translation id
+        translationId: 'MENU.OPS_FLOW',
         icon: 'ic_gnb_bell', // TODO: change icon
     },
     [MENU_ID.OPS_FLOW_LANDING]: {
         menuId: MENU_ID.OPS_FLOW_LANDING,
         routeName: OPS_FLOW_ROUTE.LANDING._NAME,
-        translationId: 'Support Center', // TODO: change translation id
-        icon: 'ic_support-center',
+        translationId: 'OpsFlow Landing', // It will be replaced by task management template
+        icon: 'ic_service_service-desk',
     },
-    [MENU_ID.BOARD]: {
-        menuId: MENU_ID.BOARD,
+    [MENU_ID.TASK_BOARD]: {
+        menuId: MENU_ID.TASK_BOARD,
         routeName: OPS_FLOW_ROUTE.BOARD._NAME,
-        translationId: 'Board', // TODO: change translation id
-        icon: 'ic_workflow-board',
+        translationId: 'Board', // It will be replaced by task management template
+        icon: 'ic_service_board',
     },
     [MENU_ID.TASK_MANAGEMENT]: {
         menuId: MENU_ID.TASK_MANAGEMENT,
         routeName: OPS_FLOW_ROUTE.TASK_MANAGEMENT._NAME,
-        translationId: 'Task Management', // TODO: change translation id
-        icon: 'ic_service_administration',
+        translationId: 'MENU.TASK_MANAGEMENT',
+        icon: 'ic_service_task-management',
     },
 });

apps/web/src/lib/site-initializer/index.ts

@@ -24,6 +24,7 @@ import { initDomain } from '@/lib/site-initializer/domain';
 import { initDomainSettings } from '@/lib/site-initializer/domain-settings';
 import { initEcharts } from '@/lib/site-initializer/echarts';
 import { initErrorHandler } from '@/lib/site-initializer/error-handler';
+import { initTaskManagementTemplate } from '@/lib/site-initializer/initTaskManagementTemplate';
 import { initModeSetting } from '@/lib/site-initializer/mode-setting';
 import { checkSsoAccessToken } from '@/lib/site-initializer/sso';
 import { initUserAndAuth } from '@/lib/site-initializer/user-auth';
@@ -83,7 +84,19 @@ const init = async () => {
         initEcharts();
         initErrorHandler();
         initRequestIdleCallback();
-        await checkSsoAccessToken();
+        const results = await Promise.allSettled([
+            checkSsoAccessToken(),
+            initTaskManagementTemplate(),
+        ]);
+        const errors: any[] = [];
+        results.forEach((result) => {
+            if (result.status === 'rejected') {
+                errors.push(result.reason);
+            }
+        });
+        if (errors.length > 0) {
+            throw errors;
+        }
     } catch (e) {
         if (!isRouterInitialized) initRouter();
         throw e;

apps/web/src/lib/site-initializer/initTaskManagementTemplate.ts

@@ -0,0 +1,13 @@
+import { pinia } from '@/store/pinia';
+
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+export const initTaskManagementTemplate = async () => {
+    const taskManagementTemplateStore = useTaskManagementTemplateStore(pinia);
+    await Promise.allSettled([
+        taskManagementTemplateStore.setInitialTemplateId(),
+        taskManagementTemplateStore.setInitialLandingData(),
+    ]);
+};

apps/web/src/schema/config/public-config/api-verbs/create.ts

@@ -1,5 +1,8 @@
+import type { ResourceGroupType } from '@/schema/_common/type';
+
 export interface PublicConfigCreateParameters<T = Record<string, any>> {
     name: string;
     data: T;
+    resource_group: ResourceGroupType;
     tags?: Record<string, any>;
 }

apps/web/src/schema/config/public-config/api-verbs/get-accesible-configs.ts

@@ -0,0 +1,6 @@
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+export interface PublicConfigGetAccessibleConfigsParameters {
+  query?: Query;
+  name?: string;
+}

apps/web/src/schema/config/public-config/api-verbs/get.ts

@@ -0,0 +1,5 @@
+export interface PublicConfigGetParameters {
+    name: string;
+    project_id?: string;
+    workspace_id?: string;
+}

apps/web/src/schema/opsflow/task-category/api-verbs/list.ts

@@ -4,4 +4,5 @@ export interface TaskCategoryListParameters {
     query?: Query;
     category_id?: string;
     name?: string;
+    include_deleted?: boolean;
 }

apps/web/src/schema/opsflow/task-category/model.ts

@@ -5,6 +5,7 @@ import type { TaskStatusOptions } from '@/schema/opsflow/task/type';
 export interface TaskCategoryModel {
     category_id: string;
     name: string;
+    state: 'ACTIVE' | 'DELETED';
     description: string;
     status_options: TaskStatusOptions;
     fields:TaskField[];
@@ -13,4 +14,5 @@ export interface TaskCategoryModel {
     domain_id: string;
     created_at: string;
     updated_at: string;
+    deleted_at: string;
 }

apps/web/src/schema/opsflow/task/api-verbs/change-assignee.ts

@@ -0,0 +1,4 @@
+export interface TaskChangeAssigneeParameters {
+    task_id: string;
+    assignee: string;
+}

apps/web/src/schema/opsflow/task/api-verbs/change-status.ts

@@ -1,6 +1,5 @@
 export interface TaskChangeStatusParameters {
     task_id: string;
-    status: string;
+    status_id: string;
     assignee?: string;
-    comment?: string;
 }

apps/web/src/schema/opsflow/task/api-verbs/update-description.ts

@@ -0,0 +1,9 @@
+import type { FileModel } from '@/schema/file-manager/model';
+import type { MentionTargets } from '@/schema/opsflow/comment/type';
+
+export interface TaskUpdateDescriptionParameters {
+    task_id: string;
+    description?: string;
+    files?: FileModel[];
+    mentions?: MentionTargets;
+}

apps/web/src/schema/opsflow/task/api-verbs/update.ts

@@ -1,15 +1,9 @@
-import type { FileModel } from '@/schema/file-manager/model';
-import type { MentionTargets } from '@/schema/opsflow/comment/type';
 import type { TaskPriority } from '@/schema/opsflow/task/type';
 
 export interface TaskUpdateParameters {
     task_id: string;
     name?: string;
     priority?: TaskPriority;
-    description?: string;
-    files?: FileModel[];
-    mentions?: MentionTargets;
-    assignee?: string;
     data?: Record<string, any>;
     project_id?: string;
 }

apps/web/src/schema/opsflow/task/model.ts

@@ -9,13 +9,14 @@ export interface TaskModel {
     priority: TaskPriority;
     description: string;
     data: Record<string, any>;
-    files: FileModel[];
+    files?: FileModel[];
     assignee: string;
     task_type_id: string;
     category_id: string;
     project_id: string;
     workspace_id: string;
     domain_id: string;
+    created_by: string;
     created_at: string;
     started_at: string;
     updated_at: string;

apps/web/src/services/ops-flow/OpsFlowLSB.vue

@@ -25,6 +25,6 @@ const state = reactive({
 
 <template>
     <aside class="sidebar-menu">
-        <board-l-s-b v-if="state.selectedMenuId === MENU_ID.BOARD" />
+        <board-l-s-b v-if="state.selectedMenuId === MENU_ID.TASK_BOARD" />
     </aside>
 </template>

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

@@ -4,28 +4,32 @@ import { computed } from 'vue';
 import { PFieldTitle, PDataTable } from '@cloudforet/mirinae';
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
+import { i18n } from '@/translations';
+
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
 const taskManagementPageStore = useTaskManagementPageStore();
 
 const fields = computed<DataTableField[]>(() => [
     {
         name: 'name',
-        label: 'Name',
+        label: i18n.t('OPSFLOW.NAME') as string,
         width: '30%',
     },
     {
         name: 'description',
-        label: 'Description',
+        label: i18n.t('OPSFLOW.DESCRIPTION') as string,
         width: '70%',
     },
 ]);
 </script>
 
 <template>
     <div>
-        <p-field-title class="mb-2">
-            Category
+        <p-field-title class="mb-2"
+                       color="gray"
+        >
+            {{ $t('OPSFLOW.TARGET_LIST', {target: $t('OPSFLOW.CATEGORY')}) }}
         </p-field-title>
         <p-data-table :fields="fields"
                       :items="taskManagementPageStore.getters.associatedCategoriesToPackage"