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

add loading and change ability

Browse Source
This commit is contained in:
karimalden 2024-07-27 14:43:46 +03:00
parent d721b8417c
commit fe6ccaaee0
24 changed files with 563 additions and 615 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bundle-analysis.html
View File

File diff suppressed because one or more lines are too long

1
src/App.tsx
View File

@ -8,7 +8,6 @@ import { useChangeLanguage } from "./Hooks/useChangeLanguage";
import useAuthState from "./zustand/AuthState";
import { TMenuItem } from "./types/App";
import { useTranslation } from "react-i18next";
import useSetPage_title from "./Hooks/useSetPageTitle";
import SpinContainer from "./Components/Layout/SpinContainer";
const Page404 = lazy(() => import("./Layout/Ui/NotFoundPage"));

12
src/Pages/Tags/Page.tsx
View File

@ -5,11 +5,10 @@ import { ModalEnum } from "../../enums/Model";
// import useSetPage_title from "../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { hasAbility } from "../../utils/hasAbility";
import { lazy, Suspense } from 'react';
import { Spin } from "antd";
import { canAddTags } from "../../utils/hasAbilityFn";
import useSetPage_title from "../../Hooks/useSetPageTitle";
const Table = lazy(() => import('./Table'));
const AddModalForm = lazy(() => import('./Model/AddModel'));
const EditModalForm = lazy(() => import('./Model/EditModel'));
@ -20,8 +19,9 @@ const SearchField = lazy(() => import('../../Components/DataTable/SearchField'))
const TableHeader = () => {
const { handel_open_model } = useModalHandler();
const [t] = useTranslation();
// useSetPage_title(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t(`models.${ABILITIES_ENUM.tags}`)}`);
const can_add_tags = hasAbility(ABILITIES_ENUM.TAG, ABILITIES_VALUES_ENUM.STORE);
useSetPage_title(
t(`page_header.tags`),
);
return (
<div className="TableWithHeader">
@ -30,7 +30,7 @@ const TableHeader = () => {
<header className="d-flex justify-content-between">
<SearchField searchBy="name" placeholder={t("practical.search_here")} />
{can_add_tags && (
{canAddTags && (
<div className="Selects">
<button
onClick={() => handel_open_model(ModalEnum?.TAGS_ADD)}

16
src/Pages/Tags/useTableColumns.tsx
View File

@ -7,8 +7,7 @@ import { RiDeleteBin6Fill } from "react-icons/ri";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useModalState } from "../../zustand/Modal";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { hasAbility } from "../../utils/hasAbility";
import { canDeleteTags, canEditTags } from "../../utils/hasAbilityFn";
export const useColumns = () => {
const { setIsOpen } = useModalState((state) => state);
@ -20,14 +19,7 @@ export const useColumns = () => {
};
const [t] = useTranslation();
const can_edit_tags = hasAbility(
ABILITIES_ENUM.TAG,
ABILITIES_VALUES_ENUM.UPDATE,
);
const can_delete_tags = hasAbility(
ABILITIES_ENUM.TAG,
ABILITIES_VALUES_ENUM.DELETE,
);
const columns: TableColumnsType<tags> = [
{
@ -60,7 +52,7 @@ export const useColumns = () => {
return (
<Space size="middle" className={className}>
{can_edit_tags && (
{canEditTags && (
<Tooltip
placement="top"
title={t("practical.edit")}
@ -78,7 +70,7 @@ export const useColumns = () => {
</Tooltip>
)}
{can_delete_tags && (
{canDeleteTags && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}

35
src/Pages/Teacher/Model/Add.tsx
View File

@ -1,35 +0,0 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../zustand/Modal";
import { useEffect } from "react";
const Form = () => {
const formik = useFormikContext();
const { isOpen } = useModalState((state) => state);
useEffect(() => {
if (isOpen === "") {
formik.setErrors({});
}
if (isOpen === "isSuccess") {
formik.setErrors({});
formik.resetForm();
}
}, [isOpen]);
return (
<Row className="w-100">
<Col>
<ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="address" label="address" name="address" />
</Col>
<Col>
<ValidationField placeholder="number" label="number" name="number" />
</Col>
</Row>
);
};
export default Form;

67
src/Pages/Teacher/Model/AddModel.tsx
View File

@ -1,67 +0,0 @@
import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./Add";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import { useAddTeacher } from "../../../api/teacher";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import ModelButtons from "../../../Components/models/ModelButtons";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, isLoading } = useAddTeacher();
const { set_object_to_edit } = useObjectToEdit();
useEffect(() => {
if (isSuccess) {
setIsOpen("isSuccess");
set_object_to_edit({});
}
}, [setIsOpen, isSuccess]);
const handleSubmit = (values: any) => {
mutate({
name: values?.name,
contact_information: values?.number,
address: values?.address,
});
};
const handleCancel = () => {
setIsOpen("");
set_object_to_edit({});
};
const [t] = useTranslation();
return (
<>
<Modal
className="ModalForm"
centered
width={"60vw"}
footer={null}
open={isOpen === ModalEnum?.TEACHER_ADD}
onCancel={handleCancel}
>
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues([])}
validationSchema={getValidationSchema}
>
<header>
{t("practical.add")} {t("models.teacher")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<ModelButtons isLoading={isLoading} />
</main>
</FormikForm>
</Modal>
</>
);
};
export default ModalForm;

94
src/Pages/Teacher/Model/Delete.tsx
View File

@ -1,94 +0,0 @@
import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useDeleteTeacher } from "../../../api/teacher";
import { useTranslation } from "react-i18next";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const [inputValue, setInputValue] = useState("");
const { mutate, isLoading, isSuccess } = useDeleteTeacher();
const { object_to_edit, set_object_to_edit } = useObjectToEdit();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setInputValue("");
}
}, [isSuccess, setIsOpen]);
const handleSubmit = () => {
mutate({
id: Number(object_to_edit?.id),
});
};
const handleCancel = () => {
setInputValue("");
setIsOpen("");
set_object_to_edit({});
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Step 2: Handle changes to the input field
setInputValue(e.target.value);
};
const [t] = useTranslation();
return (
<>
<Modal
className="ModalForm"
centered
width={"40vw"}
footer={null}
open={isOpen === ModalEnum?.TEACHER_DELETE}
onCancel={handleCancel}
>
<header>
{t("practical.delete")} ({object_to_edit?.name}){" "}
</header>
<main className="main_modal">
<div className="ValidationField w-100 mb-5">
<label className="text ">
{t("practical.to_confirm_deletion_please_re_enter")}{" "}
{t("input.name")} {t("models.teacher")}
</label>
<Input
size="large"
type="text"
placeholder={`${t("practical.enter")} ${t("input.name")} ${t("models.teacher")} `}
value={inputValue}
onChange={handleChange}
/>
</div>
<div className="buttons">
<div onClick={handleCancel}>{t("practical.cancel")}</div>
<button
className={
object_to_edit?.name !== inputValue ? "disabled_button" : ""
}
disabled={object_to_edit?.name !== inputValue || isLoading}
onClick={handleSubmit}
>
{t("practical.delete")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</Modal>
</>
);
};
export default ModalForm;

17
src/Pages/Teacher/Model/Edit.tsx
View File

@ -1,17 +0,0 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
const Form = () => {
return (
<Row className="w-100">
<Col>
<ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="address" label="address" name="address" />
</Col>
<Col>
<ValidationField placeholder="number" label="number" name="number" />
</Col>
</Row>
);
};
export default Form;

72
src/Pages/Teacher/Model/EditModel.tsx
View File

@ -1,72 +0,0 @@
import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./Edit";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateTeacher } from "../../../api/teacher";
import { useTranslation } from "react-i18next";
import ModelButtons from "../../../Components/models/ModelButtons";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const { object_to_edit, set_object_to_edit } = useObjectToEdit(
(state) => state,
);
const { mutate, isSuccess, isLoading } = useUpdateTeacher();
// console.log(object_to_edit,"object_to_edit");
const handleSubmit = (values: any) => {
// const contactInformationJson = JSON.stringify({
// phone_number: values?.number
// });
mutate({
id: values?.id,
name: values?.name,
contact_information: values?.number,
address: values?.address,
});
};
const handleCancel = () => {
setIsOpen("");
set_object_to_edit({});
};
useEffect(() => {
if (isSuccess) {
setIsOpen("");
}
}, [setIsOpen, isSuccess]);
const [t] = useTranslation();
return (
<Modal
className="ModalForm"
centered
width={"60vw"}
footer={null}
open={isOpen === ModalEnum?.TEACHER_EDIT}
onCancel={handleCancel}
>
{object_to_edit && (
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues(object_to_edit)}
validationSchema={getValidationSchema}
>
<header>
{" "}
{t("practical.edit")} {t("practical.details")} {t("models.teacher")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<ModelButtons isLoading={isLoading} />
</main>
</FormikForm>
)}
</Modal>
);
};
export default ModalForm;

16
src/Pages/Teacher/Model/formUtil.ts
View File

@ -1,16 +0,0 @@
import * as Yup from "yup";
export const getInitialValues = (objectToEdit: any): any => {
return {
id: objectToEdit?.id ?? null,
number: objectToEdit?.contact_information ?? null,
name: objectToEdit?.name ?? null,
address: objectToEdit?.address ?? null,
};
};
export const getValidationSchema = () => {
return Yup.object().shape({
number: Yup.string().required("validation.required"),
name: Yup.string().required("validation.required"),
});
};

55
src/Pages/Teacher/Page.tsx
View File

@ -1,55 +0,0 @@
import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model";
// import useSetPage_title from "../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { hasAbility } from "../../utils/hasAbility";
import { lazy, Suspense } from 'react';
import { Spin } from "antd";
const Table = lazy(() => import('./Table'));
const AddModalForm = lazy(() => import('./Model/AddModel'));
const EditModalForm = lazy(() => import('./Model/EditModel'));
const DeleteModalForm = lazy(() => import('./Model/Delete'));
const SearchField = lazy(() => import('../../Components/DataTable/SearchField'));
const TableHeader = () => {
const { handel_open_model } = useModalHandler();
const [t] = useTranslation();
// useSetPage_title(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t(`models.${ABILITIES_ENUM.TEACHER}`)}`);
const can_add_TEACHER = hasAbility(ABILITIES_ENUM.TEACHER, ABILITIES_VALUES_ENUM.STORE);
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin/>}>
<header className="d-flex justify-content-between">
<SearchField searchBy="name" placeholder={t("practical.search_here")} />
{can_add_TEACHER && (
<div className="Selects">
<button
onClick={() => handel_open_model(ModalEnum?.TEACHER_ADD)}
className="add_button"
>
{t("practical.add")} {t("models.teacher")} <FaPlus />
</button>
</div>
)}
</header>
<Table />
<DeleteModalForm />
<AddModalForm />
<EditModalForm />
</Suspense>
</div>
);
};
export default TableHeader;

17
src/Pages/Teacher/Table.tsx
View File

@ -1,17 +0,0 @@
import React from "react";
import { useGetAllTeacher } from "../../api/teacher";
import DataTable from "../../Layout/Dashboard/Table/DataTable";
import { useColumns } from "./useTableColumns";
import useSearchQuery from "../../api/utils/useSearchQuery";
const App: React.FC = () => {
const [searchQuery] = useSearchQuery("name");
const response = useGetAllTeacher({
name: searchQuery,
pagination: true,
});
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

17
src/Pages/Teacher/index.tsx
View File

@ -1,17 +0,0 @@
import { useColumns } from "./useTableColumns";
import Table from "./Table";
import { FaPlus } from "react-icons/fa";
import AddModalForm from "./Model/AddModel";
import EditModalForm from "./Model/EditModel";
import DeleteModalForm from "./Model/Delete";
export {
Table,
useColumns,
AddModalForm,
EditModalForm,
DeleteModalForm,
FaPlus
};

109
src/Pages/Teacher/useTableColumns.tsx
View File

@ -1,109 +0,0 @@
import { Space, TableColumnsType, Tooltip } from "antd";
import { Teacher } from "../../types/Item";
import { ModalEnum } from "../../enums/Model";
import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useModalState } from "../../zustand/Modal";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { hasAbility } from "../../utils/hasAbility";
export const useColumns = () => {
const { setIsOpen } = useModalState((state) => state);
const { set_object_to_edit } = useObjectToEdit((state) => state);
const handelDelete = (record: any) => {
set_object_to_edit(record);
setIsOpen(ModalEnum?.TEACHER_DELETE);
};
const [t] = useTranslation();
const can_edit_TEACHER = hasAbility(
ABILITIES_ENUM.TEACHER,
ABILITIES_VALUES_ENUM.UPDATE,
);
const can_delete_TEACHER = hasAbility(
ABILITIES_ENUM.TEACHER,
ABILITIES_VALUES_ENUM.DELETE,
);
const columns: TableColumnsType<Teacher> = [
{
title: t("columns.id"),
dataIndex: "id",
key: "id",
align: "center",
},
{
title: t("columns.name"),
dataIndex: "name",
key: "name",
align: "center",
},
{
title: t("columns.address"),
dataIndex: "address",
key: "address",
align: "center",
},
{
title: t("columns.contact_information"),
dataIndex: "contact_information",
key: "contact_information",
align: "center",
render: (text, record, index) => {
return <>{record?.contact_information}</>;
},
},
{
title: "",
key: "actions",
align: "end",
width: "25vw",
render: (text, record, index) => {
const handleEdit = (record: any) => {
// console.log(record,"record");
set_object_to_edit(record);
setIsOpen(ModalEnum?.TEACHER_EDIT);
};
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
return (
<Space size="middle" className={className}>
{can_edit_TEACHER && (
<Tooltip
placement="top"
title={t("practical.edit")}
color="#E0E0E0"
>
<span onClick={() => handleEdit(record)}>
<MdOutlineEdit
size={22}
style={{ color: "#A098AE" }}
/>
</span>
</Tooltip>
)}
{can_delete_TEACHER && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/>
)}
</Space>
);
},
},
];
return columns;
};

1
src/Pages/Unit/Page.tsx
View File

@ -23,7 +23,6 @@ const TableHeader = () => {
const SubjectName = Subject?.data?.name ?? "";
console.log(SubjectName);
useSetPage_title(
t(`page_header.subject`) +
"/" +

32
src/Pages/Unit/useTableColumns.tsx
View File

@ -1,19 +1,16 @@
import { Space, TableColumnsType, Tooltip } from "antd";
import { Unit } from "../../types/Item";
import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { MdOutlineEdit } from "react-icons/md";
import { findLabelByValue } from "../../utils/findLabelByValue";
import { useTranslation } from "react-i18next";
import { hasAbility } from "../../utils/hasAbility";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { formatNumber } from "../../utils/formatNumber";
import { ABILITIES_ENUM } from "../../enums/abilities";
import { BsEyeFill } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { canAddUnit, canDeleteUnit, canEditUnit, canShowUnit } from "../../utils/hasAbilityFn";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
@ -25,22 +22,7 @@ export const useColumns = () => {
navigate(`${ABILITIES_ENUM?.UNIT}/${record?.id}`);
};
const can_edit_Unit = hasAbility(
ABILITIES_ENUM.UNIT,
ABILITIES_VALUES_ENUM.UPDATE,
);
const can_delete_Unit = hasAbility(
ABILITIES_ENUM.UNIT,
ABILITIES_VALUES_ENUM.DELETE,
);
const can_add_Unit = hasAbility(
ABILITIES_ENUM.UNIT,
ABILITIES_VALUES_ENUM.STORE,
);
const can_show_Unit = hasAbility(
ABILITIES_ENUM.UNIT,
ABILITIES_VALUES_ENUM.SHOW,
);
const handelDelete = (data: any) => {
set_object_to_edit(data);
@ -78,7 +60,7 @@ export const useColumns = () => {
},
{
title: can_add_Unit ? (
title: canAddUnit ? (
<button
onClick={() => handel_open_model(ModalEnum?.UNIT_ADD)}
className="add_button"
@ -97,7 +79,7 @@ export const useColumns = () => {
return (
<Space size="middle" className={className}>
{can_edit_Unit && (
{canEditUnit && (
<Tooltip
placement="top"
title={t("practical.edit")}
@ -112,14 +94,14 @@ export const useColumns = () => {
</span>
</Tooltip>
)}
{can_delete_Unit && (
{canDeleteUnit && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/>
)}
{can_show_Unit && (
{canShowUnit && (
<BsEyeFill
onClick={() => handelShow(record)}

26
src/Pages/lesson/useTableColumns.tsx
View File

@ -14,6 +14,7 @@ import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { formatNumber } from "../../utils/formatNumber";
import { BsEyeFill } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { canAddLesson, canDeleteLesson, canEditLesson, canShowLesson } from "../../utils/hasAbilityFn";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
@ -25,22 +26,7 @@ export const useColumns = () => {
navigate(`${ABILITIES_ENUM.LESSON}/${record?.id}`);
};
const can_edit_Lesson = hasAbility(
ABILITIES_ENUM.LESSON,
ABILITIES_VALUES_ENUM.UPDATE,
);
const can_delete_Lesson = hasAbility(
ABILITIES_ENUM.LESSON,
ABILITIES_VALUES_ENUM.DELETE,
);
const can_add_Lesson = hasAbility(
ABILITIES_ENUM.LESSON,
ABILITIES_VALUES_ENUM.STORE,
);
const can_show_Lesson = hasAbility(
ABILITIES_ENUM.LESSON,
ABILITIES_VALUES_ENUM.SHOW,
);
const handelDelete = (data: any) => {
set_object_to_edit(data);
@ -69,7 +55,7 @@ export const useColumns = () => {
render: (text, record) => record?.name,
},
{
title: can_add_Lesson ? (
title: canAddLesson ? (
<button
onClick={() => handel_open_model(ModalEnum?.LESSON_ADD)}
className="add_button"
@ -88,7 +74,7 @@ export const useColumns = () => {
return (
<Space size="middle" className={className}>
{can_edit_Lesson && (
{canEditLesson && (
<Tooltip
placement="top"
title={t("practical.edit")}
@ -103,14 +89,14 @@ export const useColumns = () => {
</span>
</Tooltip>
)}
{can_delete_Lesson && (
{canDeleteLesson && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/>
)}
{can_show_Lesson && (
{canShowLesson && (
<BsEyeFill
onClick={() => handelShow(record)}

2
src/Pages/question/EditPage.tsx
View File

@ -156,7 +156,7 @@ const EditPage: React.FC = () => {
if(dataLoading && !!(object_to_edit?.isBase) && QuestionsDataLoading){
if(dataLoading || QuestionsDataLoading){
return <SpinContainer/>
}
if(object_to_edit?.isBase){

27
src/Pages/question/useTableColumns.tsx
View File

@ -6,10 +6,10 @@ import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { MdOutlineEdit } from "react-icons/md";
import { useTranslation } from "react-i18next";
import { hasAbility } from "../../utils/hasAbility";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { ABILITIES_ENUM } from "../../enums/abilities";
import { useNavigate } from "react-router-dom";
import { useModalState } from "../../zustand/Modal";
import { canAddQuestion, canDeleteQuestion, canEditQuestion } from "../../utils/hasAbilityFn";
export const useColumns = () => {
const { set_object_to_edit } = useObjectToEdit((state) => state);
@ -21,22 +21,7 @@ export const useColumns = () => {
navigate(`${ABILITIES_ENUM?.QUESTION}/add`)
};
const can_edit_Question = hasAbility(
ABILITIES_ENUM.QUESTION,
ABILITIES_VALUES_ENUM.UPDATE,
);
const can_delete_Question = hasAbility(
ABILITIES_ENUM.QUESTION,
ABILITIES_VALUES_ENUM.DELETE,
);
const can_add_Question = hasAbility(
ABILITIES_ENUM.QUESTION,
ABILITIES_VALUES_ENUM.STORE,
);
const can_show_Question = hasAbility(
ABILITIES_ENUM.QUESTION,
ABILITIES_VALUES_ENUM.SHOW,
);
const handelDelete = (data: any) => {
set_object_to_edit(data);
setIsOpen(ModalEnum?.QUESTION_DELETE);
@ -81,7 +66,7 @@ export const useColumns = () => {
render: (text, record) => record?.question_options_count,
},
{
title: can_add_Question ? (
title: canAddQuestion ? (
<button
onClick={() => handelAdd() }
className="add_button"
@ -100,7 +85,7 @@ export const useColumns = () => {
return (
<Space size="middle" className={className}>
{can_edit_Question && (
{canEditQuestion && (
<Tooltip
placement="top"
title={t("practical.edit")}
@ -115,7 +100,7 @@ export const useColumns = () => {
</span>
</Tooltip>
)}
{can_delete_Question && (
{canDeleteQuestion && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}

12
src/Pages/subject/Table/Page.tsx
View File

@ -1,6 +1,4 @@
import React from 'react'
import { hasAbility } from '../../../utils/hasAbility';
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from '../../../enums/abilities';
import { ModalEnum } from '../../../enums/Model';
import useModalHandler from '../../../utils/useModalHandler';
import { FaPlus } from 'react-icons/fa';
@ -12,13 +10,11 @@ import AddSubjectModalForm from "../Model/AddModel";
import EditSubjectModalForm from "../Model/EditModel";
import DeleteSubjectModalForm from "../Model/Delete";
import useSetPage_title from '../../../Hooks/useSetPageTitle';
import { canAddSubject } from '../../../utils/hasAbilityFn';
const TableWithHeader = () => {
const store_subject_ability = hasAbility(
ABILITIES_ENUM?.SUBJECT,
ABILITIES_VALUES_ENUM?.STORE,
);
const { handel_open_model } = useModalHandler();
const [t] = useTranslation();
@ -30,7 +26,7 @@ const TableWithHeader = () => {
<div className="TableWithHeader">
<header>
<h4 className="Bold Primary ">{t("models.subject")}</h4>
{store_subject_ability && (
{canAddSubject && (
<button
onClick={() => handel_open_model(ModalEnum?.SUBJECT_ADD)}
className="add_button"

14
src/Pages/subject/Table/useTableColumns.tsx
View File

@ -15,6 +15,7 @@ import {
ABILITIES_VALUES_ENUM,
} from "../../../enums/abilities";
import { hasAbility } from "../../../utils/hasAbility";
import { canDeleteSubject, canEditSubject } from "../../../utils/hasAbilityFn";
export const useColumns = () => {
const navigate = useNavigate();
@ -83,18 +84,11 @@ export const useColumns = () => {
render: (text, record, index) => {
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
const edit_subject_ability = hasAbility(
ABILITIES_ENUM?.SUBJECT,
ABILITIES_VALUES_ENUM?.UPDATE,
);
const delete_subject_ability = hasAbility(
ABILITIES_ENUM?.SUBJECT,
ABILITIES_VALUES_ENUM?.DELETE,
);
return (
<Space size="middle" className={className}>
{edit_subject_ability && (
{canEditSubject && (
<Tooltip
placement="top"
title={t("practical.edit")}
@ -109,7 +103,7 @@ export const useColumns = () => {
</span>
</Tooltip>
)}
{delete_subject_ability && (
{canDeleteSubject && (
<RiDeleteBin6Fill
onClick={() => handelDeleteSubject(record)}
size={22}

4
src/api/config.ts
View File

@ -3,7 +3,7 @@
export const BaseURL = "https://exercise-automation.point-dev.net/api/";
export const ImageBaseURL = "http://192.168.1.9:8000/";
// export const ImageBaseURL = "http://192.168.1.9:8000/";
// export const ImageBaseURL = "https://school-back-dev.point-dev.net/";
export const ImageBaseURL = "https://exercise-automation.point-dev.net/";
export const HEADER_KEY = "X-Custom-Query-Key";

7
src/test/pages/Course.test.tsx
View File

@ -1,7 +0,0 @@
import React from "react";
const Course = () => {
return <div></div>;
};
export default Course;

521
src/utils/hasAbilityFn.ts Normal file
View File

@ -0,0 +1,521 @@
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../enums/abilities";
import { hasAbility } from "./hasAbility";
///// EduClass
export const canAddEduClass = hasAbility(
ABILITIES_ENUM.EDUCATION_CLASS,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditEduClass = hasAbility(
ABILITIES_ENUM.EDUCATION_CLASS,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteEduClass = hasAbility(
ABILITIES_ENUM.EDUCATION_CLASS,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowEduClass = hasAbility(
ABILITIES_ENUM.EDUCATION_CLASS,
ABILITIES_VALUES_ENUM.SHOW,
);
export const canIndexEduClass = hasAbility(
ABILITIES_ENUM.EDUCATION_CLASS,
ABILITIES_VALUES_ENUM.INDEX,
);
///// Course
export const canAddCourse = hasAbility(
ABILITIES_ENUM.COURSE,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditCourse = hasAbility(
ABILITIES_ENUM.COURSE,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteCourse = hasAbility(
ABILITIES_ENUM.COURSE,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowCourse = hasAbility(
ABILITIES_ENUM.COURSE,
ABILITIES_VALUES_ENUM.SHOW,
);
export const canIndexCourse = hasAbility(
ABILITIES_ENUM.COURSE,
ABILITIES_VALUES_ENUM.INDEX,
);
///// session
export const canAddSession = hasAbility(
ABILITIES_ENUM.SESSION,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditSession = hasAbility(
ABILITIES_ENUM.SESSION,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteSession = hasAbility(
ABILITIES_ENUM.SESSION,
ABILITIES_VALUES_ENUM.DELETE,
);
//// teacher
export const canEditTeacher = hasAbility(
ABILITIES_ENUM.TEACHER,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteTeacher = hasAbility(
ABILITIES_ENUM.TEACHER,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canAddTeacher = hasAbility(
ABILITIES_ENUM.TEACHER,
ABILITIES_VALUES_ENUM.STORE,
);
//// unit
export const canAddUnit = hasAbility(
ABILITIES_ENUM.UNIT,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditUnit = hasAbility(
ABILITIES_ENUM.UNIT,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteUnit = hasAbility(
ABILITIES_ENUM.UNIT,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowUnit = hasAbility(
ABILITIES_ENUM.UNIT,
ABILITIES_VALUES_ENUM.SHOW,
);
/// subject
export const canAddSubject = hasAbility(
ABILITIES_ENUM.SUBJECT,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditSubject = hasAbility(
ABILITIES_ENUM.SUBJECT,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteSubject = hasAbility(
ABILITIES_ENUM.SUBJECT,
ABILITIES_VALUES_ENUM.DELETE,
);
/// Role
export const canAddRole = hasAbility(
ABILITIES_ENUM.ROLE,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditRole = hasAbility(
ABILITIES_ENUM.ROLE,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteRole = hasAbility(
ABILITIES_ENUM.ROLE,
ABILITIES_VALUES_ENUM.DELETE,
);
/// Payment
export const canIndexPayment = hasAbility(
ABILITIES_ENUM.PAYMENT,
ABILITIES_VALUES_ENUM.INDEX,
);
export const canAddPayment = hasAbility(
ABILITIES_ENUM.PAYMENT,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditPayment = hasAbility(
ABILITIES_ENUM.PAYMENT,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeletePayment = hasAbility(
ABILITIES_ENUM.PAYMENT,
ABILITIES_VALUES_ENUM.DELETE,
);
/// Lesson
export const canAddLesson = hasAbility(
ABILITIES_ENUM.LESSON,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditLesson = hasAbility(
ABILITIES_ENUM.LESSON,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteLesson = hasAbility(
ABILITIES_ENUM.LESSON,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowLesson = hasAbility(
ABILITIES_ENUM.LESSON,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Exercise
export const canAddExercise = hasAbility(
ABILITIES_ENUM.EXERCISE,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditExercise = hasAbility(
ABILITIES_ENUM.EXERCISE,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteExercise = hasAbility(
ABILITIES_ENUM.EXERCISE,
ABILITIES_VALUES_ENUM.DELETE,
);
/// Cycle
export const canAddCycle = hasAbility(
ABILITIES_ENUM.CYCLE,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditCycle = hasAbility(
ABILITIES_ENUM.CYCLE,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteCycle = hasAbility(
ABILITIES_ENUM.CYCLE,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowCycle = hasAbility(
ABILITIES_ENUM.CYCLE,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Admin
export const canAddAdmin = hasAbility(
ABILITIES_ENUM.ADMIN,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditAdmin = hasAbility(
ABILITIES_ENUM.ADMIN,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteAdmin = hasAbility(
ABILITIES_ENUM.ADMIN,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowAdmin = hasAbility(
ABILITIES_ENUM.ADMIN,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Term
export const canAddTerm = hasAbility(
ABILITIES_ENUM.TERM,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditTerm = hasAbility(
ABILITIES_ENUM.TERM,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteTerm = hasAbility(
ABILITIES_ENUM.TERM,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowTerm = hasAbility(
ABILITIES_ENUM.TERM,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Student
export const canAddStudent = hasAbility(
ABILITIES_ENUM.STUDENT,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditStudent = hasAbility(
ABILITIES_ENUM.STUDENT,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteStudent = hasAbility(
ABILITIES_ENUM.STUDENT,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowStudent = hasAbility(
ABILITIES_ENUM.STUDENT,
ABILITIES_VALUES_ENUM.SHOW,
);
export const canImportStudent = hasAbility(
ABILITIES_ENUM.STUDENT,
ABILITIES_VALUES_ENUM.IMPORT_STUDENTS,
);
export const canMoveStudent = hasAbility(
ABILITIES_ENUM.STUDENT,
ABILITIES_VALUES_ENUM.MOVE_STUDENTS,
);
/// EarlyDeparture
export const canAddEarlyDeparture = hasAbility(
ABILITIES_ENUM.EARLY_DEPARTURE,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditEarlyDeparture = hasAbility(
ABILITIES_ENUM.EARLY_DEPARTURE,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteEarlyDeparture = hasAbility(
ABILITIES_ENUM.EARLY_DEPARTURE,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowEarlyDeparture = hasAbility(
ABILITIES_ENUM.EARLY_DEPARTURE,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Exam
export const canAddExam = hasAbility(
ABILITIES_ENUM.EXAM,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditExam = hasAbility(
ABILITIES_ENUM.EXAM,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteExam = hasAbility(
ABILITIES_ENUM.EXAM,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowExam = hasAbility(
ABILITIES_ENUM.EXAM,
ABILITIES_VALUES_ENUM.SHOW,
);
/// HomeWork
export const canAddHomeWork = hasAbility(
ABILITIES_ENUM.HOMEWORK,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditHomeWork = hasAbility(
ABILITIES_ENUM.HOMEWORK,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteHomeWork = hasAbility(
ABILITIES_ENUM.HOMEWORK,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowHomeWork = hasAbility(
ABILITIES_ENUM.HOMEWORK,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Mark
export const canAddMark = hasAbility(
ABILITIES_ENUM.MARK,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditMark = hasAbility(
ABILITIES_ENUM.MARK,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteMark = hasAbility(
ABILITIES_ENUM.MARK,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowMark = hasAbility(
ABILITIES_ENUM.MARK,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Note
export const canAddNote = hasAbility(
ABILITIES_ENUM.NOTE,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditNote = hasAbility(
ABILITIES_ENUM.NOTE,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteNote = hasAbility(
ABILITIES_ENUM.NOTE,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowNote = hasAbility(
ABILITIES_ENUM.NOTE,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Absence
export const canAddAbsence = hasAbility(
ABILITIES_ENUM.ABSENCE,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditAbsence = hasAbility(
ABILITIES_ENUM.ABSENCE,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteAbsence = hasAbility(
ABILITIES_ENUM.ABSENCE,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowAbsence = hasAbility(
ABILITIES_ENUM.ABSENCE,
ABILITIES_VALUES_ENUM.SHOW,
);
/// SessionContent
export const canAddSessionContent = hasAbility(
ABILITIES_ENUM.SESSION_CONTENT,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditSessionContent = hasAbility(
ABILITIES_ENUM.SESSION_CONTENT,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteSessionContent = hasAbility(
ABILITIES_ENUM.SESSION_CONTENT,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowSessionContent = hasAbility(
ABILITIES_ENUM.SESSION_CONTENT,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Branch
export const canAddBranch = hasAbility(
ABILITIES_ENUM.BRANCH,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditBranch = hasAbility(
ABILITIES_ENUM.BRANCH,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteBranch = hasAbility(
ABILITIES_ENUM.BRANCH,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowBranch = hasAbility(
ABILITIES_ENUM.BRANCH,
ABILITIES_VALUES_ENUM.SHOW,
);
/// status
export const canIndexStatus =
hasAbility(ABILITIES_ENUM.EARLY_DEPARTURE, ABILITIES_VALUES_ENUM.INDEX) &&
hasAbility(ABILITIES_ENUM.ABSENCE, ABILITIES_VALUES_ENUM.INDEX) &&
hasAbility(ABILITIES_ENUM.LATE_ARRIVAL, ABILITIES_VALUES_ENUM.INDEX) &&
hasAbility(ABILITIES_ENUM.PRESENCE, ABILITIES_VALUES_ENUM.INDEX);
export const canUpdateStatus =
hasAbility(ABILITIES_ENUM.EARLY_DEPARTURE, ABILITIES_VALUES_ENUM.UPDATE) &&
hasAbility(ABILITIES_ENUM.ABSENCE, ABILITIES_VALUES_ENUM.UPDATE) &&
hasAbility(ABILITIES_ENUM.LATE_ARRIVAL, ABILITIES_VALUES_ENUM.UPDATE);
export const canAddStatus =
hasAbility(ABILITIES_ENUM.EARLY_DEPARTURE, ABILITIES_VALUES_ENUM.STORE) &&
hasAbility(ABILITIES_ENUM.ABSENCE, ABILITIES_VALUES_ENUM.STORE) &&
hasAbility(ABILITIES_ENUM.LATE_ARRIVAL, ABILITIES_VALUES_ENUM.STORE);
/// notification
export const canAddNotification = hasAbility(
ABILITIES_ENUM.NOTE,
ABILITIES_VALUES_ENUM.STORE,
);
/// MarksReport
export const canAddMarksReport = hasAbility(
ABILITIES_ENUM.MARK,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditMarksReport = hasAbility(
ABILITIES_ENUM.MARK,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteMarksReport = hasAbility(
ABILITIES_ENUM.MARK,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowMarksReport = hasAbility(
ABILITIES_ENUM.MARK,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Tags
export const canAddTags = hasAbility(
ABILITIES_ENUM.TAG,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditTags = hasAbility(
ABILITIES_ENUM.TAG,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteTags = hasAbility(
ABILITIES_ENUM.TAG,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowTags = hasAbility(
ABILITIES_ENUM.TAG,
ABILITIES_VALUES_ENUM.SHOW,
);
/// Question
export const canAddQuestion = hasAbility(
ABILITIES_ENUM.QUESTION,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditQuestion = hasAbility(
ABILITIES_ENUM.QUESTION,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteQuestion = hasAbility(
ABILITIES_ENUM.QUESTION,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowQuestion = hasAbility(
ABILITIES_ENUM.QUESTION,
ABILITIES_VALUES_ENUM.SHOW,
);