Karimaldeen/hijabi-dashboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix_translate

Browse Source
This commit is contained in:
KarimAldeen 2024-04-14 12:46:31 +03:00
parent d3f689bd3c
commit ece9e9d9ed
16 changed files with 203 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/Hooks/useChangeLanguage.tsx
View File

@ -1,71 +1,85 @@
import { useEffect } from 'react';
import { initReactI18next, useTranslation } from 'react-i18next';
import i18n from 'i18next';
import translationEN from '../translate/en.json';
import translationAR from '../translate/ar.json';
import translationDE from '../translate/de.json';
import { useEffect } from 'react';
import { initReactI18next, useTranslation } from 'react-i18next';
import i18n from 'i18next';
import translationEN from '../translate/en.json';
import translationAR from '../translate/ar.json';
import translationDE from '../translate/de.json';
let language = localStorage.getItem('language') ?? 'en';
let language = localStorage.getItem('language') ?? 'en';
i18n.use(initReactI18next).init({
resources: {
en: {
translation: translationEN
i18n.use(initReactI18next).init({
resources: {
en: {
translation: translationEN
},
ar: {
translation: translationAR
},
de: {
translation: translationDE
}
},
ar: {
translation: translationAR
},
de: {
translation: translationDE
lng: language ?? "en",
interpolation: {
escapeValue: false
}
},
lng: language ?? "en",
interpolation: {
escapeValue: false
}
});
});
// console.log(navigator.language,"navigator.language");
// console.log(navigator.language,"navigator.language");
export function useLanguage() {
useEffect(() => {
changeLanguage(language);
}, []);
const changeLanguage = (newLanguage:any) => {
i18n.changeLanguage(newLanguage);
localStorage.setItem('language', newLanguage);
applyLanguageStyles(newLanguage);
};
return { changeLanguage };
}
function applyLanguageStyles(language:any) {
if (language === 'ar') {
document.body.setAttribute('dir', 'rtl');
document.body.classList.remove('de');
document.body.classList.add('ar');
} else if (language === 'en') {
document.body.setAttribute('dir', 'ltr');
document.body.classList.remove('ar', 'de');
document.body.classList.add('en');
} else if (language === 'de') {
document.body.setAttribute('dir', 'ltr');
document.body.classList.remove('ar');
document.body.classList.add('de');
export function useLanguage() {
useEffect(() => {
// Define a function to handle language change events
const handleLanguageChange = () => {
const newLanguage = localStorage.getItem('language') ?? 'en';
changeLanguage(newLanguage);
};
// Add an event listener to detect changes in localStorage
window.addEventListener('storage', handleLanguageChange);
// Clean up by removing the event listener when the component unmounts
return () => {
window.removeEventListener('storage', handleLanguageChange);
};
}, []);
const changeLanguage = (newLanguage:any) => {
i18n.changeLanguage(newLanguage);
localStorage.setItem('language', newLanguage);
applyLanguageStyles(newLanguage);
// Refresh the page to apply the language changes
window.location.reload();
};
return { changeLanguage };
}
function applyLanguageStyles(language:any) {
if (language === 'ar') {
document.body.setAttribute('dir', 'rtl');
document.body.classList.remove('de');
document.body.classList.add('ar');
} else if (language === 'en') {
document.body.setAttribute('dir', 'ltr');
document.body.classList.remove('ar', 'de');
document.body.classList.add('en');
} else if (language === 'de') {
document.body.setAttribute('dir', 'ltr');
document.body.classList.remove('ar');
document.body.classList.add('de');
}
}
}
export function useLanguageMenu() {
const { t } = useTranslation();
export function useLanguageMenu() {
const { t } = useTranslation();
const languageOptions = [
{ code: 'ar', icon: '/Layout/Ar.svg', label: t('Arabic') },
{ code: 'en', icon: '/Layout/En.svg', label: t('English') },
{ code: 'de', icon: '/Layout/De.svg', label: t('German') }
];
const languageOptions = [
{ code: 'ar', icon: '/Layout/Ar.svg', label: t('Arabic') },
{ code: 'en', icon: '/Layout/En.svg', label: t('English') },
{ code: 'de', icon: '/Layout/De.svg', label: t('German') }
];
return { languageOptions };
}
return { languageOptions };
}

1
src/Pages/Home/HomePage.tsx
View File

@ -11,7 +11,6 @@ export default function HomePage() {
const { t } = useTranslation();
const {data,isLoading} = useGetHome()
console.log(data);
const cardsData = [

2
src/Pages/Products/View/FormikTab/Field/Object.tsx
View File

@ -74,7 +74,7 @@ const ObjectField = ({ tabKey }: any) => {
</Space>
))}
<Button type="dashed" onClick={() => setFieldItems([...FieldItems, { Description: '', key: '' }])} block>
{t("+ Add Another Item")}
{t("Add Another Item")}
</Button>
</Form>
);

130
src/Pages/order/OrderPage.tsx
View File

@ -22,7 +22,7 @@ const OrderPage = () => {
const { data, status } = useGetOrder();
const totalRows = data?.pagination?.total || 0;
const totalRows = data?.meta?.total;
const columns = useTableColumns();
@ -33,81 +33,81 @@ const OrderPage = () => {
{ label: <div className='orderStatus_select'><FaTimes /> Rejected</div>, value: "rejected" },
{ label: <div className='orderStatus_select'><FaBan /> Pending Cancellation</div>, value: "pending_cancellation" }
];
const { data:Coupon } = useGetCoupon()
const SelectData = Coupon?.coupons?.map((item:any)=>(
{
label : item?.name,
value : item?.id
}
))
const location = useLocation();
const navigate = useNavigate();
const { username, coupon, state, fromDate, toDate, totalFrom, totalTo,reset } = useOrderFillterState();
const { data: Coupon } = useGetCoupon()
const handleSubmit = () => {
let queryParams = [];
if (username !== null) {
queryParams.push(`username=${username}`);
}
if (coupon !== null) {
queryParams.push(`coupon=${coupon}`);
}
if (state !== null) {
queryParams.push(`state=${state}`);
}
if (fromDate !== null) {
queryParams.push(`createdFrom=${fromDate}`);
}
if (toDate !== null) {
queryParams.push(`createdTo=${toDate}`);
}
if (totalFrom !== null) {
queryParams.push(`totalFrom=${totalFrom}`);
}
if (totalTo !== null) {
queryParams.push(`totalTo=${totalTo}`);
}
const queryString = queryParams.join('&');
const newPathname = `${location.pathname}${queryString ? '?' : ''}${queryString}`;
navigate(newPathname);
};
const handelReset=()=>{
navigate(`${location.pathname}`);
reset()
const SelectData = Coupon?.coupons?.map((item: any) => (
{
label: item?.name,
value: item?.id
}
const [t] = useTranslation()
))
const location = useLocation();
const navigate = useNavigate();
const { username, coupon, state, fromDate, toDate, totalFrom, totalTo, reset } = useOrderFillterState();
const handleSubmit = () => {
let queryParams = [];
if (username !== null) {
queryParams.push(`username=${username}`);
}
if (coupon !== null) {
queryParams.push(`coupon=${coupon}`);
}
if (state !== null) {
queryParams.push(`state=${state}`);
}
if (fromDate !== null) {
queryParams.push(`createdFrom=${fromDate}`);
}
if (toDate !== null) {
queryParams.push(`createdTo=${toDate}`);
}
if (totalFrom !== null) {
queryParams.push(`totalFrom=${totalFrom}`);
}
if (totalTo !== null) {
queryParams.push(`totalTo=${totalTo}`);
}
const queryString = queryParams.join('&');
const newPathname = `${location.pathname}${queryString ? '?' : ''}${queryString}`;
navigate(newPathname);
};
const handelReset = () => {
navigate(`${location.pathname}`);
reset()
}
const [t] = useTranslation()
return (
<>
<DashBody status={status as QueryStatusEnum} >
<DashHeader title="orders" showAddButton={false}>
<div className='FillterSection'>
<CustomSearchField searchBy={"username"} />
<SelectWSearchField selectBy="coupon" submiteBy="coupon_id" lebel="Coupon" option={SelectData} />
<SelectField selectBy="state" lebel="status" option={stateSelect} />
<CustomDateRange/>
<CustomNumber/>
<Button type="dashed" onClick={handelReset} >{t("reset")}</Button>
<Button type="primary" onClick={handleSubmit} >{t("submite")}</Button>
<div className='FillterSection'>
<CustomSearchField searchBy={"username"} />
<SelectWSearchField selectBy="coupon" submiteBy="coupon_id" lebel="Coupon" option={SelectData} />
<SelectField selectBy="state" lebel="status" option={stateSelect} />
<CustomDateRange />
<CustomNumber />
<Button type="dashed" onClick={handelReset} >{t("reset")}</Button>
<Button type="primary" onClick={handleSubmit} >{t("submite")}</Button>
</div>
</DashHeader>
</div>
</DashHeader>
<LyTable
data={data?.Orders}
total={totalRows}

3
src/Pages/order/ui/CustomDateRange.tsx
View File

@ -2,11 +2,13 @@ import React from 'react'
import { DatePicker } from 'antd'
import { useLocation, useNavigate } from 'react-router-dom';
import { useOrderFillterState } from '../../../zustand/OrderFillter';
import { useTranslation } from 'react-i18next';
const { RangePicker } = DatePicker;
const CustomDateRange = () => {
const dateFormat = 'YYYY-MM-DD';
const { toDate,fromDate,setFromDate,setToDate } = useOrderFillterState(); // Moved hook call inside the functional component
const [t] = useTranslation();
const onCalendarChange = (value: any) => {
const FromData = value[0]?.format(dateFormat)
@ -23,6 +25,7 @@ const CustomDateRange = () => {
format={dateFormat}
onChange={onCalendarChange}
className="CustomDateRange"
placeholder={[t(`PriceFrom`),t(`PriceTo`)]}
/>
)
}

10
src/Pages/order/ui/CustomNumber.tsx
View File

@ -1,6 +1,7 @@
import { InputNumber } from 'antd';
import { useState, useEffect } from 'react';
import { useOrderFillterState } from '../../../zustand/OrderFillter';
import { useTranslation } from 'react-i18next';
const CustomNumber = () => {
const [valueFrom, setValueFrom] = useState<number | null>(null);
@ -18,11 +19,16 @@ const CustomNumber = () => {
setValueTo(value);
setTotalTo(value);
};
const [t] = useTranslation()
return (
<div className='CustomNumber'>
<InputNumber placeholder='PriceFrom' value={valueFrom} onChange={onChangeFrom} />
<InputNumber placeholder='PriceTo' value={valueTo} onChange={onChangeTo} />
<InputNumber
placeholder={t(`PriceFrom`)}
value={valueFrom} onChange={onChangeFrom} />
<InputNumber
placeholder={t(`PriceTo`)}
value={valueTo} onChange={onChangeTo} />
</div>
);
};

9
src/Pages/order/useTableColumns.tsx
View File

@ -36,7 +36,6 @@ const useTableColumns = () => {
{
name: t("status"),
center: true,
width:"300",
cell: (row: any) => {
let status = row?.state;
let icon;
@ -85,10 +84,10 @@ const useTableColumns = () => {
showDelete={false}
objectToEdit={row}
onDelete={() => deleteMutation.mutate({order_id:row.id })}
showEdit={true}
showView={false}
onView={()=>navigate(`/order/view/${row?.id}` )}
onEdit={()=>navigate(`/order/${row?.id}` )}
showEdit={false}
showView={true}
// onView={()=>navigate(`/order/view/${row?.id}` )}
onView={()=>navigate(`/order/${row?.id}` )}
/>

1
src/Styles/Layout/Layout.scss
View File

@ -597,6 +597,7 @@ padding: 10px 40px;
gap: 5px;
padding-inline: 10px;
text-wrap: nowrap;
white-space: nowrap;
width: 300px;
align-items: center;
justify-content: center;

5
src/api/helper/ueGetPagination.tsx
View File

@ -7,7 +7,8 @@ export default function useGetQueryPagination(KEY: string | string[], Api: strin
const axios = useAxios();
const location = useLocation();
let pagination = location?.search || '';
const language = localStorage.getItem("language") ?? "en"
const { logout } = useAuthState();
const navigate = useNavigate();
@ -25,7 +26,7 @@ export default function useGetQueryPagination(KEY: string | string[], Api: strin
const apiUrl = Api + paginationParams;
return useQuery(
[Array.isArray(KEY) ? KEY.join(',') : KEY, pagination], async () => {
[Array.isArray(KEY) ? KEY.join(',') : KEY, pagination,language], async () => {
const response = await axios.get(apiUrl, { params });
return response.data;
},

2
src/api/helper/useGetOneQuery.ts
View File

@ -11,7 +11,7 @@ function useGetOneQuery(key: string, url: string , params:any={},options:any={})
const {id} = useParams()
return useQuery(
[id, key],
[id, key,language],
async () => {
const response = await axios.get(url+"/"+ id+`?lang=${language}`);
return response.data;

6
src/api/helper/useGetQuery.ts
View File

@ -3,12 +3,14 @@ import useAxios from './useAxios';
import useAuthState from '../../lib/state mangment/AuthState';
import { useNavigate } from 'react-router-dom';
function useGetQuery(key: string, url: string , params:any={},options:any={}) {
function useGetQuery(KEY: string | string[], url: string , params:any={},options:any={}) {
const axios = useAxios();
const {logout} = useAuthState()
const navigate = useNavigate()
const language = localStorage.getItem("language") ?? "en"
return useQuery(
params ? [key, params] : key,
params ? [Array.isArray(KEY) ? KEY.join(',') : KEY, params,language] : [Array.isArray(KEY) ? KEY.join(',') : KEY,language],
async () => {
const response = await axios.get(url , {params});
return response.data;

2
src/api/home.ts
View File

@ -8,7 +8,7 @@ const API = {
UPDATE: `home/overview`,
};
const KEY = "home"
const KEY = ["home","order","users","categories"]
export const useGetHome = (params?:any) => useGetQuery(KEY, API.GET_ALL,params);

10
src/translate/ar.json
View File

@ -166,7 +166,15 @@
"checkAndModify": "يرجى التحقق من الشبكة الخاصة بك وإعادة تحميل الصفحة.",
"refetch": "إعادة تحميل الصفحة",
"goToHome": "الانتقال إلى الصفحة الرئيسية"
}
},
"value_en": "القيمة (الإنجليزية)",
"value_ar": "القيمة (العربية)",
"value_de": "القيمة (الألمانية)",
"type": "النوع",
"id": "المعرف",
"submite": "تقديم",
"PriceFrom": "السعر من",
"PriceTo": "السعر إلى"

10
src/translate/de.json
View File

@ -164,7 +164,15 @@
"refetch": "Seite neu laden",
"goToHome": "Zum Startseite"
}
,
"value_en": "Wert (Englisch)",
"value_ar": "Wert (Arabisch)",
"value_de": "Wert (Deutsch)",
"type": "Typ",
"id": "ID",
"submite": "Einreichen",
"PriceFrom": "Preis ab",
"PriceTo": "Preis bis"

10
src/translate/en.json
View File

@ -169,6 +169,14 @@
"refetch": "Refetch Page",
"goToHome": "Go to Home"
}
,
"value_en": "Value (English)",
"value_ar": "Value (Arabic)",
"value_de": "Value (German)",
"type": "Type",
"id": "ID",
"submite": "Submit",
"PriceFrom": "Price From",
"PriceTo": "Price To"
}

23
src/translate/text
View File

@ -1,12 +1,11 @@
sorry_only_user_can_change_his_status
create_notification
SupportMessages
email
whatsApp
subject
message
SupportMessages
EditDetails
OrderItems
reset
submite
value_en
value_ar
value_de
type
id
submite
PriceFrom
PriceTo
PriceFrom
PriceTo