diff --git a/src/Components/ValidationField/View/Date.tsx b/src/Components/ValidationField/View/Date.tsx index 036fb71..54cc5bc 100644 --- a/src/Components/ValidationField/View/Date.tsx +++ b/src/Components/ValidationField/View/Date.tsx @@ -26,7 +26,7 @@ const Date = ({ formik.setFieldValue(name, value); }; - const Formatter = [DateEnum?.FORMATE, DateEnum?.FORMATE2]; + const Formatter = [DateEnum?.FORMATE]; return (
{ - const { mutate, status ,isLoading} = useAddPackage(); + const { mutate, status ,isLoading,isSuccess} = useAddPackage(); const [t] = useTranslation(); const navigate = useNavigate() const handleSubmit = (values: PackageInitialValues) => { @@ -29,6 +29,11 @@ const AddModel: React.FC = () => { ...values, }); }; + useEffect(() => { + if(isSuccess){ + navigate("/package") + } + }, [isSuccess]) useSetPageTitle(t(`page_header.package`)); diff --git a/src/Pages/Package/Model/EditModel.tsx b/src/Pages/Package/Model/EditModel.tsx index 7bb6ca1..83665b5 100644 --- a/src/Pages/Package/Model/EditModel.tsx +++ b/src/Pages/Package/Model/EditModel.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { getInitialValues, getValidationSchema } from "./formUtil"; import ModelForm from "./ModelForm"; import FormikForm from "../../../Layout/Dashboard/FormikForm"; @@ -14,7 +14,7 @@ import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; import SpinContainer from "../../../Components/Layout/SpinContainer"; const EditModel: React.FC = () => { - const { mutate, status ,isLoading} = useUpdatePackage(); + const { mutate, status ,isLoading,isSuccess} = useUpdatePackage(); const [t] = useTranslation(); const {package_id} = useParams(); const {objectToEdit} = useObjectToEdit(); @@ -34,7 +34,13 @@ const EditModel: React.FC = () => { ...values, }); }; - + const navigate = useNavigate() + useEffect(() => { + if(isSuccess){ + navigate("/package") + } + }, [isSuccess]) + useSetPageTitle(t(`page_header.package`)); if(isLoadingData){ return diff --git a/src/Pages/Package/Model/ModelForm.tsx b/src/Pages/Package/Model/ModelForm.tsx index 861020c..8060a12 100644 --- a/src/Pages/Package/Model/ModelForm.tsx +++ b/src/Pages/Package/Model/ModelForm.tsx @@ -128,8 +128,9 @@ const Form = () => { - + + diff --git a/src/Pages/Package/PackageItem/Model/formUtil.ts b/src/Pages/Package/PackageItem/Model/formUtil.ts index 407ade4..46320fd 100644 --- a/src/Pages/Package/PackageItem/Model/formUtil.ts +++ b/src/Pages/Package/PackageItem/Model/formUtil.ts @@ -2,7 +2,7 @@ import * as Yup from "yup"; import { Package, PackageInitialValues } from "../../../../types/Package"; import { arrayToObject } from "../../../../utils/arrayToObject"; import { objectToArray } from "../../../../utils/objectToArray"; -export const getInitialValues = (objectToEdit: Partial): PackageInitialValues => { +export const getInitialValues = (objectToEdit: Partial): any => { console.log(objectToEdit,"objectToEdit"); const configuration = Array.isArray(objectToEdit?.configuration) ? objectToEdit?.configuration : objectToArray(objectToEdit?.configuration) @@ -16,6 +16,7 @@ export const getInitialValues = (objectToEdit: Partial): PackageInitial subjects_ids: objectToEdit?.subjects_ids ?? [], units_ids: objectToEdit?.units_ids ?? [], configuration: configuration ?? [{key:"",value:""}], + moiaed: [{key:"",value:""}], }; }; diff --git a/src/Pages/ReSeller/Page.tsx b/src/Pages/ReSeller/Page.tsx index a20e425..d7ef619 100644 --- a/src/Pages/ReSeller/Page.tsx +++ b/src/Pages/ReSeller/Page.tsx @@ -17,7 +17,7 @@ const TableHeader = () => { const [t] = useTranslation(); const deleteMutation = useDeleteReSeller(); - useSetPageTitle(t(`page_header.ReSeller`)); + useSetPageTitle(t(`page_header.reSeller`)); return (
diff --git a/src/Pages/Student/Model/AddModel.tsx b/src/Pages/Student/Model/AddModel.tsx new file mode 100644 index 0000000..e67891e --- /dev/null +++ b/src/Pages/Student/Model/AddModel.tsx @@ -0,0 +1,33 @@ +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 { useAddStudent } from "../../../api/student"; + +const AddModel: React.FC = () => { + const { mutate, status } = useAddStudent(); + + const handleSubmit = (values: any) => { + mutate({ + ...values, + }); + }; + return ( + <> + + + + + ); +}; + +export default AddModel; diff --git a/src/Pages/Student/Model/EditModel.tsx b/src/Pages/Student/Model/EditModel.tsx new file mode 100644 index 0000000..0f1b0ec --- /dev/null +++ b/src/Pages/Student/Model/EditModel.tsx @@ -0,0 +1,37 @@ +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 { useUpdateStudent } from "../../../api/student"; +import { handelImageState } from "../../../utils/DataToSendImageState"; + +const EditModel: React.FC = () => { + const { mutate, status } = useUpdateStudent(); + const { objectToEdit } = useObjectToEdit((state) => state); + + const handleSubmit = (values: any) => { + const Data_to_send = { ...values }; + mutate(Data_to_send); + }; + + return ( + <> + + + + + ); +}; + +export default EditModel; diff --git a/src/Pages/Student/Model/ModelForm.tsx b/src/Pages/Student/Model/ModelForm.tsx new file mode 100644 index 0000000..a7cefd5 --- /dev/null +++ b/src/Pages/Student/Model/ModelForm.tsx @@ -0,0 +1,54 @@ +import { Col, Row } from "reactstrap"; +import ValidationField from "../../../Components/ValidationField/ValidationField"; +import { useGetAllGrade } from "../../../api/grade"; +import { useValidationValidationParamState } from "../../../Components/ValidationField/state/ValidationValidationParamState"; + +const Form = ({ isEdit = false }: { isEdit?: boolean }) => { + const { ValidationParamState } = useValidationValidationParamState(); + const { + GradeName, GradeCurrentPage, + } = ValidationParamState; + + + const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({ + name: GradeName, + page: GradeCurrentPage + }); + const GradeOption = Grade?.data ?? [] + const canChangeGradePage = !!Grade?.links?.next; + const GradePage = Grade?.meta?.currentPage; + + + return ( + + + + + + {!isEdit && + + } + + + + + + + + + + ); +}; + +export default Form; diff --git a/src/Pages/Student/Model/formUtil.ts b/src/Pages/Student/Model/formUtil.ts new file mode 100644 index 0000000..f1f1bfc --- /dev/null +++ b/src/Pages/Student/Model/formUtil.ts @@ -0,0 +1,21 @@ +import * as Yup from "yup"; +import { Student, StudentInitialValues } from "../../../types/Student"; + +export const getInitialValues = ( + objectToEdit: Partial, +): StudentInitialValues => { + return { + id: objectToEdit?.id, + first_name: objectToEdit?.first_name ?? "", + last_name: objectToEdit?.last_name ?? "", + username: objectToEdit?.user?.username ?? null , + password: null , + }; +}; + +export const getValidationSchema = () => { + // validate input + return Yup.object().shape({ + name: Yup.string().required("validation.required"), + }); +}; diff --git a/src/Pages/Student/Page.tsx b/src/Pages/Student/Page.tsx new file mode 100644 index 0000000..afcd7e9 --- /dev/null +++ b/src/Pages/Student/Page.tsx @@ -0,0 +1,39 @@ +import { useTranslation } from "react-i18next"; +import { lazy, Suspense } from "react"; +import { Spin } from "antd"; +import useSetPageTitle from "../../Hooks/useSetPageTitle"; +import { ModalEnum } from "../../enums/Model"; +import { useDeleteStudent } from "../../api/student"; + +const Table = lazy(() => import("./Table")); +const AddModalForm = lazy(() => import("./Model/AddModel")); +const EditModalForm = lazy(() => import("./Model/EditModel")); +const DeleteModalForm = lazy( + () => import("../../Layout/Dashboard/DeleteModels"), +); + +const TableHeader = () => { + const [t] = useTranslation(); + const deleteMutation = useDeleteStudent(); + + useSetPageTitle(t(`page_header.student`)); + + return ( +
+ }> +
+
{t("models.student")}
+
+ + + + + + + ); +}; + +export default TableHeader; diff --git a/src/Pages/Student/Table.tsx b/src/Pages/Student/Table.tsx new file mode 100644 index 0000000..b4c343e --- /dev/null +++ b/src/Pages/Student/Table.tsx @@ -0,0 +1,13 @@ +import { useColumns } from "./useTableColumns"; +import React from "react"; +import DataTable from "../../Layout/Dashboard/Table/DataTable"; +import { useGetAllStudent } from "../../api/student"; + +const App: React.FC = () => { + const response = useGetAllStudent({ pagination: true }); + + return ; +}; + +export default App; + diff --git a/src/Pages/Student/useTableColumns.tsx b/src/Pages/Student/useTableColumns.tsx new file mode 100644 index 0000000..816b9b3 --- /dev/null +++ b/src/Pages/Student/useTableColumns.tsx @@ -0,0 +1,86 @@ +import { TableColumnsType } from "antd"; +import { Student } from "../../types/Student"; +import { FaPlus } from "react-icons/fa"; +import useModalHandler from "../../utils/useModalHandler"; +import { ModalEnum } from "../../enums/Model"; +import { useObjectToEdit } from "../../zustand/ObjectToEditState"; +import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; +import { + canAddStudent, + canDeleteStudent, + canEditStudent, + canShowStudent, +} from "../../utils/hasAbilityFn"; +import ActionButtons from "../../Components/Table/ActionButtons"; +import ColumnsImage from "../../Components/Columns/ColumnsImage"; + +export const useColumns = () => { + const { handel_open_model } = useModalHandler(); + + const { setObjectToEdit } = useObjectToEdit((state) => state); + const navigate = useNavigate(); + + const handelShow = (record: Student) => { + navigate(`${record?.id}`); + }; + + const handelDelete = (data: Student) => { + setObjectToEdit(data); + handel_open_model(ModalEnum?.STUDENT_DELETE); + }; + + const handleEdit = (record: Student) => { + setObjectToEdit(record); + handel_open_model(ModalEnum?.STUDENT_EDIT); + }; + const [t] = useTranslation(); + + const columns: TableColumnsType = [ + { + title: t("columns.id"), + dataIndex: "id", + key: "id", + align: "center", + render: (_text, record) => record?.id, + }, + { + title: `${t("columns.name")}`, + dataIndex: "name", + key: "name", + align: "center", + render: (_text, record) => record?.first_name, + }, + { + title: canAddStudent ? ( + + ) : ( + "" + ), + + key: "actions", + align: "end", + width: "25vw", + render: (_text, record, index) => { + return ( + handelDelete(record)} + onEdit={() => handleEdit(record)} + onShow={() => handelShow(record)} + /> + ); + }, + }, + ]; + + return columns; +}; diff --git a/src/Pages/Unit/DrapableTable.tsx b/src/Pages/Unit/DrapableTable.tsx index b6514dd..26952b3 100644 --- a/src/Pages/Unit/DrapableTable.tsx +++ b/src/Pages/Unit/DrapableTable.tsx @@ -12,10 +12,13 @@ import { } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { Button, Table } from "antd"; -import type { TableColumnsType } from "antd"; import { useParams } from "react-router-dom"; import { ParamsEnum } from "../../enums/params"; -import { useGetAllUnit } from "../../api/unit"; +import { useGetAllUnit, useUpdateUnitOrder } from "../../api/unit"; +import Loading from "../../Components/DataState/Loading"; +import EmptyData from "../../Components/DataState/EmptyData"; +import { useTranslation } from "react-i18next"; +import { useColumns } from "./useTableColumns"; interface DataType { id: string; // Unique identifier for each row @@ -32,7 +35,7 @@ interface RowContextProps { const RowContext = React.createContext({}); -const DragHandle: React.FC = () => { +export const DragHandleUnit: React.FC = () => { const { setActivatorNodeRef, listeners } = useContext(RowContext); return (
a.order - b.order)} // Sort by order for rendering + dataSource={sortedDataSource} pagination={false} + rowClassName={(record, index) => getRowClassName(record, index)} + className="DataTable" + loading={{ + spinning: response?.isLoading || isRefetching, + indicator: , + size: "large", + }} + locale={{ + emptyText: ( + + ), + }} /> diff --git a/src/Pages/Unit/Model/ModelForm.tsx b/src/Pages/Unit/Model/ModelForm.tsx index d03fce2..e1e8770 100644 --- a/src/Pages/Unit/Model/ModelForm.tsx +++ b/src/Pages/Unit/Model/ModelForm.tsx @@ -19,6 +19,7 @@ const Form = () => { placeholder="term" label="term" option={termsArray} + fieldNames={{label:"label",value:"value"}} /> diff --git a/src/Pages/Unit/Page.tsx b/src/Pages/Unit/Page.tsx index aca58eb..8166b6b 100644 --- a/src/Pages/Unit/Page.tsx +++ b/src/Pages/Unit/Page.tsx @@ -60,7 +60,7 @@ const TableHeader = () => {
{t("models.units")}
-
+ { const { handel_open_model } = useModalHandler(); @@ -40,6 +40,7 @@ export const useColumns = () => { const [t] = useTranslation(); const columns: TableColumnsType = [ + { key: "sort", align: "center", width: 80, render: () => }, { title: t("columns.id"), dataIndex: "id", @@ -60,7 +61,13 @@ export const useColumns = () => { dataIndex: "term", key: "term", align: "center", - render: (text, record) => record?.term, + render: (text, record) => { + console.log(record); + + return ( + record?.term + ) + }, }, { diff --git a/src/Pages/lesson/DrapableTable.tsx b/src/Pages/lesson/DrapableTable.tsx new file mode 100644 index 0000000..96f3289 --- /dev/null +++ b/src/Pages/lesson/DrapableTable.tsx @@ -0,0 +1,185 @@ +import React, { useContext, useEffect, useMemo } from "react"; +import { HolderOutlined } from "@ant-design/icons"; +import type { DragEndEvent } from "@dnd-kit/core"; +import { DndContext } from "@dnd-kit/core"; +import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities"; +import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; +import { + arrayMove, + SortableContext, + useSortable, + verticalListSortingStrategy, +} from "@dnd-kit/sortable"; +import { CSS } from "@dnd-kit/utilities"; +import { Button, Table } from "antd"; +import { useParams } from "react-router-dom"; +import { ParamsEnum } from "../../enums/params"; +import { useGetAllLesson, useUpdateLessonOrder } from "../../api/lesson"; +import Loading from "../../Components/DataState/Loading"; +import EmptyData from "../../Components/DataState/EmptyData"; +import { useTranslation } from "react-i18next"; +import { useColumns } from "./useTableColumns"; + +interface DataType { + id: string; // Unique identifier for each row + order: number; + name: string; + age: number; + address: string; +} + +interface RowContextProps { + setActivatorNodeRef?: (element: HTMLElement | null) => void; + listeners?: SyntheticListenerMap; +} + +const RowContext = React.createContext({}); + +export const DragHandleLesson: React.FC = () => { + const { setActivatorNodeRef, listeners } = useContext(RowContext); + return ( + + + ); +}; + +const DrapableTable: React.FC = () => { + const { subject_id } = useParams(); + const response = useGetAllLesson({ subject_id: subject_id, pagination: false }); + + // Assuming the response contains a unique id for each item + const data = + response?.data?.data?.map((item: any, index: number) => ({ + id: item.id, // Ensure this is a unique identifier + order: index + 1, // Assign order based on index + ...item + })) ?? []; + + const [dataSource, setDataSource] = React.useState(data); + + useEffect(() => { + // Update dataSource when the fetched data changes + const sortedData = data.sort((a: any, b: any) => a.order - b.order); + setDataSource(sortedData); + }, [response?.data?.data]); + + const {mutate:orderLesson} = useUpdateLessonOrder() + const onDragEnd = ({ active, over }: DragEndEvent) => { + if (active.id !== over?.id) { + setDataSource((prevState) => { + const activeIndex = prevState.findIndex( + (record) => record.id === active.id, + ); + + const overIndex = prevState.findIndex( + //@ts-ignore + (record) => record.id === over.id, + ); + + // Move the items in the array + const newState = arrayMove(prevState, activeIndex, overIndex); + const orderedNewState = newState.map((item, index) => ({ + ...item, + order: index + 1, // Update the order based on the new index + })); + // Update the order based on the new positions + const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{ + return { + "lesson_id":item?.id, + "order":item?.order + } + }) + orderLesson({lessons: orderedNewStateWithNewChape, _method:"PUT"}) + return orderedNewState + }); + + + } + }; + + const getRowClassName = (record: any, index: number): string => { + return index % 2 === 0 ? "even-row" : "odd-row"; + }; + const isRefetching = response?.isRefetching; + const [t] = useTranslation() + const columns = useColumns(); + const sortedDataSource = dataSource.sort((a, b) => a.order - b.order) ; + console.log(sortedDataSource,"sortedDataSource"); + + return ( + + i.id)} + strategy={verticalListSortingStrategy} + > +
getRowClassName(record, index)} + className="DataTable" + loading={{ + spinning: response?.isLoading || isRefetching, + indicator: , + size: "large", + }} + locale={{ + emptyText: ( + + ), + }} + /> + + + ); +}; + +export default DrapableTable; diff --git a/src/Pages/lesson/Model/AddModel.tsx b/src/Pages/lesson/Model/AddModel.tsx index 92c732a..06c1c57 100644 --- a/src/Pages/lesson/Model/AddModel.tsx +++ b/src/Pages/lesson/Model/AddModel.tsx @@ -12,14 +12,14 @@ import { useModalState } from "../../../zustand/Modal"; import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; const AddModel: React.FC = () => { - const { isOpen, setIsOpen } = useModalState((state) => state); + const { setIsOpen } = useModalState((state) => state); const queryClient = useQueryClient(); const { mutate, isSuccess, status } = useAddLesson(); const { OldObjectToEdit } = useObjectToEdit(); const { unit_id } = useParams(); useEffect(() => { if (isSuccess) { - setIsOpen(""); + setIsOpen("isSuccess"); queryClient.invalidateQueries(["Lesson"]); } }, [setIsOpen, isSuccess, queryClient]); @@ -40,8 +40,9 @@ const AddModel: React.FC = () => { ModelEnum={ModalEnum.LESSON_ADD} modelTitle="lesson" handleSubmit={handleSubmit} - getInitialValues={getInitialValues({})} + getInitialValues={getInitialValues({name:null})} getValidationSchema={getValidationSchema} + width="40vw" > diff --git a/src/Pages/lesson/Model/EditModel.tsx b/src/Pages/lesson/Model/EditModel.tsx index a57a753..4bc0394 100644 --- a/src/Pages/lesson/Model/EditModel.tsx +++ b/src/Pages/lesson/Model/EditModel.tsx @@ -14,7 +14,7 @@ const ModalForm: React.FC = () => { const { isOpen, setIsOpen } = useModalState((state) => state); const { mutate, isSuccess, status } = useUpdateLesson(); - const { objectToEdit, setObjectToEdit } = useObjectToEdit(); + const { objectToEdit } = useObjectToEdit(); const queryClient = useQueryClient(); @@ -43,6 +43,7 @@ const ModalForm: React.FC = () => { getInitialValues={getInitialValues(objectToEdit)} getValidationSchema={getValidationSchema} isAddModal={false} + width="40vw" > diff --git a/src/Pages/lesson/Model/formUtil.ts b/src/Pages/lesson/Model/formUtil.ts index 6561e1d..6b83390 100644 --- a/src/Pages/lesson/Model/formUtil.ts +++ b/src/Pages/lesson/Model/formUtil.ts @@ -1,9 +1,11 @@ import * as Yup from "yup"; export const getInitialValues = (objectToEdit: any): any => { + console.log(objectToEdit,"objectToEdit"); + return { id: objectToEdit?.id ?? null, - name: objectToEdit?.name ?? "", + name: objectToEdit?.name ?? null, unit_id: objectToEdit?.term ?? null, }; }; diff --git a/src/Pages/lesson/Page.tsx b/src/Pages/lesson/Page.tsx index 5b6b7b4..7ceb15d 100644 --- a/src/Pages/lesson/Page.tsx +++ b/src/Pages/lesson/Page.tsx @@ -11,7 +11,7 @@ import { useGetAllGrade } from "../../api/grade"; import { useGetAllCurriculum } from "../../api/curriculum"; import { useGetAllSubject } from "../../api/subject"; -const Table = lazy(() => import("./Table")); +const Table = lazy(() => import("./DrapableTable")); const AddModalForm = lazy(() => import("./Model/AddModel")); const EditModalForm = lazy(() => import("./Model/EditModel")); const DeleteModelsForm = lazy( diff --git a/src/Pages/lesson/useTableColumns.tsx b/src/Pages/lesson/useTableColumns.tsx index 2359f30..ce6b0da 100644 --- a/src/Pages/lesson/useTableColumns.tsx +++ b/src/Pages/lesson/useTableColumns.tsx @@ -14,6 +14,7 @@ import { canShowLesson, } from "../../utils/hasAbilityFn"; import ActionButtons from "../../Components/Table/ActionButtons"; +import { DragHandleLesson } from "./DrapableTable"; export const useColumns = () => { const { handel_open_model } = useModalHandler(); @@ -37,6 +38,7 @@ export const useColumns = () => { const [t] = useTranslation(); const columns: TableColumnsType = [ + { key: "sort", align: "center", width: 80, render: () => }, { title: t("columns.id"), dataIndex: "id", diff --git a/src/Pages/studentPackage/Model/AddModel.tsx b/src/Pages/studentPackage/Model/AddModel.tsx new file mode 100644 index 0000000..472f34e --- /dev/null +++ b/src/Pages/studentPackage/Model/AddModel.tsx @@ -0,0 +1,33 @@ +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 { useAddStudentPackage } from "../../../api/StudentPackage"; + +const AddModel: React.FC = () => { + const { mutate, status } = useAddStudentPackage(); + + const handleSubmit = (values: any) => { + mutate({ + ...values, + }); + }; + return ( + <> + + + + + ); +}; + +export default AddModel; diff --git a/src/Pages/studentPackage/Model/EditModel.tsx b/src/Pages/studentPackage/Model/EditModel.tsx new file mode 100644 index 0000000..7bbd21f --- /dev/null +++ b/src/Pages/studentPackage/Model/EditModel.tsx @@ -0,0 +1,38 @@ +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 { useUpdateStudentPackage } from "../../../api/StudentPackage"; +import { handelImageState } from "../../../utils/DataToSendImageState"; + +const EditModel: React.FC = () => { + const { mutate, status } = useUpdateStudentPackage(); + const { objectToEdit } = useObjectToEdit((state) => state); + + const handleSubmit = (values: any) => { + const Data_to_send = { ...values }; + const handelImage = handelImageState(Data_to_send, "icon"); + mutate(handelImage); + }; + + return ( + <> + + + + + ); +}; + +export default EditModel; diff --git a/src/Pages/studentPackage/Model/ModelForm.tsx b/src/Pages/studentPackage/Model/ModelForm.tsx new file mode 100644 index 0000000..f366672 --- /dev/null +++ b/src/Pages/studentPackage/Model/ModelForm.tsx @@ -0,0 +1,71 @@ +import { Col, Row } from "reactstrap"; +import ValidationField from "../../../Components/ValidationField/ValidationField"; +import { useGetAllPackage } from "../../../api/package"; +import { useValidationValidationParamState } from "../../../Components/ValidationField/state/ValidationValidationParamState"; +import { useGetAllStudent } from "../../../api/student"; + +const Form = () => { + + const { ValidationParamState } = useValidationValidationParamState(); + const { + PackageName, PackageCurrentPage, + StudentName, StudentCurrentPage, + } = ValidationParamState; + + + /// Package_id + const { data: Package, isLoading: isLoadingPackage } = useGetAllPackage({ + name: PackageName, + page: PackageCurrentPage + }); + const PackageOption = Package?.data ?? [] + const canChangePackagePage = !!Package?.links?.next; + const PackagePage = Package?.meta?.currentPage; + + + /// Student_id + const { data: Student, isLoading: isLoadingStudent } = useGetAllStudent({ + name: StudentName, + page: StudentCurrentPage + }); + const StudentOption = Student?.data ?? [] + const canChangeStudentPage = !!Student?.links?.next; + const StudentPage = Student?.meta?.currentPage; + + return ( + + + + + + + + + + + ); +}; + +export default Form; diff --git a/src/Pages/studentPackage/Model/formUtil.ts b/src/Pages/studentPackage/Model/formUtil.ts new file mode 100644 index 0000000..570f9b5 --- /dev/null +++ b/src/Pages/studentPackage/Model/formUtil.ts @@ -0,0 +1,23 @@ +import * as Yup from "yup"; +import { StudentPackage, StudentPackageInitialValues } from "../../../types/studentPackage"; +import { formateDateInitialValue } from "../../../utils/formateDateInitialValue"; + +export const getInitialValues = ( + objectToEdit: Partial, +): StudentPackageInitialValues => { + return { + id: objectToEdit?.id ?? null, + package_id: objectToEdit?.package?.id ?? null, + student_id: objectToEdit?.student?.user_id ?? null, + activation_date: formateDateInitialValue(objectToEdit?.activation_date) , + expiration_date: formateDateInitialValue(objectToEdit?.expiration_date) , + + }; +}; + +export const getValidationSchema = () => { + // validate input + return Yup.object().shape({ + name: Yup.string().required("validation.required"), + }); +}; diff --git a/src/Pages/studentPackage/Page.tsx b/src/Pages/studentPackage/Page.tsx new file mode 100644 index 0000000..6b47760 --- /dev/null +++ b/src/Pages/studentPackage/Page.tsx @@ -0,0 +1,39 @@ +import { useTranslation } from "react-i18next"; +import { lazy, Suspense } from "react"; +import { Spin } from "antd"; +import useSetPageTitle from "../../Hooks/useSetPageTitle"; +import { ModalEnum } from "../../enums/Model"; +import { useDeleteStudentPackage } from "../../api/StudentPackage"; + +const Table = lazy(() => import("./Table")); +const AddModalForm = lazy(() => import("./Model/AddModel")); +const EditModalForm = lazy(() => import("./Model/EditModel")); +const DeleteModalForm = lazy( + () => import("../../Layout/Dashboard/DeleteModels"), +); + +const TableHeader = () => { + const [t] = useTranslation(); + const deleteMutation = useDeleteStudentPackage(); + + useSetPageTitle(t(`page_header.studentPackage`)); + + return ( +
+ }> +
+
{t("models.StudentPackage")}
+
+
+ + + + + + ); +}; + +export default TableHeader; diff --git a/src/Pages/studentPackage/Table.tsx b/src/Pages/studentPackage/Table.tsx new file mode 100644 index 0000000..35a6f05 --- /dev/null +++ b/src/Pages/studentPackage/Table.tsx @@ -0,0 +1,12 @@ +import { useColumns } from "./useTableColumns"; +import React from "react"; +import DataTable from "../../Layout/Dashboard/Table/DataTable"; +import { useGetAllStudentPackage } from "../../api/StudentPackage"; + +const App: React.FC = () => { + const response = useGetAllStudentPackage({ pagination: true }); + + return ; +}; + +export default App; diff --git a/src/Pages/studentPackage/useTableColumns.tsx b/src/Pages/studentPackage/useTableColumns.tsx new file mode 100644 index 0000000..73ad6ea --- /dev/null +++ b/src/Pages/studentPackage/useTableColumns.tsx @@ -0,0 +1,87 @@ +import { TableColumnsType } from "antd"; +import { StudentPackage } from "../../types/studentPackage"; +import { FaPlus } from "react-icons/fa"; +import useModalHandler from "../../utils/useModalHandler"; +import { ModalEnum } from "../../enums/Model"; +import { useObjectToEdit } from "../../zustand/ObjectToEditState"; +import { useTranslation } from "react-i18next"; +import { ABILITIES_ENUM } from "../../enums/abilities"; +import { useNavigate } from "react-router-dom"; +import { + canAddStudentPackage, + canDeleteStudentPackage, + canEditStudentPackage, + canShowStudentPackage, +} from "../../utils/hasAbilityFn"; +import ActionButtons from "../../Components/Table/ActionButtons"; +import ColumnsImage from "../../Components/Columns/ColumnsImage"; + +export const useColumns = () => { + const { handel_open_model } = useModalHandler(); + + const { setObjectToEdit } = useObjectToEdit((state) => state); + const navigate = useNavigate(); + + const handelShow = (record: StudentPackage) => { + navigate(`${record?.id}`); + }; + + const handelDelete = (data: StudentPackage) => { + setObjectToEdit(data); + handel_open_model(ModalEnum?.STUDENT_PACKAGE_DELETE); + }; + + const handleEdit = (record: StudentPackage) => { + setObjectToEdit(record); + handel_open_model(ModalEnum?.STUDENT_PACKAGE_EDIT); + }; + const [t] = useTranslation(); + + const columns: TableColumnsType = [ + { + title: t("columns.id"), + dataIndex: "id", + key: "id", + align: "center", + render: (_text, record) => record?.id, + }, + { + title: `${t("columns.name")}`, + dataIndex: "name", + key: "name", + align: "center", + render: (_text, record) => record?.name, + }, + { + title: canAddStudentPackage ? ( + + ) : ( + "" + ), + + key: "actions", + align: "end", + width: "25vw", + render: (_text, record, index) => { + return ( + handelDelete(record)} + onEdit={() => handleEdit(record)} + onShow={() => handelShow(record)} + /> + ); + }, + }, + ]; + + return columns; +}; diff --git a/src/Routes.tsx b/src/Routes.tsx index 8c97c61..65f1ee5 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -12,6 +12,8 @@ const Package = React.lazy(() => import("./Pages/Package/Page")); const Curriculum = React.lazy(() => import("./Pages/Curriculum/Page")); const PackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Page")); const ReSeller = React.lazy(() => import("./Pages/ReSeller/Page")); +const StudentPackage = React.lazy(() => import("./Pages/studentPackage/Page")); +const Student = React.lazy(() => import("./Pages/Student/Page")); const Unit = React.lazy(() => import("./Pages/Unit/Page")); const Lesson = React.lazy(() => import("./Pages/lesson/Page")); @@ -28,6 +30,7 @@ const EditPackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem import { hasAbility } from "./utils/hasAbility"; import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities"; import { ParamsEnum } from "./enums/params"; +import { BsPeople } from "react-icons/bs"; export const menuItems: TMenuItem[] = [ { @@ -91,6 +94,27 @@ export const menuItems: TMenuItem[] = [ abilities_value: ABILITIES_VALUES_ENUM.INDEX, prevPath: 0, }, + + { + header: "page_header.student", + element: , + icon: , + text: "sidebar.student", + path: `/${ABILITIES_ENUM?.STUDENT}`, + abilities: ABILITIES_ENUM?.STUDENT, + abilities_value: ABILITIES_VALUES_ENUM.INDEX, + prevPath: 0, + }, + // { + // header: "page_header.studentPackage", + // element: , + // icon: , + // text: "sidebar.studentPackage", + // path: `/${ABILITIES_ENUM?.STUDENT_PACKAGE}`, + // abilities: ABILITIES_ENUM?.STUDENT_PACKAGE, + // abilities_value: ABILITIES_VALUES_ENUM.INDEX, + // prevPath: 0, + // }, ]; export const CrudRoute: TCrudRoute[] = [ diff --git a/src/Styles/Pages/exercise.scss b/src/Styles/Pages/exercise.scss index d9efbf0..e8a01e4 100644 --- a/src/Styles/Pages/exercise.scss +++ b/src/Styles/Pages/exercise.scss @@ -23,7 +23,7 @@ .exercise_add_main { background: var(--bg); padding: 2vw; - } + }; .exercise_add_buttons { display: flex; gap: 2%; @@ -59,6 +59,7 @@ .add_new_button { margin-bottom: 0; + color: var(--primary) !important; } } .tags { @@ -125,3 +126,11 @@ display: flex; gap: 5px; } + + +.add_new_button{ + margin-bottom: 20px; + svg{ + color: var(--primary); + } +} \ No newline at end of file diff --git a/src/api/StudentPackage.ts b/src/api/StudentPackage.ts new file mode 100644 index 0000000..d1814cc --- /dev/null +++ b/src/api/StudentPackage.ts @@ -0,0 +1,21 @@ +import useAddMutation from "./helper/useAddMutation"; +import useDeleteMutation from "./helper/useDeleteMutation"; +import useGetQuery from "./helper/useGetQuery"; +import useUpdateMutation from "./helper/useUpdateMutation"; + +const API = { + GET: "/resellers/studentPackage", + ADD: "/resellers/studentPackage", + DELETE: "/resellers/studentPackage", + UPDATE: "/resellers/studentPackage", +}; + +const KEY = "StudentPackage"; + +export const useGetAllStudentPackage = (params?: any, options?: any) => + useGetQuery(KEY, API.GET, params, options); +export const useAddStudentPackage = () => useAddMutation(KEY, API.ADD); +export const useUpdateStudentPackage = (params?: any) => + useUpdateMutation(KEY, API.GET); +export const useDeleteStudentPackage = (params?: any) => + useDeleteMutation(KEY, API.DELETE); diff --git a/src/api/helper/useAddMutation.ts b/src/api/helper/useAddMutation.ts index 388abee..346d6bc 100644 --- a/src/api/helper/useAddMutation.ts +++ b/src/api/helper/useAddMutation.ts @@ -8,6 +8,8 @@ function useAddMutation( key: string, url: string, toast: boolean = true, + params: any = {}, + options: any = {}, ): UseMutationResult { const axios = useAxios(); return useMutation( @@ -20,9 +22,12 @@ function useAddMutation( ["X-Custom-Message"]: toast, [HEADER_KEY]: key, }, + }); return data; }, + options, + ); } diff --git a/src/api/lesson.ts b/src/api/lesson.ts index 6c71140..6824833 100644 --- a/src/api/lesson.ts +++ b/src/api/lesson.ts @@ -8,6 +8,7 @@ const API = { ADD: "/lesson", DELETE: "/lesson", UPDATE: "/lesson", + ORDER: "/lesson/order", }; const KEY = "lesson"; @@ -19,3 +20,5 @@ export const useUpdateLesson = (params?: any) => useUpdateMutation(KEY, API.GET); export const useDeleteLesson = (params?: any) => useDeleteMutation(KEY, API.DELETE); + +export const useUpdateLessonOrder = (params?: any) => useAddMutation("karim", API.ORDER); diff --git a/src/api/unit.ts b/src/api/unit.ts index 4d93b30..2234bba 100644 --- a/src/api/unit.ts +++ b/src/api/unit.ts @@ -8,6 +8,7 @@ const API = { ADD: "/unit", DELETE: "/unit", UPDATE: "/unit", + ORDER: "/unit/order", }; const KEY = "unit"; @@ -15,5 +16,6 @@ export const useGetAllUnit = (params?: any, options?: any) => useGetQuery(KEY, API.GET, params, options); export const useAddUnit = () => useAddMutation(KEY, API.ADD); export const useUpdateUnit = (params?: any) => useUpdateMutation(KEY, API.GET); +export const useUpdateUnitOrder = (params?: any,option?: any,) => useAddMutation("karim", API.ORDER,true,params,option); export const useDeleteUnit = (params?: any) => useDeleteMutation(KEY, API.DELETE); diff --git a/src/enums/Date.ts b/src/enums/Date.ts index 3c5d156..e22340d 100644 --- a/src/enums/Date.ts +++ b/src/enums/Date.ts @@ -1,3 +1,4 @@ export enum DateEnum { FORMATE = "YYYY-MM-DD", + SEND_DATE_FORMAT = "YYYY-MM-DD", } diff --git a/src/enums/Model.ts b/src/enums/Model.ts index 0859de2..bc24314 100644 --- a/src/enums/Model.ts +++ b/src/enums/Model.ts @@ -163,4 +163,9 @@ export enum ModalEnum { RE_SELLER_EDIT = "ReSeller.edit", RE_SELLER_ADD = "ReSeller.add", RE_SELLER_DELETE = "ReSeller.delete", + + /// studentPackage + STUDENT_PACKAGE_EDIT = "studentPackage.edit", + STUDENT_PACKAGE_ADD = "studentPackage.add", + STUDENT_PACKAGE_DELETE = "studentPackage.delete", } diff --git a/src/enums/abilities.ts b/src/enums/abilities.ts index 69dc0f1..a322319 100644 --- a/src/enums/abilities.ts +++ b/src/enums/abilities.ts @@ -7,7 +7,7 @@ export enum ABILITIES_ENUM { EARLY_DEPARTURE = "earlyDeparture", EDUCATION_CLASS = "eduClass", GRADE = "grade", - Package = "package", + Package = "packages", HOMEWORK_ATTACHMENT = "homeworkAttachment", HOMEWORK = "homework", LATE_ARRIVAL = "lateArrival", @@ -44,7 +44,8 @@ export enum ABILITIES_ENUM { ADMIN = "admin", CURRICULUM = "curriculum", PACKAGE_ITEM = "package_item", - RE_SELLER = "ReSeller" + RE_SELLER = "ReSeller", + STUDENT_PACKAGE='studentPackage' //// } diff --git a/src/translate/ar.json b/src/translate/ar.json index fb8bd86..cb127cd 100644 --- a/src/translate/ar.json +++ b/src/translate/ar.json @@ -279,7 +279,8 @@ "package":"حزمة", "package_details":"تفاصيل الحزمة", "add_package":"اضافة حزمة", - "ReSeller":"بائع" + "ReSeller":"بائع", + "StudentPackage":"حزمة الطالب " }, "education_class_actions": { "Student_Records": "سجلات الطلاب", @@ -694,7 +695,9 @@ "grade": "الدرجات", "curriculum": "مقرر", "package":"حزمة", - "reSeller":"البائع" + "reSeller":"البائع", + "studentPackage":"حزمة الطالب ", + "student":"الطالب" }, "message": { "some_thing_went_wrong": "حدث خطأ ما", @@ -719,7 +722,10 @@ "lesson": "الدرس", "curriculum": "مقرر", "subject": "المادة", - "question": "السؤال" + "question": "السؤال", + "studentPackage":"حزمة الطالب " + + }, "page_header": { "dashboard": "لوحة القيادة / الصفحة الرئيسية", @@ -752,6 +758,8 @@ "grade": "لوحة القيادة /الدرجات ", "curriculum": "لوحة القيادة / تعديل مقرر ", "package":"لوحة القيادة / الحزم ", - "ReSeller":"لوحة القيادة / البائع " + "reSeller":"لوحة القيادة / البائع ", + "studentPackage":"لوحة القيادة / حزمة الطالب ", + "student":"لوحة القيادة / الطالب " } } diff --git a/src/types/App.ts b/src/types/App.ts index 34aae5f..eeed13b 100644 --- a/src/types/App.ts +++ b/src/types/App.ts @@ -2,6 +2,7 @@ import { ReactElement, LazyExoticComponent, ReactNode } from "react"; import { Mark_State, Payment_type, term_type } from "./Item"; import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../enums/abilities"; import { UserTypeEnum } from "../enums/UserType"; +import dayjs from "dayjs"; export type ChildrenType = { children: ReactNode; @@ -408,3 +409,4 @@ export interface showAdmin { } export type Nullable = { [K in keyof T]: T[K] | null }; +export type DateType = string | dayjs.Dayjs | null | undefined; diff --git a/src/types/Student.ts b/src/types/Student.ts new file mode 100644 index 0000000..834ec76 --- /dev/null +++ b/src/types/Student.ts @@ -0,0 +1,51 @@ +import { Nullable } from "./App"; + +// Define the Teacher interface + + +interface StudentUser { + id: number; + username: string; + phone_number: string | null; + type: 'Student' | 'other'; // Specify other types if needed +} + +interface StudentLocation { + lat: string; + lng: string; +} + +interface ContactInfo { + contact_number1: string; + contact_number2: string; + card_number: string | null; +} + + +export interface Student { + id: number; + user: StudentUser; + first_name: string; + last_name: string; + location: StudentLocation; + contact_info: ContactInfo; + contact_number1 : string | number + contact_number2 : string | number +} + +export interface InitialValues { + id: number; + user: StudentUser; + first_name: string; + last_name: string; + location: StudentLocation; + lat: string | Number; + lng: string | Number; + contact_info: ContactInfo; + contact_number1 : string | number +contact_number2 : string | number +username : string; +password:any +} + +export type StudentInitialValues = Partial>; diff --git a/src/types/studentPackage.ts b/src/types/studentPackage.ts new file mode 100644 index 0000000..a002998 --- /dev/null +++ b/src/types/studentPackage.ts @@ -0,0 +1,54 @@ +import { TermEnum } from "../enums/Term"; +import { DateType, Nullable } from "./App"; + +// Define the type for the object + +interface StudentPackageStudent { + first_name: string; + last_name: string; + city: string | null; + sex: string | null; + image: string | null; + address: string | null; + card: string | null; + birthday: string | null; + grade_id: number; + user_id: number; +} + +interface StudentPackagePackageConfiguration { + key: string; + value: string; +} + +interface StudentPackagePackage { + id: number; + name: string; + configuration: StudentPackagePackageConfiguration[]; + price: number; + grade_id: number; +} + + + +export interface StudentPackage { + id: number; + activation_date: string; + expiration_date: string; + student: StudentPackageStudent; + package: StudentPackagePackage; +} + +export interface InitialValues { + + id: number; + activation_date: DateType; + expiration_date: DateType; + student: StudentPackageStudent; + package: StudentPackagePackage; + + student_id: number | string; + package_id: number | string; +} + +export type StudentPackageInitialValues = Partial>; diff --git a/src/utils/formateDateInitialValue.ts b/src/utils/formateDateInitialValue.ts new file mode 100644 index 0000000..6172367 --- /dev/null +++ b/src/utils/formateDateInitialValue.ts @@ -0,0 +1,10 @@ +import dayjs from "dayjs"; +import { DateType } from "../types/App"; +import { DateEnum } from "../enums/Date"; + +export const formateDateInitialValue = (date: DateType) => { + if (date) { + return dayjs(date, DateEnum.SEND_DATE_FORMAT); + } + return dayjs(Date()); +}; diff --git a/src/utils/hasAbilityFn.ts b/src/utils/hasAbilityFn.ts index 1db1b21..df0ffbd 100644 --- a/src/utils/hasAbilityFn.ts +++ b/src/utils/hasAbilityFn.ts @@ -604,3 +604,24 @@ export const canShowReSeller = hasAbility( ABILITIES_ENUM.RE_SELLER, ABILITIES_VALUES_ENUM.SHOW, ); + + +/// StudentPackage + +export const canAddStudentPackage = hasAbility( + ABILITIES_ENUM.RE_SELLER, + ABILITIES_VALUES_ENUM.STORE, +); + +export const canEditStudentPackage = hasAbility( + ABILITIES_ENUM.RE_SELLER, + ABILITIES_VALUES_ENUM.UPDATE, +); +export const canDeleteStudentPackage = hasAbility( + ABILITIES_ENUM.RE_SELLER, + ABILITIES_VALUES_ENUM.DELETE, +); +export const canShowStudentPackage = hasAbility( + ABILITIES_ENUM.RE_SELLER, + ABILITIES_VALUES_ENUM.SHOW, +);