tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

show all booking data in admin table

Browse Source
This commit is contained in:
Thomas Ruoff
2022-08-23 00:21:46 +02:00
parent 0993e2508e
commit 89c4eb6ba3
2 changed files with 77 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
components/bookingTable.tsx Normal file
View File

@@ -0,0 +1,75 @@
import React from 'react'
import Link from 'next/link'
import { daysFormatFrontend } from '../helpers/date'
import { BookingDocument } from '../db/booking'
export default function BookingTable({
booking,
}: {
booking: BookingDocument
}) {
const data = [
{ name: 'Status', value: booking.status },
{ name: 'Buchungszeitraum', value: daysFormatFrontend(booking.days) },
{ name: 'Organisation', value: booking.org },
{
name: 'Addresse',
value: (
<>
<div>{booking.street}</div>
<div>
{booking.zip} {booking.city}
</div>
</>
),
},
{
name: 'Email',
value: (
<Link href={`mailto:${booking.email}`}>
<a className="link">{booking.email}</a>
</Link>
),
},
{ name: 'Zweck', value: booking.purpose },
{ name: 'Ziel', value: booking.destination },
]
return (
<div
key={booking.uuid}
className="mt-6 mb-6 bg-white border border-slate-100 shadow overflow-hidden sm:rounded-lg"
>
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<Link href={`/admin/bookings/${booking.uuid}`}>
<a className="link">Booking {booking.uuid}</a>
</Link>
</h3>
<p className="mt-1 max-w-2xl text-sm text-gray-500">
Last updated{' '}
{new Date(booking.updatedAt as string).toLocaleString(
new Intl.Locale('de')
)}
</p>
</div>
<div className="border-t border-gray-200">
<dl>
{data.map(({ name, value }, index) => (
<div
key={`${booking.uuid}-${name}`}
className={`${
index % 2 === 1 ? 'bg-white' : 'bg-gray-100'
} px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6`}
>
<dt className="text-sm font-medium text-gray-500">{name}</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{value || 'n/a'}
</dd>
</div>
))}
</dl>
</div>
</div>
)
}

49
pages/admin/index.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react'
import Link from 'next/link'
import BookingTable from '../../components/bookingTable'
import Layout from '../../components/layout'
import { daysFormatFrontend } from '../../helpers/date'
import { getServerSideRecentBookings } from '../../lib/getServerSideProps'
@@ -21,51 +20,7 @@ function AdminRecentBookings({ bookings }) {
return (
<Layout>
{bookings.map((booking: any) => (
<div
key={booking.uuid}
className="mb-6 bg-white shadow overflow-hidden sm:rounded-lg"
>
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<Link href={`/admin/bookings/${booking.uuid}`}>
<a className="link">Booking {booking.uuid}</a>
</Link>
</h3>
<p className="mt-1 max-w-2xl text-sm text-gray-500">
Last updated {new Date(booking.updatedAt).toLocaleString()}
</p>
</div>
<div className="border-t border-gray-200">
<dl>
<div className="bg-gray-100 px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">
Buchungszeitraum
</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{daysFormatFrontend(booking.days)}
</dd>
</div>
<div className="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">Bucher</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{booking.name}
</dd>
</div>
<div className="bg-gray-100 px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">Email</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{booking.email}
</dd>
</div>
<div className="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">Status</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{booking.status}
</dd>
</div>
</dl>
</div>
</div>
<BookingTable key={booking.uuid} booking={booking} />
))}
</Layout>
)