151 lines
4.0 KiB
TypeScript
151 lines
4.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 { formatTime } from '@repo/utils/datetime-format';
|
|
import dayjs from 'dayjs';
|
|
import { useState } from 'react';
|
|
|
|
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);
|
|
const masterId = useOrderStore((store) => store.masterId);
|
|
const serviceId = useOrderStore((store) => store.serviceId);
|
|
|
|
const [selectedMonthDate, setSelectedMonthDate] = useState(new Date());
|
|
|
|
const { data: { slots } = {} } = useAvailableTimeSlotsQuery(
|
|
{
|
|
filters: {
|
|
datetime_start: {
|
|
gte: dayjs(selectedMonthDate).startOf('month').startOf('day').toISOString(),
|
|
lte: dayjs(selectedMonthDate).endOf('month').endOf('day').toISOString(),
|
|
},
|
|
master: {
|
|
documentId: {
|
|
eq: masterId,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
service: {
|
|
documentId: {
|
|
eq: serviceId,
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
return (
|
|
<Calendar
|
|
className="bg-background"
|
|
disabled={(date) => {
|
|
return (
|
|
dayjs().isAfter(dayjs(date), 'day') ||
|
|
!slots?.some((slot) => dayjs(slot?.datetime_start).isSame(date, 'day'))
|
|
);
|
|
}}
|
|
mode="single"
|
|
onMonthChange={(date) => setSelectedMonthDate(date)}
|
|
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: {
|
|
datetime_start: {
|
|
gte: dayjs(date).startOf('day').toISOString(),
|
|
lte: dayjs(date).endOf('day').toISOString(),
|
|
},
|
|
master: {
|
|
documentId: {
|
|
eq: masterId,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
service: {
|
|
documentId: {
|
|
eq: serviceId,
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
if (isLoading || !times) return null;
|
|
|
|
const getHour = (isoString: string) => dayjs(isoString).hour();
|
|
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 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"
|
|
>
|
|
{formatTime(time).user()}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|