diff --git a/apps/web/actions/slots.ts b/apps/web/actions/slots.ts index 8934620..b2b440b 100644 --- a/apps/web/actions/slots.ts +++ b/apps/web/actions/slots.ts @@ -40,6 +40,21 @@ export async function getSlots(input: GQL.GetSlotsQueryVariables) { }); } +export async function updateSlot(input: GQL.UpdateSlotMutationVariables) { + const customer = await getProfile(); + + if (!customer?.documentId) throw new Error('Customer not found'); + + return api.updateSlot({ + ...input, + data: { + ...input.data, + date: input.data?.date ? formatDate(input.data.date).db() : undefined, + time_end: input.data?.time_end ? formatTime(input.data.time_end).db() : undefined, + time_start: input.data?.time_start ? formatTime(input.data.time_start).db() : undefined, + }, + }); +} + export const getSlot = api.getSlot; -export const updateSlot = api.updateSlot; export const deleteSlot = api.deleteSlot; diff --git a/apps/web/components/schedule/components/slot-time.tsx b/apps/web/components/schedule/components/slot-time.tsx new file mode 100644 index 0000000..03be576 --- /dev/null +++ b/apps/web/components/schedule/components/slot-time.tsx @@ -0,0 +1,75 @@ +'use client'; +import { ScheduleTimeContext } from '../context'; +import { type SlotComponentProps } from '../types'; +import { AddTimeRange, 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) { + return ( +
+
+ ); +} + +function EditSaveButton({ documentId }: Readonly) { + const { editMode, endTime, resetTime, setEditMode, startTime } = use(ScheduleTimeContext); + const { mutate: updateSlot } = useSlotMutation({ documentId }); + + const { data } = useSlotQuery({ documentId }); + const slot = data?.data?.slot; + + if (editMode) { + function handleOnSave() { + updateSlot({ data: { time_end: endTime, time_start: startTime }, documentId }); + resetTime(); + setEditMode(false); + } + + return ( + + ); + } + + const hasOrders = Boolean(slot?.orders.length); + + return ( + + ); +} + +function Time(props: Readonly) { + const { editMode, setEndTime, setStartTime } = use(ScheduleTimeContext); + + const { data } = useSlotQuery(props); + const slot = data?.data?.slot; + + const { isPending } = useSlotMutation(props); + + useEffect(() => { + if (editMode) { + if (slot?.time_start) setStartTime(slot.time_start); + if (slot?.time_end) setEndTime(slot.time_end); + } + }, [editMode, setEndTime, setStartTime, slot]); + + if (!slot) return null; + + if (editMode) return ; + + return ; +} diff --git a/apps/web/components/schedule/components/time-range.tsx b/apps/web/components/schedule/components/time-range.tsx index c55c6b4..2da18ad 100644 --- a/apps/web/components/schedule/components/time-range.tsx +++ b/apps/web/components/schedule/components/time-range.tsx @@ -1,11 +1,14 @@ 'use client'; import { ScheduleTimeContext } from '../context'; -import { useSlotAdd } from '@/hooks/slots'; import { formatTime } from '@/utils/date'; import { Input } from '@repo/ui/components/ui/input'; import { cn } from '@repo/ui/lib/utils'; import { use } from 'react'; +type AddTimeRangeProps = { + readonly disabled?: boolean; +}; + type TimeRangeProps = { readonly className?: string; readonly delimiter?: boolean; @@ -13,16 +16,15 @@ type TimeRangeProps = { readonly time_start: string; }; -export function AddTimeRange() { +export function AddTimeRange({ disabled = false }: AddTimeRangeProps) { const { endTime, setEndTime, setStartTime, startTime } = use(ScheduleTimeContext); - const { isPending } = useSlotAdd(); return ( <>
setStartTime?.(event.target.value)} required @@ -33,7 +35,7 @@ export function AddTimeRange() {
setEndTime?.(event.target.value)} required diff --git a/apps/web/components/schedule/context/index.tsx b/apps/web/components/schedule/context/index.tsx index e352214..13d0474 100644 --- a/apps/web/components/schedule/context/index.tsx +++ b/apps/web/components/schedule/context/index.tsx @@ -1,12 +1,20 @@ 'use client'; -import { createContext, type PropsWithChildren, useMemo, useState } from 'react'; +import { + createContext, + type Dispatch, + type PropsWithChildren, + type SetStateAction, + useMemo, + useState, +} from 'react'; export type ContextType = { editMode: boolean; endTime: string; - setEditMode: (value: boolean) => void; - setEndTime: (value: string) => void; - setStartTime: (value: string) => void; + resetTime: () => void; + setEditMode: Dispatch>; + setEndTime: Dispatch>; + setStartTime: Dispatch>; startTime: string; }; export const ScheduleTimeContext = createContext({} as ContextType); @@ -16,10 +24,16 @@ export function ScheduleTimeContextProvider({ children }: Readonly { return { editMode, endTime, + resetTime, setEditMode, setEndTime, setStartTime, diff --git a/apps/web/components/schedule/day-slot-add-form.tsx b/apps/web/components/schedule/day-slot-add-form.tsx index 401fa84..862f94a 100644 --- a/apps/web/components/schedule/day-slot-add-form.tsx +++ b/apps/web/components/schedule/day-slot-add-form.tsx @@ -11,11 +11,11 @@ import { PlusSquare } from 'lucide-react'; import { type FormEvent, use } from 'react'; export const DaySlotAddForm = withContext(ScheduleTimeContextProvider)(function () { - const { endTime, setEndTime, setStartTime, startTime } = use(ScheduleTimeContext); + const { endTime, resetTime, startTime } = use(ScheduleTimeContext); const { selectedDate } = use(ScheduleContext); - const { mutate: addSlot } = useSlotAdd(); + const { isPending, mutate: addSlot } = useSlotAdd(); const handleSubmit = (event: FormEvent) => { event.preventDefault(); @@ -27,15 +27,14 @@ export const DaySlotAddForm = withContext(ScheduleTimeContextProvider)(function time_start: startTime, }); - setStartTime(''); - setEndTime(''); + resetTime(); } }; return (
- +