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

Compare commits

base: Karimaldeen:2e1effd7ec3a7545fb6793081f2f860328bdd53e
Branches Tags
Karimaldeen:main
Karimaldeen:dev
..
compare: Karimaldeen:71f743a7a8679421bc1942e290cee8892431d2a9
Branches Tags
Karimaldeen:dev
Karimaldeen:main

No commits in common. "2e1effd7ec3a7545fb6793081f2f860328bdd53e" and "71f743a7a8679421bc1942e290cee8892431d2a9" have entirely different histories.
2e1effd7ec ... 71f743a7a8

49 changed files with 1518 additions and 22382 deletions
Show Stats Expand all files Collapse all files

21054
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

31
src/Components/Table/ActionAddButton.tsx
View File

@ -1,31 +0,0 @@
import React from "react";
import { FaPlus } from "react-icons/fa";
import { useTranslation } from "react-i18next";
interface ActionAddButtonProps {
canAdd: boolean;
onClick: () => void;
buttonText?: string;
modelName: string;
}
const ActionAddButton: React.FC<ActionAddButtonProps> = ({
canAdd,
onClick,
buttonText = "practical.add",
modelName,
}) => {
const { t } = useTranslation();
if (!canAdd) {
return null; // Render nothing if canAdd is false
}
return (
<button onClick={onClick} className="add_button">
{t(buttonText)} {t(`models.${modelName}`)} <FaPlus />
</button>
);
};
export default ActionAddButton;

64
src/Components/Table/ActionButtons.tsx
View File

@ -1,64 +0,0 @@
import React from "react";
import { Tooltip, Space } from "antd";
import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { useTranslation } from "react-i18next";
import { BsEyeFill } from "react-icons/bs";
interface ActionButtonsProps {
canEdit: boolean;
canDelete: boolean;
canShow?: boolean;
editTooltipTitle?: string;
deleteTooltipTitle?: string;
onEdit?: () => void;
onDelete?: () => void;
onShow?: () => void;
index?: number;
className?: string;
}
const ActionButtons: React.FC<ActionButtonsProps> = ({
canEdit,
canDelete,
editTooltipTitle = "practical.edit",
className = "",
onEdit = () => {},
onDelete = () => {},
index,
canShow = false,
onShow = () => {},
}) => {
const [t] = useTranslation();
const CustomClassName = index
? index % 2 === 0
? "even-row buttonAction"
: "odd-row buttonAction"
: "buttonAction";
return (
<Space size="middle" className={`${CustomClassName} ${className} `}>
{canEdit && (
<Tooltip placement="top" title={t(editTooltipTitle)} color="#E0E0E0">
<span onClick={onEdit}>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</span>
</Tooltip>
)}
{canDelete && (
// <Tooltip placement="top" title={t(deleteTooltipTitle)} color="#E0E0E0">
<RiDeleteBin6Fill
onClick={onDelete}
size={22}
style={{ color: "#C11313" }}
/>
// </Tooltip>
)}
{canShow && (
<BsEyeFill onClick={onShow} size={22} style={{ color: "green" }} />
)}
</Space>
);
};
export default ActionButtons;

48
src/Components/Table/ActionColumn.tsx
View File

@ -1,48 +0,0 @@
import React from "react";
import { ColumnType } from "antd/lib/table";
import ActionAddButton from "./ActionAddButton";
import ActionButtons from "./ActionButtons";
import { ModalEnum } from "../../enums/Model";
interface ActionColumnProps {
canAddPayment: boolean;
canDeletePayment: boolean;
canEditPayment: boolean;
handelAdd: () => void;
handelDelete: (record: any) => void;
handleEdit: (record: any) => void;
ModalEnum: ModalEnum; // Adjust this type based on your ModalEnum definition
}
const createActionColumn = ({
canAddPayment,
canDeletePayment,
canEditPayment,
handelDelete,
handleEdit,
handelAdd,
}: ActionColumnProps): ColumnType<any> => {
return {
title: (
<ActionAddButton
canAdd={canAddPayment}
modelName="payment"
onClick={() => handelAdd()}
/>
),
key: "actions",
align: "end",
className: "custom_add_button_column",
render: (_text, record, index) => (
<ActionButtons
canDelete={canDeletePayment}
canEdit={canEditPayment}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
/>
),
};
};
export default createActionColumn;

37
src/Components/Table/TableAddButton.tsx
View File

@ -1,37 +0,0 @@
import React from "react";
import { FaPlus } from "react-icons/fa";
import { useTranslation } from "react-i18next";
import { ModalEnum } from "../../enums/Model";
import { useModalState } from "../../zustand/Modal";
interface TableAddButtonProps {
canAdd: boolean;
ModalEnumValue: ModalEnum;
buttonText?: string;
modelName: string;
}
const TableAddButton: React.FC<TableAddButtonProps> = ({
canAdd,
ModalEnumValue,
buttonText = "practical.add",
modelName,
}) => {
const { t } = useTranslation();
const { setIsOpen } = useModalState((state) => state);
if (!canAdd) {
return null; // Render nothing if canAdd is false
}
return (
<button
// onClick={() => setIsOpen(ModalEnum?.[ModalEnumValue])}
className="add_button"
>
{t(buttonText)} {t(`models.${modelName}`)} <FaPlus />
</button>
);
};
export default TableAddButton;

40
src/Layout/Dashboard/DeleteModels.tsx
View File

@ -1,20 +1,22 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd"; import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../zustand/Modal"; import { useModalState } from "../../zustand/Modal";
import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
interface ModalFormProps { interface ModalFormProps {
modalType: ModalEnum;
objectType: string;
deleteMutation: any; deleteMutation: any;
ModelEnum: any; objectValue: string;
isNavigate?: boolean;
} }
const DeleteModels: React.FC<ModalFormProps> = ({ const DeleteModels: React.FC<ModalFormProps> = ({
modalType,
objectType,
deleteMutation, deleteMutation,
ModelEnum, objectValue,
isNavigate = false,
}) => { }) => {
const { isOpen, setIsOpen } = useModalState((state) => state); const { isOpen, setIsOpen } = useModalState((state) => state);
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
@ -22,16 +24,10 @@ const DeleteModels: React.FC<ModalFormProps> = ({
const { mutate, isLoading, isSuccess } = deleteMutation; const { mutate, isLoading, isSuccess } = deleteMutation;
const { objectToEdit, setObjectToEdit } = useObjectToEdit(); const { objectToEdit, setObjectToEdit } = useObjectToEdit();
const iaDisabled =
Number(objectToEdit?.id) !== Number(inputValue) || isLoading;
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (isSuccess) { if (isSuccess) {
setIsOpen(""); setIsOpen("");
setInputValue(""); setInputValue("");
if (isNavigate) {
navigate(-1);
}
} }
}, [isSuccess, setIsOpen]); }, [isSuccess, setIsOpen]);
@ -52,7 +48,7 @@ const DeleteModels: React.FC<ModalFormProps> = ({
}; };
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter" && !iaDisabled) { if (e.key === "Enter" && objectToEdit?.[objectValue] === inputValue) {
handleSubmit(); handleSubmit();
} }
}; };
@ -64,22 +60,24 @@ const DeleteModels: React.FC<ModalFormProps> = ({
centered centered
width={"40vw"} width={"40vw"}
footer={null} footer={null}
open={isOpen === ModelEnum} open={isOpen === modalType}
onCancel={handleCancel} onCancel={handleCancel}
> >
<header>{t("practical.delete_this_item")}</header> <header>
{t("practical.delete")} {t(`models.${objectType}`)}
</header>
<main className="main_modal"> <main className="main_modal">
<div className="ValidationField w-100 mb-5"> <div className="ValidationField w-100 mb-5">
<label className="text "> <label className="text ">
{t("practical.to_confirm_deletion_please_re_enter_id")} ({" "} {t("practical.to_confirm_deletion_please_re_enter")}{" "}
{objectToEdit?.id} ) {t(`input.${objectValue}`)} ({objectToEdit?.[objectValue]})
</label> </label>
<Input <Input
size="large" size="large"
type="text" type="text"
placeholder={`${t("practical.enter")} ${t(`input.id`)} `} placeholder={`${t("practical.enter")} ${t(`input.${objectValue}`)} `}
value={inputValue} value={inputValue}
onChange={handleChange} onChange={handleChange}
onKeyDown={handleKeyPress} onKeyDown={handleKeyPress}
@ -89,8 +87,12 @@ const DeleteModels: React.FC<ModalFormProps> = ({
<div className="buttons"> <div className="buttons">
<div onClick={handleCancel}>{t("practical.cancel")}</div> <div onClick={handleCancel}>{t("practical.cancel")}</div>
<button <button
className={iaDisabled ? "disabled_button" : ""} className={
disabled={iaDisabled} objectToEdit?.[objectValue] !== inputValue
? "disabled_button"
: ""
}
disabled={objectToEdit?.[objectValue] !== inputValue || isLoading}
onClick={handleSubmit} onClick={handleSubmit}
type="button" type="button"
> >

102
src/Layout/Dashboard/LayoutModel.tsx
View File

@ -1,102 +0,0 @@
import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../zustand/Modal";
import FormikForm from "./FormikFormModel";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { QueryStatusEnum } from "../../enums/QueryStatus";
import SpinContainer from "../../Components/Layout/SpinContainer";
interface LayoutModalProps {
isAddModal?: boolean;
modelTitle: string;
handleSubmit: (values: any) => void;
getInitialValues: any;
getValidationSchema: any;
children: React.ReactNode;
status: QueryStatusEnum;
ModelEnum: any;
ModelClassName?: string;
width?: string;
isLoading?: boolean;
}
const LayoutModel = ({
isAddModal = true,
children,
handleSubmit = () => {},
getInitialValues,
getValidationSchema,
status,
modelTitle,
ModelEnum,
ModelClassName,
width = "60vw",
isLoading = false,
}: LayoutModalProps) => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const { setObjectToEdit } = useObjectToEdit();
useEffect(() => {
if (isAddModal && status === QueryStatusEnum.SUCCESS) {
setIsOpen("isSuccess");
setObjectToEdit({});
return;
}
if (status === QueryStatusEnum.SUCCESS) {
setIsOpen("");
setObjectToEdit({});
}
}, [setIsOpen, status]);
const handleCancel = () => {
setIsOpen("");
setObjectToEdit({});
};
const [t] = useTranslation();
return (
<>
<Modal
className={"ModalForm " + ModelClassName}
centered
width={width}
footer={null}
open={isOpen === ModelEnum}
onCancel={handleCancel}
>
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues}
validationSchema={getValidationSchema}
>
<header>
{t(`practical.${isAddModal ? "add" : "edit"}`)}{" "}
{t(`models.${modelTitle}`)}{" "}
</header>
<main className="main_modal w-100">
{isLoading ? <SpinContainer /> : children}
<div className="buttons">
<div className="back_button" onClick={handleCancel}>
{t("practical.back")}
</div>
<button
className="add_button"
disabled={status === QueryStatusEnum.LOADING}
type="submit"
>
{t(`practical.${isAddModal ? "add" : "edit"}`)}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</Modal>
</>
);
};
export default LayoutModel;

33
src/Pages/Tags/Model/Add.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../zustand/Modal";
import { useEffect } from "react";
import DynamicTags from "../synonyms/DynamicTags";
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" />
</Col>
<div>
<DynamicTags />
</div>
</Row>
);
};
export default Form;

