74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
/* eslint-disable react/jsx-no-bind */
|
||
'use client';
|
||
import { ScheduleTimeContext } from '../context';
|
||
import { type SlotComponentProps } from '../types';
|
||
import { EditableTimeRangeForm, ReadonlyTimeRange } from './time-range';
|
||
import { useSlotMutation, useSlotQuery } from '@/hooks/slots';
|
||
import { Button } from '@repo/ui/components/ui/button';
|
||
import { PencilLine } from 'lucide-react';
|
||
import { use, useEffect } from 'react';
|
||
|
||
export function SlotTime(props: Readonly<SlotComponentProps>) {
|
||
const { editMode } = use(ScheduleTimeContext);
|
||
|
||
return editMode ? <SlotTimeEditForm {...props} /> : <SlotTimeReadonly {...props} />;
|
||
}
|
||
|
||
function SlotTimeEditForm({ documentId }: Readonly<SlotComponentProps>) {
|
||
const { editMode, endTime, resetTime, setEditMode, setEndTime, setStartTime, startTime } =
|
||
use(ScheduleTimeContext);
|
||
const { isPending: isMutationPending, mutate: updateSlot } = useSlotMutation({ documentId });
|
||
|
||
const { data, isPending: isQueryPending } = useSlotQuery({ documentId });
|
||
const slot = data?.data?.slot;
|
||
|
||
const isPending = isMutationPending || isQueryPending;
|
||
|
||
useEffect(() => {
|
||
if (editMode) {
|
||
if (slot?.time_start) setStartTime(slot.time_start);
|
||
if (slot?.time_end) setEndTime(slot.time_end);
|
||
}
|
||
}, [editMode, setEndTime, setStartTime, slot]);
|
||
|
||
function handleSubmit() {
|
||
updateSlot({ data: { time_end: endTime, time_start: startTime }, documentId });
|
||
resetTime();
|
||
setEditMode(false);
|
||
}
|
||
|
||
return (
|
||
<EditableTimeRangeForm disabled={isPending} onSubmit={handleSubmit}>
|
||
<Button className="rounded-full text-xs" disabled={isPending} onClick={() => handleSubmit()}>
|
||
Сохранить
|
||
</Button>
|
||
</EditableTimeRangeForm>
|
||
);
|
||
}
|
||
|
||
function SlotTimeReadonly(props: Readonly<SlotComponentProps>) {
|
||
const { setEditMode } = use(ScheduleTimeContext);
|
||
|
||
const { data } = useSlotQuery(props);
|
||
const slot = data?.data?.slot;
|
||
|
||
if (!slot) return null;
|
||
|
||
const hasOrders = Boolean(slot?.orders.length);
|
||
|
||
return (
|
||
<div className="flex items-center gap-2">
|
||
<ReadonlyTimeRange {...slot} className="text-3xl" />
|
||
<Button
|
||
className="rounded-full text-xs"
|
||
disabled={hasOrders}
|
||
onClick={() => setEditMode(true)}
|
||
size="icon"
|
||
variant="outline"
|
||
>
|
||
<PencilLine className="size-4" />
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|