feat: implement i18n for task management templates and messages

Signed-off-by: Wanjin Noh <[email protected]>

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

@@ -26,10 +26,10 @@ const predicate: LSBRouterPredicate = (to, currentRoute) => to.query?.categoryId
                              })"
                              :predicate="predicate"
         >
-            All Categories
+            {{ $t('OPSFLOW.ALL_CATEGORIES') }}
         </l-s-b-router-button>
         <l-s-b-divider />
-        <l-s-b-top-title>Category</l-s-b-top-title>
+        <l-s-b-top-title>{{ $t('OPSFLOW.CATEGORY') }}</l-s-b-top-title>
         <l-s-b-loading-spinner :loading="taskCategoryGetters.loading" />
         <l-s-b-router-item v-for="(category, idx) in taskCategoryGetters.taskCategories"
                            :id="`${category.category_id}-${idx}`"

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

@@ -13,6 +13,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 import type { CollapsibleItem } from '@cloudforet/mirinae/types/data-display/collapsible/collapsible-list/type';
 
 import type { CommentModel } from '@/schema/opsflow/comment/model';
+import { i18n } from '@/translations';
 
 import type { UserReferenceItem } from '@/store/reference/user-reference-store';
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
@@ -55,9 +56,9 @@ const addComment = async (cmt: string) => {
             task_id: props.taskId,
             comment: cmt,
         }, true);
-        showSuccessMessage('Comment added successfully', '');
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_ADD_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
     } catch (e) {
-        ErrorHandler.handleRequestError(e, 'Failed to add comment');
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_ADD_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
     } finally {
         addingComment.value = false;
     }
