Skip to content

Commit

Permalink
Internationalisation of backend menu management
Browse files Browse the repository at this point in the history
  • Loading branch information
@dafengzhen
dafengzhen committed Mar 24, 2024
1 parent 929c44d commit 9d2f0bd
Show file tree
Hide file tree
Showing 8 changed files with 82 additions and 122 deletions.
25 changes: 8 additions & 17 deletions web/app/[locale]/admin/menus/[id]/delete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ import RefreshAction from '@/app/[locale]/actions/refresh-action';
import type { IMenu } from '@/app/[locale]/interfaces/menus';
import DeleteMenuAction from '@/app/[locale]/actions/menus/delete-menu-action';
import useMenuActionPermission from '@/app/[locale]/hooks/use-menu-action-permission';
import { useTranslations } from 'next-intl';

export default function Delete({ menu }: { menu: IMenu }) {
const { toast } = useContext(GlobalContext);
const { isActionDisabled, AccessDeniedAlert } = useMenuActionPermission(
'/admin/menus',
'Menus#Delete',
);
const t = useTranslations();

const deleteMenuActionMutation = useMutation({
mutationFn: async (variables: { id: number }) => {
Expand All @@ -35,7 +37,7 @@ export default function Delete({ menu }: { menu: IMenu }) {

toast.current.show({
type: 'success',
message: 'Deleted Successfully, Refresh after 2 seconds',
message: t('common.successfullyDeleted'),
});

setTimeout(() => {
Expand All @@ -57,34 +59,23 @@ export default function Delete({ menu }: { menu: IMenu }) {
<Box>
<div className="alert alert-danger" role="alert">
<h4 className="alert-heading">
<span className="me-2 text-danger">Delete</span>
<span className="text-danger">
{menu.name}&nbsp;(ID. {menu.id})
</span>
</h4>
<p className="fw-medium">{`{ @Link ${menu.link} }`}</p>
<ul className="list-unstyled fw-medium">
<li>
Irreversible deletion! All data related to the menu will be deleted.
</li>
<li>
Please proceed with caution when performing deletion, as what you
may actually want to do is an update operation.
</li>
</ul>
<p className="fw-medium">{`{ ${menu.link} }`}</p>
<hr />
<p className="mb-0">
After pressing the delete button, the processing will begin. Please
wait patiently for the deletion to be completed.
</p>
<p className="mb-0">{t('common.deleteFormText')}</p>
<div className="mt-4">
<button
onClick={onClickDelete}
disabled={isActionDisabled || deleteMenuActionMutation.isPending}
type="button"
className="btn btn-sm btn-danger"
>
{deleteMenuActionMutation.isPending ? 'Deleting' : 'Delete'}
{deleteMenuActionMutation.isPending
? t('common.deleting')
: t('common.delete')}
</button>
<AccessDeniedAlert />
</div>
Expand Down
15 changes: 7 additions & 8 deletions web/app/[locale]/admin/menus/[id]/update-roles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import UpdateRolesMenuAction, {
type IUpdateRolesMenuActionVariables,
} from '@/app/[locale]/actions/menus/update-roles-menu-action';
import useMenuActionPermission from '@/app/[locale]/hooks/use-menu-action-permission';
import { useTranslations } from 'next-intl';

export default function UpdateRoles({ menu }: { menu: IMenu }) {
const { toast } = useContext(GlobalContext);
Expand All @@ -21,6 +22,7 @@ export default function UpdateRoles({ menu }: { menu: IMenu }) {
'/admin/menus',
'Menus#Update Roles',
);
const t = useTranslations();

const updateRolesMenuActionMutation = useMutation({
mutationFn: async (variables: {
Expand Down Expand Up @@ -53,7 +55,7 @@ export default function UpdateRoles({ menu }: { menu: IMenu }) {

toast.current.show({
type: 'success',
message: 'Roles updated successfully',
message: t('common.successfulUpdate'),
});
} catch (e: any) {
updateRolesMenuActionMutation.reset();
Expand All @@ -68,7 +70,7 @@ export default function UpdateRoles({ menu }: { menu: IMenu }) {
<Box title={`${menu.name} (ID. ${menu.id})`}>
<form className="vstack gap-4" onSubmit={onSubmit}>
<div>
<label className="form-label">Roles</label>
<label className="form-label">{t('common.roles')}</label>
<div className="card rounded-2">
<div className="card-body">
<SimpleDynamicInput
Expand All @@ -78,10 +80,7 @@ export default function UpdateRoles({ menu }: { menu: IMenu }) {
/>
</div>
</div>
<div className="form-text">
Please enter the role ID. If you haven&apos;t created a role yet,
please create a role first
</div>
<div className="form-text">{t('common.rolesFormText')}</div>
</div>

<div>
Expand All @@ -93,8 +92,8 @@ export default function UpdateRoles({ menu }: { menu: IMenu }) {
className="btn btn-success"
>
{updateRolesMenuActionMutation.isPending
? 'Updating'
: 'Update Menu Roles'}
? t('common.updating')
: t('common.update')}
</button>
<AccessDeniedAlert />
</div>
Expand Down
65 changes: 18 additions & 47 deletions web/app/[locale]/admin/menus/[id]/update.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import UpdateMenuAction, {
} from '@/app/[locale]/actions/menus/update-menu-action';
import SimpleDynamicInput from '@/app/[locale]/common/simple-dynamic-input';
import useMenuActionPermission from '@/app/[locale]/hooks/use-menu-action-permission';
import { useTranslations } from 'next-intl';

export default function Update({ menu }: { menu: IMenu }) {
const { toast } = useContext(GlobalContext);
Expand All @@ -33,6 +34,7 @@ export default function Update({ menu }: { menu: IMenu }) {
'/admin/menus',
'Menus#Update',
);
const t = useTranslations();

const updateMenuActionMutation = useMutation({
mutationFn: async (variables: {
Expand All @@ -57,14 +59,14 @@ export default function Update({ menu }: { menu: IMenu }) {
if (!variables.name) {
toast.current.show({
type: 'danger',
message: 'The menu name cannot be empty',
message: t('common.nameCannotBeEmpty'),
});
return;
}
if (!variables.link) {
toast.current.show({
type: 'danger',
message: 'The menu link cannot be empty',
message: t('common.menuLinkCannotBeEmpty'),
});
return;
}
Expand All @@ -81,7 +83,7 @@ export default function Update({ menu }: { menu: IMenu }) {

toast.current.show({
type: 'success',
message: 'Successfully updated',
message: t('common.successfulUpdate'),
});
} catch (e: any) {
updateMenuActionMutation.reset();
Expand All @@ -102,66 +104,51 @@ export default function Update({ menu }: { menu: IMenu }) {
<Box>
<form className="vstack gap-4" onSubmit={onSubmit}>
<div>
<label className="form-label">
<span className="text-danger fw-bold">*</span>
Name
</label>
<label className="form-label">{t('common.name')}</label>
<input
required
type="text"
className="form-control"
name="name"
value={form.name}
onChange={onChangeForm}
placeholder="Please enter the menu name"
aria-describedby="name"
minLength={1}
/>
<div className="form-text">The menu name cannot be empty</div>
<div className="form-text">{t('common.nameCannotBeEmpty')}</div>
</div>

<div>
<label className="form-label">
<span className="text-danger fw-bold">*</span>
Link
</label>
<label className="form-label">{t('common.link')}</label>
<input
required
type="text"
className="form-control"
name="link"
value={form.link}
onChange={onChangeForm}
placeholder="Please enter the menu link"
aria-describedby="link"
minLength={1}
/>
<div className="form-text">The menu link cannot be empty</div>
<div className="form-text">
The link can be either a page path or a regular access link
</div>
<div className="form-text">{t('common.menuLinkFormText')}</div>
</div>

<div>
<label className="form-label">
<span className="text-danger fw-bold">*</span>
Sort
</label>
<label className="form-label"> {t('common.sort')}</label>
<input
min={0}
type="number"
className="form-control"
name="sort"
value={form.sort}
onChange={onChangeForm}
placeholder="Please enter the menu sort"
aria-describedby="sort"
/>
<div className="form-text">The minimum value for sorting is 0</div>
<div className="form-text">{t('common.minimumValueIs0')}</div>
</div>

<div>
<label className="form-label">Submenus</label>
<label className="form-label">{t('common.submenus')}</label>
<div className="card rounded-2">
<div className="card-body">
<SimpleDynamicInput
Expand All @@ -171,18 +158,11 @@ export default function Update({ menu }: { menu: IMenu }) {
/>
</div>
</div>
<div className="form-text">
Please enter the submenu ID. If you haven&apos;t created a tag group
yet, please create one first
</div>
<div className="form-text">
The note to remove the submenu means that the submenu will also be
deleted
</div>
<div className="form-text">{t('common.submenusFormText')}</div>
</div>

<div>
<label className="form-label">Actions</label>
<label className="form-label">{t('common.actions')}</label>
<div className="card rounded-2">
<div className="card-body">
<SimpleDynamicInput
Expand All @@ -192,18 +172,7 @@ export default function Update({ menu }: { menu: IMenu }) {
/>
</div>
</div>
<div className="form-text">
Please enter the action ID. If you haven&apos;t created a tag group
yet, please create one first
</div>
<div className="form-text">
The note to remove the action means that the action will also be
deleted
</div>
<div className="form-text">
The action corresponds to a menu or submenu, and if the action is
already used by another menu, you should create a new action
</div>
<div className="form-text">{t('common.actionsFormText')}</div>
</div>

<div>
Expand All @@ -212,7 +181,9 @@ export default function Update({ menu }: { menu: IMenu }) {
type="submit"
className="btn btn-success"
>
{updateMenuActionMutation.isPending ? 'Updating' : 'Update Menu'}
{updateMenuActionMutation.isPending
? t('common.updating')
: t('common.update')}
</button>
<AccessDeniedAlert />
</div>
Expand Down
Loading

0 comments on commit 9d2f0bd

Please sign in to comment.