feat: work shift pauses

2024-12-04 11:02:32 +04:00
parent 900427275f
commit 1795cacc5b
15 changed files with 306 additions and 81 deletions
--- a/src/pages/AdminPage/tabs/WorkShifts/components/ShiftsTable.tsx
+++ b/src/pages/AdminPage/tabs/WorkShifts/components/ShiftsTable.tsx
@@ -1,17 +1,18 @@
 import { BaseTable } from "../../../../../components/BaseTable/BaseTable.tsx";
 import { useShiftsTableColumns } from "../hooks/columns.tsx";
 import { ActionIcon, Flex, Text, Tooltip } from "@mantine/core";
-import { IconCheck, IconTrash } from "@tabler/icons-react";
-import { WorkShiftSchema, WorkShiftsService } from "../../../../../client";
+import { IconCheck, IconPlayerPause, IconPlayerPlay, IconTrash } from "@tabler/icons-react";
+import { WorkShiftRowSchema, WorkShiftsService } from "../../../../../client";
 import { modals } from "@mantine/modals";
 import { formatDate } from "../../../../../types/utils.ts";
-import { MRT_TableOptions } from "mantine-react-table";
+import { MRT_Row, MRT_TableOptions } from "mantine-react-table";
 import { notifications } from "../../../../../shared/lib/notifications.ts";
 import { ShiftsTableType } from "../../../components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx";
+import { ReactNode } from "react";


 type Props = {
-    shifts: WorkShiftSchema[];
+    shifts: WorkShiftRowSchema[];
    fetchShifts: () => void;
    shiftsTableType: ShiftsTableType;
 }
