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

fixess

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-08-12 15:55:01 +03:00
parent 3d5060aa71
commit 5a295693c1
41 changed files with 318 additions and 1594 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,35 +0,0 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../zustand/Modal";
import { useEffect } from "react";
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;

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

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

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

@ -1,94 +0,0 @@
import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { 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;

24
src/Pages/Tags/Model/Edit.tsx
View File

@ -1,24 +0,0 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../zustand/Modal";
import { useEffect } from "react";
import DynamicTags from "../synonyms/DynamicTags";
const Form = () => {
return (
<Row className="w-100">
<Col>
<ValidationField placeholder="name" label="name" name="name" />
</Col>
<div>
<DynamicTags/>
</div>
</Row>
);
};
export default Form;

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

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

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

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

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

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

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

@ -1,76 +1,36 @@
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 React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
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 { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, isLoading } = useAddUnit();
const AddModel: React.FC = () => {
const { mutate, status } = useAddUnit();
const { subject_id } = useParams();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
}
}, [setIsOpen, isSuccess]);
const handleSubmit = (values: any) => {
// console.log(values,"values");
mutate({
...values,
subject_id: subject_id,
});
};
const handleCancel = () => {
setIsOpen("");
};
const [t] = useTranslation();
return (
<>
<Modal
className="ModalForm"
centered
width={"40vw"}
footer={null}
open={isOpen === ModalEnum?.UNIT_ADD}
onCancel={handleCancel}
>
<FormikForm
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.UNIT_ADD}
modelTitle="unit"
handleSubmit={handleSubmit}
initialValues={getInitialValues([])}
validationSchema={getValidationSchema}
getInitialValues={getInitialValues({})}
getValidationSchema={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>
<ModelForm />
</LayoutModel>
</>
);
};
export default ModalForm;
export default AddModel;

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

@ -1,27 +0,0 @@
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
View File

@ -1,98 +0,0 @@
import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model";
import { 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;

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

@ -1,82 +1,42 @@
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 React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import { useUpdateUnit } from "../../../api/unit";
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 { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const EditModel: React.FC = () => {
const { mutate, status } = useUpdateUnit();
const { objectToEdit } = useObjectToEdit((state) => state);
const { mutate, isSuccess, isLoading } = useUpdateUnit();
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
// console.log(objectToEdit,"objectToEdit");
const { subject_id } = useParams();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
}
}, [setIsOpen, isSuccess]);
const handleSubmit = (values: any) => {
// console.log(values,"values");
mutate({
...values,
subject_id: subject_id,
});
};
const handleCancel = () => {
setIsOpen("");
};
const [t] = useTranslation();
return (
<>
<Modal
className="ModalForm"
centered
width={"40vw"}
footer={null}
open={isOpen === ModalEnum?.UNIT_EDIT}
onCancel={handleCancel}
>
<FormikForm
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.UNIT_EDIT}
modelTitle="unit"
handleSubmit={handleSubmit}
initialValues={getInitialValues(objectToEdit)}
validationSchema={getValidationSchema}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
>
<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>
<ModelForm />
</LayoutModel>
</>
);
};
export default ModalForm;
export default EditModel;

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

@ -1,27 +0,0 @@
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;

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

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

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

