70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import { Separator } from '@/components/ui/separator';
|
|
import { apiClient } from '@/lib/api-client';
|
|
import { type Court, type CreateCourtInput } from '@repo/api-contract';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { MapPin } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { CourtFormSection } from './court-form-section';
|
|
import { CourtListSection } from './court-list-section';
|
|
|
|
type ComplexCourtsSectionProps = {
|
|
complexId: string | null;
|
|
};
|
|
|
|
export function ComplexCourtsSection({ complexId }: ComplexCourtsSectionProps) {
|
|
const [editingCourt, setEditingCourt] = useState<Court | null>(null);
|
|
const [initialDraft, setInitialDraft] = useState<CreateCourtInput | null>(null);
|
|
|
|
const courtsQuery = useQuery({
|
|
queryKey: ['courts', complexId],
|
|
enabled: Boolean(complexId),
|
|
queryFn: () => apiClient.courts.listByComplex(complexId as string),
|
|
});
|
|
|
|
return (
|
|
<section className="mt-6 rounded-xl border bg-card p-3 sm:p-5">
|
|
<div className="flex items-center gap-2">
|
|
<MapPin className="size-5 text-muted-foreground" />
|
|
<h3 className="text-lg font-medium">Canchas</h3>
|
|
</div>
|
|
<Separator className="my-4" />
|
|
<p className="mb-4 text-sm text-muted-foreground">Alta y edición de canchas del complejo.</p>
|
|
|
|
<CourtFormSection
|
|
complexId={complexId}
|
|
editingCourt={editingCourt}
|
|
initialDraft={initialDraft}
|
|
onCancelEdit={() => {
|
|
setEditingCourt(null);
|
|
}}
|
|
/>
|
|
|
|
<CourtListSection
|
|
courts={courtsQuery.data ?? []}
|
|
isLoading={courtsQuery.isLoading}
|
|
isError={courtsQuery.isError}
|
|
onDuplicateCourt={(court) => {
|
|
setEditingCourt(null);
|
|
setInitialDraft({
|
|
name: `${court.name} - Copy`,
|
|
sportId: court.sportId,
|
|
slotDurationMinutes: court.slotDurationMinutes,
|
|
basePrice: court.basePrice,
|
|
availability: court.availability.map((slot) => ({
|
|
dayOfWeek: slot.dayOfWeek,
|
|
startTime: slot.startTime,
|
|
endTime: slot.endTime,
|
|
})),
|
|
});
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}}
|
|
onEditCourt={(court) => {
|
|
setInitialDraft(null);
|
|
setEditingCourt(court);
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|