66
src/Pages/Tags/Model/AddModel.tsx
View File

@ -1,33 +1,65 @@
import React from "react"; 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 { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import { useAddTag } from "../../../api/tags";
import ModelForm from "./ModelForm";
const AddModel: React.FC = () => { import { useAddTag } from "../../../api/tags";
const { mutate, status } = useAddTag(); 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 } = useAddTag();
const { setObjectToEdit } = useObjectToEdit();
useEffect(() => {
if (isSuccess) {
setIsOpen("isSuccess");
setObjectToEdit({});
}
}, [setIsOpen, isSuccess]);
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
mutate({ mutate({
...values, ...values,
}); });
}; };
const handleCancel = () => {
setIsOpen("");
setObjectToEdit({});
};
const [t] = useTranslation();
return ( return (
<> <>
<LayoutModel <Modal
status={status as QueryStatusEnum} className="ModalForm"
ModelEnum={ModalEnum.TAGS_ADD} centered
modelTitle="tags" width={"60vw"}
handleSubmit={handleSubmit} footer={null}
getInitialValues={getInitialValues({})} open={isOpen === ModalEnum?.TAGS_ADD}
getValidationSchema={getValidationSchema} onCancel={handleCancel}
> >
<ModelForm /> <FormikForm
</LayoutModel> handleSubmit={handleSubmit}
initialValues={getInitialValues([])}
validationSchema={getValidationSchema}
>
<header>
{t("practical.add")} {t("models.tags")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<ModelButtons isLoading={isLoading} />
</main>
</FormikForm>
</Modal>
</> </>
); );
}; };
export default AddModel; export default ModalForm;

94
src/Pages/Tags/Model/Delete.tsx Normal file
View File

@ -0,0 +1,94 @@
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 { useDeleteTag } from "../../../api/tags";
import { useTranslation } from "react-i18next";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const [inputValue, setInputValue] = useState("");
const { mutate, isLoading, isSuccess } = useDeleteTag();
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setInputValue("");
}
}, [isSuccess, setIsOpen]);
const handleSubmit = () => {
mutate({
id: Number(objectToEdit?.id),
});
};
const handleCancel = () => {
setInputValue("");
setIsOpen("");
setObjectToEdit({});
};
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?.TAGS_DELETE}
onCancel={handleCancel}
>
<header>
{t("practical.delete")} ({objectToEdit?.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.tags")}
</label>
<Input
size="large"
type="text"
placeholder={`${t("practical.enter")} ${t("input.name")} ${t("models.tags")} `}
value={inputValue}
onChange={handleChange}
/>
</div>
<div className="buttons">
<div onClick={handleCancel}>{t("practical.cancel")}</div>
<button
className={
objectToEdit?.name !== inputValue ? "disabled_button" : ""
}
disabled={objectToEdit?.name !== inputValue || isLoading}
onClick={handleSubmit}
>
{t("practical.delete")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</Modal>
</>
);
};
export default ModalForm;

3
src/Pages/Tags/Model/ModelForm.tsx → src/Pages/Tags/Model/Edit.tsx
View File

@ -1,5 +1,8 @@
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField"; import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../zustand/Modal";
import { useEffect } from "react";
import DynamicTags from "../synonyms/DynamicTags"; import DynamicTags from "../synonyms/DynamicTags";
const Form = () => { const Form = () => {

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

@ -1,36 +1,66 @@
import React from "react"; 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 { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import ModelForm from "./ModelForm";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateTag } from "../../../api/tags"; import { useUpdateTag } from "../../../api/tags";
import { useTranslation } from "react-i18next";
import ModelButtons from "../../../Components/models/ModelButtons";
const EditModel: React.FC = () => { const ModalForm: React.FC = () => {
const { mutate, status } = useUpdateTag(); const { isOpen, setIsOpen } = useModalState((state) => state);
const { objectToEdit } = useObjectToEdit((state) => state); const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
const { mutate, isSuccess, isLoading } = useUpdateTag();
// console.log(objectToEdit,"objectToEdit");
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
// const contactInformationJson = JSON.stringify({
// phone_number: values?.number
// });
mutate({ mutate({
...values, ...values,
}); });
}; };
const handleCancel = () => {
setIsOpen("");
setObjectToEdit({});
};
useEffect(() => {
if (isSuccess) {
setIsOpen("");
}
}, [setIsOpen, isSuccess]);
const [t] = useTranslation();
return ( return (
<> <Modal
<LayoutModel className="ModalForm"
status={status as QueryStatusEnum} centered
ModelEnum={ModalEnum.TAGS_EDIT} width={"60vw"}
modelTitle="tags_details" footer={null}
handleSubmit={handleSubmit} open={isOpen === ModalEnum?.TAGS_EDIT}
getInitialValues={getInitialValues(objectToEdit)} onCancel={handleCancel}
getValidationSchema={getValidationSchema}
isAddModal={false}
> >
<ModelForm /> {objectToEdit && (
</LayoutModel> <FormikForm
</> handleSubmit={handleSubmit}
initialValues={getInitialValues(objectToEdit)}
validationSchema={getValidationSchema}
>
<header>
{" "}
{t("practical.edit")} {t("practical.details")} {t("models.tags")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<ModelButtons isLoading={isLoading} />
</main>
</FormikForm>
)}
</Modal>
); );
}; };
export default EditModel; export default ModalForm;

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

@ -1,16 +1,18 @@
import { FaPlus } from "react-icons/fa"; import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../utils/useModalHandler"; import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model"; import { ModalEnum } from "../../enums/Model";
// import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react"; import { lazy, Suspense } from "react";
import { Spin } from "antd"; import { Spin } from "antd";
import { canAddTags } from "../../utils/hasAbilityFn"; import { canAddTags } from "../../utils/hasAbilityFn";
import useSetPageTitle from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useDeleteTag } from "../../api/tags";
const Table = lazy(() => import("./Table")); const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import("./Model/AddModel")); const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import("./Model/EditModel")); const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModalForm = lazy(() => import("../../Layout/Dashboard/DeleteModels")); const DeleteModalForm = lazy(() => import("./Model/Delete"));
const SearchField = lazy( const SearchField = lazy(
() => import("../../Components/DataTable/SearchField"), () => import("../../Components/DataTable/SearchField"),
); );
@ -18,10 +20,7 @@ const SearchField = lazy(
const TableHeader = () => { const TableHeader = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
const [t] = useTranslation(); const [t] = useTranslation();
useSetPageTitle( useSetPageTitle(t(`page_header.tags`));
t(`page_header.tags`),
);
const deleteMutation = useDeleteTag();
return ( return (
<div className="TableWithHeader"> <div className="TableWithHeader">
@ -45,10 +44,7 @@ const TableHeader = () => {
</header> </header>
<Table /> <Table />
<DeleteModalForm <DeleteModalForm />
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.TAGS_DELETE}
/>
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />
</Suspense> </Suspense>

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

@ -1,15 +1,15 @@
import { TableColumnsType } from "antd"; import { Space, TableColumnsType, Tooltip } from "antd";
import { tags } from "../../types/Item"; import { tags } from "../../types/Item";
import { ModalEnum } from "../../enums/Model"; import { ModalEnum } from "../../enums/Model";
import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { useObjectToEdit } from "../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useModalState } from "../../zustand/Modal"; import { useModalState } from "../../zustand/Modal";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { canDeleteTags, canEditTags } from "../../utils/hasAbilityFn"; import { canDeleteTags, canEditTags } from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
export const useColumns = () => { export const useColumns = () => {
const [t] = useTranslation();
const { setIsOpen } = useModalState((state) => state); const { setIsOpen } = useModalState((state) => state);
const { setObjectToEdit } = useObjectToEdit((state) => state); const { setObjectToEdit } = useObjectToEdit((state) => state);
@ -17,10 +17,7 @@ export const useColumns = () => {
setObjectToEdit(record); setObjectToEdit(record);
setIsOpen(ModalEnum?.TAGS_DELETE); setIsOpen(ModalEnum?.TAGS_DELETE);
}; };
const handleEdit = (record:any) => { const [t] = useTranslation();
setObjectToEdit(record);
setIsOpen(ModalEnum?.TAGS_EDIT);
};
const columns: TableColumnsType<tags> = [ const columns: TableColumnsType<tags> = [
{ {
@ -41,15 +38,38 @@ export const useColumns = () => {
key: "actions", key: "actions",
align: "end", align: "end",
width: "25vw", width: "25vw",
render: (_text, record, index) => { render: (text, record, index) => {
const handleEdit = (record: any) => {
// console.log(record,"record");
setObjectToEdit(record);
setIsOpen(ModalEnum?.TAGS_EDIT);
};
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
return ( return (
<ActionButtons <Space size="middle" className={className}>
canDelete={canEditTags} {canEditTags && (
canEdit={canDeleteTags} <Tooltip
index={index} placement="top"
onDelete={() => handelDelete(record)} title={t("practical.edit")}
onEdit={() => handleEdit(record)} color="#E0E0E0"
>
<span onClick={() => handleEdit(record)}>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</span>
</Tooltip>
)}
{canDeleteTags && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/> />
)}
</Space>
); );
}, },
}, },

72
src/Pages/Unit/Model/AddModel.tsx
View File

@ -1,36 +1,76 @@
import React from "react"; import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./AddUnit";
import { getInitialValues, getValidationSchema } from "./formUtil"; import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddUnit } from "../../../api/unit"; import { useAddUnit } from "../../../api/unit";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
const AddModel: React.FC = () => { const ModalForm: React.FC = () => {
const { mutate, status } = useAddUnit(); const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, isLoading } = useAddUnit();
const { subject_id } = useParams(); const { subject_id } = useParams();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
}
}, [setIsOpen, isSuccess]);
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
// console.log(values,"values");
mutate({ mutate({
...values, ...values,
subject_id: subject_id, subject_id: subject_id,
}); });
}; };
const handleCancel = () => {
setIsOpen("");
};
const [t] = useTranslation();
return ( return (
<> <>
<LayoutModel <Modal
status={status as QueryStatusEnum} className="ModalForm"
ModelEnum={ModalEnum.UNIT_ADD} centered
modelTitle="unit" width={"40vw"}
handleSubmit={handleSubmit} footer={null}
getInitialValues={getInitialValues({})} open={isOpen === ModalEnum?.UNIT_ADD}
getValidationSchema={getValidationSchema} onCancel={handleCancel}
> >
<ModelForm /> <FormikForm
</LayoutModel> handleSubmit={handleSubmit}
initialValues={getInitialValues([])}
validationSchema={getValidationSchema}
>
<header>
{" "}
{t("practical.add")} {t("models.unit")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<div className="buttons">
<div onClick={handleCancel}>{t("practical.back")}</div>
<button disabled={isLoading} type="submit">
{t("practical.add")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</Modal>
</> </>
); );
}; };
export default AddModel; export default ModalForm;

27
src/Pages/Unit/Model/AddUnit.tsx Normal file
View File

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

98
src/Pages/Unit/Model/Delete.tsx Normal file
View File

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

80
src/Pages/Unit/Model/EditModel.tsx
View File

@ -1,42 +1,82 @@
import React from "react"; import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./AddUnit";
import { getInitialValues, getValidationSchema } from "./formUtil"; import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import ModelForm from "./ModelForm";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateTag } from "../../../api/tags";
import { useUpdateUnit } from "../../../api/unit"; import { useUpdateUnit } from "../../../api/unit";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
const EditModel: React.FC = () => { const ModalForm: React.FC = () => {
const { mutate, status } = useUpdateUnit(); const { isOpen, setIsOpen } = useModalState((state) => state);
const { objectToEdit } = useObjectToEdit((state) => state);
const { mutate, isSuccess, isLoading } = useUpdateUnit();
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
// console.log(objectToEdit,"objectToEdit");
const { subject_id } = useParams(); const { subject_id } = useParams();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
}
}, [setIsOpen, isSuccess]);
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
// console.log(values,"values");
mutate({ mutate({
...values, ...values,
subject_id: subject_id, subject_id: subject_id,
}); });
}; };
const handleCancel = () => {
setIsOpen("");
};
const [t] = useTranslation();
return ( return (
<> <>
<LayoutModel <Modal
status={status as QueryStatusEnum} className="ModalForm"
ModelEnum={ModalEnum.UNIT_EDIT} centered
modelTitle="unit" width={"40vw"}
handleSubmit={handleSubmit} footer={null}
getInitialValues={getInitialValues(objectToEdit)} open={isOpen === ModalEnum?.UNIT_EDIT}
getValidationSchema={getValidationSchema} onCancel={handleCancel}
isAddModal={false}
> >
<ModelForm /> <FormikForm
</LayoutModel> handleSubmit={handleSubmit}
initialValues={getInitialValues(objectToEdit)}
validationSchema={getValidationSchema}
>
<header>
{" "}
{t("practical.edit")}
{t("models.unit")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<div className="buttons">
<div onClick={handleCancel}>{t("practical.cancel")}</div>
<button disabled={isLoading} type="submit">
{t("practical.edit")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</Modal>
</> </>
); );
}; };
export default EditModel; export default ModalForm;