@@ -24,9 +25,9 @@ export const ShiftsTable = ({
    const isActiveShiftsTable = shiftsTableType === ShiftsTableType.ACTIVE;
    const columns = useShiftsTableColumns({ isActiveShiftsTable });

-    const onDelete = (workShift: WorkShiftSchema) => {
+    const onDelete = (workShiftRow: WorkShiftRowSchema) => {
        WorkShiftsService.deleteWorkShift({
-            shiftId: workShift.id,
+            shiftId: workShiftRow.workShift.id,
        })
            .then(({ ok, message }) => {
                notifications.guess(ok, { message });
@@ -35,25 +36,25 @@ export const ShiftsTable = ({
            .catch(err => console.log(err));
    };

-    const onDeleteClick = (workShift: WorkShiftSchema) => {
+    const onDeleteClick = (workShiftRow: WorkShiftRowSchema) => {
        modals.openConfirmModal({
            title: "Удаление смены",
            children: (
                <Text size="sm">
                    Вы уверены что хотите удалить смену работника{" "}
-                    {workShift.user.firstName} {workShift.user.secondName} от{" "}
-                    {formatDate(workShift.startedAt)}
+                    {workShiftRow.workShift.user.firstName} {workShiftRow.workShift.user.secondName} от{" "}
+                    {formatDate(workShiftRow.workShift.startedAt)}
                </Text>
            ),
            labels: { confirm: "Да", cancel: "Нет" },
            confirmProps: { color: "red" },
-            onConfirm: () => onDelete(workShift),
+            onConfirm: () => onDelete(workShiftRow),
        });
    };

-    const onShiftFinish = (workShift: WorkShiftSchema) => {
+    const onShiftFinish = (workShiftRow: WorkShiftRowSchema) => {
        WorkShiftsService.finishWorkShiftById({
-            shiftId: workShift.id,
+            shiftId: workShiftRow.workShift.id,
        })
            .then(({ ok, message }) => {
                notifications.guess(ok, { message });
@@ -62,22 +63,95 @@ export const ShiftsTable = ({
            .catch(err => console.log(err));
    };

-    const onShiftFinishClick = (workShift: WorkShiftSchema) => {
+    const onShiftFinishClick = (workShiftRow: WorkShiftRowSchema) => {
        modals.openConfirmModal({
            title: "Завершение смены",
            children: (
                <Text size="sm">
                    Вы уверены что хотите завершить смену работника{" "}
-                    {workShift.user.firstName} {workShift.user.secondName} от{" "}
-                    {formatDate(workShift.startedAt)}
+                    {workShiftRow.workShift.user.firstName} {workShiftRow.workShift.user.secondName} от{" "}
+                    {formatDate(workShiftRow.workShift.startedAt)}
                </Text>
            ),
            labels: { confirm: "Да", cancel: "Нет" },
            confirmProps: { color: "red" },
-            onConfirm: () => onShiftFinish(workShift),
+            onConfirm: () => onShiftFinish(workShiftRow),
        });
    };

+    const onShiftPauseClick = (workShiftRow: WorkShiftRowSchema) => {
+        WorkShiftsService.startPauseByShiftId({
+            shiftId: workShiftRow.workShift.id,
+        })
+            .then(({ ok, message }) => {
+                notifications.guess(ok, { message });
+                fetchShifts();
+            })
+            .catch(err => console.log(err));
+    };
+
+    const onShiftResumeClick = (workShiftRow: WorkShiftRowSchema) => {
+        WorkShiftsService.finishPauseByShiftId({
+            shiftId: workShiftRow.workShift.id,
+        })
+            .then(({ ok, message }) => {
+                notifications.guess(ok, { message });
+                fetchShifts();
+            })
+            .catch(err => console.log(err));
+    };
+
+    const getAction = (
+        label: string,
+        func: () => void,
+        icon: ReactNode,
+    ) => {
+        return (
+            <Tooltip label={label}>
+                <ActionIcon
+                    onClick={func}
+                    variant={"default"}>
+                    {icon}
+                </ActionIcon>
+            </Tooltip>
+        );
+    };
+
+    const getRowActions = (row: MRT_Row<WorkShiftRowSchema>) => {
+        const actions = [
+            getAction("Удалить", () => onDeleteClick(row.original), <IconTrash />),
+        ];
+
+        if (isActiveShiftsTable) {
+            actions.push(
+                getAction(
+                    "Завершить смену",
+                    () => onShiftFinishClick(row.original),
+                    <IconCheck />,
+                ),
+            );
+            if (row.original.workShift.isPaused) {
+                actions.push(
+                    getAction(
+                        "Продолжить смену",
+                        () => onShiftResumeClick(row.original),
+                        <IconPlayerPlay />,
+                    ),
+                );
+            } else {
+                actions.push(
+                    getAction(
+                        "Поставить смену на паузу",
+                        () => onShiftPauseClick(row.original),
+                        <IconPlayerPause />,
+                    ),
+                );
+            }
+        }
+
+        return actions;
+    };
+
    return (
        <BaseTable
            data={shifts}
@@ -90,30 +164,11 @@ export const ShiftsTable = ({
                    renderRowActions: ({ row }) => {
                        return (
                            <Flex gap="md">
-                                <Tooltip label="Удалить">
-                                    <ActionIcon
-                                        onClick={() =>
-                                            onDeleteClick(row.original)
-                                        }
-                                        variant={"default"}>
-                                        <IconTrash />
-                                    </ActionIcon>
-                                </Tooltip>
-                                {isActiveShiftsTable && (
-                                    <Tooltip label="Завершить смену">
-                                        <ActionIcon
-                                            onClick={() =>
-                                                onShiftFinishClick(row.original)
-                                            }
-                                            variant={"default"}>
-                                            <IconCheck />
-                                        </ActionIcon>
-                                    </Tooltip>
-                                )}
+                                {...getRowActions(row)}
                            </Flex>
                        );
                    },
-                } as MRT_TableOptions<WorkShiftSchema>
+                } as MRT_TableOptions<WorkShiftRowSchema>
            }
        />
    );
--- a/src/pages/AdminPage/tabs/WorkShifts/components/WorkShiftInput.tsx
+++ b/src/pages/AdminPage/tabs/WorkShifts/components/WorkShiftInput.tsx
@@ -9,6 +9,8 @@ const WorkShiftInput = ({ fetchShifts }: Props) => {
    const {
        onShiftStart,
        onShiftFinish,
+        onShiftResume,
+        onShiftPause,
    } = useWorkShiftInput({ fetchShifts });

    return (
@@ -19,6 +21,12 @@ const WorkShiftInput = ({ fetchShifts }: Props) => {
            <Button variant={"default"} onClick={onShiftFinish}>
                Закончить смену
            </Button>
+            <Button variant={"default"} onClick={onShiftPause}>
+                Начать перерыв
+            </Button>
+            <Button variant={"default"} onClick={onShiftResume}>
+                Закончить перерыв
+            </Button>
        </Group>
    );
 };
--- a/src/pages/AdminPage/tabs/WorkShifts/hooks/columns.tsx
+++ b/src/pages/AdminPage/tabs/WorkShifts/hooks/columns.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { MRT_ColumnDef, MRT_Row } from "mantine-react-table";
-import { WorkShiftSchema } from "../../../../../client";
+import { WorkShiftRowSchema } from "../../../../../client";


 type Props = {
@@ -8,12 +8,9 @@ type Props = {
 }

 export const useShiftsTableColumns = ({ isActiveShiftsTable }: Props) => {
-    const getWorkedHoursString = (startedAtStr: string, finishedAtStr: string) => {
-        const finishedAt = new Date(finishedAtStr);
-        const startedAt = new Date(startedAtStr);
-        const diff: number = finishedAt.getTime() - startedAt.getTime();
-        const hours = Math.floor(diff / 3_600_000);
-        const minutes = Math.round(diff % 3_600_000 / 60_000);
+    const getWorkedHoursString = (seconds: number) => {
+        const hours = Math.floor(seconds / 3_600);
+        const minutes = Math.floor(seconds % 3_600 / 60);
        if (hours === 0) {
            return `${minutes} мин.`;
        }
@@ -24,38 +21,50 @@ export const useShiftsTableColumns = ({ isActiveShiftsTable }: Props) => {
        return isActiveShiftsTable ? [] : [
            {
                header: "Конец смены",
-                accessorKey: "finishedAt",
-                Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
-                    row.original.finishedAt && new Date(row.original.finishedAt).toLocaleString("ru-RU"),
+                accessorKey: "workShift.finishedAt",
+                Cell: ({ row }: { row: MRT_Row<WorkShiftRowSchema> }) =>
+                    row.original.workShift.finishedAt && new Date(row.original.workShift.finishedAt).toLocaleString("ru-RU"),
+            },
+            {
+                header: "Длительность смены",
+                accessorKey: "totalHours",
+                Cell: ({ row }: { row: MRT_Row<WorkShiftRowSchema> }) =>
+                    getWorkedHoursString(row.original.totalHours ?? 0),
+            },
+            {
+                header: "Перерывы",
+                accessorKey: "pauseHours",
+                Cell: ({ row }: { row: MRT_Row<WorkShiftRowSchema> }) =>
+                    getWorkedHoursString(row.original.pauseHours ?? 0),
            },
            {
                header: "Отработано",
-                Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
-                    getWorkedHoursString(row.original.startedAt, row.original.finishedAt ?? ""),
+                Cell: ({ row }: { row: MRT_Row<WorkShiftRowSchema> }) =>
+                    getWorkedHoursString((row.original.totalHours ?? 0) - (row.original.pauseHours ?? 0)),
            },
-        ];
+        ] as MRT_ColumnDef<WorkShiftRowSchema>[];
    };

-    return useMemo<MRT_ColumnDef<WorkShiftSchema>[]>(
+    return useMemo<MRT_ColumnDef<WorkShiftRowSchema>[]>(
        () => [
            {
                header: "ФИО",
-                Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
-                    `${row.original.user.firstName} ${row.original.user.secondName}`,
+                Cell: ({ row }: { row: MRT_Row<WorkShiftRowSchema> }) =>
+                    `${row.original.workShift.user.firstName} ${row.original.workShift.user.secondName}`,
            },
            {
                header: "Роль",
-                accessorKey: "user.role.name",
+                accessorKey: "workShift.user.role.name",
            },
            {
                header: "Должность",
-                accessorKey: "user.position.name",
+                accessorKey: "workShift.user.position.name",
            },
            {
                header: "Начало смены",
-                accessorKey: "startedAt",
+                accessorKey: "workShift.startedAt",
                Cell: ({ row }) =>
-                    new Date(row.original.startedAt).toLocaleString("ru-RU"),
+                    new Date(row.original.workShift.startedAt).toLocaleString("ru-RU"),
            },
            ...getColumnsForHistory(),
        ],
--- a/src/pages/AdminPage/tabs/WorkShifts/hooks/useWorkShiftInput.tsx
+++ b/src/pages/AdminPage/tabs/WorkShifts/hooks/useWorkShiftInput.tsx
@@ -6,8 +6,22 @@ type Props = {
    fetchShifts: () => void;
 }

+enum InputType {
+    START_SHIFT,
+    FINISH_SHIFT,
+    RESUME_SHIFT,
+    PAUSE_SHIFT,
+}
+
 const useWorkShiftInput = ({ fetchShifts }: Props) => {
-    let inputType: "StartShift" | "FinishShift" = "StartShift";
+    let inputType: InputType = InputType.START_SHIFT;
+
+    const workShiftMethods = {
+        [InputType.START_SHIFT]: WorkShiftsService.startShift,
+        [InputType.FINISH_SHIFT]: WorkShiftsService.finishShift,
+        [InputType.RESUME_SHIFT]: WorkShiftsService.finishPauseByUserId,
+        [InputType.PAUSE_SHIFT]: WorkShiftsService.startPauseByUserId,
+    };

    const onInputFinish = (userIdInput: string) => {
        const userId = parseInt(userIdInput);
@@ -16,21 +30,7 @@ const useWorkShiftInput = ({ fetchShifts }: Props) => {
            return;
        }

-        if (inputType === "StartShift") {
-            WorkShiftsService.startShift({
-                userId: userId!,
-            })
-                .then(async ({ ok, message }) => {
-                    notifications.guess(ok, { message });
-                    fetchShifts();
-                })
-                .catch(err => console.log(err));
-            return;
-        }
-
-        WorkShiftsService.finishShift({
-            userId: userId!,
-        })
+        workShiftMethods[inputType]({ userId })
            .then(async ({ ok, message }) => {
                notifications.guess(ok, { message });
                fetchShifts();
@@ -51,18 +51,30 @@ const useWorkShiftInput = ({ fetchShifts }: Props) => {
    };

    const onShiftStart = () => {
-        inputType = "StartShift";
+        inputType = InputType.START_SHIFT;
        onScanningStart();
    };

    const onShiftFinish = () => {
-        inputType = "FinishShift";
+        inputType = InputType.FINISH_SHIFT;
+        onScanningStart();
+    };
+
+    const onShiftResume = () => {
+        inputType = InputType.RESUME_SHIFT;
+        onScanningStart();
+    };
+
+    const onShiftPause = () => {
+        inputType = InputType.PAUSE_SHIFT;
        onScanningStart();
    };

    return {
        onShiftStart,
        onShiftFinish,
+        onShiftResume,
+        onShiftPause,
    };
 };

--- a/src/pages/AdminPage/tabs/WorkShifts/hooks/useWorkShiftsTable.tsx
+++ b/src/pages/AdminPage/tabs/WorkShifts/hooks/useWorkShiftsTable.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
-import { WorkShiftSchema, WorkShiftsService } from "../../../../../client";
+import { WorkShiftRowSchema, WorkShiftsService } from "../../../../../client";
 import { ShiftsTableType } from "../../../components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx";


 const useWorkShiftsTable = () => {
    const [totalPages, setTotalPages] = useState(1);
    const [page, setPage] = useState(1);
-    const [shifts, setShifts] = useState<WorkShiftSchema[]>([]);
+    const [shifts, setShifts] = useState<WorkShiftRowSchema[]>([]);
    const [shiftsTableType, setShiftsTableType] = useState<ShiftsTableType>(ShiftsTableType.ACTIVE);
    const [isLoading, setIsLoading] = useState(false);

@@ -18,6 +18,7 @@ const useWorkShiftsTable = () => {
            itemsPerPage: 10,
        })
            .then(res => {
+                console.log(res.shifts);
                setShifts(res.shifts);
                setTotalPages(res.paginationInfo.totalPages);
            })