Skip to content

Commit

Permalink
feat: add i18n support for package management components and modals
Browse files Browse the repository at this point in the history 
Signed-off-by: Wanjin Noh <[email protected]>
  • Loading branch information
@WANZARGEN
WANZARGEN committed Dec 17, 2024
1 parent 6bf2ccd commit 2c452e4
Show file tree
Hide file tree
Showing 16 changed files with 615 additions and 165 deletions.
12 changes: 8 additions & 4 deletions apps/web/src/services/ops-flow/components/AssociatedCategories.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
21 changes: 15 additions & 6 deletions apps/web/src/services/ops-flow/components/PackageDeleteModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { ref, computed } from 'vue';
import { PButtonModal } from '@cloudforet/mirinae';
import { getParticle, i18n as _i18n } from '@/translations';
import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
import ErrorHandler from '@/common/composables/error/errorHandler';
Expand All @@ -16,6 +18,13 @@ const packageStore = usePackageStore();
const deletable = computed(() => !taskManagementPageStore.getters.associatedCategoriesToPackage.length
&& !taskManagementPageStore.getters.associatedWorkspacesToPackage.length);
const headerTitle = computed(() => (deletable.value
? _i18n.t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
object: _i18n.t('OPSFLOW.PACKAGE'),
particle: getParticle(_i18n.t('OPSFLOW.PACKAGE') as string, 'object'),
})
: _i18n.t('OPSFLOW.DELETE_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') })));
const loading = ref<boolean>(false);
const handleConfirm = async () => {
loading.value = true;
Expand All @@ -24,9 +33,9 @@ const handleConfirm = async () => {
throw new Error('[Console Error] Cannot delete package without a target package');
}
await packageStore.delete(taskManagementPageStore.state.targetPackageId);
showSuccessMessage('Successfully deleted the package', '');
showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_DELETE_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }) as string, '');
} catch (e) {
ErrorHandler.handleRequestError(e, 'Failed to delete package');
ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_DELETE_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }) as string);
} finally {
taskManagementPageStore.closeDeletePackageModal();
loading.value = false;
Expand All @@ -43,7 +52,7 @@ const handleClosed = () => {
<template>
<p-button-modal :visible="taskManagementPageStore.state.visibleDeletePackageModal"
theme-color="alert"
:header-title="deletable ? 'Are you sure you want to delete this package?' : 'Delete Package'"
:header-title="headerTitle"
:size="deletable ? 'sm' : 'md'"
:loading="loading"
:disabled="!deletable"
Expand All @@ -54,12 +63,12 @@ const handleClosed = () => {
>
<template #body>
<div v-if="!deletable">
<div class="mb-4 flex items-end justify-between">
<div class="mb-6 flex items-end justify-between">
<p class="text-paragraph-lg font-bold ">
연결된 카테고리가 존재하므로 패키지 삭제가 불가합니다.
{{ $t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.DELETE_UNAVAILABLE') }}
</p>
</div>
<associated-categories v-if="!!taskManagementPageStore.getters.associatedCategoriesToPackage.length" />
<associated-categories />
</div>
</template>
</p-button-modal>
Expand Down
219 changes: 115 additions & 104 deletions apps/web/src/services/ops-flow/components/PackageForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@ import {
} from '@cloudforet/mirinae';
import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
import { getParticle } 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 PackageUpdateConfirmModal from '@/services/ops-flow/components/PackageUpdateConfirmModal.vue';
import { useCategoryField } from '@/services/ops-flow/composables/use-category-field';
import { useWorkspaceField } from '@/services/ops-flow/composables/use-workspace-field';
import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
Expand Down Expand Up @@ -79,15 +82,17 @@ const {
},
});
/* modal */
/* update confirm modal */
const visibleUpdateConfirmModal = ref(false);
/* form modal */
const loading = ref(false);
const handleCancelOrClose = () => {
taskManagementPageStore.closePackageForm();
};
const handleClosed = () => {
taskManagementPageStore.resetTargetPackageId();
};
const handleConfirm = async () => {
if (!isAllValid.value) return;
loading.value = true;
Expand All @@ -101,7 +106,7 @@ const handleConfirm = async () => {
// bind workspaces and categories
const errorMessages: string[] = [];
const responses = await Promise.allSettled([
applyPackageToWorkspaces(updatedPackage.package_id, workspaceType.value === 'unset'),
applyPackageToWorkspaces(updatedPackage.package_id),
applyPackageToCategories(updatedPackage.package_id),
]);
responses.forEach((response) => {
Expand All @@ -126,7 +131,7 @@ const handleConfirm = async () => {
// bind workspaces and categories
const errorMessages: string[] = [];
const responses = await Promise.allSettled([
applyPackageToWorkspaces(createdPackage.package_id, workspaceType.value === 'unset'),
applyPackageToWorkspaces(createdPackage.package_id),
applyPackageToCategories(createdPackage.package_id),
]);
responses.forEach((response) => {
Expand Down Expand Up @@ -178,116 +183,122 @@ watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPag


<template>
<p-overlay-layout title="Add Package"
:visible="taskManagementPageState.visiblePackageForm"
@close="handleCancelOrClose"
@closed="handleClosed"
>
<template #default>
<div class="p-6 w-full">
<p-field-group label="Name"
required
:invalid="!loading && invalidState.name"
:invalid-text="invalidTexts.name"
>
<template #default="{ invalid }">
<p-text-input :value="name"
:invalid="invalid"
@update:value="setForm('name', $event)"
<fragment>
<p-overlay-layout :title="taskManagementPageState.targetPackageId ? $t('OPSFLOW.EDIT_TARGET', { target: $t('OPSFLOW.PACKAGE') }) : $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.PACKAGE') })"
:visible="taskManagementPageState.visiblePackageForm"
@close="handleCancelOrClose"
@closed="handleClosed"
>
<template #default>
<div class="p-6 w-full">
<p-field-group :label="$t('OPSFLOW.NAME')"
required
:invalid="!loading && invalidState.name"
:invalid-text="invalidTexts.name"
>
<template #default="{ invalid }">
<p-text-input :value="name"
:invalid="invalid"
@update:value="setForm('name', $event)"
/>
</template>
</p-field-group>
<p-field-group :label="$t('OPSFLOW.DESCRIPTION')"
required
:invalid="invalidState.description"
:invalid-text="invalidTexts.description"
>
<p-textarea :value="description"
:invalid="invalidState.description"
:placeholder="$t('OPSFLOW.DESCRIBE_FIELD', {
field: $t('OPSFLOW.PACKAGE'),
particle: getParticle( $t('OPSFLOW.PACKAGE'), 'object')
})"
@update:value="setForm('description', $event)"
/>
</template>
</p-field-group>
<p-field-group label="Description"
required
:invalid="invalidState.description"
:invalid-text="invalidTexts.description"
>
<p-textarea :value="description"
:invalid="invalidState.description"
placeholder="Describe this support package in a few words."
@update:value="setForm('description', $event)"
/>
</p-field-group>
<p-field-group v-if="!taskManagementPageState.targetPackageId
|| taskManagementPageState.targetPackageId !== taskManagementPageGetters.defaultPackage?.package_id"
:invalid="invalidState.workspaces"
:invalid-text="invalidTexts.workspaces"
label="Workspace"
>
<div class="mt-2">
<p-radio-group>
<p-radio :selected="workspaceType"
value="unset"
@change="handleSelectUnsetWorkspace"
>
Unset
</p-radio>
<p-radio :selected="workspaceType"
value="specific"
@change="workspaceType = $event"
>
Specific Workspaces
</p-radio>
</p-radio-group>
<p-select-dropdown v-if="workspaceType === 'specific'"
class="mt-2"
:selected="selectedWorkspaceItems"
:invalid="invalidState.workspaces"
:handler="workspaceMenuItemsHandler"
</p-field-group>
<p-field-group v-if="!taskManagementPageState.targetPackageId
|| taskManagementPageState.targetPackageId !== taskManagementPageGetters.defaultPackage?.package_id"
:invalid="invalidState.workspaces"
:invalid-text="invalidTexts.workspaces"
:label="$t('OPSFLOW.WORKSPACE')"
>
<div class="mt-2">
<p-radio-group>
<p-radio :selected="workspaceType"
value="unset"
@change="handleSelectUnsetWorkspace"
>
{{ $t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.UNSET') }}
</p-radio>
<p-radio :selected="workspaceType"
value="specific"
@change="workspaceType = $event"
>
{{ $t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.SPECIFIC_WORKSPACE') }}
</p-radio>
</p-radio-group>
<p-select-dropdown v-if="workspaceType === 'specific'"
class="mt-2"
:selected="selectedWorkspaceItems"
:invalid="invalidState.workspaces"
:handler="workspaceMenuItemsHandler"
:page-size="10"
appearance-type="badge"
menu-position="left"
show-select-marker
multi-selectable
use-fixed-menu-style
block
show-clear-selection
is-filterable
init-selected-with-handler
@update:selected="handleUpdateWorkspaces"
/>
</div>
</p-field-group>
<p-field-group v-if="!taskManagementPageState.targetPackageId
|| taskManagementPageState.targetPackageId !== taskManagementPageGetters.defaultPackage?.package_id"
:label="$t('OPSFLOW.CATEGORY')"
:invalid="invalidState.categories"
:invalid-text="invalidTexts.categories"
>
<p-select-dropdown :selected="selectedCategoryItems"
:handler="categoryMenuItemsHandler"
:invalid="invalidState.categories"
:page-size="10"
appearance-type="badge"
menu-position="left"
show-select-marker
multi-selectable
use-fixed-menu-style
block
show-clear-selection
is-filterable
init-selected-with-handler
@update:selected="handleUpdateWorkspaces"
@update:selected="setSelectedCategoryItems"
/>
</div>
</p-field-group>
<p-field-group v-if="!taskManagementPageState.targetPackageId
|| taskManagementPageState.targetPackageId !== taskManagementPageGetters.defaultPackage?.package_id"
label="Category"
:invalid="invalidState.categories"
:invalid-text="invalidTexts.categories"
>
<p-select-dropdown :selected="selectedCategoryItems"
:handler="categoryMenuItemsHandler"
:invalid="invalidState.categories"
:page-size="10"
appearance-type="badge"
show-select-marker
multi-selectable
use-fixed-menu-style
block
show-clear-selection
is-filterable
init-selected-with-handler
@update:selected="setSelectedCategoryItems"
/>
</p-field-group>
</div>
</template>
<template #footer>
<div class="py-3 px-6 flex flex-wrap gap-3 justify-end">
<p-button style-type="transparent"
:disabled="loading"
@click="handleCancelOrClose"
>
Cancel
</p-button>
<p-button style-type="primary"
:loading="loading"
:disabled="!isAllValid"
@click="handleConfirm"
>
Confirm
</p-button>
</div>
</template>
</p-overlay-layout>
</p-field-group>
</div>
</template>
<template #footer>
<div class="py-3 px-6 flex flex-wrap gap-3 justify-end">
<p-button style-type="transparent"
:disabled="loading"
@click="handleCancelOrClose"
>
{{ $t('COMMON.BUTTONS.CANCEL') }}
</p-button>
<p-button style-type="primary"
:loading="loading"
:disabled="!isAllValid"
@click="handleConfirm"
>
{{ $t('COMMON.BUTTONS.CONFIRM') }}
</p-button>
</div>
</template>
</p-overlay-layout>
<package-update-confirm-modal :visible="visibleUpdateConfirmModal" />
</fragment>
</template>

Loading

0 comments on commit 2c452e4

Please sign in to comment.