110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import React from "react";
|
|
import { CaretRightOutlined } from "@ant-design/icons";
|
|
import type { CollapseProps } from "antd";
|
|
import { Button, Collapse, Space, theme, Tooltip } from "antd";
|
|
import { MdOutlineEdit } from "react-icons/md";
|
|
import { RiDeleteBin6Fill } from "react-icons/ri";
|
|
import { useGetAllUnit } from "../../../../../api/unit";
|
|
import { Unit } from "../../../../../types/Item";
|
|
import AddUnitModalForm from "./Model/AddModel";
|
|
import EditUnitModalForm from "./Model/EditModel";
|
|
import DeleteUnitModalForm from "./Model/Delete";
|
|
|
|
import useModalHandler from "../../../../../utils/useModalHandler";
|
|
import { ModalEnum } from "../../../../../enums/Model";
|
|
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
|
|
import Lessons from "./lesson/Lessons";
|
|
import { useParams } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const genExtra = (
|
|
item: Unit,
|
|
setObjectToEdit: any,
|
|
handel_open_model: any,
|
|
t: any,
|
|
) => {
|
|
const handelDelete = (event: any, item: Unit) => {
|
|
handel_open_model(ModalEnum?.UNIT_DELETE);
|
|
setObjectToEdit(item);
|
|
};
|
|
const handleEdit = (event: any, item: Unit) => {
|
|
// console.log(item,"event");
|
|
setObjectToEdit(item);
|
|
handel_open_model(ModalEnum?.UNIT_EDIT);
|
|
};
|
|
|
|
return (
|
|
<Space size="middle">
|
|
<Tooltip placement="top" title={t("practical.edit")} color="#E0E0E0">
|
|
<MdOutlineEdit
|
|
size={22}
|
|
style={{ color: "#A098AE" }}
|
|
onClick={(event) => handleEdit(event, item)}
|
|
/>
|
|
</Tooltip>
|
|
<RiDeleteBin6Fill
|
|
onClick={(event) => handelDelete(event, item)}
|
|
size={22}
|
|
style={{ color: "#C11313" }}
|
|
/>
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const { token } = theme.useToken();
|
|
const { handel_open_model } = useModalHandler();
|
|
const { setObjectToEdit } = useObjectToEdit();
|
|
const { subject_id } = useParams();
|
|
|
|
const panelStyle: React.CSSProperties = {
|
|
marginBottom: 24,
|
|
background: token.colorFillAlter,
|
|
borderRadius: token.borderRadiusLG,
|
|
border: "none",
|
|
};
|
|
const { data } = useGetAllUnit({
|
|
sub_id: subject_id,
|
|
});
|
|
const [t] = useTranslation();
|
|
|
|
const units: Unit[] = data?.data || [];
|
|
const unitsArray: (panelStyle: CSSProperties) => CollapseProps["items"] = (
|
|
panelStyle,
|
|
) =>
|
|
units?.map((item: Unit) => ({
|
|
key: String(item?.id),
|
|
label: item?.name,
|
|
children: <Lessons unit_id={item?.id} data={item?.lessons} />,
|
|
style: panelStyle,
|
|
extra: genExtra(item, setObjectToEdit, handel_open_model, t),
|
|
})) || [];
|
|
|
|
// console.log(units,"units");
|
|
|
|
return (
|
|
<div className="Unit_Page">
|
|
<Collapse
|
|
bordered={false}
|
|
expandIcon={({ isActive }) => (
|
|
<CaretRightOutlined rotate={isActive ? 90 : 0} />
|
|
)}
|
|
style={{ background: token.colorBgContainer }}
|
|
items={unitsArray(panelStyle)}
|
|
/>
|
|
<Button
|
|
type="dashed"
|
|
onClick={() => handel_open_model(ModalEnum?.UNIT_ADD)}
|
|
>
|
|
{t("header.add_new_unit")}
|
|
</Button>
|
|
<AddUnitModalForm />
|
|
<EditUnitModalForm />
|
|
<DeleteUnitModalForm />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|