@ -11,6 +11,7 @@ import { ABILITIES_ENUM } from "../../enums/abilities";
import { BsEyeFill } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { canAddUnit, canDeleteUnit, canEditUnit, canShowUnit } from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
@ -22,8 +23,6 @@ export const useColumns = () => {
navigate(`${ABILITIES_ENUM?.UNIT}/${record?.id}`);
};
const handelDelete = (data: any) => {
setObjectToEdit(data);
handel_open_model(ModalEnum?.UNIT_DELETE);
@ -70,48 +69,21 @@ export const useColumns = () => {
) : (
""
),
key: "actions",
align: "end",
className: "custom_add_button_column",
render: (text, record, index) => {
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
width: "25vw",
render: (_text, record, index) => {
return (
<Space size="middle" className={className}>
{canEditUnit && (
<Tooltip
placement="top"
title={t("practical.edit")}
color="#E0E0E0"
>
<span onClick={() => handleEdit(record)}>
<MdOutlineEdit
size={22}
style={{ color: "#A098AE" }}
<ActionButtons
canDelete={canDeleteUnit}
canEdit={canEditUnit}
canShow={canShowUnit}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
onShow={() => handelShow(record)}
/>
</span>
</Tooltip>
)}
{canDeleteUnit && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/>
)}
{canShowUnit && (
<BsEyeFill
onClick={() => handelShow(record)}
size={22}
style={{ color: "green" }}
/>
)}
</Space>
);
},
},

28
src/Pages/lesson/Model/Add.tsx
View File

@ -1,28 +0,0 @@
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;

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

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

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

@ -1,97 +0,0 @@
import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model";
import { 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;

16
src/Pages/lesson/Model/Edit.tsx
View File

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

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

@ -1,25 +1,23 @@
import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
import ModelBody from "./Edit";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateLesson } from "../../../api/lesson";
import { useQueryClient } from "react-query";
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 { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, isLoading } = useUpdateLesson();
const { mutate, isSuccess, status } = useUpdateLesson();
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
const queryClient = useQueryClient();
// console.log(objectToEdit,"objectToEdit");
useEffect(() => {
if (isSuccess) {
queryClient.invalidateQueries(["unit"]);
@ -29,54 +27,25 @@ const ModalForm: React.FC = () => {
}, [setIsOpen, isSuccess, queryClient]);
const handleSubmit = (values: any) => {
// console.log(values,"values");
mutate({
id: values?.id,
name: values?.name,
});
};
const handleCancel = () => {
setIsOpen("");
};
const [t] = useTranslation();
return (
<>
<Modal
className="ModalForm"
centered
width={"40vw"}
footer={null}
open={isOpen === ModalEnum?.LESSON_EDIT}
onCancel={handleCancel}
>
<FormikForm
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.LESSON_EDIT}
modelTitle="lesson"
handleSubmit={handleSubmit}
initialValues={getInitialValues(objectToEdit)}
validationSchema={getValidationSchema}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
>
<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>
<ModelForm />
</LayoutModel>
</>
);
};

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

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

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

@ -1,20 +1,14 @@
import { Space, TableColumnsType, Tooltip } from "antd";
import { TableColumnsType } from "antd";
import { Lesson } from "../../types/Item";
import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { MdOutlineEdit } from "react-icons/md";
import { findLabelByValue } from "../../utils/findLabelByValue";
import { useTranslation } from "react-i18next";
import { hasAbility } from "../../utils/hasAbility";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { formatNumber } from "../../utils/formatNumber";
import { BsEyeFill } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { canAddLesson, canDeleteLesson, canEditLesson, canShowLesson } from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
@ -26,8 +20,6 @@ export const useColumns = () => {
navigate(`${ABILITIES_ENUM.LESSON}/${record?.id}`);
};
const handelDelete = (data: any) => {
setObjectToEdit(data);
handel_open_model(ModalEnum?.LESSON_DELETE);
@ -67,46 +59,18 @@ export const useColumns = () => {
),
key: "actions",
align: "end",
className: "custom_add_button_column",
render: (text, record, index) => {
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
width: "25vw",
render: (_text, record, index) => {
return (
<Space size="middle" className={className}>
{canEditLesson && (
<Tooltip
placement="top"
title={t("practical.edit")}
color="#E0E0E0"
>
<span onClick={() => handleEdit(record)}>
<MdOutlineEdit
size={22}
style={{ color: "#A098AE" }}
<ActionButtons
canDelete={canDeleteLesson}
canEdit={canEditLesson}
canShow={canShowLesson}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
onShow={() => handelShow(record)}
/>
</span>
</Tooltip>
)}
{canDeleteLesson && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/>
)}
{canShowLesson && (
<BsEyeFill
onClick={() => handelShow(record)}
size={22}
style={{ color: "green" }}
/>
)}
</Space>
);
},
},

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

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

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

