100 lines
2.1 KiB
TypeScript
100 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { ColumnDef } from '@tanstack/react-table'
|
|
import { DataTable } from './DataTable'
|
|
import { Button } from '../ui/button'
|
|
import DialogWrapper from '../dialogs/DialogWrapper'
|
|
import CreateVenueForm from '../forms/CreateVenueForm'
|
|
import { useState } from 'react'
|
|
import { fetchVenuesClient } from '@/lib/helper/fetchVenues'
|
|
|
|
interface LocationRow {
|
|
id: string
|
|
name: string
|
|
address: string
|
|
city: string
|
|
state: string
|
|
postalCode: string
|
|
country: string
|
|
phone?: string | null
|
|
email?: string | null
|
|
}
|
|
|
|
interface Props {
|
|
eventLocations: LocationRow[]
|
|
}
|
|
|
|
const columns: ColumnDef<LocationRow>[] = [
|
|
{
|
|
accessorKey: 'name',
|
|
header: 'Name'
|
|
},
|
|
{
|
|
accessorKey: 'address',
|
|
header: 'Address'
|
|
},
|
|
{
|
|
accessorKey: 'city',
|
|
header: 'City'
|
|
},
|
|
{
|
|
accessorKey: 'state',
|
|
header: 'State'
|
|
},
|
|
{
|
|
accessorKey: 'postalCode',
|
|
header: 'Postal Code'
|
|
},
|
|
{
|
|
accessorKey: 'country',
|
|
header: 'Country'
|
|
},
|
|
{
|
|
accessorKey: 'phone',
|
|
header: 'Phone',
|
|
cell: ({ row }) => row.original.phone || '—'
|
|
},
|
|
{
|
|
accessorKey: 'email',
|
|
header: 'Email',
|
|
cell: ({ row }) => row.original.email || '—'
|
|
}
|
|
]
|
|
|
|
export default function VenuesTable({ eventLocations }: Props) {
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
|
const [venues, setVenues] = useState<LocationRow[]>(eventLocations)
|
|
|
|
async function refreshVenues() {
|
|
try {
|
|
const updated = await fetchVenuesClient()
|
|
setVenues(updated)
|
|
} catch (err) {
|
|
console.error('Failed to refresh venues:', err)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Button
|
|
variant={'outline'}
|
|
onClick={() => setIsDialogOpen(true)}
|
|
>
|
|
Create Venue
|
|
</Button>
|
|
<DataTable columns={columns} data={venues} />
|
|
<DialogWrapper
|
|
title="Create a New Venue"
|
|
description="Enter the Venue information below"
|
|
open={isDialogOpen}
|
|
onOpenChange={setIsDialogOpen}
|
|
form={<CreateVenueForm onSuccess={async () => {
|
|
await refreshVenues()
|
|
setIsDialogOpen(false)
|
|
}}
|
|
/>}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|