diff --git a/src/pages/AdminPage/tabs/WorkTimeTable/ui/WorkTimeTable.tsx b/src/pages/AdminPage/tabs/WorkTimeTable/ui/WorkTimeTable.tsx index 07cca32..b862179 100644 --- a/src/pages/AdminPage/tabs/WorkTimeTable/ui/WorkTimeTable.tsx +++ b/src/pages/AdminPage/tabs/WorkTimeTable/ui/WorkTimeTable.tsx @@ -3,19 +3,9 @@ import { DatePickerInput, MonthPickerInput } from "@mantine/dates"; import useWorkTableState from "../hooks/useWorkTableState.tsx"; import { BaseTable } from "../../../../../components/BaseTable/BaseTable.tsx"; import { useEffect, useState } from "react"; -import useWorkTableColumns, { - EmployeeData, -} from "../hooks/useWorkTableColumns.tsx"; -import { - TimeTrackingRecord, - TimeTrackingService, - UserSchema, -} from "../../../../../client"; -import { - dateWithoutTimezone, - getDatesBetween, - getDatesInMonth, -} from "../../../../../shared/lib/date.ts"; +import useWorkTableColumns, { EmployeeData } from "../hooks/useWorkTableColumns.tsx"; +import { TimeTrackingRecord, TimeTrackingService, UserSchema } from "../../../../../client"; +import { dateWithoutTimezone, getDatesBetween, getDatesInMonth } from "../../../../../shared/lib/date.ts"; import useUsersList from "../../../hooks/useUsersList.tsx"; import { notifications } from "../../../../../shared/lib/notifications.ts"; import { PaySchemeType } from "../../../../../shared/enums/PaySchemeType.ts"; @@ -23,18 +13,19 @@ import { IconEyeOff } from "@tabler/icons-react"; import { MRT_TableOptions } from "mantine-react-table"; import { difference, omit } from "lodash"; import { strTimeToFloatHours } from "../../../../../types/utils.ts"; +import { useListState } from "@mantine/hooks"; const WorkTimeTable = () => { const [data, setData] = useState([]); const { dateBoundaries, month, setMonth, trackingRecords, refetch } = useWorkTableState(); - const [hiddenUsers, setHiddenUsers] = useState([]); + const [shownUsers, shownUsersHandlers] = useListState([]); const [selectedBoundaries, setSelectedBoundaries] = useState< [Date | null, Date | null] >([null, null]); const users = useUsersList().objects.filter( - user => user.payRate?.payrollScheme.key === PaySchemeType.HOURLY + user => user.payRate?.payrollScheme.key === PaySchemeType.HOURLY, ); const getRange = () => { @@ -49,7 +40,7 @@ const WorkTimeTable = () => { const range = getRange(); const transformTrackingRecordsToData = ( - trackingRecords: TimeTrackingRecord[] + trackingRecords: TimeTrackingRecord[], ): EmployeeData[] => { if (!month) return []; const rangeDays = range.map(r => r.date()); @@ -57,7 +48,7 @@ const WorkTimeTable = () => { trackingRecords = trackingRecords.map(tr => ({ ...tr, data: tr.data.filter(d => - rangeDays.includes(new Date(d.date).getDate()) + rangeDays.includes(new Date(d.date).getDate()), ), })); const existingUserIds = trackingRecords.map(tr => tr.user.id); @@ -70,15 +61,15 @@ const WorkTimeTable = () => { ...Object.fromEntries( getDatesInMonth(month).reduce((acc, day) => { return acc.set(day.date().toString(), 0); - }, new Map()) + }, new Map()), ), ...Object.fromEntries( record.data.reduce((acc, recordData) => { return acc.set( new Date(recordData.date).getDate().toString(), - recordData.hours + recordData.hours, ); - }, new Map()) + }, new Map()), ), })); const restUsersResult = users @@ -91,25 +82,25 @@ const WorkTimeTable = () => { ...Object.fromEntries( getDatesInMonth(month).reduce((acc, day) => { return acc.set(day.date().toString(), 0); - }, new Map()) + }, new Map()), ), })); - const hiddenUserIds = hiddenUsers.map(user => user.id); + const shownUserIds = shownUsers.map(user => user.id); const result = firstResult // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error .concat(restUsersResult) - .filter(r => !hiddenUserIds.includes(r.userId)); + .filter(r => shownUserIds.includes(r.userId)); const firstDate = selectedBoundaries[0]; const lastDate = selectedBoundaries[1]; if (firstDate && lastDate) { const allDays = getDatesInMonth(month).map(d => - d.date().toString() + d.date().toString(), ); const allowedDays = getDatesBetween(firstDate, lastDate).map(d => - d.date().toString() + d.date().toString(), ); const omitDays = difference(allDays, allowedDays); @@ -118,7 +109,7 @@ const WorkTimeTable = () => { }) as unknown as EmployeeData[]; } return (result as unknown as EmployeeData[]).sort( - (a, b) => a.userId - b.userId + (a, b) => a.userId - b.userId, ); }; @@ -153,21 +144,26 @@ const WorkTimeTable = () => { await refetch(); }); }; + const columns = useWorkTableColumns({ month, selectedBoundaries, data, onUpdate: optimisticUpdate, selectedCells: [], - setSelectedCells: () => {}, + setSelectedCells: () => { + }, range, }); + useEffect(() => { setData(transformTrackingRecordsToData(trackingRecords)); - }, [trackingRecords, hiddenUsers, selectedBoundaries]); + }, [trackingRecords, shownUsers, selectedBoundaries]); + useEffect(() => { setSelectedBoundaries([null, null]); }, [month]); + return ( { value: user.id.toString(), }))} onChange={event => - setHiddenUsers( + shownUsersHandlers.setState( users.filter(user => - event.includes(user.id.toString()) - ) + event.includes(user.id.toString()), + ), ) } - value={hiddenUsers.map(user => user.id.toString())} + value={shownUsers.map(user => user.id.toString())} placeholder={ - hiddenUsers.length > 0 ? "" : "Скрытые пользователи" + shownUsers.length > 0 ? "" : "Показанные пользователи" } /> @@ -232,16 +228,9 @@ const WorkTimeTable = () => { { - const user = users.find( - user => - user.id === - row.original.userId + shownUsersHandlers.filter( + user => user.id !== row.original.userId, ); - if (!user) return; - setHiddenUsers(prevState => [ - ...prevState, - user, - ]); }} variant={"default"}>