feat: work shifts history
This commit is contained in:
@@ -7,8 +7,6 @@ export { CancelablePromise, CancelError } from './core/CancelablePromise';
|
|||||||
export { OpenAPI } from './core/OpenAPI';
|
export { OpenAPI } from './core/OpenAPI';
|
||||||
export type { OpenAPIConfig } from './core/OpenAPI';
|
export type { OpenAPIConfig } from './core/OpenAPI';
|
||||||
|
|
||||||
export type { ActiveWorkShiftSchema } from './models/ActiveWorkShiftSchema';
|
|
||||||
export type { ActiveWorkShiftsResponse } from './models/ActiveWorkShiftsResponse';
|
|
||||||
export type { AuthLoginRequest } from './models/AuthLoginRequest';
|
export type { AuthLoginRequest } from './models/AuthLoginRequest';
|
||||||
export type { AuthLoginResponse } from './models/AuthLoginResponse';
|
export type { AuthLoginResponse } from './models/AuthLoginResponse';
|
||||||
export type { BarcodeAttributeSchema } from './models/BarcodeAttributeSchema';
|
export type { BarcodeAttributeSchema } from './models/BarcodeAttributeSchema';
|
||||||
@@ -187,6 +185,7 @@ export type { GetProfitTableDataResponse } from './models/GetProfitTableDataResp
|
|||||||
export type { GetServiceKitSchema } from './models/GetServiceKitSchema';
|
export type { GetServiceKitSchema } from './models/GetServiceKitSchema';
|
||||||
export type { GetTimeTrackingRecordsRequest } from './models/GetTimeTrackingRecordsRequest';
|
export type { GetTimeTrackingRecordsRequest } from './models/GetTimeTrackingRecordsRequest';
|
||||||
export type { GetTimeTrackingRecordsResponse } from './models/GetTimeTrackingRecordsResponse';
|
export type { GetTimeTrackingRecordsResponse } from './models/GetTimeTrackingRecordsResponse';
|
||||||
|
export type { GetWorkShiftsResponse } from './models/GetWorkShiftsResponse';
|
||||||
export type { GroupBillRequestSchema } from './models/GroupBillRequestSchema';
|
export type { GroupBillRequestSchema } from './models/GroupBillRequestSchema';
|
||||||
export type { HTTPValidationError } from './models/HTTPValidationError';
|
export type { HTTPValidationError } from './models/HTTPValidationError';
|
||||||
export type { MarketplaceCreateSchema } from './models/MarketplaceCreateSchema';
|
export type { MarketplaceCreateSchema } from './models/MarketplaceCreateSchema';
|
||||||
@@ -275,6 +274,7 @@ export type { UserCreate } from './models/UserCreate';
|
|||||||
export type { UserSchema } from './models/UserSchema';
|
export type { UserSchema } from './models/UserSchema';
|
||||||
export type { UserUpdate } from './models/UserUpdate';
|
export type { UserUpdate } from './models/UserUpdate';
|
||||||
export type { ValidationError } from './models/ValidationError';
|
export type { ValidationError } from './models/ValidationError';
|
||||||
|
export type { WorkShiftSchema } from './models/WorkShiftSchema';
|
||||||
|
|
||||||
export { AuthService } from './services/AuthService';
|
export { AuthService } from './services/AuthService';
|
||||||
export { BarcodeService } from './services/BarcodeService';
|
export { BarcodeService } from './services/BarcodeService';
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
/* generated using openapi-typescript-codegen -- do not edit */
|
|
||||||
/* istanbul ignore file */
|
|
||||||
/* tslint:disable */
|
|
||||||
/* eslint-disable */
|
|
||||||
import type { ActiveWorkShiftSchema } from './ActiveWorkShiftSchema';
|
|
||||||
export type ActiveWorkShiftsResponse = {
|
|
||||||
shifts: Array<ActiveWorkShiftSchema>;
|
|
||||||
};
|
|
||||||
|
|
||||||
11
src/client/models/GetWorkShiftsResponse.ts
Normal file
11
src/client/models/GetWorkShiftsResponse.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/* generated using openapi-typescript-codegen -- do not edit */
|
||||||
|
/* istanbul ignore file */
|
||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
import type { PaginationInfoSchema } from './PaginationInfoSchema';
|
||||||
|
import type { WorkShiftSchema } from './WorkShiftSchema';
|
||||||
|
export type GetWorkShiftsResponse = {
|
||||||
|
shifts: Array<WorkShiftSchema>;
|
||||||
|
paginationInfo: PaginationInfoSchema;
|
||||||
|
};
|
||||||
|
|
||||||
@@ -3,9 +3,11 @@
|
|||||||
/* tslint:disable */
|
/* tslint:disable */
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import type { UserSchema } from './UserSchema';
|
import type { UserSchema } from './UserSchema';
|
||||||
export type ActiveWorkShiftSchema = {
|
export type WorkShiftSchema = {
|
||||||
id: number;
|
id: number;
|
||||||
startedAt: string;
|
startedAt: string;
|
||||||
|
finishedAt?: (string | null);
|
||||||
|
hours?: (number | null);
|
||||||
user: UserSchema;
|
user: UserSchema;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -2,10 +2,10 @@
|
|||||||
/* istanbul ignore file */
|
/* istanbul ignore file */
|
||||||
/* tslint:disable */
|
/* tslint:disable */
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import type { ActiveWorkShiftsResponse } from '../models/ActiveWorkShiftsResponse';
|
|
||||||
import type { DeleteShiftResponse } from '../models/DeleteShiftResponse';
|
import type { DeleteShiftResponse } from '../models/DeleteShiftResponse';
|
||||||
import type { FinishShiftByIdResponse } from '../models/FinishShiftByIdResponse';
|
import type { FinishShiftByIdResponse } from '../models/FinishShiftByIdResponse';
|
||||||
import type { FinishShiftResponse } from '../models/FinishShiftResponse';
|
import type { FinishShiftResponse } from '../models/FinishShiftResponse';
|
||||||
|
import type { GetWorkShiftsResponse } from '../models/GetWorkShiftsResponse';
|
||||||
import type { StartShiftResponse } from '../models/StartShiftResponse';
|
import type { StartShiftResponse } from '../models/StartShiftResponse';
|
||||||
import type { CancelablePromise } from '../core/CancelablePromise';
|
import type { CancelablePromise } from '../core/CancelablePromise';
|
||||||
import { OpenAPI } from '../core/OpenAPI';
|
import { OpenAPI } from '../core/OpenAPI';
|
||||||
@@ -96,14 +96,32 @@ export class WorkShiftsService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Get Active Shifts
|
* Get Shifts
|
||||||
* @returns ActiveWorkShiftsResponse Successful Response
|
* @returns GetWorkShiftsResponse Successful Response
|
||||||
* @throws ApiError
|
* @throws ApiError
|
||||||
*/
|
*/
|
||||||
public static getActiveShifts(): CancelablePromise<ActiveWorkShiftsResponse> {
|
public static getShifts({
|
||||||
|
isActive,
|
||||||
|
page,
|
||||||
|
itemsPerPage,
|
||||||
|
}: {
|
||||||
|
isActive: boolean,
|
||||||
|
page?: (number | null),
|
||||||
|
itemsPerPage?: (number | null),
|
||||||
|
}): CancelablePromise<GetWorkShiftsResponse> {
|
||||||
return __request(OpenAPI, {
|
return __request(OpenAPI, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
url: '/work-shifts/get-active-shifts',
|
url: '/work-shifts/get-shifts/{is_active}',
|
||||||
|
path: {
|
||||||
|
'is_active': isActive,
|
||||||
|
},
|
||||||
|
query: {
|
||||||
|
'page': page,
|
||||||
|
'items_per_page': itemsPerPage,
|
||||||
|
},
|
||||||
|
errors: {
|
||||||
|
422: `Validation Error`,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,116 +0,0 @@
|
|||||||
import { BaseTable } from "../../../../components/BaseTable/BaseTable.tsx";
|
|
||||||
import { useActiveShiftsTableColumns } from "./columns.tsx";
|
|
||||||
import { ActionIcon, Flex, Stack, Text, Title, Tooltip } from "@mantine/core";
|
|
||||||
import { IconCheck, IconTrash } from "@tabler/icons-react";
|
|
||||||
import { ActiveWorkShiftSchema, WorkShiftsService } from "../../../../client";
|
|
||||||
import { modals } from "@mantine/modals";
|
|
||||||
import { formatDate } from "../../../../types/utils.ts";
|
|
||||||
import { MRT_TableOptions } from "mantine-react-table";
|
|
||||||
import { notifications } from "../../../../shared/lib/notifications.ts";
|
|
||||||
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
activeShifts: ActiveWorkShiftSchema[];
|
|
||||||
fetchActiveShifts: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ActiveShiftsTable = ({ activeShifts, fetchActiveShifts }: Props) => {
|
|
||||||
const columns = useActiveShiftsTableColumns();
|
|
||||||
|
|
||||||
const onDelete = (workShift: ActiveWorkShiftSchema) => {
|
|
||||||
WorkShiftsService.deleteWorkShift({
|
|
||||||
shiftId: workShift.id,
|
|
||||||
})
|
|
||||||
.then(({ ok, message }) => {
|
|
||||||
notifications.guess(ok, { message });
|
|
||||||
fetchActiveShifts();
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDeleteClick = (workShift: ActiveWorkShiftSchema) => {
|
|
||||||
modals.openConfirmModal({
|
|
||||||
title: "Удаление записи о начале смены",
|
|
||||||
children: (
|
|
||||||
<Text size="sm">
|
|
||||||
Вы уверены что хотите удалить запись о начале смены работника{" "}
|
|
||||||
{workShift.user.firstName} {workShift.user.secondName} от{" "}
|
|
||||||
{formatDate(workShift.startedAt)}
|
|
||||||
</Text>
|
|
||||||
),
|
|
||||||
labels: { confirm: "Да", cancel: "Нет" },
|
|
||||||
confirmProps: { color: "red" },
|
|
||||||
onConfirm: () => onDelete(workShift),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onShiftFinish = (workShift: ActiveWorkShiftSchema) => {
|
|
||||||
WorkShiftsService.finishWorkShiftById({
|
|
||||||
shiftId: workShift.id,
|
|
||||||
})
|
|
||||||
.then(({ ok, message }) => {
|
|
||||||
notifications.guess(ok, { message });
|
|
||||||
fetchActiveShifts();
|
|
||||||
})
|
|
||||||
.catch(err => console.log(err));
|
|
||||||
}
|
|
||||||
|
|
||||||
const onShiftFinishClick = (workShift: ActiveWorkShiftSchema) => {
|
|
||||||
modals.openConfirmModal({
|
|
||||||
title: "Завершение смены",
|
|
||||||
children: (
|
|
||||||
<Text size="sm">
|
|
||||||
Вы уверены что хотите завершить смену работника{" "}
|
|
||||||
{workShift.user.firstName} {workShift.user.secondName} от{" "}
|
|
||||||
{formatDate(workShift.startedAt)}
|
|
||||||
</Text>
|
|
||||||
),
|
|
||||||
labels: { confirm: "Да", cancel: "Нет" },
|
|
||||||
confirmProps: { color: "red" },
|
|
||||||
onConfirm: () => onShiftFinish(workShift),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Stack mx={"xs"}>
|
|
||||||
<Title order={4} mt={"md"}>
|
|
||||||
Активные смены
|
|
||||||
</Title>
|
|
||||||
<BaseTable
|
|
||||||
data={activeShifts}
|
|
||||||
columns={columns}
|
|
||||||
restProps={
|
|
||||||
{
|
|
||||||
enableRowActions: true,
|
|
||||||
enableSorting: true,
|
|
||||||
enableColumnActions: false,
|
|
||||||
renderRowActions: ({ row }) => (
|
|
||||||
<Flex gap="md">
|
|
||||||
<Tooltip label="Удалить">
|
|
||||||
<ActionIcon
|
|
||||||
onClick={() =>
|
|
||||||
onDeleteClick(row.original)
|
|
||||||
}
|
|
||||||
variant={"default"}>
|
|
||||||
<IconTrash />
|
|
||||||
</ActionIcon>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip label="Завершить смену">
|
|
||||||
<ActionIcon
|
|
||||||
onClick={() =>
|
|
||||||
onShiftFinishClick(row.original)
|
|
||||||
}
|
|
||||||
variant={"default"}>
|
|
||||||
<IconCheck />
|
|
||||||
</ActionIcon>
|
|
||||||
</Tooltip>
|
|
||||||
</Flex>
|
|
||||||
),
|
|
||||||
} as MRT_TableOptions<ActiveWorkShiftSchema>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
import { MRT_ColumnDef } from "mantine-react-table";
|
|
||||||
import { ActiveWorkShiftSchema } from "../../../../client";
|
|
||||||
|
|
||||||
export const useActiveShiftsTableColumns = () => {
|
|
||||||
return useMemo<MRT_ColumnDef<ActiveWorkShiftSchema>[]>(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
header: "Начало смены",
|
|
||||||
accessorKey: "startedAt",
|
|
||||||
Cell: ({ row }) =>
|
|
||||||
new Date(row.original.startedAt).toLocaleString("ru-RU"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "ФИО",
|
|
||||||
Cell: ({ row }) =>
|
|
||||||
`${row.original.user.firstName} ${row.original.user.secondName}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "Роль",
|
|
||||||
accessorKey: "user.role.name",
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "Должность",
|
|
||||||
accessorKey: "user.position.name",
|
|
||||||
enableSorting: false,
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
|
||||||
|
import { FC } from "react";
|
||||||
|
|
||||||
|
export enum ShiftsTableType {
|
||||||
|
ACTIVE,
|
||||||
|
HISTORY,
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = Omit<SegmentedControlProps, "data">;
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
label: "Активные смены",
|
||||||
|
value: ShiftsTableType.ACTIVE.toString(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Завершенные смены",
|
||||||
|
value: ShiftsTableType.HISTORY.toString(),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const ShiftsTableSegmentedControl: FC<Props> = props => {
|
||||||
|
return (
|
||||||
|
<SegmentedControl
|
||||||
|
data={data}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,91 +1,52 @@
|
|||||||
import { Button, Group, Stack } from "@mantine/core";
|
import { Divider, Flex, Pagination, rem, Skeleton, Stack } from "@mantine/core";
|
||||||
import { ActiveWorkShiftSchema, WorkShiftsService } from "../../../../client";
|
import { ShiftsTable } from "./components/ShiftsTable.tsx";
|
||||||
import { useEffect, useState } from "react";
|
import {
|
||||||
import { notifications } from "../../../../shared/lib/notifications.ts";
|
ShiftsTableSegmentedControl,
|
||||||
import { modals } from "@mantine/modals";
|
} from "../../components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx";
|
||||||
import { ActiveShiftsTable } from "../../components/ActiveShiftsTable/ActiveShiftsTable.tsx";
|
import useWorkShiftsTable from "./hooks/useWorkShiftsTable.tsx";
|
||||||
|
import WorkShiftInput from "./components/WorkShiftInput.tsx";
|
||||||
|
|
||||||
export const WorkShiftsTab = () => {
|
export const WorkShiftsTab = () => {
|
||||||
let inputType: "StartShift" | "FinishShift" = "StartShift";
|
const {
|
||||||
const [activeShifts, setActiveShifts] = useState<ActiveWorkShiftSchema[]>([]);
|
shifts,
|
||||||
|
shiftsTableType,
|
||||||
const fetchActiveShifts = () => {
|
setShiftsTableType,
|
||||||
WorkShiftsService.getActiveShifts()
|
totalPages,
|
||||||
.then(res => {
|
page,
|
||||||
setActiveShifts(res.shifts);
|
setPage,
|
||||||
})
|
fetchShifts,
|
||||||
.catch(err => console.log(err));
|
isLoading,
|
||||||
}
|
} = useWorkShiftsTable();
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchActiveShifts();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onInputFinish = (userIdInput: string) => {
|
|
||||||
const userId = parseInt(userIdInput);
|
|
||||||
if (isNaN(userId)) {
|
|
||||||
notifications.error({ message: "Ошибка, некорректные данные в QR-коде" });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (inputType === "StartShift") {
|
|
||||||
WorkShiftsService.startShift({
|
|
||||||
userId: userId!,
|
|
||||||
})
|
|
||||||
.then(async ({ ok, message }) => {
|
|
||||||
notifications.guess(ok, { message });
|
|
||||||
fetchActiveShifts();
|
|
||||||
})
|
|
||||||
.catch(err => console.log(err));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
WorkShiftsService.finishShift({
|
|
||||||
userId: userId!,
|
|
||||||
})
|
|
||||||
.then(async ({ ok, message }) => {
|
|
||||||
notifications.guess(ok, { message });
|
|
||||||
fetchActiveShifts();
|
|
||||||
})
|
|
||||||
.catch(err => console.log(err));
|
|
||||||
};
|
|
||||||
|
|
||||||
const onScanningStart = () => {
|
|
||||||
modals.openContextModal({
|
|
||||||
modal: "scanningModal",
|
|
||||||
innerProps: {
|
|
||||||
label: "Отсканируйте QR-код",
|
|
||||||
onScan: onInputFinish,
|
|
||||||
closeOnScan: true,
|
|
||||||
},
|
|
||||||
withCloseButton: false,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onShiftStart = () => {
|
|
||||||
inputType = "StartShift";
|
|
||||||
onScanningStart();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onShiftFinish = () => {
|
|
||||||
inputType = "FinishShift";
|
|
||||||
onScanningStart();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<Stack gap={0}>
|
||||||
<Group ml={"xs"} mt={"xs"}>
|
<WorkShiftInput fetchShifts={fetchShifts} />
|
||||||
<Button variant={"default"} onClick={onShiftStart}>
|
<Divider />
|
||||||
Начать смену
|
<ShiftsTableSegmentedControl
|
||||||
</Button>
|
value={shiftsTableType.toString()}
|
||||||
<Button variant={"default"} onClick={onShiftFinish}>
|
onChange={event => {
|
||||||
Закончить смену
|
setPage(1);
|
||||||
</Button>
|
setShiftsTableType(parseInt(event));
|
||||||
</Group>
|
}}
|
||||||
<ActiveShiftsTable
|
|
||||||
activeShifts={activeShifts}
|
|
||||||
fetchActiveShifts={fetchActiveShifts}
|
|
||||||
/>
|
/>
|
||||||
|
<Skeleton visible={isLoading}>
|
||||||
|
<Flex gap={rem(10)} direction={"column"}>
|
||||||
|
<ShiftsTable
|
||||||
|
shiftsTableType={shiftsTableType}
|
||||||
|
shifts={shifts}
|
||||||
|
fetchShifts={fetchShifts}
|
||||||
|
/>
|
||||||
|
{totalPages > 1 && (
|
||||||
|
<Pagination
|
||||||
|
style={{ alignSelf: "flex-end" }}
|
||||||
|
withEdges
|
||||||
|
onChange={event => setPage(event)}
|
||||||
|
value={page}
|
||||||
|
total={totalPages}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Skeleton>
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
120
src/pages/AdminPage/tabs/WorkShifts/components/ShiftsTable.tsx
Normal file
120
src/pages/AdminPage/tabs/WorkShifts/components/ShiftsTable.tsx
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
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 { modals } from "@mantine/modals";
|
||||||
|
import { formatDate } from "../../../../../types/utils.ts";
|
||||||
|
import { MRT_TableOptions } from "mantine-react-table";
|
||||||
|
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||||
|
import { ShiftsTableType } from "../../../components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx";
|
||||||
|
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
shifts: WorkShiftSchema[];
|
||||||
|
fetchShifts: () => void;
|
||||||
|
shiftsTableType: ShiftsTableType;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ShiftsTable = ({
|
||||||
|
shifts,
|
||||||
|
fetchShifts,
|
||||||
|
shiftsTableType,
|
||||||
|
}: Props) => {
|
||||||
|
const isActiveShiftsTable = shiftsTableType === ShiftsTableType.ACTIVE;
|
||||||
|
const columns = useShiftsTableColumns({ isActiveShiftsTable });
|
||||||
|
|
||||||
|
const onDelete = (workShift: WorkShiftSchema) => {
|
||||||
|
WorkShiftsService.deleteWorkShift({
|
||||||
|
shiftId: workShift.id,
|
||||||
|
})
|
||||||
|
.then(({ ok, message }) => {
|
||||||
|
notifications.guess(ok, { message });
|
||||||
|
fetchShifts();
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDeleteClick = (workShift: WorkShiftSchema) => {
|
||||||
|
modals.openConfirmModal({
|
||||||
|
title: "Удаление смены",
|
||||||
|
children: (
|
||||||
|
<Text size="sm">
|
||||||
|
Вы уверены что хотите удалить смену работника{" "}
|
||||||
|
{workShift.user.firstName} {workShift.user.secondName} от{" "}
|
||||||
|
{formatDate(workShift.startedAt)}
|
||||||
|
</Text>
|
||||||
|
),
|
||||||
|
labels: { confirm: "Да", cancel: "Нет" },
|
||||||
|
confirmProps: { color: "red" },
|
||||||
|
onConfirm: () => onDelete(workShift),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onShiftFinish = (workShift: WorkShiftSchema) => {
|
||||||
|
WorkShiftsService.finishWorkShiftById({
|
||||||
|
shiftId: workShift.id,
|
||||||
|
})
|
||||||
|
.then(({ ok, message }) => {
|
||||||
|
notifications.guess(ok, { message });
|
||||||
|
fetchShifts();
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
};
|
||||||
|
|
||||||
|
const onShiftFinishClick = (workShift: WorkShiftSchema) => {
|
||||||
|
modals.openConfirmModal({
|
||||||
|
title: "Завершение смены",
|
||||||
|
children: (
|
||||||
|
<Text size="sm">
|
||||||
|
Вы уверены что хотите завершить смену работника{" "}
|
||||||
|
{workShift.user.firstName} {workShift.user.secondName} от{" "}
|
||||||
|
{formatDate(workShift.startedAt)}
|
||||||
|
</Text>
|
||||||
|
),
|
||||||
|
labels: { confirm: "Да", cancel: "Нет" },
|
||||||
|
confirmProps: { color: "red" },
|
||||||
|
onConfirm: () => onShiftFinish(workShift),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseTable
|
||||||
|
data={shifts}
|
||||||
|
columns={columns}
|
||||||
|
restProps={
|
||||||
|
{
|
||||||
|
enableRowActions: true,
|
||||||
|
enableSorting: false,
|
||||||
|
enableColumnActions: false,
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
} as MRT_TableOptions<WorkShiftSchema>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { Button, Group } from "@mantine/core";
|
||||||
|
import useWorkShiftInput from "../hooks/useWorkShiftInput.tsx";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
fetchShifts: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const WorkShiftInput = ({ fetchShifts }: Props) => {
|
||||||
|
const {
|
||||||
|
onShiftStart,
|
||||||
|
onShiftFinish,
|
||||||
|
} = useWorkShiftInput({ fetchShifts });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Group ml={"xs"} my={"xs"}>
|
||||||
|
<Button variant={"default"} onClick={onShiftStart}>
|
||||||
|
Начать смену
|
||||||
|
</Button>
|
||||||
|
<Button variant={"default"} onClick={onShiftFinish}>
|
||||||
|
Закончить смену
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WorkShiftInput;
|
||||||
64
src/pages/AdminPage/tabs/WorkShifts/hooks/columns.tsx
Normal file
64
src/pages/AdminPage/tabs/WorkShifts/hooks/columns.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import { useMemo } from "react";
|
||||||
|
import { MRT_ColumnDef, MRT_Row } from "mantine-react-table";
|
||||||
|
import { WorkShiftSchema } from "../../../../../client";
|
||||||
|
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
isActiveShiftsTable: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
if (hours === 0) {
|
||||||
|
return `${minutes} мин.`;
|
||||||
|
}
|
||||||
|
return `${hours} ч. ${minutes} мин.`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getColumnsForHistory = () => {
|
||||||
|
return isActiveShiftsTable ? [] : [
|
||||||
|
{
|
||||||
|
header: "Конец смены",
|
||||||
|
accessorKey: "finishedAt",
|
||||||
|
Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
|
||||||
|
row.original.finishedAt && new Date(row.original.finishedAt).toLocaleString("ru-RU"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: "Отработано",
|
||||||
|
Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
|
||||||
|
getWorkedHoursString(row.original.startedAt, row.original.finishedAt ?? ""),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
return useMemo<MRT_ColumnDef<WorkShiftSchema>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
header: "ФИО",
|
||||||
|
Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
|
||||||
|
`${row.original.user.firstName} ${row.original.user.secondName}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: "Роль",
|
||||||
|
accessorKey: "user.role.name",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: "Должность",
|
||||||
|
accessorKey: "user.position.name",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: "Начало смены",
|
||||||
|
accessorKey: "startedAt",
|
||||||
|
Cell: ({ row }) =>
|
||||||
|
new Date(row.original.startedAt).toLocaleString("ru-RU"),
|
||||||
|
},
|
||||||
|
...getColumnsForHistory(),
|
||||||
|
],
|
||||||
|
[isActiveShiftsTable],
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import { WorkShiftsService } from "../../../../../client";
|
||||||
|
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||||
|
import { modals } from "@mantine/modals";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
fetchShifts: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const useWorkShiftInput = ({ fetchShifts }: Props) => {
|
||||||
|
let inputType: "StartShift" | "FinishShift" = "StartShift";
|
||||||
|
|
||||||
|
const onInputFinish = (userIdInput: string) => {
|
||||||
|
const userId = parseInt(userIdInput);
|
||||||
|
if (isNaN(userId)) {
|
||||||
|
notifications.error({ message: "Ошибка, некорректные данные в QR-коде" });
|
||||||
|
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!,
|
||||||
|
})
|
||||||
|
.then(async ({ ok, message }) => {
|
||||||
|
notifications.guess(ok, { message });
|
||||||
|
fetchShifts();
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
};
|
||||||
|
|
||||||
|
const onScanningStart = () => {
|
||||||
|
modals.openContextModal({
|
||||||
|
modal: "scanningModal",
|
||||||
|
innerProps: {
|
||||||
|
label: "Отсканируйте QR-код",
|
||||||
|
onScan: onInputFinish,
|
||||||
|
closeOnScan: true,
|
||||||
|
},
|
||||||
|
withCloseButton: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onShiftStart = () => {
|
||||||
|
inputType = "StartShift";
|
||||||
|
onScanningStart();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onShiftFinish = () => {
|
||||||
|
inputType = "FinishShift";
|
||||||
|
onScanningStart();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
onShiftStart,
|
||||||
|
onShiftFinish,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useWorkShiftInput;
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { WorkShiftSchema, 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 [shiftsTableType, setShiftsTableType] = useState<ShiftsTableType>(ShiftsTableType.ACTIVE);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const fetchShifts = () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
WorkShiftsService.getShifts({
|
||||||
|
isActive: shiftsTableType === ShiftsTableType.ACTIVE,
|
||||||
|
page,
|
||||||
|
itemsPerPage: 10,
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
setShifts(res.shifts);
|
||||||
|
setTotalPages(res.paginationInfo.totalPages);
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
.finally(() => setIsLoading(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchShifts();
|
||||||
|
}, [shiftsTableType, page]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
shifts,
|
||||||
|
shiftsTableType,
|
||||||
|
setShiftsTableType,
|
||||||
|
totalPages,
|
||||||
|
page,
|
||||||
|
setPage,
|
||||||
|
fetchShifts,
|
||||||
|
isLoading,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useWorkShiftsTable;
|
||||||
Reference in New Issue
Block a user