@ -1,16 +1,15 @@
import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { Spin } from "antd";
import FormikForm from "../../Layout/Dashboard/FormikFormModel";
import { getInitialValues, getValidationSchema ,getInitialValuesBase, getValidationSchemaBase, processTags} from "./Model/formUtil";
import { useAddQuestion, useDeleteQuestion, useGetAllQuestion, useUpdateQuestion } from "../../api/Question";
import { useQueryClient } from "react-query";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { removeStringKeys } from "../../utils/removeStringKeys";
import SpinContainer from "../../Components/Layout/SpinContainer";
import Form from './Model/Edit'
import ModelForm from './Model/ModelForm'
import BaseForm from './Model/Malty/Edit'
import { Question } from "../../types/Item";
import { toast } from "react-toastify";
@ -156,11 +155,6 @@ const EditPage: React.FC = () => {
updatedObject?.QuestionOptions?.forEach((item:any) => {
if (item?.id) {
// if(!item?.answer_image){
// item["answer_image"] = ""
// }
console.log(item);
oldQuestionOptions.push(item);
} else {
newQuestionOptions.push(item);
@ -171,9 +165,6 @@ const EditPage: React.FC = () => {
old: oldQuestionOptions,
new: newQuestionOptions
};
console.log(QuestionOptions,"QuestionOptions");
mutate({ ...updatedObject,QuestionOptions,tags });
}
};
@ -259,7 +250,7 @@ const EditPage: React.FC = () => {
{t("header.exercise") }
</div>
</header>
<Form />
<ModelForm />
<div className="exercise_add_buttons">
<div onClick={handleCancel}>{t("practical.back")}</div>
<button disabled={isLoading} className="relative" type="submit">

81
src/Pages/question/Model/Add.tsx
View File

@ -1,81 +0,0 @@
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;

95
src/Pages/question/Model/Delete.tsx
View File

@ -1,95 +0,0 @@
import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { 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;

81
src/Pages/question/Model/Edit.tsx
View File

@ -1,81 +0,0 @@
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;

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

@ -7,11 +7,15 @@ import { ParamsEnum } from "../../enums/params";
import { useGetAllUnit } from "../../api/unit";
import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useGetAllLesson } from "../../api/lesson";
import DeleteModels from "../../Layout/Dashboard/DeleteModels";
import { ModalEnum } from "../../enums/Model";
import { useDeleteQuestion } from "../../api/Question";
const Table = lazy(() => import('./Table'));
const TableHeader = () => {
const [t] = useTranslation();
const deleteMutation = useDeleteQuestion();
const { unit_id,lesson_id } = useParams<ParamsEnum>();
const { data: unit } = useGetAllUnit({ show: unit_id });
@ -46,8 +50,10 @@ const TableHeader = () => {
</header>
<Table />
</Suspense>
<DeleteModel/>
<DeleteModels
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.QUESTION_DELETE}
/>
</div>
);
};

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

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

34
src/Pages/subject/Model/Add.tsx
View File

@ -1,34 +0,0 @@
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;

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

@ -1,76 +1,31 @@
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 React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
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 { useParams } from "react-router-dom";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, isLoading } = useAddSubject();
const { setObjectToEdit } = useObjectToEdit();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setObjectToEdit({});
}
}, [setIsOpen, isSuccess]);
const AddModel: React.FC = () => {
const { mutate, status } = useAddSubject();
const handleSubmit = (values: any) => {
// console.log(values,"values");
mutate({
...values,
});
mutate({ ...values });
};
const handleCancel = () => {
setIsOpen("");
setObjectToEdit({});
};
const [t] = useTranslation();
return (
<>
<Modal
className="ModalForm"
centered
width={"60vw"}
footer={null}
open={isOpen === ModalEnum?.SUBJECT_ADD}
onCancel={handleCancel}
>
<FormikForm
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.SUBJECT_ADD}
modelTitle="subject"
handleSubmit={handleSubmit}
initialValues={getInitialValues(null)}
validationSchema={getValidationSchema}
getInitialValues={getInitialValues({})}
getValidationSchema={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>
<ModelForm />
</LayoutModel>
</>
);
};
export default ModalForm;
export default AddModel;

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

