bachphan04 / 123

123

Updated 5 weeks ago

No models have been pushed.

Readme

import type { ColumnsType } from “antd/es/table”
import React from “react”

import Table from “@/common/Table/Table”
import TableButtonsGroup from “@/common/TableButtonGroup/TableButtonGroup”
import { TableButtonAction } from “@/common/TableButtonGroup/TableButtonGroup.types”
import Text from “@/common/Text/Text”
import LeaveOfAbsenceApproveStatus from “@/pages/LeaveOfAbsence/LeaveOfAbsenceApproveStatus/LeaveOfAbsenceApproveStatus”
import { vars } from “@/styles/vars”
import { DEFAULT_TABLE_PAGE_SIZE, LEAVE_REASON_OPTIONS_PROPS } from “@/utils/constants”

import type { LeaveOfAbsenceRecord } from “../LeaveOfAbsence.types”

type LeaveListTableProps = {
data: LeaveOfAbsenceRecord[]
handleChangePage: (value: number) => void
page: number
totalRecords: number
isLoading: boolean
}

const LeaveOfAbsenceListTable = ({
data,
handleChangePage,
page,
totalRecords,
isLoading,
}: LeaveListTableProps) => {
const getActionButtons = (status: string) => {
switch (status) {
case “Pending”:
return [
{
type: TableButtonAction.Approve,
onClick: () => “abc”,
},
]
case “Approved”:
return [
{
type: TableButtonAction.View,
onClick: () => “abc”,
},
{
type: TableButtonAction.Clear,
onClick: () => “abc”,
},
]
case “Rejected”:
case “Canceled”:
return [
{
type: TableButtonAction.View,
onClick: () => “abc”,
},
]
default:
return []
}
}

const columns: ColumnsType = [
{
title: Ngày bắt đầu,
width: “15%”,
align: “center”,
render: (record: LeaveOfAbsenceRecord) => <>{record?.startDate}</>,
},
{
title: Ngày kết thúc,
width: “15%”,
align: “center”,
render: (record: LeaveOfAbsenceRecord) => <>{record?.endDate}</>,
},
{
title: Tổng nghỉ,
width: “10%”,
align: “center”,
render: (record: LeaveOfAbsenceRecord) => (
<>{record?.totalPaidLeaveDays + record?.totalUnpaidLeaveDays}</>
),
},
{
title: Nhân sự,
width: “15%”,
render: (record: LeaveOfAbsenceRecord) => <>{record?.requester?.name}</>,
},
{
title: Lý do,
width: “20%”,
render: (record: LeaveOfAbsenceRecord) => (
<>{LEAVE_REASON_OPTIONS_PROPS[record?.reason]?.label ?? “-”}</>
),
},

{
  title: <Text color={vars.colors.neutral.darkActive}>Trạng thái</Text>,
  width: "10%",
  align: "center",
  render: (record: LeaveOfAbsenceRecord) => (
    <>
      {record?.approvalStatus ? (
        <LeaveOfAbsenceApproveStatus status={record.approvalStatus} />
      ) : (
        "-"
      )}
    </>
  ),
},
{
  title: <Text color={vars.colors.neutral.darkActive}>Thao tác</Text>,
  align: "center",
  render: (record: LeaveOfAbsenceRecord) => {
    const actionButtons = getActionButtons(record.approvalStatus || "")
    return (
      <div style={{ display: "flex", justifyContent: "center", gap: "8px" }}>
        {actionButtons.map((button, index) => (
          <TableButtonsGroup key={index} buttons={[button]} />
        ))}
      </div>
    )
  },
},

]

return (

)
}

export default LeaveOfAbsenceListTable