feat: wip support i18n

This commit is contained in:
lleohao
2024-09-01 13:22:13 +00:00
parent cd1a848b45
commit 2bef37a1d0
9 changed files with 72 additions and 23 deletions

View File

@ -98,7 +98,10 @@
"Active": "Active",
"Add members": "Add members",
"Search for users": "Search for users",
"No user found": "No user found"
"No user found": "No user found",
"Add groups": "Add groups",
"Search for groups": "Search for groups",
"No group found": "No group found"
},
"space": {
"Spaces": "Spaces",

View File

@ -5,6 +5,20 @@
"No pages yet": "No pages yet",
"Failed to load page. An error occurred.": "Failed to load page. An error occurred."
},
"role": {
"Full access": "Full access",
"Has full access to space settings and pages.": "Has full access to space settings and pages.",
"Can edit": "Can edit",
"Can create and edit pages in space.": "Can create and edit pages in space.",
"Can view": "Can view",
"Can view pages in space but not edit.": "Can view pages in space but not edit.",
"Owner": "Owner",
"Can manage workspace": "Can manage workspace",
"Admin": "Admin",
"Can manage workspace but cannot delete it": "Can manage workspace but cannot delete it",
"Member": "Member",
"Can become members of groups and spaces in workspace": "Can become members of groups and spaces in workspace"
},
"layout": {
"Home": "Home",
"Workspace": "Workspace",

View File

@ -98,7 +98,10 @@
"Active": "活跃",
"Add members": "添加成员",
"Search for users": "搜索用户",
"No user found": "未找到用户"
"No user found": "未找到用户",
"Add groups": "添加群组",
"Search for groups": "搜索群组",
"No group found": "未找到群组"
},
"space": {
"Spaces": "空间",

View File

@ -5,6 +5,20 @@
"No pages yet": "暂无页面",
"Failed to load page. An error occurred.": "加载页面失败。发生错误。"
},
"role": {
"Full access": "完全访问",
"Has full access to space settings and pages": "具有对空间设置和页面的完全访问权限",
"Can edit": "可以编辑",
"Can create and edit pages in space": "可以在空间中创建和编辑页面",
"Can view": "可以查看",
"Can view pages in space but not edit": "可以查看空间中的页面但不能编辑",
"Owner": "所有者",
"Can manage workspace": "可以管理工作区",
"Admin": "管理员",
"Can manage workspace but cannot delete it": "可以管理工作区但不能删除它",
"Member": "成员",
"Can become members of groups and spaces in workspace": "可以成为工作区中群组和空间的成员"
},
"layout": {
"Home": "首页",
"Workspace": "工作区",

View File

@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
import { IconCheck, IconChevronDown } from "@tabler/icons-react";
import { Group, Text, Menu, Button } from "@mantine/core";
import { IRoleData } from "@/lib/types.ts";
import { useTranslation } from "react-i18next";
interface RoleButtonProps extends React.ComponentPropsWithoutRef<"button"> {
name: string;
@ -36,10 +37,14 @@ export default function RoleSelectMenu({
onChange,
disabled,
}: RoleMenuProps) {
const { t } = useTranslation("translation", {
keyPrefix: "role",
});
return (
<Menu withArrow>
<Menu.Target>
<RoleButton name={roleName} disabled={disabled} />
<RoleButton name={t(roleName)} disabled={disabled} />
</Menu.Target>
<Menu.Dropdown>
@ -50,9 +55,9 @@ export default function RoleSelectMenu({
>
<Group flex="1" gap="xs">
<div>
<Text size="sm">{item.label}</Text>
<Text size="sm">{t(item.label)}</Text>
<Text size="xs" opacity={0.65}>
{item.description}
{t(item.description)}
</Text>
</div>
{item.label === roleName && <IconCheck size={20} />}

View File

@ -4,6 +4,7 @@ import { Group, MultiSelect, MultiSelectProps, Text } from "@mantine/core";
import { useGetGroupsQuery } from "@/features/group/queries/group-query.ts";
import { IGroup } from "@/features/group/types/group.types.ts";
import { IconUsersGroup } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
interface MultiGroupSelectProps {
onChange: (value: string[]) => void;
@ -29,6 +30,9 @@ export function MultiGroupSelect({
description,
mt,
}: MultiGroupSelectProps) {
const { t } = useTranslation("settings", {
keyPrefix: "workspace.group",
});
const [searchValue, setSearchValue] = useState("");
const [debouncedQuery] = useDebouncedValue(searchValue, 500);
const { data: groups, isLoading } = useGetGroupsQuery({
@ -64,8 +68,8 @@ export function MultiGroupSelect({
hidePickedOptions
maxDropdownHeight={300}
description={description}
label={label || "Add groups"}
placeholder="Search for groups"
label={label || t("Add groups")}
placeholder={t("Search for groups")}
mt={mt}
searchable
searchValue={searchValue}
@ -73,7 +77,7 @@ export function MultiGroupSelect({
clearable
variant="filled"
onChange={onChange}
nothingFoundMessage="No group found"
nothingFoundMessage={t("No group found")}
maxValues={50}
/>
);

View File

@ -9,7 +9,7 @@ export const spaceRoleData: IRoleData[] = [
{
label: "Can edit",
value: SpaceRole.WRITER,
description: "Can create and edit pages in space.",
description: "Can create and edit pages in space",
},
{
label: "Can view",

View File

@ -11,9 +11,7 @@ interface Props {
onClose: () => void;
}
export function WorkspaceInviteForm({ onClose }: Props) {
const { t } = useTranslation("settings", {
keyPrefix: "workspace.member",
});
const { t } = useTranslation(["settings", "translation"]);
const [emails, setEmails] = useState<string[]>([]);
const [role, setRole] = useState<string | null>(UserRole.MEMBER);
const [groupIds, setGroupIds] = useState<string[]>([]);
@ -49,10 +47,10 @@ export function WorkspaceInviteForm({ onClose }: Props) {
<TagsInput
mt="sm"
description={t(
"Enter valid email addresses separated by comma or space max_50",
"workspace.member.Enter valid email addresses separated by comma or space max_50",
)}
label={t("Invite by email")}
placeholder={t("enter valid emails addresses")}
label={t("workspace.member.Invite by email")}
placeholder={t("workspace.member.enter valid emails addresses")}
variant="filled"
splitChars={[",", " "]}
maxDropdownHeight={200}
@ -62,11 +60,19 @@ export function WorkspaceInviteForm({ onClose }: Props) {
<Select
mt="sm"
description={t("Select role to assign to all invited members")}
label={t("Select role")}
placeholder={t("Choose a role")}
description={t(
"workspace.member.Select role to assign to all invited members",
)}
label={t("workspace.member.Select role")}
placeholder={t("workspace.member.Choose a role")}
variant="filled"
data={userRoleData.filter((role) => role.value !== UserRole.OWNER)}
data={userRoleData
.filter((role) => role.value !== UserRole.OWNER)
.map((role) => ({
...role,
label: t(`role.${role.label}`, { ns: "translation" }),
description: t(`role.${role.description}`, { ns: "translation" }),
}))}
defaultValue={UserRole.MEMBER}
allowDeselect={false}
checkIconPosition="right"
@ -76,9 +82,9 @@ export function WorkspaceInviteForm({ onClose }: Props) {
<MultiGroupSelect
mt="sm"
description={t(
"Invited members will be granted access to spaces the groups can access",
"workspace.member.Invited members will be granted access to spaces the groups can access",
)}
label={t("Add to groups")}
label={t("workspace.member.Add to groups")}
onChange={handleGroupSelect}
/>
@ -87,7 +93,7 @@ export function WorkspaceInviteForm({ onClose }: Props) {
onClick={handleSubmit}
loading={createInvitationMutation.isPending}
>
{t("Send invitation")}
{t("workspace.member.Send invitation")}
</Button>
</Group>
</Box>

View File

@ -14,7 +14,7 @@ export const userRoleData: IRoleData[] = [
{
label: "Member",
value: UserRole.MEMBER,
description: "Can become members of groups and spaces in workspace.",
description: "Can become members of groups and spaces in workspace",
},
];