@ -1,93 +0,0 @@
import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { 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;

33
src/Pages/subject/Model/Edit.tsx
View File

@ -1,33 +0,0 @@
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;

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

@ -1,83 +1,36 @@
import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import ModelBody from "./Edit";
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import { useUpdateSubject } from "../../../api/subject";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { Form, Formik } from "formik";
import { handelImageState } from "../../../utils/DataToSendImageState";
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 { objectToEdit, setObjectToEdit } = useObjectToEdit(
(state) => state,
);
const { isOpen, setIsOpen } = useModalState((state) => state);
const { objectToEdit } = useObjectToEdit((state) => state);
const { mutate, isSuccess, isLoading } = useUpdateSubject();
useEffect(() => {
if (isSuccess) {
setIsOpen("");
setObjectToEdit({});
}
}, [isSuccess]);
const { mutate ,status} = useUpdateSubject();
const handleSubmit = (values: any) => {
const Data_to_send = { ...values };
const handelImage = handelImageState(Data_to_send, "image");
mutate(handelImage);
};
const handleCancel = () => {
setIsOpen("");
setObjectToEdit(null);
};
const [t] = useTranslation();
return (
<>
<Modal
className="ModalForm"
centered
width={"60vw"}
footer={null}
open={isOpen === ModalEnum?.SUBJECT_EDIT}
onCancel={handleCancel}
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.SUBJECT_EDIT}
modelTitle="subject"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
>
<Formik
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>
<ModelForm />
</LayoutModel>
</>
);
};

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

@ -4,19 +4,19 @@ import useModalHandler from '../../../utils/useModalHandler';
import { FaPlus } from 'react-icons/fa';
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 { canAddSubject } from '../../../utils/hasAbilityFn';
import DeleteModels from '../../../Layout/Dashboard/DeleteModels';
import { useDeleteSubject } from '../../../api/subject';
const TableWithHeader = () => {
const { handel_open_model } = useModalHandler();
const [t] = useTranslation();
const deleteMutation = useDeleteSubject();
useSetPageTitle(
t(`page_header.subject`),
@ -39,7 +39,10 @@ const TableWithHeader = () => {
<AddSubjectModalForm />
<EditSubjectModalForm />
<DeleteSubjectModalForm />
<DeleteModels
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.SUBJECT_DELETE}
/>
</div>
)
}

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

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

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

@ -274,3 +274,34 @@ button:disabled {
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;
}
}

4
src/api/config.ts
View File

@ -1,7 +1,7 @@
// export const BaseURL = "http://192.168.1.107:8000/api/";
export const BaseURL = "http://192.168.1.6: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/";
// export const ImageBaseURL = "http://192.168.1.9:8000/";

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

@ -11,7 +11,6 @@ function useAddMutation(
): UseMutationResult<AxiosResponse, unknown, any, unknown> {
const axios = useAxios();
console.log(toast,key);
return useMutation<AxiosResponse, unknown, any, unknown>(

6
src/translate/ar.json
View File

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

3
src/translate/en.json
View File

@ -225,7 +225,8 @@
"subjectAttachmentType": "Subject Attachment Type",
"param": "Param",
"subjectProgress": "Subject Progress",
"main_page": "Main Page"
"main_page": "Main Page",
"tags_details":"tags details"
},
"education_class_actions": {
"Student_Records": "Student_Records",