import {useMemo} from "react"; import {MRT_ColumnDef} from "mantine-react-table"; import {getDayOfWeek} from "../../../../../shared/lib/date.ts"; import {Box, Flex, NumberInput, rem} from "@mantine/core"; import {isNumber, last} from "lodash"; import {processSelectedCells} from "../../../../../shared/lib/interpolateCells.ts"; import {TimeTrackingData} from "../../../../../client"; import dayjs from "dayjs"; export type EmployeeData = { name: string; userId: number; totalAmount: number; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error data?: TimeTrackingData[], [key: string]: number | string; }; type Props = { month: Date; data: EmployeeData[]; onUpdate: (date: Date, userId: number, value: number) => void, selectedCells: string[]; setSelectedCells: (cells: string[]) => void selectedBoundaries: [Date | null, Date | null]; range: dayjs.Dayjs[]; } const useWorkTableColumns = ({ month, onUpdate, data, selectedCells, setSelectedCells, selectedBoundaries, range }: Props) => { const totalAmount = useMemo(() => { return data.reduce((acc, value) => { if (value.data) { const sum = value.data.reduce((innerAcc, item) => innerAcc + item.amount, 0); return acc + sum; } return acc; }, 0); }, [data, month, selectedCells, selectedBoundaries]); const getBorderStyles = (cellId: string) => { if (selectedCells.length <= 1) return {} if (selectedCells[0] === cellId) return { borderTopLeftRadius: rem(20), borderBottomLeftRadius: rem(20), } else if (last(selectedCells) === cellId) return { borderTopRightRadius: rem(20), borderBottomRightRadius: rem(20), } return {} } return useMemo[]>(() => [ { accessorKey: "name", header: "ФИО" }, ...range.map(date => ({ size: 80, accessorKey: date.date().toString(), header: date.date().toString(), enableSorting: false, enableColumnActions: false, Header: ( {date.date()} {getDayOfWeek(date.day())} ), // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error mantineTableBodyCellProps: ({cell}) => ({ style: selectedCells.includes(cell.id) ? { backgroundColor: "var(--mantine-primary-color-filled)", ...getBorderStyles(cell.id) } : {}, onClick: () => { const result = processSelectedCells(selectedCells, cell.id); setSelectedCells(result); }, }), // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error Cell: ({cell, row}) => { return ( isNumber(event) && onUpdate(date.toDate(), row.original.userId, event)} styles={{input: {textAlign: "center"}}} hideControls value={cell.renderValue()} /> ); } })), { header: "Всего часов", Cell: ({row}) => { return Object.entries(row.original).reduce((acc, [key, value]) => { if (isNaN(parseInt(key)) || !isNumber(value)) return acc; acc += value; return acc; }, 0); }, }, { accessorKey: "totalAmount", header: "Итоговая сумма заработка", Cell: ({row}) => { return (row.original.data || []).reduce((acc, value) => { acc += value.amount; return acc; }, 0); }, Footer: ( Всего: {totalAmount.toLocaleString("ru-RU")} ) }, ], [month, selectedCells, selectedBoundaries, totalAmount]); } export default useWorkTableColumns;