school-dashboard-exercise/src/Pages/subject/show/Tables/Contents/lesson/Lessons.tsx
2024-07-27 14:57:06 +03:00

69 lines
2.2 KiB
TypeScript

import React from "react";
import { Lesson } from "../../../../../../types/Item";
import { Button, Space, Tooltip } from "antd";
import useModalHandler from "../../../../../../utils/useModalHandler";
import { ModalEnum } from "../../../../../../enums/Model";
import AddUnitModalForm from "./Model/AddModel";
import EditUnitModalForm from "./Model/EditModel";
import DeleteUnitModalForm from "./Model/Delete";
import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
const Lessons = ({ data, unit_id }: { data: Lesson[]; unit_id: number }) => {
const { handel_open_model } = useModalHandler();
const { setObjectToEdit } = useObjectToEdit();
const handelDelete = (item: Lesson) => {
handel_open_model(ModalEnum?.LESSON_DELETE);
setObjectToEdit(item);
};
const handleEdit = (item: Lesson) => {
// console.log(item,"event");
setObjectToEdit(item);
handel_open_model(ModalEnum?.LESSON_EDIT);
};
const handleAdd = () => {
setObjectToEdit({ unit_id: unit_id });
handel_open_model(ModalEnum?.LESSON_ADD);
};
const [t] = useTranslation();
return (
<div className="Lessons">
{data.map((lesson) => (
<div className="Lesson" key={lesson.id}>
<div>{lesson?.name}</div>
<Space size="middle">
<Tooltip
placement="top"
title={t("practical.edit")}
color="#E0E0E0"
>
<MdOutlineEdit
size={22}
style={{ color: "#A098AE" }}
onClick={(event) => handleEdit(lesson)}
/>
</Tooltip>
<RiDeleteBin6Fill
onClick={(event) => handelDelete(lesson)}
size={22}
style={{ color: "#C11313" }}
/>
</Space>
</div>
))}
<Button type="dashed" onClick={handleAdd}>
{t("header.add_new_lessons")}
</Button>
<AddUnitModalForm />
<EditUnitModalForm />
<DeleteUnitModalForm />
</div>
);
};
export default Lessons;