From 0f54e215462df94a10f9b9e3fc47f5cd262d7727 Mon Sep 17 00:00:00 2001 From: karimaldeen Date: Sun, 15 Sep 2024 10:03:06 +0300 Subject: [PATCH] add new route navigater --- .../utils/ValidationField.scss | 14 +++++ src/Layout/Dashboard/PageHeader.tsx | 14 +++-- src/Layout/Dashboard/PageTitle.tsx | 30 +++++++++++ src/Pages/Admin/Grade/Page.tsx | 5 +- src/Pages/Admin/Param/Page.tsx | 6 ++- src/Pages/Admin/QuestionBank/Page.tsx | 5 +- src/Pages/Admin/Report/Page.tsx | 7 ++- src/Pages/Admin/Reseller/Page.tsx | 5 +- src/Pages/Admin/Student/Page.tsx | 6 ++- src/Pages/Admin/Tags/Page.tsx | 11 ++-- src/Pages/Admin/Unit/Page.tsx | 14 +++-- src/Pages/Admin/User/Page.tsx | 5 +- src/Pages/Admin/lesson/Page.tsx | 20 +++---- src/Pages/Admin/question/Page.tsx | 20 ++++--- src/Pages/Admin/subject/Table/Page.tsx | 14 +++-- src/Pages/Home/Dummy.tsx | 4 +- src/Styles/Layout/PageHeader.scss | 12 +++++ src/Styles/Pages/exercise.scss | 13 ++++- src/translate/ar.json | 52 +++++++++---------- 19 files changed, 171 insertions(+), 86 deletions(-) create mode 100644 src/Layout/Dashboard/PageTitle.tsx diff --git a/src/Components/ValidationField/utils/ValidationField.scss b/src/Components/ValidationField/utils/ValidationField.scss index 3f797be..d158b96 100644 --- a/src/Components/ValidationField/utils/ValidationField.scss +++ b/src/Components/ValidationField/utils/ValidationField.scss @@ -15,6 +15,8 @@ .text, .ant-form-item { margin-bottom: 7px !important; + font-weight: bold; + font-size: 19px; > span { color: transparent; } @@ -65,3 +67,15 @@ .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper { height: 120px; } + + + +//// malty select +/// + .ant-select-multiple{ + height: auto !important; + min-height: 40px; + .ant-select-selector{ + min-height: 40px; + } + } \ No newline at end of file diff --git a/src/Layout/Dashboard/PageHeader.tsx b/src/Layout/Dashboard/PageHeader.tsx index c1e30dc..85085c8 100644 --- a/src/Layout/Dashboard/PageHeader.tsx +++ b/src/Layout/Dashboard/PageHeader.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import SearchBar from "../../Components/Ui/SearchBar/SearchBar"; + import { Button } from "antd"; import { BsPlusCircleFill } from "react-icons/bs"; import { useNavigate } from "react-router-dom"; @@ -8,8 +7,7 @@ import useModalHandler from "../../utils/useModalHandler"; import { MdOutlineArrowForwardIos } from "react-icons/md"; import { deletePathSegments } from "../../utils/deletePathSegments"; import { getPrevPathRoute } from "../../utils/getPrevPathRoute"; -import { usePageTitleState } from "../../zustand/PageTitleState"; -import FillterForm from "../Ui/FillterForm"; +import PageTitleComponent from "./PageTitle"; const PageHeader = ({ canAdd, @@ -35,20 +33,20 @@ const PageHeader = ({ if (PrevPath === 0) { return; } - navigate(deletePathSegments(location.pathname, PrevPath)); + // navigate(deletePathSegments(location.pathname, PrevPath)); }; const handleNavigateToPage = (location: string) => { - navigate(location); + // navigate(location); }; + console.log(); - const { PageTitle } = usePageTitleState(); return (

{t(`PageTitle.${pageTitle}`)}

- {PageTitle} + { addModal ? canAdd && ( diff --git a/src/Layout/Dashboard/PageTitle.tsx b/src/Layout/Dashboard/PageTitle.tsx new file mode 100644 index 0000000..4c3d757 --- /dev/null +++ b/src/Layout/Dashboard/PageTitle.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import { useLocation, useNavigate } from 'react-router-dom' +import { usePageTitleState } from '../../zustand/PageTitleState' + +const PageTitleComponent = () => { + + const {PageTitle,setPageTitle} = usePageTitleState() + const navigate = useNavigate() + const location = useLocation() + const handleNavigate = (path:string)=>{ + const currentPath = location.pathname ; + const newPath = currentPath?.split(path)?.[0] + path ; + if(newPath !== currentPath){ + navigate(newPath) + } + } + return ( +
+ {(Array.isArray(PageTitle) ? PageTitle : [])?.map((item,index)=>{ + return ( +
handleNavigate(item?.path)}> + {item?.name} / +
+ ) + })} +
+ ) +} + +export default PageTitleComponent \ No newline at end of file diff --git a/src/Pages/Admin/Grade/Page.tsx b/src/Pages/Admin/Grade/Page.tsx index 05bf248..b068d9b 100644 --- a/src/Pages/Admin/Grade/Page.tsx +++ b/src/Pages/Admin/Grade/Page.tsx @@ -20,7 +20,10 @@ const TableHeader = () => { const [t] = useTranslation(); const deleteMutation = useDeleteGrade(); - useSetPageTitle(t(`page_header.grade`)); + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.grade`)}`, path:"grade"} + ]); return (
diff --git a/src/Pages/Admin/Param/Page.tsx b/src/Pages/Admin/Param/Page.tsx index 183af03..63b0320 100644 --- a/src/Pages/Admin/Param/Page.tsx +++ b/src/Pages/Admin/Param/Page.tsx @@ -18,7 +18,11 @@ const DeleteModalForm = lazy( const TableHeader = () => { const [t] = useTranslation(); - useSetPageTitle(t(`page_header.param`)); + + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.param`)}`, path:"param"} + ]); const deleteMutation = useDeleteParam(); return (
diff --git a/src/Pages/Admin/QuestionBank/Page.tsx b/src/Pages/Admin/QuestionBank/Page.tsx index e905425..91c7f43 100644 --- a/src/Pages/Admin/QuestionBank/Page.tsx +++ b/src/Pages/Admin/QuestionBank/Page.tsx @@ -20,8 +20,11 @@ const TableHeader = () => { const [t] = useTranslation(); const deleteMutation = useDeleteQuestion(); - useSetPageTitle(t(`page_header.QuestionBank`)); + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.Question`)}`, path:"Question"} + ]); return (
}> diff --git a/src/Pages/Admin/Report/Page.tsx b/src/Pages/Admin/Report/Page.tsx index 8904c4d..33d9d49 100644 --- a/src/Pages/Admin/Report/Page.tsx +++ b/src/Pages/Admin/Report/Page.tsx @@ -21,9 +21,12 @@ const SearchField = lazy( ); const TableHeader = () => { - const { handel_open_model } = useModalHandler(); const [t] = useTranslation(); - useSetPageTitle(t(`page_header.report`)); + + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.report`)}`, path:"report"} + ]); const deleteMutation = useDeleteTag(); return (
diff --git a/src/Pages/Admin/Reseller/Page.tsx b/src/Pages/Admin/Reseller/Page.tsx index 2f3b885..fab96da 100644 --- a/src/Pages/Admin/Reseller/Page.tsx +++ b/src/Pages/Admin/Reseller/Page.tsx @@ -24,7 +24,10 @@ const SearchField = lazy( const TableHeader = () => { const [t] = useTranslation(); - useSetPageTitle(t(`page_header.reseller`)); + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.reseller`)}`, path:"reseller"} + ]); const deleteMutation = useDeleteTag(); return (
diff --git a/src/Pages/Admin/Student/Page.tsx b/src/Pages/Admin/Student/Page.tsx index 24693aa..cc7b8a5 100644 --- a/src/Pages/Admin/Student/Page.tsx +++ b/src/Pages/Admin/Student/Page.tsx @@ -20,8 +20,10 @@ const TableHeader = () => { const [t] = useTranslation(); const deleteMutation = useDeleteStudent(); - useSetPageTitle(t(`page_header.student`)); - + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.student`)}`, path:"student"} + ]); return (
}> diff --git a/src/Pages/Admin/Tags/Page.tsx b/src/Pages/Admin/Tags/Page.tsx index 116abe5..2b61ec2 100644 --- a/src/Pages/Admin/Tags/Page.tsx +++ b/src/Pages/Admin/Tags/Page.tsx @@ -16,14 +16,15 @@ const EditModalForm = lazy(() => import("./Model/EditModel")); const DeleteModalForm = lazy( () => import("../../../Layout/Dashboard/DeleteModels"), ); -const SearchField = lazy( - () => import("../../../Components/DataTable/SearchField"), -); const TableHeader = () => { - const { handel_open_model } = useModalHandler(); const [t] = useTranslation(); - useSetPageTitle(t(`page_header.tags`)); + + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.tags`)}`, path:"tag"} + ]); + const deleteMutation = useDeleteTag(); return (
diff --git a/src/Pages/Admin/Unit/Page.tsx b/src/Pages/Admin/Unit/Page.tsx index f1a312e..9011f94 100644 --- a/src/Pages/Admin/Unit/Page.tsx +++ b/src/Pages/Admin/Unit/Page.tsx @@ -35,15 +35,13 @@ const TableHeader = () => { }); const gradeName = grade?.data?.name ?? ""; - const SubjectName = Subject?.data?.name ?? ""; - useSetPageTitle( - t(`page_header.grade`) + - " / " + - ` ${t("header.subject_of_class")} (${gradeName})` + - " / " + - SubjectName, - ); + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.grade`)}`, path:"grade"}, + {name:` ${t("header.subject_of_class")} (${gradeName})`, path:`grade/${grade_id}`}, + {name:SubjectName, path:`subject/${subject_id}`} + ]); return (
diff --git a/src/Pages/Admin/User/Page.tsx b/src/Pages/Admin/User/Page.tsx index fa14056..83a8f2f 100644 --- a/src/Pages/Admin/User/Page.tsx +++ b/src/Pages/Admin/User/Page.tsx @@ -18,7 +18,10 @@ const DeleteModalForm = lazy( const TableHeader = () => { const [t] = useTranslation(); - useSetPageTitle(t(`page_header.user`)); + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.user`)}`, path:"user"} + ]); const deleteMutation = useDeleteUser(); return (
diff --git a/src/Pages/Admin/lesson/Page.tsx b/src/Pages/Admin/lesson/Page.tsx index ffc67f3..52f1781 100644 --- a/src/Pages/Admin/lesson/Page.tsx +++ b/src/Pages/Admin/lesson/Page.tsx @@ -26,7 +26,7 @@ const TableHeader = () => { const [t] = useTranslation(); const deleteMutation = useDeleteLesson(); - const { unit_id, curriculum_id, grade_id, subject_id } = + const { unit_id, grade_id, subject_id } = useParams(); const { data: unit } = useGetAllUnit({ show: unit_id }); @@ -41,15 +41,15 @@ const TableHeader = () => { const SubjectName = Subject?.data?.name ?? ""; const unitName = unit?.data?.name ?? ""; - useSetPageTitle( - t(`page_header.grade`) + - " / " + - ` ${t("header.subject_of_class")} (${gradeName})` + - " / " + - SubjectName + - " / " + - unitName, - ); + + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.grade`)}`, path:"grade"}, + {name:` ${t("header.subject_of_class")} (${gradeName})`, path:`grade/${grade_id}`}, + {name:SubjectName, path:`subject/${subject_id}`}, + {name:unitName, path:`unit/${unit_id}`} + ]); + return (
diff --git a/src/Pages/Admin/question/Page.tsx b/src/Pages/Admin/question/Page.tsx index 244d272..6584a49 100644 --- a/src/Pages/Admin/question/Page.tsx +++ b/src/Pages/Admin/question/Page.tsx @@ -42,17 +42,15 @@ const TableHeader = () => { const unitName = unit?.data?.name ?? ""; const LessonName = Lesson?.data?.name ?? ""; - useSetPageTitle( - t(`page_header.grade`) + - " / " + - ` ${t("header.subject_of_class")} (${gradeName})` + - " / " + - SubjectName + - " / " + - unitName + - " / " + - LessonName, - ); + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.grade`)}`, path:"grade"}, + {name:` ${t("header.subject_of_class")} (${gradeName})`, path:`grade/${grade_id}`}, + {name:SubjectName, path:`subject/${subject_id}`}, + {name:unitName, path:`unit/${unit_id}`}, + {name:LessonName, path:`lesson/${lesson_id }`} + ]); + return (
diff --git a/src/Pages/Admin/subject/Table/Page.tsx b/src/Pages/Admin/subject/Table/Page.tsx index 5eb9789..03addb0 100644 --- a/src/Pages/Admin/subject/Table/Page.tsx +++ b/src/Pages/Admin/subject/Table/Page.tsx @@ -32,11 +32,15 @@ const TableWithHeader = () => { }); const gradeName = grade?.data?.name ?? ""; - useSetPageTitle( - t(`page_header.grade`) + - " / " + - ` ${t("header.subject_of_class")} (${gradeName})`, - ); + + + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.grade`)}`, path:"grade"}, + {name:` ${t("header.subject_of_class")} (${gradeName})`, path:`grade/${grade_id}`} + ]); + + return (
diff --git a/src/Pages/Home/Dummy.tsx b/src/Pages/Home/Dummy.tsx index cbf55f7..0776ba5 100644 --- a/src/Pages/Home/Dummy.tsx +++ b/src/Pages/Home/Dummy.tsx @@ -4,6 +4,7 @@ import { ABILITIES_ENUM } from "../../enums/abilities"; import useSetPageTitle from "../../Hooks/useSetPageTitle"; import useFilter from "../../Components/FilterField/components/useFilter"; import { Button, Popconfirm } from "antd"; +import PageTitle from "../../Layout/Dashboard/PageTitle"; const Dummy = () => { const [t] = useTranslation(); @@ -11,8 +12,7 @@ const Dummy = () => { const { FilterButton, FilterBody } = useFilter(); return (
- {/* - karim */} +
); diff --git a/src/Styles/Layout/PageHeader.scss b/src/Styles/Layout/PageHeader.scss index e276dba..4368f36 100644 --- a/src/Styles/Layout/PageHeader.scss +++ b/src/Styles/Layout/PageHeader.scss @@ -9,6 +9,9 @@ } .page_links { color: var(--opacity); + display: flex; + align-items: center; + gap: 10px; } } } @@ -16,3 +19,12 @@ .filter_header_top { color: #202c4b; } + + +.PageTitle{ + display: flex; + gap: 10px; + .PageTitleItems{ + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/Styles/Pages/exercise.scss b/src/Styles/Pages/exercise.scss index 5e0736f..2ba2a34 100644 --- a/src/Styles/Pages/exercise.scss +++ b/src/Styles/Pages/exercise.scss @@ -127,12 +127,14 @@ display: flex; justify-content: space-between; width: 100%; - padding: 14px 10px; + padding: 14px 20px; background: #f2f4f8; border-radius: 10px 10px 0 0; margin: 0 !important; box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); - + div{ + margin-left: 25px; + } img { cursor: pointer; } @@ -245,4 +247,11 @@ >header{ padding: 30px 2vw 10px 2vw; } +} + +.SelectTag{ + label{ + font-weight: bold; + font-size: 19px; + } } \ No newline at end of file diff --git a/src/translate/ar.json b/src/translate/ar.json index f81bbce..81c2b58 100644 --- a/src/translate/ar.json +++ b/src/translate/ar.json @@ -798,14 +798,14 @@ "QuestionBank":"بنك الأسئلة" }, "page_header": { - "dashboard": "لوحة القيادة / الصفحة الرئيسية", - "course": " لوحة القيادة / الصفوف ", - "teacher": " لوحة القيادة / المعلمون", - "payment": " لوحة القيادة / الدفعات", - "branch": " لوحة القيادة / الفروع", - "role": " لوحة القيادة / الادوار", - "student": " لوحة القيادة / قائمة الطلاب ", - "admin": " لوحة القيادة / المسؤولون", + "home": "لوحة القيادة", + "course": " الصفوف ", + "teacher": " المعلمون", + "payment": " الدفعات", + "branch": " الفروع", + "role": " الادوار", + "student": " قائمة الطلاب ", + "admin": " المسؤولون", "student_details": "تفاصيل الطالب", "create_student": "إنشاء طالب", "course_details": "تفاصيل الصف", @@ -813,27 +813,27 @@ "student_payment": "دفع الطالب", "student_note": "ملاحظات الطالب", "student_status": "حالة الطالب", - "education_class": "لوحة القيادة / الصفوف / الشعب", - "education_class_details": " لوحة القيادة / الصفوف / الشعب / تفاصيل الشعبة", - "subject_details": " لوحة القيادة / تفاصيل المادة ", - "cycle": "لوحة القيادة / السنة دراسية ", - "term": "لوحة القيادة / الفصل ", - "unit_details": "لوحة القيادة / تفاصيل المادة / تفاصيل الوحدة", - "lesson_details": "لوحة القيادة / تفاصيل المادة / تفاصيل الوحدة / تفاصيل الدرس", - "exercise_add": "لوحة القيادة / تفاصيل الدرس / إضافة تمارين ", - "subject": "لوحة القيادة / المادة", - "tags": "لوحة القيادة / كلمات مفتاحية", - "Question": "لوحة القيادة /اسئلة ", - "add_Question": "لوحة القيادة /إضافة اسئلة ", - "edit_Question": "لوحة القيادة /تعديل اسئلة ", - "grade": "لوحة القيادة / الصفوف", + "education_class": "الصفوف / الشعب", + "education_class_details": " الصفوف / الشعب / تفاصيل الشعبة", + "subject_details": " تفاصيل المادة ", + "cycle": " السنة دراسية ", + "term": "الفصل ", + "unit_details": "تفاصيل المادة / تفاصيل الوحدة", + "lesson_details": "تفاصيل المادة / تفاصيل الوحدة / تفاصيل الدرس", + "exercise_add": "تفاصيل الدرس / إضافة تمارين ", + "subject": "المادة", + "tags": "كلمات مفتاحية", + "Question": "سئلة ", + "add_Question": "ضافة اسئلة ", + "edit_Question": "عديل اسئلة ", + "grade": "الصفوف", "report": "تقرير", - "users": "لوحة القيادة / المستخدمون", - "reseller": " لوحة القيادة / البائعين", - "add_reseller": " لوحة القيادة / البائعين / إضافة بائع ", + "users": "المستخدمون", + "reseller": " البائعين", + "add_reseller": " البائعين / إضافة بائع ", "param": "معامل", "student_package": "حزمة الطالب", - "QuestionBank":"لوحة القيادة / بنك الأسئلة" + "QuestionBank":"بنك الأسئلة" }, "table": { "student": "قائمة الطلاب",