Karimaldeen/school-dashboard-exercise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formate

Browse Source
This commit is contained in:
karimalden 2024-08-07 16:37:27 +03:00
parent 0f471f4483
commit 1055417dc0
21 changed files with 5720 additions and 3293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8614
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

5
src/Components/Layout/Navbar/MenuItem.tsx
View File

@ -25,7 +25,10 @@ export const MenuItem = ({ item, location, index }: any) => {
<i>{item.icon}</i>
<Link to={item.path || "/"}>{t(item.text)}</Link>
{item?.children && (
<DropdownToggle isOpen={isDropdownOpen} onClick={() => handleDropdown(index)} />
<DropdownToggle
isOpen={isDropdownOpen}
onClick={() => handleDropdown(index)}
/>
)}
</div>

96
src/Components/Layout/Navbar/NavBarRightSide.tsx
View File

@ -1,54 +1,58 @@
import React from 'react'
import { getLocalStorage } from '../../../utils/LocalStorage';
import { USER_KEY } from '../../../config/AppKey';
import { translateOptions } from '../../../utils/translatedOptions';
import { search_array } from '../../../Routes';
import { useTranslation } from 'react-i18next';
import SearchFieldWithSelect from '../../DataTable/SearchFieldWithSelect';
import { Tooltip } from 'antd';
import useModalHandler from '../../../utils/useModalHandler';
import { ModalEnum } from '../../../enums/Model';
import Image from '../../Ui/Image';
import React from "react";
import { getLocalStorage } from "../../../utils/LocalStorage";
import { USER_KEY } from "../../../config/AppKey";
import { translateOptions } from "../../../utils/translatedOptions";
import { search_array } from "../../../Routes";
import { useTranslation } from "react-i18next";
import SearchFieldWithSelect from "../../DataTable/SearchFieldWithSelect";
import { Tooltip } from "antd";
import useModalHandler from "../../../utils/useModalHandler";
import { ModalEnum } from "../../../enums/Model";
import Image from "../../Ui/Image";
const NavBarRightSide = () => {
const userData = getLocalStorage(USER_KEY);
const [t] = useTranslation()
const translateArray = translateOptions(search_array, t);
const userData = getLocalStorage(USER_KEY);
const [t] = useTranslation();
const translateArray = translateOptions(search_array, t);
const { handel_open_model } = useModalHandler();
const handleEdit = () => {
handel_open_model(ModalEnum.CHANGE_PASSWORD);
};
const { handel_open_model } = useModalHandler();
const handleEdit = () => {
handel_open_model(ModalEnum.CHANGE_PASSWORD);
};
return (
<article>
<div className="header_search">
<SearchFieldWithSelect
options={translateArray}
placeholder={t("practical.search_here")}
/>
</div>
<span className="header_icons">
<div>
<Image src="/Icon/bell.png" alt="Notifications" />
<div className="header_search">
<SearchFieldWithSelect
options={translateArray}
placeholder={t("practical.search_here")}
/>
</div>
<Tooltip
placement="top"
title={<div onClick={handleEdit}>{t("header.change_your_current_password")}</div>}
color="#E0E0E0"
>
<div className="gear">
<Image src="/Icon/gear.png" alt="Settings" />
<span className="header_icons">
<div>
<Image src="/Icon/bell.png" alt="Notifications" />
</div>
</Tooltip>
</span>
<div className="header_profile">
<span>
<h6>{userData?.username}</h6>
<p>{userData?.type}</p>
<Tooltip
placement="top"
title={
<div onClick={handleEdit}>
{t("header.change_your_current_password")}
</div>
}
color="#E0E0E0"
>
<div className="gear">
<Image src="/Icon/gear.png" alt="Settings" />
</div>
</Tooltip>
</span>
<Image src="/Layout/DefaultStudentImage.png" alt="Profile" />
</div>
</article>
)
}
<div className="header_profile">
<span>
<h6>{userData?.username}</h6>
<p>{userData?.type}</p>
</span>
<Image src="/Layout/DefaultStudentImage.png" alt="Profile" />
</div>
</article>
);
};
export default NavBarRightSide
export default NavBarRightSide;

7
src/Components/Layout/Navbar/SubMenu.tsx
View File