@@ -353,7 +354,7 @@ onBeforeMount(async () => {
     <p-pane-layout class="pt-8 pb-10 px-4">
         <p-heading class="mb-6"
                    heading-type="sub"
-                   title="Comment"
+                   :title="$t('OPSFLOW.TASK_BOARD.COMMENT')"
         />
         <div ref="containerRef"
              class="relative mb-3"
@@ -370,7 +371,7 @@ onBeforeMount(async () => {
             <div ref="contentEditableDivRef"
                  contenteditable="true"
                  class="contenteditable-div"
-                 data-placeholder="Add Comment"
+                 :data-placeholder="$t('OPSFLOW.TASK_BOARD.COMMENT')"
                  @input="handleInput"
                  @keydown="handleKeydown"
                  @scroll="syncScroll"
@@ -394,7 +395,7 @@ onBeforeMount(async () => {
                   :loading="addingComment"
                   @click="handleClickAddComment"
         >
-            Add Comment
+            {{ $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.TASK_BOARD.COMMENT') }) }}
         </p-button>
         <p-collapsible-list :items="commentItems"
                             toggle-position="contents"

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

@@ -5,14 +5,17 @@ import {
 
 import { isEqual } from 'lodash';
 
-import { PSelectDropdown } from '@cloudforet/mirinae';
+import { PSelectDropdown, PBadge } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
 
 import { useTaskStatusField } from '@/services/ops-flow/composables/use-task-status-field';
 import { useTaskTypeField } from '@/services/ops-flow/composables/use-task-type-field';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 import type { TaskFilters } from '@/services/ops-flow/types/task-filters-type';
 
 const props = defineProps<{
@@ -21,6 +24,7 @@ const props = defineProps<{
 const emit = defineEmits<{(event: 'update', value: TaskFilters): void;
 }>();
 
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
 
 /* task type */
 const {
@@ -86,7 +90,7 @@ watch(taskFilters, (newValue, oldValue) => {
         <p-select-dropdown v-if="props.categoryId"
                            :selected="selectedTaskTypeItems"
                            :handler="taskTypeMenuItemsHandler"
-                           selection-label="Topic"
+                           :selection-label="taskManagementTemplateStore.templates.Task"
                            appearance-type="badge"
                            style-type="rounded"
                            multi-selectable
@@ -97,18 +101,26 @@ watch(taskFilters, (newValue, oldValue) => {
         <p-select-dropdown v-if="props.categoryId"
                            :selected="selectedStatusItems"
                            :handler="statusMenuItemsHandler"
-                           selection-label="Status"
+                           :selection-label="$t('OPSFLOW.STATUS')"
                            appearance-type="badge"
                            style-type="rounded"
                            multi-selectable
                            show-select-marker
                            show-delete-all-button
                            @update:selected="handleUpdateSelectedStatusItems"
-        />
+        >
+            <template #menu-item--format="{ item }">
+                <p-badge badge-type="subtle"
+                         :style-type="item.color"
+                >
+                    {{ item.label }}
+                </p-badge>
+            </template>
+        </p-select-dropdown>
         <project-select-dropdown multi-selectable
                                  project-selectable
                                  :selected-project-ids="selectedProjectIds"
-                                 selection-label="Project"
+                                 :selection-label="$t('OPSFLOW.PROJECT')"
                                  style-type="rounded"
                                  appearance-type="badge"
                                  show-delete-all-button
@@ -117,7 +129,7 @@ watch(taskFilters, (newValue, oldValue) => {
         />
         <user-select-dropdown multi-selectable
                               :user-ids="selectedCreatedBy"
-                              selection-label="Created By"
+                              :selection-label="$t('OPSFLOW.CREATED_BY')"
                               style-type="rounded"
                               appearance-type="badge"
                               selection-type="multiple"
@@ -126,7 +138,7 @@ watch(taskFilters, (newValue, oldValue) => {
         />
         <user-select-dropdown multi-selectable
                               :user-ids="selectedAssignee"
-                              selection-label="Assignee"
+                              :selection-label="$t('OPSFLOW.ASSIGNEE')"
                               style-type="rounded"
                               appearance-type="badge"
                               selection-type="multiple"

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

@@ -16,6 +16,7 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/
 import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
 import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
 import type { TaskModel } from '@/schema/opsflow/task/model';
+import { i18n } from '@/translations';
 
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
 
@@ -184,12 +185,12 @@ const handleUpdateFilters = (values: TaskFilters) => {
 const fields = computed<DataTableField[] >(() => [
     {
         name: 'name',
-        label: 'Title',
+        label: i18n.t('OPSFLOW.TITLE') as string,
         width: '13rem',
     },
     {
         name: 'description',
-        label: 'Description',
+        label: i18n.t('OPSFLOW.DESCRIPTION') as string,
         width: '15rem',
     },
     {
@@ -198,23 +199,23 @@ const fields = computed<DataTableField[] >(() => [
     },
     {
         name: 'status_id',
-        label: 'Status',
+        label: i18n.t('OPSFLOW.STATUS') as string,
     },
     {
         name: 'project_id',
-        label: 'Project',
+        label: i18n.t('OPSFLOW.PROJECT') as string,
     },
     {
         name: 'assignee',
-        label: 'Assignee',
+        label: i18n.t('OPSFLOW.ASSIGNEE') as string,
     },
     {
         name: 'created_by',
-        label: 'Created By',
+        label: i18n.t('OPSFLOW.CREATED_BY') as string,
     },
     {
         name: 'created_at',
-        label: 'Created At',
+        label: i18n.t('OPSFLOW.CREATED_AT') as string,
     },
 ]);
 

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { getParticle, i18n } from '@/translations';
+
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
@@ -18,9 +20,9 @@ const deleteComment = async () => {
         if (!taskDetailPageStore.state.targetComment) throw new Error('targetComment is not defined');
         loading.value = true;
         await commentStore.delete(taskDetailPageStore.state.targetComment.comment_id);
-        showSuccessMessage('Comment deleted successfully', '');
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_DELETE_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
     } catch (e) {
-        ErrorHandler.handleRequestError(e, 'Failed to delete comment');
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ERR_S_DELETE_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
     } finally {
         loading.value = false;
         taskDetailPageStore.closeCommentDeleteModal();
@@ -33,7 +35,9 @@ const handleConfirm = async () => {
 </script>
 
 <template>
-    <delete-modal header-title="Are you sure you want to delete this comment?"
+    <delete-modal :header-title="$t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
+                      object: $t('OPSFLOW.TASK_BOARD.COMMENT'),
+                      particle:getParticle($t('OPSFLOW.TASK_BOARD.COMMENT'),'object') })"
                   :visible="taskDetailPageStore.state.visibleCommentDeleteModal"
                   :loading="loading"
                   @close="taskDetailPageStore.closeCommentDeleteModal()"

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

@@ -9,6 +9,7 @@ import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tabl
 import type { ToolboxTableOptions } from '@cloudforet/mirinae/types/data-display/tables/toolbox-table/type';
 
 import type { TaskModel } from '@/schema/opsflow/task/model';
+import { i18n } from '@/translations';
 
 import type { UserReferenceItem } from '@/store/reference/user-reference-store';
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
@@ -76,10 +77,10 @@ const updateTaskAssignee = async (): Promise<TaskModel|undefined> => {
         if (selectIndex.value.length === 0) throw new Error('assignee is not selected');
         const newTask = await taskStore.changeAssignee(taskAssignStore.state.taskId, refinedUserItems.value[selectIndex.value[0]].name);
         taskContentFormStore.setAssigneeToOriginTask(newTask.assignee);
-        showSuccessMessage('Task assigned successfully', '');
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_ASSIGN'), '');
         return newTask;
     } catch (e) {
-        ErrorHandler.handleRequestError(e, 'Failed to assign task');
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_ASSIGN'));
         return undefined;
     }
 };
@@ -104,7 +105,7 @@ watch(() => taskAssignStore.state.visibleAssignModal, (visible) => {
 
 <template>
     <p-button-modal :visible="taskAssignStore.state.visibleAssignModal"
-                    header-title="Assign Member"
+                    :header-title="$t('OPSFLOW.TASK_BOARD.ASSIGN_TO')"
                     size="md"
                     :loading="loading || updating"
                     :disabled="selectIndex.length === 0"

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

@@ -4,14 +4,16 @@ import { computed, watch } from 'vue';
 import { isEqual } from 'lodash';
 
 import {
-    PFieldTitle, PFieldGroup, PSelectDropdown, PPaneLayout, PButton,
+    PFieldTitle, PFieldGroup, PSelectDropdown, PPaneLayout, PButton, PBadge,
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
 import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import { i18n } from '@/translations';
 
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
@@ -25,6 +27,9 @@ import { useTaskAssignStore } from '@/services/ops-flow/stores/task-assign-store
 import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
 import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
 import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
 const taskContentFormStore = useTaskContentFormStore();
 const taskContentFormState = taskContentFormStore.state;
@@ -33,6 +38,8 @@ const userReferenceStore = useUserReferenceStore();
 const taskAssignStore = useTaskAssignStore();
 const taskStore = useTaskStore();
 const taskDetailPageStore = useTaskDetailPageStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+const userStore = useUserStore();
 
 /* category */
 const {
@@ -94,9 +101,9 @@ const changeStatus = async (statusId: string) => {
             throw new Error('Origin task is not defined');
         }
         await taskStore.changeStatus(taskContentFormState.originTask.task_id, statusId);
-        showSuccessMessage('Status changed successfully', '');
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_UPDATE_TARGET', { target: i18n.t('OPSFLOW.STATUS') }));
     } catch (e) {
-        ErrorHandler.handleRequestError(e, 'Failed to change status');
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_UPDATE_TARGET', { target: i18n.t('OPSFLOW.STATUS') }));
     }
 };
 const handleUpdateSelectedStatus = (items) => {
@@ -213,7 +220,7 @@ watch([() => taskContentFormState.currentCategoryId, () => taskContentFormState.
     >
         <div class="base-form-top-wrapper">
             <div class="base-form-field-wrapper">
-                <p-field-group label="Category"
+                <p-field-group :label="taskManagementTemplateStore.templates.TaskCategory"
                                :style-type="taskContentFormState.mode === 'create' ? 'primary' : 'secondary'"
                                required
                                :invalid="invalidState.category"
@@ -229,7 +236,7 @@ watch([() => taskContentFormState.currentCategoryId, () => taskContentFormState.
                 </p-field-group>
             </div>
             <div class="base-form-field-wrapper">
-                <p-field-group label="Type"
+                <p-field-group :label="taskManagementTemplateStore.templates.TaskType"
                                :style-type="taskContentFormState.mode === 'create' ? 'primary' : 'secondary'"
                                required
                                :invalid="invalidState.taskType"
@@ -249,7 +256,7 @@ watch([() => taskContentFormState.currentCategoryId, () => taskContentFormState.
              class="base-form-top-wrapper"
         >
             <div class="base-form-field-wrapper">
-                <p-field-group label="Status"
+                <p-field-group :label="$t('OPSFLOW.STATUS')"
                                style-type="secondary"
                                required
                                :invalid="invalidState.status"
@@ -258,10 +265,25 @@ watch([() => taskContentFormState.currentCategoryId, () => taskContentFormState.
                     <p-select-dropdown :selected="selectedStatusItems"
                                        :handler="statusMenuItemsHandler"
                                        :invalid="invalidState.status"
-                                       :readonly="!taskContentFormGetters.currentCategory"
+                                       :readonly="!userStore.getters.isDomainAdmin || !taskContentFormGetters.currentCategory"
                                        block
                                        @update:selected="handleUpdateSelectedStatus"
-                    />
+                    >
+                        <template #dropdown-button="item">
+                            <p-badge badge-type="subtle"
+                                     :style-type="item.color"
+                            >
+                                {{ item.label }}
+                            </p-badge>
+                        </template>
+                        <template #menu-item--format="{ item }">
+                            <p-badge badge-type="subtle"
+                                     :style-type="item.color"
+                            >
+                                {{ item.label }}
+                            </p-badge>
+                        </template>
+                    </p-select-dropdown>
                 </p-field-group>
             </div>
             <div class="base-form-field-wrapper">
@@ -270,13 +292,14 @@ watch([() => taskContentFormState.currentCategoryId, () => taskContentFormState.
                         <p-field-title size="sm"
                                        color="gray"
                         >
-                            Assign to
+                            {{ userStore.getters.isDomainAdmin ? $t('OPSFLOW.TASK_BOARD.ASSIGN_TO') : $t('OPSFLOW.ASSIGNEE') }}
                         </p-field-title>
-                        <p-button size="sm"
+                        <p-button v-if="userStore.getters.isDomainAdmin"
+                                  size="sm"
                                   style-type="tertiary"
                                   @click="handleClickAssign"
                         >
-                            Assign
+                            {{ $t('OPSFLOW.TASK_BOARD.ASSIGN') }}
                         </p-button>
                     </div>
                     <p class="mt-1 text-label-md text-blue-900">