123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useAvailableTimeSlotsQuery } from '@/hooks/api/slots';
|
|
import { useOrderStore } from '@/stores/order';
|
|
import { Button } from '@repo/ui/components/ui/button';
|
|
import { Calendar } from '@repo/ui/components/ui/calendar';
|
|
import dayjs from 'dayjs';
|
|
|
|
export function DateSelect() {
|
|
const selectedDate = useOrderStore((store) => store.date);
|
|
const setDate = useOrderStore((store) => store.setDate);
|
|
const setTime = useOrderStore((store) => store.setTime);
|
|
const setSlot = useOrderStore((store) => store.setSlotId);
|
|
|
|
return (
|
|
<Calendar
|
|
className="bg-background"
|
|
disabled={(date) => {
|
|
return dayjs().isAfter(dayjs(date), 'day');
|
|
}}
|
|
mode="single"
|
|
onSelect={(date) => {
|
|
if (date) setDate(date);
|
|
setTime(null);
|
|
setSlot(null);
|
|
}}
|
|
selected={selectedDate}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function DateTimeSelect() {
|
|
return (
|
|
<div className="space-y-4">
|
|
<DateSelect />
|
|
<TimeSelect />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TimeSelect() {
|
|
const masterId = useOrderStore((store) => store.masterId);
|
|
const date = useOrderStore((store) => store.date);
|
|
const serviceId = useOrderStore((store) => store.serviceId);
|
|
|
|
const { data: { times } = {}, isLoading } = useAvailableTimeSlotsQuery(
|
|
{
|
|
filters: {
|
|
date: {
|
|
eq: date,
|
|
},
|
|
master: {
|
|
documentId: {
|
|
eq: masterId,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
service: {
|
|
documentId: {
|
|
eq: serviceId,
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
if (isLoading || !times) return null;
|
|
|
|
const morning = times.filter(({ time }) => getHour(time) < 12);
|
|
const afternoon = times?.filter(({ time }) => {
|
|
const hour = getHour(time);
|
|
return hour >= 12 && hour < 18;
|
|
});
|
|
const evening = times?.filter(({ time }) => getHour(time) >= 18);
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<TimeSlotsButtons times={morning} title="Утро" />
|
|
<TimeSlotsButtons times={afternoon} title="День" />
|
|
<TimeSlotsButtons times={evening} title="Вечер" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function getHour(time: string) {
|
|
const hour = time.split(':')[0];
|
|
if (hour) return Number.parseInt(hour, 10);
|
|
|
|
return -1;
|
|
}
|
|
|
|
function TimeSlotsButtons({
|
|
times,
|
|
title,
|
|
}: Readonly<{ times: Array<{ slotId: string; time: string }>; title: string }>) {
|
|
const setTime = useOrderStore((store) => store.setTime);
|
|
const setSlot = useOrderStore((store) => store.setSlotId);
|
|
|
|
if (!times.length) return null;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<h2 className="text-lg font-semibold">{title}</h2>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{times.map(({ slotId, time }) => (
|
|
<Button
|
|
className="mb-2"
|
|
key={time.toString()}
|
|
onClick={() => {
|
|
setTime(time);
|
|
setSlot(slotId);
|
|
}}
|
|
variant="outline"
|
|
>
|
|
{time}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|