school-dashboard-exercise/src/Pages/Branch/Cycle/useTableColumns.tsx
2024-06-23 12:16:01 +03:00

145 lines
3.8 KiB
TypeScript

import { Space, TableColumnsType, Tooltip } from "antd";
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 {
ABILITIES_ENUM,
ABILITIES_VALUES_ENUM,
} from "../../../enums/abilities";
import { hasAbility } from "../../../utils/hasAbility";
import { Cycle } from "../../../types/App";
import { useNavigate } from "react-router-dom";
import { EyeFilled } from "@ant-design/icons";
import { BsEye, BsEyeFill, BsEyeSlash } from "react-icons/bs";
export const useColumns = () => {
const { setIsOpen } = useModalState((state) => state);
const { set_object_to_edit } = useObjectToEdit((state) => state);
const navigate = useNavigate();
const handelDelete = (record: any) => {
set_object_to_edit(record);
setIsOpen(ModalEnum?.CYCLE_DELETE);
};
const handelShow = (record: any) => {
navigate(`${record?.id}/${ABILITIES_ENUM?.TERM}`);
};
const [t] = useTranslation();
const can_edit_Cycle = hasAbility(
ABILITIES_ENUM.CYCLE,
ABILITIES_VALUES_ENUM.UPDATE,
);
const can_delete_Cycle = hasAbility(
ABILITIES_ENUM.CYCLE,
ABILITIES_VALUES_ENUM.DELETE,
);
const can_show_Cycle = hasAbility(
ABILITIES_ENUM.CYCLE,
ABILITIES_VALUES_ENUM.SHOW,
);
const columns: TableColumnsType<Cycle> = [
{
title: t("columns.id"),
dataIndex: "id",
key: "id",
align: "center",
},
{
title: t("columns.name"),
dataIndex: "name",
key: "name",
align: "center",
},
{
title: t("columns.starting_date"),
dataIndex: "starting_date",
key: "starting_date",
align: "center",
},
{
title: t("columns.ending_date"),
dataIndex: "ending_date",
key: "ending_date",
align: "center",
},
{
title: t("columns.status"),
dataIndex: "status",
key: "status",
align: "center",
render: (text, record, index) => {
if (record?.status === "active") {
return <div> نشط </div>;
}
return <div> غير نشط </div>;
},
},
{
title: "",
key: "actions",
align: "end",
width: "24vw",
render: (text, record, index) => {
const handleEdit = (record: any) => {
set_object_to_edit(record);
setIsOpen(ModalEnum?.CYCLE_EDIT);
};
const className =
index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";
return (
<Space size="middle" className={className}>
{can_edit_Cycle && (
<Tooltip
placement="top"
title={t("practical.edit")}
color="#E0E0E0"
>
<span onClick={() => handleEdit(record)}>
<MdOutlineEdit
size={22}
style={{ color: "#A098AE" }}
/>
</span>
</Tooltip>
)}
{can_delete_Cycle && (
<RiDeleteBin6Fill
onClick={() => handelDelete(record)}
size={22}
style={{ color: "#C11313" }}
/>
)}
<Tooltip
placement="top"
title={t("header.view_term_for_this_cycle")}
color="#E0E0E0"
>
<BsEyeFill
onClick={() => handelShow(record)}
size={22}
style={{ color: "green" }}
/>
</Tooltip>
</Space>
);
},
},
];
return columns;
};