27
src/Pages/Unit/Model/EditUnit.tsx Normal file
View File

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

14
src/Pages/Unit/Model/ModelForm.tsx
View File

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

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

@ -5,17 +5,14 @@ import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params"; import { ParamsEnum } from "../../enums/params";
import { useGetAllSubject } from "../../api/subject"; import { useGetAllSubject } from "../../api/subject";
import useSetPageTitle from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { ModalEnum } from "../../enums/Model";
import { useDeleteUnit } from "../../api/unit";
const Table = lazy(() => import('./Table')); const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import('./Model/AddModel')); const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import('./Model/EditModel')); const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModalForm = lazy(() => import('../../Layout/Dashboard/DeleteModels')); const DeleteModels = lazy(() => import("./Model/Delete"));
const TableHeader = () => { const TableHeader = () => {
const [t] = useTranslation(); const [t] = useTranslation();
const deleteMutation = useDeleteUnit();
const { subject_id } = useParams<ParamsEnum>(); const { subject_id } = useParams<ParamsEnum>();
@ -38,10 +35,7 @@ const TableHeader = () => {
<Table /> <Table />
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />
<DeleteModalForm <DeleteModels />
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.UNIT_DELETE}
/>
</Suspense> </Suspense>
</div> </div>
); );

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

@ -16,7 +16,6 @@ import {
canEditUnit, canEditUnit,
canShowUnit, canShowUnit,
} from "../../utils/hasAbilityFn"; } from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
export const useColumns = () => { export const useColumns = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
@ -74,21 +73,41 @@ export const useColumns = () => {
) : ( ) : (
"" ""
), ),
key: "actions", key: "actions",
align: "end", align: "end",
width: "25vw", className: "custom_add_button_column",
render: (_text, record, index) => { render: (text, record, index) => {
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
return ( return (
<ActionButtons <Space size="middle" className={className}>
canDelete={canDeleteUnit} {canEditUnit && (
canEdit={canEditUnit} <Tooltip
canShow={canShowUnit} placement="top"
index={index} title={t("practical.edit")}
onDelete={() => handelDelete(record)} color="#E0E0E0"
onEdit={() => handleEdit(record)} >
onShow={() => handelShow(record)} <span onClick={() => handleEdit(record)}>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</span>
</Tooltip>
)}
{canDeleteUnit && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/> />
)}
{canShowUnit && (
<BsEyeFill
onClick={() => handelShow(record)}
size={22}
style={{ color: "green" }}
/>
)}
</Space>
); );
}, },
}, },

27
src/Pages/lesson/Model/Add.tsx Normal file
View File

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

69
src/Pages/lesson/Model/AddModel.tsx
View File

@ -1,20 +1,24 @@
import React, { useEffect } from "react"; 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 { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useQueryClient } from "react-query";
import { useAddLesson } from "../../../api/lesson"; import { useAddLesson } from "../../../api/lesson";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useQueryClient } from "react-query";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../../enums/params"; import { ParamsEnum } from "../../../enums/params";
import { useModalState } from "../../../zustand/Modal";
const AddModel: React.FC = () => {
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state); const { isOpen, setIsOpen } = useModalState((state) => state);
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { mutate, isSuccess, status } = useAddLesson();
const { mutate, isSuccess, isLoading } = useAddLesson();
const { unit_id } = useParams<ParamsEnum>(); const { unit_id } = useParams<ParamsEnum>();
useEffect(() => { useEffect(() => {
@ -28,20 +32,49 @@ const AddModel: React.FC = () => {
mutate({ ...values, unit_id: unit_id }); mutate({ ...values, unit_id: unit_id });
}; };
const handleCancel = () => {
setIsOpen("");
};
const [t] = useTranslation();
return ( return (
<> <>
<LayoutModel <Modal
status={status as QueryStatusEnum} className="ModalForm"
ModelEnum={ModalEnum.LESSON_ADD} centered
modelTitle="lesson" width={"40vw"}
handleSubmit={handleSubmit} footer={null}
getInitialValues={getInitialValues({})} open={isOpen === ModalEnum?.LESSON_ADD}
getValidationSchema={getValidationSchema} onCancel={handleCancel}
> >
<ModelForm /> <FormikForm
</LayoutModel> handleSubmit={handleSubmit}
initialValues={getInitialValues([])}
validationSchema={getValidationSchema}
>
<header>
{" "}
{t("practical.add")} {t("models.lesson")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<div className="buttons">
<div onClick={handleCancel}>{t("practical.back")}</div>
<button disabled={isLoading} type="submit">
{t("practical.add")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</Modal>
</> </>
); );
}; };
export default AddModel; export default ModalForm;

97
src/Pages/lesson/Model/Delete.tsx Normal file
View File

@ -0,0 +1,97 @@
import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model";
import { useDeleteLesson } from "../../../api/lesson";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useQueryClient } from "react-query";
import { useTranslation } from "react-i18next";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const [inputValue, setInputValue] = useState("");
const { mutate, isSuccess, isLoading } = useDeleteLesson();
const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
const queryClient = useQueryClient();
const [t] = useTranslation();
const handleSubmit = () => {
mutate({
id: Number(objectToEdit?.id),
});
};
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setInputValue("");
queryClient.invalidateQueries(["unit"]);
}
}, [setIsOpen, isSuccess, queryClient]);
const handleCancel = () => {
setInputValue("");
setIsOpen("");
setObjectToEdit({});
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
return (
<>
<Modal
className="ModalForm"
centered
width={"40vw"}
footer={null}
open={isOpen === ModalEnum?.LESSON_DELETE}
onCancel={handleCancel}
>
<header>
{" "}
{t("practical.delete")} {objectToEdit?.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("models.lesson")} {t("input.name")}
</label>
<Input
size="large"
type="text"
placeholder={`${t("practical.enter")} ${t("input.name")} ${t("models.lesson")} `}
value={inputValue}
onChange={handleChange}
/>
</div>
<div className="buttons">
<div onClick={handleCancel}>{t("practical.cancel")}</div>
<button
className={
objectToEdit?.name !== inputValue ? "disabled_button" : ""
}
disabled={objectToEdit?.name !== inputValue || isLoading}
onClick={handleSubmit}
>
{t("practical.delete")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</Modal>
</>
);
};
export default ModalForm;

4
src/Pages/lesson/Model/ModelForm.tsx → src/Pages/lesson/Model/Edit.tsx
View File

@ -1,9 +1,13 @@
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
import React from "react";
import ValidationField from "../../../Components/ValidationField/ValidationField"; import ValidationField from "../../../Components/ValidationField/ValidationField";
const Form = () => { const Form = () => {
return ( return (
<Row className="w-100"> <Row className="w-100">
<Col>
<ValidationField name="name" label="name" /> <ValidationField name="name" label="name" />
</Col>
</Row> </Row>
); );
}; };

59
src/Pages/lesson/Model/EditModel.tsx
View File

@ -1,23 +1,25 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal"; import { useModalState } from "../../../zustand/Modal";
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./Edit";
import { getInitialValues, getValidationSchema } from "./formUtil"; import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateLesson } from "../../../api/lesson"; import { useUpdateLesson } from "../../../api/lesson";
import { useQueryClient } from "react-query"; import { useQueryClient } from "react-query";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
const ModalForm: React.FC = () => { const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state); const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, status } = useUpdateLesson(); const { mutate, isSuccess, isLoading } = useUpdateLesson();
const { objectToEdit, setObjectToEdit } = useObjectToEdit(); const { objectToEdit, setObjectToEdit } = useObjectToEdit();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
// console.log(objectToEdit,"objectToEdit");
useEffect(() => { useEffect(() => {
if (isSuccess) { if (isSuccess) {
queryClient.invalidateQueries(["unit"]); queryClient.invalidateQueries(["unit"]);
@ -27,25 +29,54 @@ const ModalForm: React.FC = () => {
}, [setIsOpen, isSuccess, queryClient]); }, [setIsOpen, isSuccess, queryClient]);
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
// console.log(values,"values");
mutate({ mutate({
id: values?.id, id: values?.id,
name: values?.name, name: values?.name,
}); });
}; };
const handleCancel = () => {
setIsOpen("");
};
const [t] = useTranslation();
return ( return (
<> <>
<LayoutModel <Modal
status={status as QueryStatusEnum} className="ModalForm"
ModelEnum={ModalEnum.LESSON_EDIT} centered
modelTitle="lesson" width={"40vw"}
handleSubmit={handleSubmit} footer={null}
getInitialValues={getInitialValues(objectToEdit)} open={isOpen === ModalEnum?.LESSON_EDIT}
getValidationSchema={getValidationSchema} onCancel={handleCancel}
isAddModal={false}
> >
<ModelForm /> <FormikForm
</LayoutModel> handleSubmit={handleSubmit}
initialValues={getInitialValues(objectToEdit)}
validationSchema={getValidationSchema}
>
<header>
{" "}
{t("practical.edit")} {t("practical.details")} {t("models.lesson")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<div className="buttons">
<div onClick={handleCancel}>{t("practical.back")}</div>
<button disabled={isLoading} type="submit">
{t("practical.edit")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</Modal>
</> </>
); );
}; };

16
src/Pages/lesson/Page.tsx
View File

@ -5,17 +5,14 @@ import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params"; import { ParamsEnum } from "../../enums/params";
import { useGetAllUnit } from "../../api/unit"; import { useGetAllUnit } from "../../api/unit";
import { ModalEnum } from "../../enums/Model";
import { useDeleteLesson } from "../../api/lesson";
const Table = lazy(() => import('./Table')); const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import('./Model/AddModel')); const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import('./Model/EditModel')); const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModelsForm = lazy(() => import('../../Layout/Dashboard/DeleteModels')); const DeleteModels = lazy(() => import("./Model/Delete"));
const TableHeader = () => { const TableHeader = () => {
const [t] = useTranslation(); const [t] = useTranslation();
const deleteMutation = useDeleteLesson();
const { unit_id } = useParams<ParamsEnum>(); const { unit_id } = useParams<ParamsEnum>();
const { data: unit } = useGetAllUnit({ show: unit_id }); const { data: unit } = useGetAllUnit({ show: unit_id });
@ -45,10 +42,7 @@ const TableHeader = () => {
<Table /> <Table />
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />
<DeleteModelsForm <DeleteModels />
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.LESSON_DELETE}
/>
</Suspense> </Suspense>
</div> </div>
); );

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

