Skip to content

C
concept-front-mojsprat-v2
Commit 893f496e authored by Djordje's avatar Djordje
Browse files
Options

Translate side menu

parent 5182f7a8
Show whitespace changes
Inline Side-by-side
Showing with 87 additions and 28 deletions
package-lock.json
View file @ 893f496e
......@@ -21,7 +21,7 @@
"@types/react-dom": "^18.0.5",
"buffer": "^6.0.3",
"i18next": "^21.9.1",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-browser-languagedetector": "^6.1.8",
"jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
......@@ -9043,11 +9043,11 @@
}
},
"node_modules/i18next-browser-languagedetector": {
"version": "6.1.5",
"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.5.tgz",
"integrity": "sha512-11t7b39oKeZe4uyMxLSPnfw28BCPNLZgUk7zyufex0zKXZ+Bv+JnmJgoB+IfQLZwDt1d71PM8vwBX1NCgliY3g==",
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.8.tgz",
"integrity": "sha512-Svm+MduCElO0Meqpj1kJAriTC6OhI41VhlT/A0UPjGoPZBhAHIaGE5EfsHlTpgdH09UVX7rcc72pSDDBeKSQQA==",
"dependencies": {
"@babel/runtime": "^7.18.9"
"@babel/runtime": "^7.19.0"
}
},
"node_modules/iconv-lite": {
......@@ -23547,11 +23547,11 @@
}
},
"i18next-browser-languagedetector": {
"version": "6.1.5",
"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.5.tgz",
"integrity": "sha512-11t7b39oKeZe4uyMxLSPnfw28BCPNLZgUk7zyufex0zKXZ+Bv+JnmJgoB+IfQLZwDt1d71PM8vwBX1NCgliY3g==",
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.8.tgz",
"integrity": "sha512-Svm+MduCElO0Meqpj1kJAriTC6OhI41VhlT/A0UPjGoPZBhAHIaGE5EfsHlTpgdH09UVX7rcc72pSDDBeKSQQA==",
"requires": {
"@babel/runtime": "^7.18.9"
"@babel/runtime": "^7.19.0"
}
},
"iconv-lite": {
package.json
View file @ 893f496e
......@@ -16,7 +16,7 @@
"@types/react-dom": "^18.0.5",
"buffer": "^6.0.3",
"i18next": "^21.9.1",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-browser-languagedetector": "^6.1.8",
"jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
......
src/components/Settings/Settings.tsx
View file @ 893f496e
......@@ -61,12 +61,12 @@ export const Settings = () => {
useEffect(() => {
getTenantInfo((err: any, user: any) => {
if (user.voting.hasVotingKey && (!publicKey || publicKey !== user.votingKey)) {
if (!!user.votingKey && (!publicKey || publicKey !== user.votingKey)) {
localStorage.setItem(PUBLIC_KEY, user.votingKey);
setPublicKey(user.votingKey);
}
if (!user.voting.hasVotingKey) {
if (!user.votingKey) {
localStorage.removeItem(PUBLIC_KEY);
localStorage.removeItem(PRIVATE_KEY);
setPublicKey(null);
......
src/components/SideMenu/SideMenu.tsx
View file @ 893f496e
......@@ -6,6 +6,7 @@ import { subMenu } from "./SideMenuData";
import "./SideMenu.css";
import { useLocation } from "react-router-dom";
import { SideMenuItem } from "./SideMenuItem";
import { useTranslation } from "react-i18next";
const classes = {
logo: {
......@@ -39,6 +40,7 @@ export const SideMenu = ({ active, toggleSideMenu, email, firstName }: { active:
const location = useLocation();
const [selectedItem, setSelectedItem] = useState(location.pathname.split('/').at(-1)!);
const { t } = useTranslation();
const changeSelectedItem = (item: string) => {
setSelectedItem(item);
......@@ -55,7 +57,7 @@ export const SideMenu = ({ active, toggleSideMenu, email, firstName }: { active:
<Typography sx={{ ...classes.menuText, ...classes.boldText }}>{firstName}</Typography>
<Typography sx={classes.menuText}>{email}</Typography>
<Box sx={classes.signOut}>
<Typography style={classes.menuText}>Sign out</Typography>
<Typography style={classes.menuText}>{t('Sign out')}</Typography>
<LogoutIcon />
</Box>
</Box>
......
src/components/SideMenu/SideMenuData.tsx
View file @ 893f496e
......@@ -12,25 +12,25 @@ import { VotingIcon } from "../icons/VotingIcon";
export const subMenu: SubMenu[] = [
{
title: 'Glavni meni',
title: 'Main menu',
items: [
{ title: 'Pregled', icon: <HomeIcon />, path: 'overview' },
{ title: 'Obaveštenja', icon: <NotificationIcon />, path: 'notifications' },
{ title: 'Aktivnosti', icon: <ActivityIcon />, path: 'issues' },
{ title: 'Glasanje', icon: <VotingIcon />, path: 'voting' }
{ title: 'Overview', icon: <HomeIcon />, path: 'overview' },
{ title: 'Notifications', icon: <NotificationIcon />, path: 'notifications' },
{ title: 'Activities', icon: <ActivityIcon />, path: 'issues' },
{ title: 'Voting', icon: <VotingIcon />, path: 'voting' }
]
},
{
title: 'Računi/Finansije',
title: 'Accounts/Finance',
items: [
{ title: 'Moj Račun', icon: <InvoicesIcon />, path: 'invoices' },
{ title: 'Finansije zgrade', icon: <BuidlingInvoicesIcon />, path: 'building-invoices' },
{ title: 'Dokumenta', icon: <DocumentIcon />, path: 'documents' }]
{ title: 'My account', icon: <InvoicesIcon />, path: 'invoices' },
{ title: 'Building finance', icon: <BuidlingInvoicesIcon />, path: 'building-invoices' },
{ title: 'Documents', icon: <DocumentIcon />, path: 'documents' }]
},
{
title: 'Aplikacija',
title: 'Application',
items: [
{ title: 'Podešavanja', icon: <SettingsIcon />, path: 'settings' },
{ title: 'Settings', icon: <SettingsIcon />, path: 'settings' },
{ title: 'English', icon: <LanguageIcon /> }]
}
......
src/components/SideMenu/SideMenuItem.tsx
View file @ 893f496e
import { Box, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { SubMenu } from "../../internal-types";
......@@ -49,19 +50,22 @@ const classes = {
export const SideMenuItem = ({ content, selectedItem, changeSelectedItem }: { content: SubMenu, selectedItem: string, changeSelectedItem: (item: string) => void }) => {
const navigate = useNavigate();
const { i18n, t } = useTranslation();
return (
<Box sx={classes.wrapper}>
<Typography sx={classes.itemTitle}> {content.title.toUpperCase()}</Typography>
<Typography sx={classes.itemTitle}> {(t(content.title).toUpperCase())}</Typography>
{content.items.map((item, ind) => (
<Box sx={selectedItem === item.path ? { ...classes.itemsWrapper, ...classes.selectedItem } : classes.itemsWrapper} key={ind} onClick={() => {
if (item.path) {
if (!!item.path) {
navigate(item.path);
changeSelectedItem(item.path);
} else {
i18n.changeLanguage(i18n.language === 'en' ? 'sr' : 'en');
}
}}>
{!!item.icon && item.icon}
<Typography>{item.title}</Typography>
<Typography>{t(item.title)}</Typography>
</Box>
))}
</Box>
......
src/locale/en.json
View file @ 893f496e
{
"translation": {
"English": "Srpski",
"Sign out": "Sign out",
"Main menu": "Main menu",
"Overview": "Overview",
"Notifications": "Notifications",
"Activities": "Activities",
"Voting": "Voting",
"Accounts/Finance": "Accounts/Finance",
"My account": "My account",
"Building finance" : "Building finance",
"Documents": "Documents",
"Application": "Application",
"Settings": "Settings",
"Invoice Id": "Invoice Id",
"Payables": "Payables",
"Date": "Datum",
"Accounting": "Accounting",
"Total": "Total",
"Status": "Status",
"formatDate": "{{date, DD/MM/YYYY}}",
"priceFormat": "{{num, num2format}}",
"nalog": "{{num, nalog}}",
"per group/per unit":"per group",
"per unit/per unit": "per unit",
"per unit/per area": "per area"
}
}
\ No newline at end of file
src/locale/sr.json
View file @ 893f496e
{
"translation": {
"English": "English",
"Sign out": "Odjavi me",
"Main menu": "Glavni meni",
"Overview": "Pregled",
"Notifications": "Obaveštenja",
"Activities": "Aktivnosti",
"Voting": "Glasanje",
"Accounts/Finance": "Računi/Finansije",
"My account": "Moj račun",
"Building finance" : "Finansije zgrade",
"Documents": "Dokumenta",
"Application": "Aplikacija",
"Settings": "Podešavanja",
"Invoice Id": "Poziv na broj",
"Period": "Period",
"Payables": "Obaveze",
"Date": "Datum",
"Accounting": "Obračunavanje",
......
src/services/i18n.ts
View file @ 893f496e
......@@ -10,10 +10,15 @@ const resources = {
};
i18next
.use(initReactI18next)
.use(LanguageDetector)
.init({
resources,
debug: false,
debug: true,
fallbackLng: 'sr',
detection: {
order: ['localStorage', 'navigator'],
caches: ['localStorage'],
},
interpolation: {
escapeValue: false,
format: (data: any, format: any, language: any) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment