Merge pull request #610 from idurar/feat/add-translate-hooks

🇩🇿 🇨🇳 🇺🇸 🇫🇷 translation for IDURAR ERP CRM 3.0.beta 🎉
idurar · Oct 29, 2023 · a44ec0b · a44ec0b
2 parents a9933c4 + ebc2e95
commit a44ec0b
Show file tree

Hide file tree

Showing 103 changed files with 2,120 additions and 1,535 deletions.
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -7,5 +7,8 @@
   },
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.quickSuggestions": true
   }
 }
diff --git a/frontend/src/app/HeaderContent/index.jsx b/frontend/src/app/HeaderContent/index.jsx
@@ -1,15 +1,19 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { Avatar, Dropdown } from 'antd';
+import { Avatar, Dropdown, Select } from 'antd';
+
+import { languages } from '@/utils';
+
 // import Notifications from '@/components/Notification';
 
 import { AppstoreOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';
-import photo from '@/style/images/photo.png';
+
+import { selectLangCode } from '@/redux/translate/selectors';
 import { checkImage } from '@/request';
 
 import { selectCurrentAdmin } from '@/redux/auth/selectors';
-import { langAction } from '@/redux/lang/actions';
+import { translateAction } from '@/redux/translate/actions';
 import history from '@/utils/history';
 
 import { BASE_URL } from '@/config/serverApiConfig';
@@ -18,13 +22,14 @@ import useLanguage from '@/lang/useLanguage';
 
 export default function HeaderContent() {
   const currentAdmin = useSelector(selectCurrentAdmin);
-  const dispatch = useDispatch();
 
+  const dispatch = useDispatch();
+  const langCode = useSelector(selectLangCode);
   const translate = useLanguage();
 
   const srcImgProfile = checkImage(BASE_URL + currentAdmin?.photo)
     ? BASE_URL + currentAdmin?.photo
-    : photo;
+    : null;
 
   const ProfileDropdown = () => {
     return (
@@ -85,7 +90,7 @@ export default function HeaderContent() {
     },
   ];
   return (
-    <div className="headerIcon" style={{ position: 'absolute', right: 0, zIndex: '99' }}>
+    <div className="headerIcon" style={{ zIndex: '99' }}>
       <Dropdown
         menu={{
           items,
@@ -108,9 +113,39 @@ export default function HeaderContent() {
       <Avatar
         icon={<AppstoreOutlined />}
         onClick={() => {
-          dispatch(langAction.translate());
+          dispatch(translateAction.translate('zh_cn'));
         }}
       />
+
+      <Select
+        showSearch
+        placeholder={translate('select language')}
+        defaultValue={langCode}
+        style={{ marginTop: '15px', width: '120px', float: 'right' }}
+        optionFilterProp="children"
+        filterOption={(input, option) => (option?.label ?? '').includes(input)}
+        filterSort={(optionA, optionB) =>
+          (optionA?.label ?? '').toLowerCase().startsWith((optionB?.label ?? '').toLowerCase())
+        }
+        onSelect={(value) => {
+          dispatch(translateAction.translate(value));
+        }}
+      >
+        {languages.map((language) => (
+          <Select.Option
+            key={language.value}
+            value={language.value}
+            label={language.label.toLowerCase()}
+          >
+            <div className="demo-option-label-item">
+              <span role="img" aria-label={language.label}>
+                {language.icon}
+              </span>
+              {language.label}
+            </div>
+          </Select.Option>
+        ))}
+      </Select>
     </div>
   );
 }
diff --git a/frontend/src/app/Navigation/index.jsx b/frontend/src/app/Navigation/index.jsx
@@ -101,7 +101,7 @@ function Sidebar({ collapsible }) {
       label: <Link to={'/admin'}>{translate('admin')}</Link>,
     },
     {
-      label: 'Settings',
+      label: translate('Settings'),
       key: 'settings',
       icon: <SettingOutlined />,
       children: [

diff --git a/frontend/src/app/index.jsx b/frontend/src/app/index.jsx
@@ -3,6 +3,7 @@ import Router from '@/router';
 import enUS from 'antd/es/locale/en_US';
 import zhCN from 'antd/es/locale/zh_CN';
 import frFR from 'antd/es/locale/fr_FR';
+import arEG from 'antd/es/locale/ar_EG';
 
 import useNetwork from '@/hooks/useNetwork';
 
@@ -12,7 +13,7 @@ import Navigation from '@/app/Navigation';
 
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAuth } from '@/redux/auth/selectors';
-import { selectLangCode } from '@/redux/lang/selectors';
+import { selectLangCode } from '@/redux/translate/selectors';
 
 import HeaderContent from '@/app/HeaderContent';
 // import { useNetworkState } from "react-use";
@@ -35,11 +36,20 @@ function App() {
   const langCode = useSelector(selectLangCode);
 
   const [locale, setLocal] = useState(enUS);
+  const [direction, setDirection] = useState('ltr');
 
   useEffect(() => {
-    if (langCode === 'fr_FR') {
+    if (langCode === 'fr_fr') {
+      setDirection('ltr');
       setLocal(frFR);
+    } else if (langCode === 'zh_cn') {
+      setDirection('ltr');
+      setLocal(zhCN);
+    } else if (langCode === 'ar_eg') {
+      setDirection('rtl');
+      setLocal(arEG);
     } else {
+      setDirection('ltr');
       setLocal(enUS);
     }
 
@@ -50,13 +60,13 @@ function App() {
 
   if (!isLoggedIn)
     return (
-      <ConfigProvider direction="ltr" locale={locale}>
+      <ConfigProvider direction={direction} locale={locale}>
         <Router />
       </ConfigProvider>
     );
   else {
     return (
-      <ConfigProvider direction="ltr" locale={locale}>
+      <ConfigProvider direction={direction} locale={locale}>
         <Layout style={{ minHeight: '100vh' }}>
           <Navigation />
           <Layout style={{ minHeight: '100vh' }}>

diff --git a/frontend/src/auth/auth.service.js b/frontend/src/auth/auth.service.js
@@ -38,7 +38,9 @@ export const login = async ({ loginData }) => {
 export const logout = async () => {
   axios.defaults.withCredentials = true;
   try {
-    window.localStorage.clear();
+    // window.localStorage.clear();
+    // window.localStorage.removeItem('isLoggedIn');
+    // window.localStorage.removeItem('auth');
     await axios.post(API_BASE_URL + `logout?timestamp=${new Date().getTime()}`);
   } catch (error) {
     return errorHandler(error);

diff --git a/frontend/src/components/CrudModal/index.jsx b/frontend/src/components/CrudModal/index.jsx
@@ -14,7 +14,7 @@ export default function DeleteModal({ config, children }) {
   let {
     entity,
     entityDisplayLabels,
-    deleteMessage = translate('delete_message'),
+    deleteMessage = translate('are_you_sure_you_want_to_delete'),
     modalTitle = translate('delete_confirmation'),
   } = config;
   const dispatch = useDispatch();

diff --git a/frontend/src/components/DataTable/index.jsx b/frontend/src/components/DataTable/index.jsx
@@ -85,7 +85,7 @@ export default function DataTable({ config, extra = [] }) {
   dataTableColumns = [
     ...dataTableColumns,
     {
-      title: 'Action',
+      title: '',
       key: 'action',
       render: (_, record) => (
         <Dropdown
@@ -161,7 +161,7 @@ export default function DataTable({ config, extra = [] }) {
           ghost={false}
           extra={[
             <Button onClick={handelDataTableLoad} key={`${uniqueId()}`}>
-              Refresh
+              {translate('Refresh')}
             </Button>,
             <AddNewItem key={`${uniqueId()}`} config={config} />,
           ]}

diff --git a/frontend/src/components/DeleteModal/index.jsx b/frontend/src/components/DeleteModal/index.jsx
@@ -15,7 +15,7 @@ export default function DeleteModal({ config }) {
   let {
     entity,
     entityDisplayLabels,
-    deleteMessage = translate('delete_message'),
+    deleteMessage = translate('are_you_sure_you_want_to_delete'),
     modalTitle = translate('delete_confirmation'),
   } = config;
   const dispatch = useDispatch();

diff --git a/frontend/src/components/NotFound/index.jsx b/frontend/src/components/NotFound/index.jsx
@@ -0,0 +1,27 @@
+import { Result, Button } from 'antd';
+import useLanguage from '@/lang/useLanguage';
+import { useHistory } from 'react-router-dom';
+
+export default function NotFound({ entity }) {
+  const translate = useLanguage();
+
+  const history = useHistory();
+
+  return (
+    <Result
+      status="404"
+      title={translate('error_404')}
+      subTitle={translate('Sorry the Page you requested does not exist')}
+      extra={
+        <Button
+          type="primary"
+          onClick={() => {
+            history.push(`/${entity?.toLowerCase()}`);
+          }}
+        >
+          {translate('Back')}
+        </Button>
+      }
+    />
+  );
+}
diff --git a/frontend/src/components/ReadItem/index.test.jsx b/frontend/src/components/ReadItem/index.test.jsx
@@ -14,8 +14,8 @@ const data = {
   company: 'IDURAR',
   managerSurname: 'Lalami ',
   managerName: 'Salah Eddine',
-  email: 'idurardz@gmail.com',
-  phone: '05541 144 700',
+  email: 'test@gmail.com',
+  phone: '0777 777 777',
 };
 
 const readColumns = [
@@ -24,11 +24,11 @@ const readColumns = [
     dataIndex: 'company',
   },
   {
-    title: 'Manager Surname',
+    title: 'Manager first name',
     dataIndex: 'managerSurname',
   },
   {
-    title: 'Manager Name',
+    title: 'Manager last name',
     dataIndex: 'managerName',
   },
   {

diff --git a/frontend/src/components/SelectAsync/index.jsx b/frontend/src/components/SelectAsync/index.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { request } from '@/request';
 import useFetch from '@/hooks/useFetch';
 import { Select } from 'antd';
-import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
+import { useHistory } from 'react-router-dom';
 import { PlusCircleOutlined } from '@ant-design/icons';
 
 export default function SelectAsync({

diff --git a/frontend/src/components/Tag/index.js b/frontend/src/components/Tag/index.js
@@ -1,6 +1,8 @@
 import { Tag } from 'antd';
+import useLanguage from '@/lang/useLanguage';
 
 export function StatusTag(status = 'draft') {
+  const translate = useLanguage();
   let color =
     status === 'draft'
       ? 'cyan'
@@ -12,5 +14,5 @@ export function StatusTag(status = 'draft') {
       ? 'orange'
       : 'red';
 
-  return <Tag color={color}>{status && status.toUpperCase()}</Tag>;
+  return <Tag color={color}>{status && translate(status)}</Tag>;
 }
diff --git a/frontend/src/components/Visibility/index.jsx b/frontend/src/components/Visibility/index.jsx
@@ -1,4 +1,4 @@
-export default function Visibility({ isVisible, children }) {
-  const show = isVisible ? { display: 'block', opacity: 1 } : { display: 'none', opacity: 0 };
+export default function Visibility({ isOpen, children }) {
+  const show = isOpen ? { display: 'block', opacity: 1 } : { display: 'none', opacity: 0 };
   return <div style={show}>{children}</div>;
 }
diff --git a/frontend/src/context/profileContext/types.jsx b/frontend/src/context/profileContext/types.jsx
@@ -1,5 +1,5 @@
-export const OPEN_MODAL = 'OPEN_MODAL';
-export const CLOSE_MODAL = 'CLOSE_MODAL';
+export const OPEN_MODAL = 'OPEN_PASSWORD_MODAL';
+export const CLOSE_MODAL = 'CLOSE_PASSWORD_MODAL';
 
-export const OPEN_PANEL = 'OPEN_PANEL';
-export const CLOSE_PANEL = 'CLOSE_PANEL';
+export const OPEN_PANEL = 'OPEN_PROFILE_PANEL';
+export const CLOSE_PANEL = 'CLOSE_PROFILE_PANEL';
diff --git a/frontend/src/forms/KycForm.jsx b/frontend/src/forms/KycForm.jsx