@ -1,11 +1,18 @@
import { TableColumnsType } from "antd"; import { Space, TableColumnsType, Tooltip } from "antd";
import { Lesson } from "../../types/Item"; import { Lesson } from "../../types/Item";
import { FaPlus } from "react-icons/fa"; import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../utils/useModalHandler"; import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model"; import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState"; 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 { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../enums/abilities"; import { hasAbility } from "../../utils/hasAbility";
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 { useNavigate } from "react-router-dom";
import { import {
canAddLesson, canAddLesson,
@ -13,7 +20,6 @@ import {
canEditLesson, canEditLesson,
canShowLesson, canShowLesson,
} from "../../utils/hasAbilityFn"; } from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
export const useColumns = () => { export const useColumns = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
@ -64,18 +70,39 @@ export const useColumns = () => {
), ),
key: "actions", key: "actions",
align: "end", align: "end",
width: "25vw", className: "custom_add_button_column",
render: (_text, record, index) => { render: (text, record, index) => {
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
return ( return (
<ActionButtons <Space size="middle" className={className}>
canDelete={canDeleteLesson} {canEditLesson && (
canEdit={canEditLesson} <Tooltip
canShow={canShowLesson} placement="top"
index={index} title={t("practical.edit")}
onDelete={() => handelDelete(record)} color="#E0E0E0"
onEdit={() => handleEdit(record)} >
onShow={() => handelShow(record)} <span onClick={() => handleEdit(record)}>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</span>
</Tooltip>
)}
{canDeleteLesson && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/> />
)}
{canShowLesson && (
<BsEyeFill
onClick={() => handelShow(record)}
size={22}
style={{ color: "green" }}
/>
)}
</Space>
); );
}, },
}, },

11
src/Pages/question/AddPage.tsx
View File

@ -16,9 +16,9 @@ import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import Header from "../../Components/exercise/Header"; import Header from "../../Components/exercise/Header";
import { Question } from "../../types/Item"; import { Question } from "../../types/Item";
import BaseForm from './Model/Malty/Add' import BaseForm from "./Model/Malty/Add";
import ModelForm from './Model/ModelForm' import Form from "./Model/Add";
const AcceptModal = lazy(() => import('./Model/AcceptModal')); const AcceptModal = lazy(() => import("./Model/AcceptModal"));
import { useModalState } from "../../zustand/Modal"; import { useModalState } from "../../zustand/Modal";
import { ModalEnum } from "../../enums/Model"; import { ModalEnum } from "../../enums/Model";
@ -162,8 +162,7 @@ const AddPage: React.FC = () => {
> >
<main className="w-100 exercise_add_main"> <main className="w-100 exercise_add_main">
<Header /> <Header />
<ModelForm/> <BaseForm />
<div className="exercise_add_buttons"> <div className="exercise_add_buttons">
<div onClick={handleCancel}>{t("practical.back")}</div> <div onClick={handleCancel}>{t("practical.back")}</div>
<button disabled={isLoading} className="relative" type="submit"> <button disabled={isLoading} className="relative" type="submit">
@ -193,7 +192,7 @@ const AddPage: React.FC = () => {
> >
<main className="w-100 exercise_add_main"> <main className="w-100 exercise_add_main">
<Header /> <Header />
<ModelForm /> <Form />
<div className="exercise_add_buttons"> <div className="exercise_add_buttons">
<div onClick={handleCancel}>{t("practical.back")}</div> <div onClick={handleCancel}>{t("practical.back")}</div>

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

@ -21,8 +21,8 @@ import { ParamsEnum } from "../../enums/params";
import { useObjectToEdit } from "../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { removeStringKeys } from "../../utils/removeStringKeys"; import { removeStringKeys } from "../../utils/removeStringKeys";
import SpinContainer from "../../Components/Layout/SpinContainer"; import SpinContainer from "../../Components/Layout/SpinContainer";
import ModelForm from './Model/ModelForm' import Form from "./Model/Edit";
import BaseForm from './Model/Malty/Edit' import BaseForm from "./Model/Malty/Edit";
import { Question } from "../../types/Item"; import { Question } from "../../types/Item";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import useSetPageTitle from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
@ -255,7 +255,7 @@ const EditPage: React.FC = () => {
</div> </div>
<div>{t("header.exercise")}</div> <div>{t("header.exercise")}</div>
</header> </header>
<ModelForm /> <Form />
<div className="exercise_add_buttons"> <div className="exercise_add_buttons">
<div onClick={handleCancel}>{t("practical.back")}</div> <div onClick={handleCancel}>{t("practical.back")}</div>
<button disabled={isLoading} className="relative" type="submit"> <button disabled={isLoading} className="relative" type="submit">

80
src/Pages/question/Model/Add.tsx Normal file
View File

@ -0,0 +1,80 @@
import { Col, Row } from "reactstrap";
import React, { useEffect } from "react";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import ChoiceFields from "./Field/ChoiceFields";
import { FaCirclePlus } from "react-icons/fa6";
import { Choice } from "../../../types/Item";
import { useTranslation } from "react-i18next";
import DynamicTags from "./Tags/DynamicTags";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import MathInput from "./MathInput";
const Form = () => {
const formik = useFormikContext<any>();
const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
useEffect(() => {
if (Success) {
formik.setErrors({});
formik.resetForm({ values: {} });
setSuccess(false);
}
}, [Success]);
useEffect(() => {
setSavedQuestionData(formik.values);
}, [formik?.values]);
const handleAddChoice = () => {
console.log(formik?.values?.QuestionOptions?.length);
formik.setFieldValue("QuestionOptions", [
...((formik?.values as any)?.QuestionOptions as Choice[]),
{
answer: null,
answer_image: null,
isCorrect: 0,
},
]);
};
const [t] = useTranslation();
return (
<Row className="w-100">
<div className="exercise_form">
{/* <MathInput/> */}
<ValidationField
className="textarea_exercise"
name="content"
label="details"
type="TextArea"
/>
<ValidationField
className="file_exercise"
name="image"
label="attachment"
type="File"
/>
<div></div>
</div>
<div className=" flex "></div>
{(((formik?.values as any)?.QuestionOptions as Choice[]) || []).map(
(item: Choice, index: number) => {
return <ChoiceFields key={index} index={index} data={item} />;
},
)}
{formik?.values?.QuestionOptions?.length < 5 && (
<p className="add_new_button">
<FaCirclePlus onClick={handleAddChoice} size={23} />{" "}
{t("header.add_new_choice")}
</p>
)}
<DynamicTags />
</Row>
);
};
export default Form;

97
src/Pages/question/Model/Delete.tsx Normal file
View File

@ -0,0 +1,97 @@
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 { useDeleteQuestion } from "../../../api/Question";
import { useTranslation } from "react-i18next";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const [inputValue, setInputValue] = useState("");
const { mutate, isLoading, isSuccess } = useDeleteQuestion();
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setInputValue("");
}
}, [isSuccess, setIsOpen]);
const handleSubmit = () => {
mutate({
id: Number(objectToEdit?.id),
});
};
const handleCancel = () => {
setInputValue("");
setIsOpen("");
setObjectToEdit({});
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Step 2: Handle changes to the input field
setInputValue(e.target.value);
};
const [t] = useTranslation();
console.log(objectToEdit?.id);
return (
<>
<Modal
className="ModalForm"
centered
width={"40vw"}
footer={null}
open={isOpen === ModalEnum?.QUESTION_DELETE}
onCancel={handleCancel}
>
<header>
{t("practical.delete")} {t("input.id")} ({objectToEdit?.id}){" "}
</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.id")} {t("models.Question")}
</label>
<Input
size="large"
type="text"
placeholder={`${t("practical.enter")} ${t("input.id")} ${t("models.Question")} `}
value={inputValue}
onChange={handleChange}
/>
</div>
<div className="buttons">
<div onClick={handleCancel}>{t("practical.cancel")}</div>
<button
className={
objectToEdit?.id !== inputValue ? "disabled_button" : ""
}
disabled={
Number(objectToEdit?.id) !== Number(inputValue) || isLoading
}
onClick={handleSubmit}
>
{t("practical.delete")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</Modal>
</>
);
};
export default ModalForm;

