mirror of
https://github.com/docmost/docmost.git
synced 2025-11-16 06:21:13 +10:00
Support I18n (#243)
* feat: support i18n * feat: wip support i18n * feat: complete space translation * feat: complete page translation * feat: update space translation * feat: update workspace translation * feat: update group translation * feat: update workspace translation * feat: update page translation * feat: update user translation * chore: update pnpm-lock * feat: add query translation * refactor: merge to single file * chore: remove necessary code * feat: save language to BE * fix: only load current language * feat: save language to locale column * fix: cleanups * add language menu to preferences page * new translations * translate editor * Translate editor placeholders * translate space selection component --------- Co-authored-by: Philip Okugbe <phil@docmost.com> Co-authored-by: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
This commit is contained in:
@ -1,8 +1,9 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { Avatar, Group, Select, SelectProps, Text } from '@mantine/core';
|
||||
import { useGetSpacesQuery } from '@/features/space/queries/space-query.ts';
|
||||
import { ISpace } from '../../types/space.types';
|
||||
import { useEffect, useState } from "react";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { Avatar, Group, Select, SelectProps, Text } from "@mantine/core";
|
||||
import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
|
||||
import { ISpace } from "../../types/space.types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface SpaceSelectProps {
|
||||
onChange: (value: string) => void;
|
||||
@ -10,7 +11,7 @@ interface SpaceSelectProps {
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const renderSelectOption: SelectProps['renderOption'] = ({ option }) => (
|
||||
const renderSelectOption: SelectProps["renderOption"] = ({ option }) => (
|
||||
<Group gap="sm">
|
||||
<Avatar color="initials" variant="filled" name={option.label} size={20} />
|
||||
<div>
|
||||
@ -20,7 +21,8 @@ const renderSelectOption: SelectProps['renderOption'] = ({ option }) => (
|
||||
);
|
||||
|
||||
export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const { t } = useTranslation();
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [debouncedQuery] = useDebouncedValue(searchValue, 500);
|
||||
const { data: spaces, isLoading } = useGetSpacesQuery({
|
||||
query: debouncedQuery,
|
||||
@ -41,7 +43,7 @@ export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
|
||||
|
||||
const filteredSpaceData = spaceData.filter(
|
||||
(user) =>
|
||||
!data.find((existingUser) => existingUser.value === user.value)
|
||||
!data.find((existingUser) => existingUser.value === user.value),
|
||||
);
|
||||
setData((prevData) => [...prevData, ...filteredSpaceData]);
|
||||
}
|
||||
@ -53,14 +55,14 @@ export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
|
||||
renderOption={renderSelectOption}
|
||||
maxDropdownHeight={300}
|
||||
//label={label || 'Select space'}
|
||||
placeholder="Search for spaces"
|
||||
placeholder={t("Search for spaces")}
|
||||
searchable
|
||||
searchValue={searchValue}
|
||||
onSearchChange={setSearchValue}
|
||||
clearable
|
||||
variant="filled"
|
||||
onChange={onChange}
|
||||
nothingFoundMessage="No space found"
|
||||
nothingFoundMessage={t("No space found")}
|
||||
limit={50}
|
||||
checkIconPosition="right"
|
||||
comboboxProps={{ width: 300, withinPortal: false }}
|
||||
|
||||
Reference in New Issue
Block a user