diff --git a/frontend/spa/src/components/Forms/OrganizationRegistrationForm/OrganizationRegistrationForm.tsx b/frontend/spa/src/components/Forms/OrganizationRegistrationForm/OrganizationRegistrationForm.tsx
index 6c54e233..386bb720 100644
--- a/frontend/spa/src/components/Forms/OrganizationRegistrationForm/OrganizationRegistrationForm.tsx
+++ b/frontend/spa/src/components/Forms/OrganizationRegistrationForm/OrganizationRegistrationForm.tsx
@@ -45,11 +45,11 @@ export function OrganizationRegistrationForm(props: Props) {
},
});
- showSuccess({ description: 'Organisation successfully created' });
+ showSuccess(t('organization.registration.success'));
props.onSuccess();
} catch (e) {
console.error(e);
- showError({ title: 'Error', description: 'Failed to register organization' });
+ showError(t('organization.registration.failed'));
}
}
diff --git a/frontend/spa/src/components/views/InvoicesView.tsx b/frontend/spa/src/components/views/InvoicesView.tsx
index cf3d1056..c040859d 100644
--- a/frontend/spa/src/components/views/InvoicesView.tsx
+++ b/frontend/spa/src/components/views/InvoicesView.tsx
@@ -25,7 +25,7 @@ function InvoicesView() {
setInvoices(invoices);
} catch (e) {
console.error('Failed to load invoices:', e);
- showError({ title: 'Failed to load invoices' });
+ showError(t('invoices.loadFailed'));
} finally {
setIsLoading(false);
}
diff --git a/frontend/spa/src/components/views/OrganizationSettingsView.tsx b/frontend/spa/src/components/views/OrganizationSettingsView.tsx
index 258b4353..923d0a9e 100644
--- a/frontend/spa/src/components/views/OrganizationSettingsView.tsx
+++ b/frontend/spa/src/components/views/OrganizationSettingsView.tsx
@@ -12,7 +12,7 @@ import { Bommel } from '@/services/api/types/Bommel.ts';
import organizationTreeService from '@/services/OrganizationTreeService.ts';
function OrganizationSettingsView() {
- const { toast } = useToast();
+ const { showSuccess, showError } = useToast();
const { t } = useTranslation();
const store = useStore();
const [isOrganizationError, setIsOrganizationError] = useState(false);
@@ -33,13 +33,14 @@ function OrganizationSettingsView() {
};
const onClickSave = async () => {
- // sort tree by depth
-
const sortedTree = organizationTreeService.sortTreeByDepth(tree);
- console.log('Sorted tree', sortedTree);
-
- await organizationTreeService.saveOrganizationTree(sortedTree, rootBommel!.id!, originalBommels);
- toast({ title: t('organizationSettings.saved'), variant: 'success' });
+ try {
+ await organizationTreeService.saveOrganizationTree(sortedTree, rootBommel!.id!, originalBommels);
+ showSuccess(t('organization.settings.saved'));
+ } catch (e) {
+ console.error(e);
+ showError(t('organization.settings.saveError'));
+ }
};
useEffect(() => {
diff --git a/frontend/spa/src/components/views/ProfileSettingsView.tsx b/frontend/spa/src/components/views/ProfileSettingsView.tsx
index 841ae513..0d1c3da3 100644
--- a/frontend/spa/src/components/views/ProfileSettingsView.tsx
+++ b/frontend/spa/src/components/views/ProfileSettingsView.tsx
@@ -1,16 +1,26 @@
import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import themeService, { Themes } from '@/services/ThemeService.ts';
import Radio from '@/components/ui/Radio.tsx';
import SettingsPageHeader from '@/components/SettingsPage/SettingsPageHeader.tsx';
+import Select from '@/components/ui/Select.tsx';
+import languageService from '@/services/LanguageService.ts';
function ProfileSettingsView() {
- const [themes] = useState([
+ const { t } = useTranslation();
+ const themes = [
{ label: 'Light', value: 'light' },
{ label: 'Dark', value: 'dark' },
{ label: 'Auto', value: 'auto' },
- ]);
+ ];
+ const languages = [
+ { label: 'English', value: 'en' },
+ { label: 'German', value: 'de' },
+ { label: 'Ukrainian', value: 'uk' },
+ ];
const [theme, setTheme] = useState(themeService.isAutoMode() ? 'auto' : themeService.getTheme());
+ const [currentLanguage, setCurrentLanguage] = useState(languageService.getLanguage());
const onThemeChanged = useCallback((value: string) => {
setTheme(value);
@@ -22,20 +32,27 @@ function ProfileSettingsView() {
}
}, []);
+ const onLanguageChanged = useCallback((value: string) => {
+ setCurrentLanguage(value);
+ languageService.setLanguage(value);
+ }, []);
+
return (
<>
-
Theme:
+
{t('profile.settings.theme')}:
-
-
Other settings....
-
...
+
+
{t('profile.settings.language')}:
+
+
+
diff --git a/frontend/spa/src/components/views/SettingsView.tsx b/frontend/spa/src/components/views/SettingsView.tsx
index 8564939c..e59e87c3 100644
--- a/frontend/spa/src/components/views/SettingsView.tsx
+++ b/frontend/spa/src/components/views/SettingsView.tsx
@@ -1,22 +1,28 @@
import { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
import SettingsPage from '@/components/SettingsPage/SettingsPage.tsx';
import ProfileSettingsView from '@/components/views/ProfileSettingsView.tsx';
import OrganizationSettingsView from '@/components/views/OrganizationSettingsView.tsx';
import { MenuItem } from '@/components/SettingsPage/MenuItem.ts';
import InvoicesView from './InvoicesView';
-
-const navigationItems: MenuItem[] = [
- { title: 'Profile', value: 'profile', icon: 'Avatar' },
- { title: 'Organization', value: 'organization', icon: 'Backpack' },
- { title: 'Invoices', value: 'invoices', icon: 'Archive' },
-];
+import languageService from '@/services/LanguageService.ts';
function SettingsView() {
+ const { t } = useTranslation();
const navigate = useNavigate();
const location = useLocation();
- const [activeTab, setActiveTab] = useState(navigationItems[0].value);
+ const [navigationItems, setMenuItems] = useState