82
src/Pages/question/Model/Edit.tsx Normal file
View File

@ -0,0 +1,82 @@
import { Col, Row } from "reactstrap";
import React, { useEffect } from "react";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../zustand/Modal";
import PdfUploader from "../../../Components/CustomFields/PdfUploader";
import ChoiceFields from "./Field/ChoiceFields";
import { FaCirclePlus } from "react-icons/fa6";
import { Choice } from "../../../types/Item";
import { useTranslation } from "react-i18next";
import DynamicTags from "./Tags/DynamicTags";
import { useGetAllQuestion } from "../../../api/Question";
const Form = () => {
const formik = useFormikContext<any>();
const { isOpen } = useModalState((state) => state);
// const {data} = useGetAllQuestion();
useEffect(() => {
if (isOpen === "") {
formik.setErrors({});
formik.resetForm();
}
}, [isOpen]);
// console.log(formik?.errors);
const handleAddChoice = () => {
formik.setFieldValue("QuestionOptions", [
...((formik?.values as any)?.QuestionOptions as Choice[]),
{
answer: null,
answer_image: null,
isCorrect: 0,
},
]);
};
const [t] = useTranslation();
return (
<Row className="w-100">
<div className="exercise_form">
<ValidationField
className="textarea_exercise"
name="content"
label="details"
type="TextArea"
/>
<ValidationField
className="file_exercise"
name="image"
label="attachment"
type="File"
/>
{/* <ValidationField name="isBase" label="isBase" type="Checkbox" /> */}
<div></div>
</div>
<div className=" flex ">
{/* <ValidationField name="min_mark_to_pass" label="min_mark_to_pass" type="Number" /> */}
{/* <ValidationField name="parent_id" label="parent_id" type="Select" option={[]} /> */}
</div>
{(((formik?.values as any)?.QuestionOptions as Choice[]) || []).map(
(item: Choice, index: number) => {
return <ChoiceFields key={index} index={index} data={item} />;
},
)}
{formik?.values?.QuestionOptions?.length < 5 && (
<p className="add_new_button">
<FaCirclePlus onClick={handleAddChoice} size={23} />{" "}
{t("header.add_new_choice")}
</p>
)}
<DynamicTags />
</Row>
);
};
export default Form;

60
src/Pages/question/Model/ModelForm.tsx
View File

@ -1,60 +0,0 @@
import { Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import ChoiceFields from "./Field/ChoiceFields";
import { FaCirclePlus } from "react-icons/fa6";
import { Choice } from "../../../types/Item";
import { useTranslation } from "react-i18next";
import DynamicTags from "./Tags/DynamicTags";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useEffect } from "react";
const Form = () => {
const [t] = useTranslation()
const formik = useFormikContext<any>();
const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
useEffect(() => {
if (Success) {
formik.setErrors({});
formik.resetForm({ values: {} });
setSuccess(false);
}
}, [Success]);
useEffect(() => {
setSavedQuestionData(formik.values)
}, [formik?.values])
const handleAddChoice = () => {
formik.setFieldValue('QuestionOptions', [...(formik?.values as any)?.QuestionOptions as Choice[],
{
answer:null,
answer_image:null,
isCorrect:0,
}])
}
return (
<Row className="w-100">
<div className="exercise_form">
<ValidationField className="textarea_exercise" name="content" label="details" type="TextArea" />
<ValidationField className="file_exercise" name="image" label="attachment" type="File" />
</div>
{
(((formik?.values as any)?.QuestionOptions as Choice[])||[]) .map((item:Choice,index:number)=>{
return <ChoiceFields key={index} index={index} data={item}/>
})}
{formik?.values?.QuestionOptions?.length < 5 && (
<p className="add_new_button" >
<FaCirclePlus onClick={handleAddChoice} size={23} /> {t("header.add_new_choice")}
</p>
)}
<DynamicTags/>
</Row>
);
};
export default Form;

11
src/Pages/question/Page.tsx
View File

@ -1,21 +1,17 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react"; import { lazy, Suspense } from "react";
import { Spin } from "antd"; import { Spin } from "antd";
import DeleteModel from "./Model/Delete";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params"; import { ParamsEnum } from "../../enums/params";
import { useGetAllUnit } from "../../api/unit"; import { useGetAllUnit } from "../../api/unit";
import useSetPageTitle from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useGetAllLesson } from "../../api/lesson"; import { useGetAllLesson } from "../../api/lesson";
import { useDeleteQuestion } from "../../api/Question";
import DeleteModels from "../../Layout/Dashboard/DeleteModels";
import { ModalEnum } from "../../enums/Model";
const Table = lazy(() => import("./Table")); const Table = lazy(() => import("./Table"));
const TableHeader = () => { const TableHeader = () => {
const [t] = useTranslation(); const [t] = useTranslation();
const deleteMutation = useDeleteQuestion();
const { unit_id, lesson_id } = useParams<ParamsEnum>(); const { unit_id, lesson_id } = useParams<ParamsEnum>();
const { data: unit } = useGetAllUnit({ show: unit_id }); const { data: unit } = useGetAllUnit({ show: unit_id });
const { data: lesson } = useGetAllLesson({ show: lesson_id }); const { data: lesson } = useGetAllLesson({ show: lesson_id });
@ -49,10 +45,7 @@ const TableHeader = () => {
</header> </header>
<Table /> <Table />
</Suspense> </Suspense>
<DeleteModels <DeleteModel />
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.QUESTION_DELETE}
/>
</div> </div>
); );
}; };

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

@ -1,8 +1,10 @@
import { TableColumnsType } from "antd"; import { Space, TableColumnsType, Tooltip } from "antd";
import { Question } from "../../types/Item"; import { Question } from "../../types/Item";
import { FaPlus } from "react-icons/fa"; import { FaPlus } from "react-icons/fa";
import { ModalEnum } from "../../enums/Model"; import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { MdOutlineEdit } from "react-icons/md";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../enums/abilities"; import { ABILITIES_ENUM } from "../../enums/abilities";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@ -12,7 +14,6 @@ import {
canDeleteQuestion, canDeleteQuestion,
canEditQuestion, canEditQuestion,
} from "../../utils/hasAbilityFn"; } from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
export const useColumns = () => { export const useColumns = () => {
const { setObjectToEdit } = useObjectToEdit((state) => state); const { setObjectToEdit } = useObjectToEdit((state) => state);
@ -76,16 +77,41 @@ export const useColumns = () => {
), ),
key: "actions", key: "actions",
align: "end", align: "end",
width: "25vw", className: "custom_add_button_column",
render: (_text, record, index) => { render: (text, record, index) => {
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
return ( return (
<ActionButtons <Space size="middle" className={className}>
canDelete={canDeleteQuestion} {canEditQuestion && (
canEdit={canEditQuestion} <Tooltip
index={index} placement="top"
onDelete={() => handelDelete(record)} title={t("practical.edit")}
onEdit={() => handleEdit(record)} color="#E0E0E0"
>
<span onClick={() => handleEdit(record)}>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</span>
</Tooltip>
)}
{canDeleteQuestion && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/> />
)}
{/* {can_show_Question && (
<BsEyeFill
onClick={() => handelShow(record)}
size={22}
style={{ color: "green" }}
/>
)} */}
</Space>
); );
}, },
}, },

32
src/Pages/subject/Model/Add.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Col, Row } from "reactstrap";
import React, { useEffect } from "react";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useGetAllTeacher } from "../../../api/teacher";
import useFormatDataToSelect from "../../../utils/useFormatDataToSelect";
import { useFormikContext } from "formik";
import { useModalState } from "../../../zustand/Modal";
import useSearchQuery from "../../../api/utils/useSearchQuery";
const Form = () => {
const { isOpen } = useModalState((state) => state);
const formik = useFormikContext<any>();
useEffect(() => {
if (isOpen === "") {
formik.setErrors({});
formik.resetForm();
}
}, [isOpen]);
return (
<Row className="w-100">
<Col>
<ValidationField name="name" label="name" />
</Col>
<Col>
<ValidationField type="File" name="image" label="image" />
</Col>
</Row>
);
};
export default Form;

78
src/Pages/subject/Model/AddModel.tsx
View File

@ -1,31 +1,75 @@
import React from "react"; 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 { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddSubject } from "../../../api/subject"; import { useAddSubject } from "../../../api/subject";
import { useParams } from "react-router-dom";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
const AddModel: React.FC = () => { const ModalForm: React.FC = () => {
const { mutate, status } = useAddSubject(); const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, isLoading } = useAddSubject();
const { setObjectToEdit } = useObjectToEdit();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setObjectToEdit({});
}
}, [setIsOpen, isSuccess]);
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
mutate({ ...values }); // console.log(values,"values");
mutate({
...values,
});
}; };
const handleCancel = () => {
setIsOpen("");
setObjectToEdit({});
};
const [t] = useTranslation();
return ( return (
<> <>
<LayoutModel <Modal
status={status as QueryStatusEnum} className="ModalForm"
ModelEnum={ModalEnum.SUBJECT_ADD} centered
modelTitle="subject" width={"60vw"}
handleSubmit={handleSubmit} footer={null}
getInitialValues={getInitialValues({})} open={isOpen === ModalEnum?.SUBJECT_ADD}
getValidationSchema={getValidationSchema} onCancel={handleCancel}
> >
<ModelForm /> <FormikForm
</LayoutModel> handleSubmit={handleSubmit}
initialValues={getInitialValues(null)}
validationSchema={getValidationSchema}
>
<header>
{t("practical.add")} {t("models.subject")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<div className="buttons">
<div onClick={handleCancel}>{t("practical.back")}</div>
<button disabled={isLoading} type="submit">
{t("practical.add")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</Modal>
</> </>
); );
}; };
export default AddModel; export default ModalForm;