@ -10,7 +10,12 @@ const SubMenu: React.FC<SubMenuProps> = ({ items, location }) => {
return (
<div className="sub-menu">
{items.map((childItem, index) => (
<MenuItem key={index} item={childItem} location={location} index={index} />
<MenuItem
key={index}
item={childItem}
location={location}
index={index}
/>
))}
</div>
);

108
src/Components/Layout/SideBar/MenuItem.tsx
View File

@ -4,60 +4,60 @@ import { MdExpandLess, MdExpandMore } from "react-icons/md";
import { Link, useNavigate } from "react-router-dom";
export const MenuItem = ({ item, location, index }: any) => {
const isActive = location.pathname.split("/")[1] === item.path?.slice(1);
// console.log(location.pathname.split("/")[1]);
const isActive = location.pathname.split("/")[1] === item.path?.slice(1);
// console.log(location.pathname.split("/")[1]);
const [openDropdown, setOpenDropdown] = useState<number | null>(null);
const [openDropdown, setOpenDropdown] = useState<number | null>(null);
const handleDropdown = (index: number) => {
setOpenDropdown((prev) => (prev === index ? null : index));
};
const isDropdownOpen = openDropdown === index;
const [t] = useTranslation();
const navigate = useNavigate();
return (
<>
<div
className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"} `}
onClick={() => navigate(item.path || "/")}
>
<i>{item.icon}</i>
<Link to={item.path || "/"}>{t(item.text)}</Link>
{item?.children && (
<>
{isDropdownOpen ? (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandLess />
</div>
) : (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandMore />
</div>
)}
</>
)}
</div>
{item?.children && isDropdownOpen && (
<div className="sub-menu">
{item.children.map((childItem: any, index: any) => (
<MenuItem
key={index}
item={childItem}
location={location}
index={index}
/>
))}
</div>
)}
</>
);
const handleDropdown = (index: number) => {
setOpenDropdown((prev) => (prev === index ? null : index));
};
const isDropdownOpen = openDropdown === index;
const [t] = useTranslation();
const navigate = useNavigate();
return (
<>
<div
className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"} `}
onClick={() => navigate(item.path || "/")}
>
<i>{item.icon}</i>
<Link to={item.path || "/"}>{t(item.text)}</Link>
{item?.children && (
<>
{isDropdownOpen ? (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandLess />
</div>
) : (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandMore />
</div>
)}
</>
)}
</div>
{item?.children && isDropdownOpen && (
<div className="sub-menu">
{item.children.map((childItem: any, index: any) => (
<MenuItem
key={index}
item={childItem}
location={location}
index={index}
/>
))}
</div>
)}
</>
);
};

24
src/Components/Routes/RenderRouteElement.tsx
View File

@ -3,17 +3,13 @@ import SpinContainer from "../Layout/SpinContainer";
import Layout from "../../Layout/Ui/Layout";
export const RenderRouteElement = (route: any) => (
<Suspense
fallback={
<Layout>
<SpinContainer />
</Layout>
}
>
{route.header ? (
<Layout>{route.element}</Layout>
) : (
route.element || <></>
)}
</Suspense>
);
<Suspense
fallback={
<Layout>
<SpinContainer />
</Layout>
}
>
{route.header ? <Layout>{route.element}</Layout> : route.element || <></>}
</Suspense>
);

25
src/Components/Routes/RenderRoutesRecursively.tsx
View File

@ -5,16 +5,15 @@ import { Route } from "react-router-dom";
import { RenderRouteElement } from "./RenderRouteElement";
export const renderRoutesRecursively = (routes: TMenuItem[]) =>
routes.map((route: TMenuItem) => {
const useAbility = hasAbility(route.abilities, route.abilities_value);
if (!useAbility) {
return false;
}
return (
<React.Fragment key={route.path}>
<Route path={route.path} element={RenderRouteElement(route)} />
{route.children && renderRoutesRecursively(route.children)}
</React.Fragment>
);
});
routes.map((route: TMenuItem) => {
const useAbility = hasAbility(route.abilities, route.abilities_value);
if (!useAbility) {
return false;
}
return (
<React.Fragment key={route.path}>
<Route path={route.path} element={RenderRouteElement(route)} />
{route.children && renderRoutesRecursively(route.children)}
</React.Fragment>
);
});

17
src/Layout/Ui/Layout.tsx
View File

@ -10,17 +10,14 @@ const Layout = ({
children: React.ReactNode;
className?: string;
}) => {
return (
<ProtectedRouteProvider className="Layout">
<main className={`${className} Layout_Body`}>
<NavBar />
<div className="Layout_Children">{children}</div>
</main>
<SideBar />
</ProtectedRouteProvider>
<ProtectedRouteProvider className="Layout">
<main className={`${className} Layout_Body`}>
<NavBar />
<div className="Layout_Children">{children}</div>
</main>
<SideBar />
</ProtectedRouteProvider>
);
};

6
src/Layout/Ui/NavBar.tsx
View File

