New fields for complex
This commit is contained in:
Jose Selesan
87
apps/frontend/src/features/complex/complex-settings-page.tsx
Normal file
87
apps/frontend/src/features/complex/complex-settings-page.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Building2, MapPin, Settings } from 'lucide-react'
|
||||
import { apiClient } from '@/lib/api-client'
|
||||
import { setCurrentComplexSlug } from '@/lib/current-complex'
|
||||
import { ComplexDetailsSection } from './components/complex-details-section'
|
||||
import { ComplexCourtsSection } from './components/complex-courts-section'
|
||||
|
||||
type ComplexSettingsPageProps = {
|
||||
complexSlug: string
|
||||
}
|
||||
|
||||
type TabOption = 'details' | 'courts'
|
||||
|
||||
export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
|
||||
const [activeTab, setActiveTab] = useState<TabOption>('details')
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentComplexSlug(complexSlug)
|
||||
}, [complexSlug])
|
||||
|
||||
const complexQuery = useQuery({
|
||||
queryKey: ['complex-by-slug', complexSlug],
|
||||
queryFn: () => apiClient.complexes.getBySlug(complexSlug),
|
||||
})
|
||||
|
||||
const complexId = complexQuery.data?.id ?? null
|
||||
|
||||
const tabs = [
|
||||
{ id: 'details' as const, label: 'Datos del complejo', icon: Building2 },
|
||||
{ id: 'courts' as const, label: 'Canchas', icon: MapPin },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-6xl px-4 py-4 sm:px-6">
|
||||
<section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
<Settings className="mb-1 mr-2 inline size-6" />
|
||||
Configuración del complejo
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{complexQuery.data?.complexName ?? 'Configura los datos de tu complejo'}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="mt-6 grid gap-6 lg:grid-cols-[200px_1fr]">
|
||||
<nav className="flex flex-row gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon
|
||||
const isActive = activeTab === tab.id
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors lg:w-full lg:justify-start ${
|
||||
isActive
|
||||
? 'bg-muted text-foreground'
|
||||
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
{tab.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="min-w-0">
|
||||
{activeTab === 'details' && (
|
||||
<ComplexDetailsSection
|
||||
complex={complexQuery.data ?? null}
|
||||
isLoading={complexQuery.isLoading}
|
||||
isError={complexQuery.isError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'courts' && (
|
||||
<ComplexCourtsSection
|
||||
complexId={complexId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { type Court, type CreateCourtInput } from '@repo/api-contract'
|
||||
import { MapPin } from 'lucide-react'
|
||||
import { apiClient } from '@/lib/api-client'
|
||||
import { CourtFormSection } from './court-form-section'
|
||||
import { CourtListSection } from './court-list-section'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
|
||||
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-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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import type { Complex, UpdateComplexInput } from '@repo/api-contract'
|
||||
import { updateComplexSchema } from '@repo/api-contract'
|
||||
import { Building2, Loader2 } from 'lucide-react'
|
||||
import { apiClient } from '@/lib/api-client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Field, FieldLabel } from '@/components/ui/field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
|
||||
type ComplexDetailsSectionProps = {
|
||||
complex: Complex | null
|
||||
isLoading: boolean
|
||||
isError: boolean
|
||||
}
|
||||
|
||||
type FormValues = {
|
||||
complexName: string
|
||||
physicalAddress: string
|
||||
city: string
|
||||
state: string
|
||||
country: string
|
||||
}
|
||||
|
||||
export function ComplexDetailsSection({
|
||||
complex,
|
||||
isLoading,
|
||||
isError,
|
||||
}: ComplexDetailsSectionProps) {
|
||||
const queryClient = useQueryClient()
|
||||
const [formValues, setFormValues] = useState<FormValues>({
|
||||
complexName: '',
|
||||
physicalAddress: '',
|
||||
city: '',
|
||||
state: '',
|
||||
country: '',
|
||||
})
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null)
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (complex) {
|
||||
setFormValues({
|
||||
complexName: complex.complexName,
|
||||
physicalAddress: complex.physicalAddress ?? '',
|
||||
city: complex.city ?? '',
|
||||
state: complex.state ?? '',
|
||||
country: complex.country ?? '',
|
||||
})
|
||||
}
|
||||
}, [complex])
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data: UpdateComplexInput) =>
|
||||
apiClient.complexes.update(complex!.id, data),
|
||||
onSuccess: (updatedComplex) => {
|
||||
setSuccessMessage('Datos actualizados correctamente.')
|
||||
setErrorMessage(null)
|
||||
queryClient.setQueryData(['complex-by-slug', complex?.complexSlug], updatedComplex)
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
setErrorMessage(error.message || 'Error al actualizar los datos.')
|
||||
setSuccessMessage(null)
|
||||
},
|
||||
})
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setErrorMessage(null)
|
||||
setSuccessMessage(null)
|
||||
|
||||
const result = updateComplexSchema.safeParse({
|
||||
complexName: formValues.complexName,
|
||||
physicalAddress: formValues.physicalAddress || null,
|
||||
city: formValues.city || null,
|
||||
state: formValues.state || null,
|
||||
country: formValues.country || null,
|
||||
})
|
||||
|
||||
if (!result.success) {
|
||||
setErrorMessage(result.error.errors[0]?.message || 'Datos inválidos.')
|
||||
return
|
||||
}
|
||||
|
||||
updateMutation.mutate(result.data)
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="rounded-xl border bg-card p-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="size-5 text-muted-foreground" />
|
||||
<h3 className="text-lg font-medium">Datos del complejo</h3>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<p className="text-sm text-muted-foreground">Cargando...</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
if (isError || !complex) {
|
||||
return (
|
||||
<section className="rounded-xl border bg-card p-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="size-5 text-muted-foreground" />
|
||||
<h3 className="text-lg font-medium">Datos del complejo</h3>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<p className="text-sm text-destructive">
|
||||
No se pudieron cargar los datos del complejo.
|
||||
</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border bg-card p-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="size-5 text-muted-foreground" />
|
||||
<h3 className="text-lg font-medium">Datos del complejo</h3>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
|
||||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="complex-name">Nombre del complejo</FieldLabel>
|
||||
<Input
|
||||
id="complex-name"
|
||||
type="text"
|
||||
value={formValues.complexName}
|
||||
onChange={(e) =>
|
||||
setFormValues((prev) => ({ ...prev, complexName: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel htmlFor="physical-address">Dirección</FieldLabel>
|
||||
<Input
|
||||
id="physical-address"
|
||||
type="text"
|
||||
placeholder="Ej: Av. San Martín 1234"
|
||||
value={formValues.physicalAddress}
|
||||
onChange={(e) =>
|
||||
setFormValues((prev) => ({ ...prev, physicalAddress: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<Field>
|
||||
<FieldLabel htmlFor="city">Ciudad</FieldLabel>
|
||||
<Input
|
||||
id="city"
|
||||
type="text"
|
||||
placeholder="Ej: Salta"
|
||||
value={formValues.city}
|
||||
onChange={(e) =>
|
||||
setFormValues((prev) => ({ ...prev, city: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel htmlFor="state">Provincia / Estado</FieldLabel>
|
||||
<Input
|
||||
id="state"
|
||||
type="text"
|
||||
placeholder="Ej: Salta"
|
||||
value={formValues.state}
|
||||
onChange={(e) =>
|
||||
setFormValues((prev) => ({ ...prev, state: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel htmlFor="country">País</FieldLabel>
|
||||
<Input
|
||||
id="country"
|
||||
type="text"
|
||||
placeholder="Ej: Argentina"
|
||||
value={formValues.country}
|
||||
onChange={(e) =>
|
||||
setFormValues((prev) => ({ ...prev, country: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
|
||||
{successMessage && (
|
||||
<p className="text-sm text-green-600 dark:text-green-400">
|
||||
{successMessage}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={updateMutation.isPending}
|
||||
>
|
||||
{updateMutation.isPending && (
|
||||
<Loader2 className="mr-2 size-4 animate-spin" />
|
||||
)}
|
||||
Guardar cambios
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { ComplexCourtsPage } from '@/features/complex/complex-courts-page'
|
||||
import { ComplexSettingsPage } from '@/features/complex/complex-settings-page'
|
||||
|
||||
export const Route = createFileRoute('/_app/_authenticated/complex/$slug/edit')({
|
||||
component: RouteComponent,
|
||||
@@ -7,5 +7,5 @@ export const Route = createFileRoute('/_app/_authenticated/complex/$slug/edit')(
|
||||
|
||||
function RouteComponent() {
|
||||
const { slug } = Route.useParams()
|
||||
return <ComplexCourtsPage complexSlug={slug} />
|
||||
return <ComplexSettingsPage complexSlug={slug} />
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user