93
src/Pages/subject/Model/Delete.tsx Normal file
View File

@ -0,0 +1,93 @@
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 { useDeleteSubject } from "../../../api/subject";
import { useTranslation } from "react-i18next";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const [inputValue, setInputValue] = useState("");
const { mutate, isSuccess, isLoading } = useDeleteSubject();
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
const full_name = objectToEdit?.name;
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setInputValue("");
}
}, [isSuccess, setIsOpen]);
const handleSubmit = () => {
mutate({
id: Number(objectToEdit?.id),
});
};
const handleCancel = () => {
setInputValue("");
setIsOpen("");
setObjectToEdit({});
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const [t] = useTranslation();
return (
<>
<Modal
className="ModalForm"
centered
width={"40vw"}
footer={null}
open={isOpen === ModalEnum?.SUBJECT_DELETE}
onCancel={handleCancel}
>
<header>
{" "}
{t("practical.delete")} {full_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.subject")}
</label>
<Input
size="large"
type="text"
placeholder={`${t("practical.enter")} ${t("input.name")} ${t("models.subject")} `}
value={inputValue}
onChange={handleChange}
/>
</div>
<div className="buttons">
<div onClick={handleCancel}>{t("practical.cancel")}</div>
<button
className={full_name !== inputValue ? "disabled_button" : ""}
disabled={full_name !== inputValue || isLoading}
onClick={handleSubmit}
>
{t("practical.delete")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</Modal>
</>
);
};
export default ModalForm;

31
src/Pages/subject/Model/Edit.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Col, Row } from "reactstrap";
import React, { useEffect } from "react";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useGetAllTeacher } from "../../../api/teacher";
import useFormatDataToSelect from "../../../utils/useFormatDataToSelect";
import { useModalState } from "../../../zustand/Modal";
import { useFormikContext } from "formik";
import useSearchQuery from "../../../api/utils/useSearchQuery";
const Form = () => {
const { isOpen } = useModalState((state) => state);
const formik = useFormikContext();
useEffect(() => {
if (isOpen === "") {
formik.setErrors({});
}
}, [isOpen]);
return (
<Row className="w-100">
<Col>
<ValidationField name="name" label="name" />
</Col>
<Col>
<ValidationField type="File" name="image" label="image" />
</Col>
</Row>
);
};
export default Form;

77
src/Pages/subject/Model/EditModel.tsx
View File

@ -1,36 +1,81 @@
import React from "react"; import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import ModelBody from "./Edit";
import { getInitialValues, getValidationSchema } from "./formUtil"; import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import { useUpdateSubject } from "../../../api/subject"; import { useUpdateSubject } from "../../../api/subject";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { Form, Formik } from "formik";
import { handelImageState } from "../../../utils/DataToSendImageState"; import { handelImageState } from "../../../utils/DataToSendImageState";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel"; import { useTranslation } from "react-i18next";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
const ModalForm: React.FC = () => { const ModalForm: React.FC = () => {
const { objectToEdit } = useObjectToEdit((state) => state); const { objectToEdit, setObjectToEdit } = useObjectToEdit((state) => state);
const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate ,status} = useUpdateSubject(); const { mutate, isSuccess, isLoading } = useUpdateSubject();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setObjectToEdit({});
}
}, [isSuccess]);
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
const Data_to_send = { ...values }; const Data_to_send = { ...values };
const handelImage = handelImageState(Data_to_send, "image"); const handelImage = handelImageState(Data_to_send, "image");
mutate(handelImage); mutate(handelImage);
}; };
const handleCancel = () => {
setIsOpen("");
setObjectToEdit(null);
};
const [t] = useTranslation();
return ( return (
<> <>
<LayoutModel <Modal
status={status as QueryStatusEnum} className="ModalForm"
ModelEnum={ModalEnum.SUBJECT_EDIT} centered
modelTitle="subject" width={"60vw"}
handleSubmit={handleSubmit} footer={null}
getInitialValues={getInitialValues(objectToEdit)} open={isOpen === ModalEnum?.SUBJECT_EDIT}
getValidationSchema={getValidationSchema} onCancel={handleCancel}
isAddModal={false}
> >
<ModelForm /> <Formik
</LayoutModel> enableReinitialize
initialValues={getInitialValues(objectToEdit)}
validationSchema={getValidationSchema}
onSubmit={handleSubmit}
>
{({ values }) => (
<Form className="w-100">
<header>
{t("practical.edit")} {t("models.subject")}{" "}
</header>
<main className="main_modal w-100">
<ModelBody />
<div className="buttons">
<div onClick={handleCancel}>{t("practical.cancel")}</div>
<button disabled={isLoading} type="submit">
{t("practical.edit")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</Form>
)}
</Formik>
</Modal>
</> </>
); );
}; };

19
src/Pages/subject/Model/ModelForm.tsx
View File

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

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

@ -2,19 +2,17 @@ import { ModalEnum } from "../../../enums/Model";
import useModalHandler from "../../../utils/useModalHandler"; import useModalHandler from "../../../utils/useModalHandler";
import { FaPlus } from "react-icons/fa"; import { FaPlus } from "react-icons/fa";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import TablePage from "./TablePage";
import AddSubjectModalForm from "../Model/AddModel";
import EditSubjectModalForm from "../Model/EditModel";
import DeleteSubjectModalForm from "../Model/Delete";
import useSetPageTitle from "../../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { canAddSubject } from "../../../utils/hasAbilityFn"; import { canAddSubject } from "../../../utils/hasAbilityFn";
import { useDeleteSubject } from "../../../api/subject";
import { lazy } from "react";
const Table = lazy(() => import("./TablePage"));
const AddModalForm = lazy(() => import("../Model/AddModel"));
const EditModalForm = lazy(() => import("../Model/EditModel"));
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels"));
const TableWithHeader = () => { const TableWithHeader = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
const [t] = useTranslation(); const [t] = useTranslation();
const deleteMutation = useDeleteSubject();
useSetPageTitle(t(`page_header.subject`)); useSetPageTitle(t(`page_header.subject`));
@ -31,16 +29,13 @@ const TableWithHeader = () => {
</button> </button>
)} )}
</header> </header>
<Table /> <TablePage />
<AddModalForm /> <AddSubjectModalForm />
<EditModalForm /> <EditSubjectModalForm />
<DeleteModalForm <DeleteSubjectModalForm />
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.SUBJECT_DELETE}
/>
</div> </div>
) );
} };
export default TableWithHeader; export default TableWithHeader;

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

@ -1,26 +1,35 @@
import { TableColumnsType } from "antd"; import { Space, TableColumnsType, Tooltip } from "antd";
import { useModalState } from "../../../zustand/Modal"; import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model"; import { ModalEnum } from "../../../enums/Model";
import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { FaEye } from "react-icons/fa"; import { FaEye } from "react-icons/fa";
import ColumnsImage from "../../../Components/Columns/ColumnsImage"; import ColumnsImage from "../../../Components/Columns/ColumnsImage";
import { ImageBaseURL } from "../../../api/config";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import useModalHandler from "../../../utils/useModalHandler";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import ActionButtons from "../../../Components/Table/ActionButtons"; import {
ABILITIES_ENUM,
ABILITIES_VALUES_ENUM,
} from "../../../enums/abilities";
import { hasAbility } from "../../../utils/hasAbility";
import { canDeleteSubject, canEditSubject } from "../../../utils/hasAbilityFn"; import { canDeleteSubject, canEditSubject } from "../../../utils/hasAbilityFn";
export const useColumns = () => { export const useColumns = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { setObjectToEdit } = useObjectToEdit((state) => state); const { setObjectToEdit } = useObjectToEdit((state) => state);
const { setIsOpen } = useModalState((state) => state); const { handel_open_model } = useModalHandler();
const handelDelete = (record:any) => { const handelDeleteSubject = (data: any) => {
setObjectToEdit(record); setObjectToEdit(data);
setIsOpen(ModalEnum?.SUBJECT_DELETE); handel_open_model(ModalEnum?.SUBJECT_DELETE);
}; };
const handleEdit = (record: any) => { const handleEdit = (record: any) => {
setObjectToEdit(record); setObjectToEdit(record);
setIsOpen(ModalEnum?.SUBJECT_EDIT); handel_open_model(ModalEnum?.SUBJECT_EDIT);
}; };
const [t] = useTranslation(); const [t] = useTranslation();
@ -44,6 +53,8 @@ export const useColumns = () => {
align: "center", align: "center",
render: (row: any) => { render: (row: any) => {
let str = row; let str = row;
// console.log(row);
return <ColumnsImage src={str} />; return <ColumnsImage src={str} />;
}, },
}, },
@ -70,15 +81,31 @@ export const useColumns = () => {
key: "actions", key: "actions",
align: "end", align: "end",
width: "25vw", width: "25vw",
render: (_text, record, index) => { render: (text, record, index) => {
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
return ( return (
<ActionButtons <Space size="middle" className={className}>
canDelete={canEditSubject} {canEditSubject && (
canEdit={canDeleteSubject} <Tooltip
index={index} placement="top"
onDelete={() => handelDelete(record)} title={t("practical.edit")}
onEdit={() => handleEdit(record)} color="#E0E0E0"
>
<span onClick={() => handleEdit(record)}>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</span>
</Tooltip>
)}
{canDeleteSubject && (
<RiDeleteBin6Fill
onClick={() => handelDeleteSubject(record)}
size={22}
style={{ color: "#C11313" }}
/> />
)}
</Space>
); );
}, },
}, },

32
src/Styles/App/classNames.scss
View File