@ -17,7 +17,6 @@ const NavBar = () => {
const navigate = useNavigate();
const PrevPath = getPrevPathRoute(location.pathname);
const handelNavigate = () => {
if (PrevPath === 0) {
return;
@ -25,14 +24,13 @@ const NavBar = () => {
navigate(deletePathSegments(location.pathname, PrevPath));
};
return (
<div className="NavBar">
<span className="navbar_link" onClick={handelNavigate}>
<MdOutlineArrowForwardIos /> {PageTitle}
</span>
<NavBarRightSide/>
<Suspense fallback={<SpinContainer/>}>
<NavBarRightSide />
<Suspense fallback={<SpinContainer />}>
<ChangePasswordModel />
</Suspense>
</div>

2
src/Layout/Ui/SideBar.tsx
View File

@ -10,8 +10,6 @@ import { getLocalStorage } from "../../utils/LocalStorage";
import { BRANCH_OBJECT_KEY } from "../../config/AppKey";
import { MenuItem } from "../../Components/Layout/SideBar/MenuItem";
const SideBar = () => {
const location = useLocation();

17
src/ProviderContainer.tsx
View File

@ -9,17 +9,12 @@ function ProviderContainer({ children }: ChildrenType) {
return (
<BrowserRouter basename="/">
<I18nProvider>
<QueryProvider>
<ToastProvider>
<AntdProvider>
{children}
</AntdProvider>
</ToastProvider>
</QueryProvider>
</I18nProvider>
<QueryProvider>
<ToastProvider>
<AntdProvider>{children}</AntdProvider>
</ToastProvider>
</QueryProvider>
</I18nProvider>
</BrowserRouter>
);
}

1
src/Styles/Pages/Division.scss
View File

@ -70,7 +70,6 @@
color: black;
}
}
}
.ModelBodyForm {
padding: 2vw;

1
src/api/helper/useAxios.ts
View File

@ -1,4 +1,3 @@
import useAuthState from "../../zustand/AuthState";
import { BaseURL, HEADER_KEY } from "../config";
import AxiosBuilder from "./AxiosBuilder";

11
src/enums/LocalStorageEnum.ts
View File

@ -1,7 +1,6 @@
export enum LocalStorageEnum {
PROJECT_NAME = 'SCHOOL_DASHBOARD_EXERCISE',
LANGUAGE_KEY = LocalStorageEnum.PROJECT_NAME + '_LANGUAGE',
TOKEN_KEY = LocalStorageEnum.PROJECT_NAME + '_TOKEN_KEY',
USER_KEY = LocalStorageEnum.PROJECT_NAME + '_USER_KEY',
}
PROJECT_NAME = "SCHOOL_DASHBOARD_EXERCISE",
LANGUAGE_KEY = LocalStorageEnum.PROJECT_NAME + "_LANGUAGE",
TOKEN_KEY = LocalStorageEnum.PROJECT_NAME + "_TOKEN_KEY",
USER_KEY = LocalStorageEnum.PROJECT_NAME + "_USER_KEY",
}

24
src/lib/AntdProvider.tsx
View File

@ -1,4 +1,4 @@
import { ConfigProvider } from 'antd';
import { ConfigProvider } from "antd";
function AntdProvider({ children }: { children: React.ReactNode }) {
const primaryColor = "#3182ce";
@ -6,18 +6,18 @@ function AntdProvider({ children }: { children: React.ReactNode }) {
return (
<ConfigProvider
theme={{
token: {
colorPrimary: primaryColor,
},
components: {
Table: {
headerBg: bgColor,
headerColor: primaryColor,
theme={{
token: {
colorPrimary: primaryColor,
},
},
}}
>
components: {
Table: {
headerBg: bgColor,
headerColor: primaryColor,
},
},
}}
>
{children}
</ConfigProvider>
);

6
src/lib/I18nProvider.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactNode } from 'react';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18nConfig'; // Import the configured i18n instance
import React, { ReactNode } from "react";
import { I18nextProvider } from "react-i18next";
import i18n from "./i18nConfig"; // Import the configured i18n instance
interface I18nProviderProps {
children: ReactNode;

11
src/lib/ProtectedRouteProvider.tsx
View File

@ -6,7 +6,10 @@ interface ProtectedRouteProviderProps extends React.HTMLProps<HTMLDivElement> {
children: React.ReactNode;
}
function ProtectedRouteProvider({ children, ...props }: ProtectedRouteProviderProps) {
function ProtectedRouteProvider({
children,
...props
}: ProtectedRouteProviderProps) {
const navigate = useNavigate();
const { isAuthenticated } = useAuthState();
@ -16,11 +19,7 @@ function ProtectedRouteProvider({ children, ...props }: ProtectedRouteProviderPr
}
}, [isAuthenticated, navigate]);
return (
<div {...props}>
{children}
</div>
);
return <div {...props}>{children}</div>;
}
export default ProtectedRouteProvider;

8
src/lib/i18nConfig.tsx
View File

@ -1,6 +1,6 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationAR from '../translate/ar.json';
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationAR from "../translate/ar.json";
const resources = {
ar: {
@ -10,7 +10,7 @@ const resources = {
i18n.use(initReactI18next).init({
resources,
lng: 'ar', // Set the default language
lng: "ar", // Set the default language
interpolation: {
escapeValue: false,
},