@ -272,36 +272,4 @@ button:disabled {
.h1 { .h1 {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
}
.buttonAction {
display: flex;
align-items: center;
justify-content: center;
gap: 2vw;
> button {
outline: none;
border: none;
border-radius: 20px;
padding: 0.3vw 1.5vw;
width: 8vw;
height: 2vw;
// background: var(--primary);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 0.8vw;
}
.EditButton {
background: var(--bg);
border: 1px solid #d4d4d8;
color: var(--text);
}
.DeleteButton {
background: #dc2626;
}
} }

2
src/api/config.ts
View File

@ -1,4 +1,4 @@
// export const BaseURL = "http://192.168.1.6:8000/api/"; // export const BaseURL = "http://192.168.1.107:8000/api/";
// export const BaseURL = "http://127.0.0.1:8000/api/"; // export const BaseURL = "http://127.0.0.1:8000/api/";
export const BaseURL = "https://exercise-automation.point-dev.net/api/"; export const BaseURL = "https://exercise-automation.point-dev.net/api/";

6
src/translate/ar.json
View File

@ -193,8 +193,7 @@
"no": "لا", "no": "لا",
"Are you sure you want to go back and not save any changes?": "هل أنت متأكد أنك تريد العودة وعدم حفظ أي تغييرات؟", "Are you sure you want to go back and not save any changes?": "هل أنت متأكد أنك تريد العودة وعدم حفظ أي تغييرات؟",
"accept_back": "قبول العودة ", "accept_back": "قبول العودة ",
"accept": "قبول ", "accept": "قبول "
"to_confirm_deletion_please_re_enter_id":"يرجى اعادة ادخال رقم التعريف"
}, },
"Table": { "Table": {
"header": "", "header": "",
@ -253,8 +252,7 @@
"lessons": "دروس", "lessons": "دروس",
"sex": "الجنس", "sex": "الجنس",
"Question": "اسئلة", "Question": "اسئلة",
"tags":"كلمات مفتاحية", "tags": "كلمات مفتاحية"
"tags_details":"تفاصيل الكلمة المفتاحية"
}, },
"education_class_actions": { "education_class_actions": {
"Student_Records": "سجلات الطلاب", "Student_Records": "سجلات الطلاب",

613
src/translate/en.json
View File

@ -1,613 +0,0 @@
{
"main_page": "Main Page",
"dashboard": "dashboard",
"validation": {
"required": "required",
"value_must_be_less_than_900000": "value_must_be_less_than_900000",
"type_required": "type_required",
"pleas_fill_all_label": "pleas Fill All Label",
"please_select_students": "please_select_students",
"please_fill_in_all_the_fields": "please_fill_in_all_the_fields",
"Invalid_email": "Invalid_email",
"Email_is_required": "Email_is_required",
"Password_is_required": "Password_is_required",
"Password_must_be_at_least_8_characters_long": "Password_must_be_at_least_8_characters_long",
"Nationality_is_required": "Nationality_is_required",
"Address_is_required": "Address_is_required",
"Place_of_birth_is_required": "Place_of_birth_is_required",
"Date_of_birth_is_required": "Date_of_birth_is_required",
"Mother's_name_is_required": "Mother's_name_is_required",
"Father's_name_is_required": "Father's_name_is_required",
"Last_name_is_required": "Last_name_is_required",
"First_name_is_required": "First_name_is_required",
"Religion_is_required": "Religion_is_required",
"Gender_is_required": "Gender_is_required",
"Attachment1_is_required": "Attachment1_is_required",
"Father's_job_is_required": "Father's_job_is_required",
"Mother's_phone_number_is_required": "Mother's_phone_number_is_required",
"Father's_phone_number_is_required": "Father's_phone_number_is_required",
"Mother's_job_is_required": "Mother's_job_is_required",
"justification_is_required": "justification_is_required",
"duration_is_required": "duration_is_required",
"pleas_do_any_changes": "pleas_do_any_changes",
"edit_session_content": "edit_session_content",
"Title_is_required": "Title_is_required",
"Exam_type_is_required": "Exam_type_is_required",
"Subject_is_required": "Subject_is_required",
"Maximum_grade_is_required": "Maximum_grade_is_required",
"Must_be_a_number": "Must_be_a_number",
"Value_must_not_exceed_10000": "Value_must_not_exceed_10000",
"Passing_grade_is_required": "Passing_grade_is_required",
"Date_is_required": "Date_is_required",
"Duration_is_required": "Duration_is_required",
"the_possess_done_successful": "the_possess_done_successful",
"some_thing_went_wrong": "some_thing_went_wrong",
"Due_date_must_be_before_assigning_date": "Due date must be before assigning date"
},
"header": {
"register_students": "register_students",
"import_students": "import_students",
"move_student": "move_student",
"Student_added_successfully": "Student_added_successfully",
"the_student_has_been_added_Do_you_want_to_add_another_student": "the_student_has_been_added_Do_you_want_to_add_another_student",
"Add_a_new_student": "Add_a_new_student",
"Please enter all required data": "Please enter all required data",
"Back to Previous Step": "Back to Previous Step",
"Adding...": "Adding...",
"Next Step": "Next Step",
"Add Student": "Add Student",
"Attendance and absence of students": "Attendance and absence of students",
"see_more_details": "see_more_details",
"earlyDepartures": "earlyDepartures",
"Follow_the_curriculum": "Follow_the_curriculum",
"add_session_content": "add_session_content",
"add_session": "add_session",
"edit_session": "edit_session",
"classroom_behavior_of_students": "classroom_behavior_of_students",
"note_details": "note_details",
"student_homework": "student_homework",
"home_work_title": "home_work_title",
"subject": "subject",
"max_grade": "max_grade",
"student_count": "student_count",
"student_exam": "student_exam",
"student_name": "student_name",
"student_card": "student_card",
"Student_classroom_behavior": "Student_classroom_behavior",
"The_student_financial_situation": "The_student_financial_situation",
"Modify_student_information": "Modify_student_information",
"student_details": "student_details",
"student_status": "student_status",
"parent_details": "parent_details",
"contact_details": "contact_details",
"additional_details": "additional_details",
"note_type": "note_type",
"student_payment": "student_payment",
"add_new_unit": "add_new_unit",
"add_new_lessons": "add_new_lessons",
"Student_Information": "Student_Information",
"Parent_Information": "Parent_Information",
"Contact_Information": "Contact_Information",
"Attachment_Images": "Attachment_Images",
"Weekly_Class_Schedule": "Weekly_Class_Schedule",
"Print_Schedule": "Print_Schedule",
"Welcome": "Welcome",
"Enter your email and password to log in": "Enter your email and password to log in",
"change_your_current_password": "change your current password",
"view_cycle_for_this_branch": "view cycle for this branch",
"view_term_for_this_cycle": "view term for this branch"
},
"columns": {
"id": "id",
"name": "name",
"address": "address",
"contact_information": "contact_information",
"data": "data",
"details": "details",
"receipt_number": "receipt_number",
"payment_type": "payment_type",
"value": "value",
"subject_name": "subject_name",
"image": "image",
"card": "card",
"birthday": "birthday",
"last_name": "last_name",
"father_name": "father_name",
"sex": "sex",
"presence": "presence",
"teacher_name": "teacher_name",
"lesson_name": "lesson_name",
"session_start": "session_start",
"type": "type",
"title": "title",
"content": "content",
"assigning_date": "assigning_date",
"due_date": "due_date",
"mark": "mark",
"student_name": "student_name",
"absence": "absence",
"earlyDeparture": "earlyDeparture",
"lateArrival": "lateArrival",
"date": "date",
"starting_date": "starting_date",
"ending_date": "ending_date",
"term_type": "term_type",
"status": "status"
},
"practical": {
"to_confirm_deletion_please_re_enter": "To confirm deletion, please re-enter",
"back": "back",
"add": "add",
"edit": "edit",
"move": "move",
"skip": "skip",
"show": "show",
"save": "save",
"enter": "enter",
"delete": "delete",
"cancel": "cancel",
"search_here": "search_here",
"details": "details",
"export_students": "export_students",
"send_notification_to_course": "send_notification_to_course",
"Send_Direct_Notification": "Send_Direct_Notification",
"cancel_registration": "cancel_registration",
"send_notification_to_education_class": "send_notification_to_education_class",
"send_notification_to_student": "send_notification_to_student",
"status": "status",
"Step": "Step",
"login": "login",
"submite": "submite",
"index": "index",
"store": "store",
"update": "update",
"me": "me",
"importStudentData": "importStudentData",
"moveStudents": "moveStudents",
"importStudents": "importStudents",
"overview": "overview",
"presence": "presence"
},
"Table": {
"header": "",
"info": ""
},
"models": {
"teacher": "teacher",
"student": "student",
"students": "students",
"subject": "subject",
"education_class": "education_class",
"eduClass": "education_class",
"session_content": "session_content",
"course": "course",
"payment": "payment",
"note": "note",
"homework": "homework",
"mark": "mark",
"exam": "exam",
"absence": "absence",
"late_arrival": "late_arrival",
"presence": "presence",
"earlyDeparture": "earlyDeparture",
"branch": "branch",
"cycle": "cycle",
"term": "term",
"role": "role",
"Pass": "Pass",
"user": "User",
"branchAdmin": "Branch Admin",
"grade": "Grade",
"homeworkAttachment": "Homework Attachment",
"lateArrival": "Late Arrival",
"noteAttachment": "Note Attachment",
"session": "Session",
"sessionContent": "Session Content",
"subjectAttachment": "Subject Attachment",
"unit": "Unit",
"lesson": "Lesson",
"exercise": "Exercise",
"exerciseAnswer": "Exercise Answer",
"tag": "Tag",
"Exam": "Exam",
"ExamType": "Exam Type",
"studentParent": "Student Parent",
"registrationRecord": "Registration Record",
"paymentOverview": "Payment Overview",
"subjectAttachmentType": "Subject Attachment Type",
"param": "Param",
"subjectProgress": "Subject Progress",
"main_page": "Main Page",
"tags_details":"tags details"
},
"education_class_actions": {
"Student_Records": "Student_Records",
"Attendance": "Attendance",
"Permissions": "Permissions",
"Grades": "Grades",
"Notes": "Notes",
"Financial_Status": "Financial_Status",
"Assignments": "Assignments",
"Class_Schedule": "Class_Schedule",
"Curriculum_Follow_up": "Curriculum_Follow_up"
},
"input": {
"name": "name",
"address": "address",
"number": "number",
"price": "price",
"drag_and_drop_or_click_here_to_select_the_file": "Drag and drop or click here to select the file",
"Click_to_upload_the_image": "Click to upload the image",
"payment_type": "payment_type",
"details": "details",
"student_name": "student_name",
"receipt_number": "receipt_number",
"date": "date",
"value": "value",
"teacher_name": "teacher_name",
"sex": "sex",
"content": "content",
"type": "type",
"attachments": "attachments",
"send_notification_to_course": "send_notification_to_course",
"export_students": "export_students",
"password": "password",
"nationality": "nationality",
"religion": "religion",
"birthday": "birthday",
"birth_place": "birth_place",
"father_name": "father_name",
"father_job": "father_job",
"mother_name": "mother_name",
"mother_phone_number": "mother_phone_number",
"father_phone_number": "father_phone_number",
"mother_job": "mother_job",
"phone_number": "phone_number",
"additional_phone_number": "additional_phone_number",
"note": "note",
"school_document": "school_document",
"first_name": "first_name",
"last_name": "last_name",
"email": "email",
"student_status": "student_status",
"duration": "duration",
"justification": "justification",
"attachment": "attachment",
"session_name": "session_name",
"lesson_name": "lesson_name",
"title": "title",
"due_date": "due_date",
"assigning_date": "assigning_date",
"subject_name": "subject_name",
"exam_type": "exam_type",
"grade_to_pass": "grade_to_pass",
"max_grade": "max_grade",
"status": "status",
"departure_time": "departure_time",
"mark": "mark",
"image": "image",
"term": "term",
"session_start": "session_start",
"session_end": "session_end",
"academic_year": "academic_year",
"select_date": "select_date",
"School_Year": "School Year",
"Enter_branch_first": "Enter branch first",
"School_Term": "School Term",
"Enter_school_year_first": "Enter school year first",
"Username": "Username",
"Password": "Password",
"new_password": "new_password",
"old_password": "old_password",
"username": "username",
"starting_date": "starting_date",
"ending_date": "ending_date",
"term_type": "term_type",
"description": "description",
"abilities": "abilities"
},
"select": {
"Payments": {
"paid": "paid",
"to_be_paid": "to_be_paid",
"all_payment": "all_payment",
"dues": "dues"
},
"Marks": {
"Not_Taken": "Not_Taken",
"Taken": "Taken"
},
"Sex": {
"male": "male",
"female": "female",
"bi": "mix"
},
"Religion": {
"muslim": "muslim",
"christianity": "christianity",
"other": "other"
},
"nationalities": {
"Afghan": "Afghan",
"Albanian": "Albanian",
"Algerian": "Algerian",
"American": "American",
"Andorran": "Andorran",
"Angolan": "Angolan",
"Antiguans": "Antiguans",
"Argentinean": "Argentinean",
"Armenian": "Armenian",
"Australian": "Australian",
"Austrian": "Austrian",
"Azerbaijani": "Azerbaijani",
"Bahamian": "Bahamian",
"Bahraini": "Bahraini",
"Bangladeshi": "Bangladeshi",
"Barbadian": "Barbadian",
"Barbudans": "Barbudans",
"Batswana": "Batswana",
"Belarusian": "Belarusian",
"Belgian": "Belgian",
"Belizean": "Belizean",
"Beninese": "Beninese",
"Bhutanese": "Bhutanese",
"Bolivian": "Bolivian",
"Bosnian": "Bosnian",
"Brazilian": "Brazilian",
"British": "British",
"Bruneian": "Bruneian",
"Bulgarian": "Bulgarian",
"Burkinabe": "Burkinabe",
"Burmese": "Burmese",
"Burundian": "Burundian",
"Cambodian": "Cambodian",
"Cameroonian": "Cameroonian",
"Canadian": "Canadian",
"Cape Verdean": "Cape Verdean",
"Central African": "Central African",
"Chadian": "Chadian",
"Chilean": "Chilean",
"Chinese": "Chinese",
"Colombian": "Colombian",
"Comoran": "Comoran",
"Congolese": "Congolese",
"Costa Rican": "Costa Rican",
"Croatian": "Croatian",
"Cuban": "Cuban",
"Cypriot": "Cypriot",
"Czech": "Czech",
"Danish": "Danish",
"Djibouti": "Djibouti",
"Dominican": "Dominican",
"Dutch": "Dutch",
"East Timorese": "East Timorese",
"Ecuadorean": "Ecuadorean",
"Egyptian": "Egyptian",
"Emirian": "Emirian",
"Equatorial Guinean": "Equatorial Guinean",
"Eritrean": "Eritrean",
"Estonian": "Estonian",
"Ethiopian": "Ethiopian",
"Fijian": "Fijian",
"Filipino": "Filipino",
"Finnish": "Finnish",
"French": "French",
"Gabonese": "Gabonese",
"Gambian": "Gambian",
"Georgian": "Georgian",
"German": "German",
"Ghanaian": "Ghanaian",
"Greek": "Greek",
"Grenadian": "Grenadian",
"Guatemalan": "Guatemalan",
"Guinea-Bissauan": "Guinea-Bissauan",
"Guinean": "Guinean",
"Guyanese": "Guyanese",
"Haitian": "Haitian",
"Herzegovinian": "Herzegovinian",
"Honduran": "Honduran",
"Hungarian": "Hungarian",
"I-Kiribati": "I-Kiribati",
"Icelander": "Icelander",
"Indian": "Indian",
"Indonesian": "Indonesian",
"Iranian": "Iranian",
"Iraqi": "Iraqi",
"Irish": "Irish",
"palestine": "palestine",
"Italian": "Italian",
"Ivorian": "Ivorian",
"Jamaican": "Jamaican",
"Japanese": "Japanese",
"Jordanian": "Jordanian",
"Kazakhstani": "Kazakhstani",
"Kenyan": "Kenyan",
"Kittian and Nevisian": "Kittian and Nevisian",
"Kuwaiti": "Kuwaiti",
"Kyrgyz": "Kyrgyz",
"Laotian": "Laotian",
"Latvian": "Latvian",
"Lebanese": "Lebanese",
"Liberian": "Liberian",
"Libyan": "Libyan",
"Liechtensteiner": "Liechtensteiner",
"Lithuanian": "Lithuanian",
"Luxembourger": "Luxembourger",
"Macedonian": "Macedonian",
"Malagasy": "Malagasy",
"Malawian": "Malawian",
"Malaysian": "Malaysian",
"Maldivan": "Maldivan",
"Malian": "Malian",
"Maltese": "Maltese",
"Marshallese": "Marshallese",
"Mauritanian": "Mauritanian",
"Mauritian": "Mauritian",
"Mexican": "Mexican",
"Micronesian": "Micronesian",
"Moldovan": "Moldovan",
"Monacan": "Monacan",
"Mongolian": "Mongolian",
"Moroccan": "Moroccan",
"Mosotho": "Mosotho",
"Motswana": "Motswana",
"Mozambican": "Mozambican",
"Namibian": "Namibian",
"Nauruan": "Nauruan",
"Nepali": "Nepali",
"New Zealander": "New Zealander",
"Nicaraguan": "Nicaraguan",
"Nigerian": "Nigerian",
"Nigerien": "Nigerien",
"North Korean": "North Korean",
"Northern Irish": "Northern Irish",
"Norwegian": "Norwegian",
"Omani": "Omani",
"Pakistani": "Pakistani",
"Palauan": "Palauan",
"Panamanian": "Panamanian",
"Papua New Guinean": "Papua New Guinean",
"Paraguayan": "Paraguayan",
"Peruvian": "Peruvian",
"Polish": "Polish",
"Portuguese": "Portuguese",
"Qatari": "Qatari",
"Romanian": "Romanian",
"Russian": "Russian",
"Rwandan": "Rwandan",
"Saint Lucian": "Saint Lucian",
"Salvadoran": "Salvadoran",
"Samoan": "Samoan",
"San Marinese": "San Marinese",
"Sao Tomean": "Sao Tomean",
"Saudi": "Saudi",
"Scottish": "Scottish",
"Senegalese": "Senegalese",
"Serbian": "Serbian",
"Seychellois": "Seychellois",
"Sierra Leonean": "Sierra Leonean",
"Singaporean": "Singaporean",
"Slovakian": "Slovakian",
"Slovenian": "Slovenian",
"Solomon Islander": "Solomon Islander",
"Somali": "Somali",
"South African": "South African",
"South Korean": "South Korean",
"Spanish": "Spanish",
"Sri Lankan": "Sri Lankan",
"Sudanese": "Sudanese",
"Surinamer": "Surinamer",
"Swazi": "Swazi",
"Swedish": "Swedish",
"Swiss": "Swiss",
"Syrian": "Syrian",
"Taiwanese": "Taiwanese",
"Tajik": "Tajik",
"Tanzanian": "Tanzanian",
"Thai": "Thai",
"Togolese": "Togolese",
"Tongan": "Tongan",
"Trinidadian/Tobagonian": "Trinidadian/Tobagonian",
"Tunisian": "Tunisian",
"Turkish": "Turkish",
"Tuvaluan": "Tuvaluan",
"Ugandan": "Ugandan",
"Ukrainian": "Ukrainian",
"Uruguayan": "Uruguayan",
"Uzbekistani": "Uzbekistani",
"Venezuelan": "Venezuelan",
"Vietnamese": "Vietnamese",
"Welsh": "Welsh",
"Yemenite": "Yemenite",
"Zambian": "Zambian",
"Zimbabwean": "Zimbabwean"
},
"Student_Type": {
"all_students": "all_students",
"absence": "absence",
"late_arrival": "late_arrival",
"presence": "presence",
"justified": "justified",
"not_justified": "not_justified",
"earlyDeparture": "earlyDeparture"
},
"Note": {
"normal_note": "normal_note",
"alert_note": "alert_note",
"financial_note": "financial_note",
"positive_note": "positive_note",
"warning_note": "warning_note",
"academic_note": "academic_note",
"studying_note": "studying_note",
"organization_note": "organization_note",
"all_note": "all_note"
},
"Exam": {
"Taken": "Taken",
"Not_Taken": "Not_Taken",
"all_student": "all_student"
},
"Term_type": {
"first": "first",
"second": "second"
}
},
"array": {
"Period": {
"Today": "Today",
"First": "First",
"Second": "Second",
"Third": "Third",
"Fourth": "Fourth",
"Fifth": "Fifth",
"Sixth": "Sixth",
"Seventh": "Seventh"
},
"Days": {
"Sunday": "Sunday",
"Monday": "Monday",
"Tuesday": "Tuesday",
"Wednesday": "Wednesday",
"Thursday": "Thursday",
"Friday": "Friday",
"Saturday": "Saturday"
},
"UserInfo": {
"course": "course",
"education_class": "education_class",
"nationality": "nationality",
"birthday": "birthday",
"warning": "warning",
"appreciation": "appreciation",
"alert": "alert"
}
},
"sidebar": {
"dashboard": "dashboard",
"course": "course",
"teacher": "teacher",
"payment": "payment",
"student_details": "student_details",
"create_student": "create_student",
"course_details": "course_details",
"education_class_details": "education_class_details",
"subject_details": "subject_details",
"logout": "logout",
"branch": "branch",
"role": "role"
},
"message": {
"some_thing_went_wrong": "some_thing_went_wrong",
"the_possess_done_successful": "the_possess_done_successful"
}
}