add confirm and reject buttons to adming/booking

pages/admin/booking/[uuid]/index.tsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react'
 import Footer from '../../../../components/footer'
 import Header from '../../../../components/header'
-import Input from '../../../../components/input'
 import { getServerSideBooking } from '../../../../lib/getServerSideProps'
 import { BookingDocument } from '../../../../db/booking'
 import { getBookingStatus } from '../../../../helpers/booking'
+import { dateFormatFrontend } from '../../../../helpers/date'
+import { BOOKING_STATUS } from '../../../../db/enums'
 
 export const getServerSideProps = getServerSideBooking
 
-async function storeBooking(booking: BookingDocument) {
-  const response = await fetch(`/api/admin/booking/${booking.uuid}`, {
+async function patchBooking(uuid: string, bookingData: any) {
+  const response = await fetch(`/api/admin/booking/${uuid}`, {
     method: 'PATCH',
     mode: 'cors',
     cache: 'no-cache',
@@ -18,7 +19,7 @@ async function storeBooking(booking: BookingDocument) {
       'Content-Type': 'application/json',
     },
     referrerPolicy: 'no-referrer',
-    body: JSON.stringify({ ...booking }),
+    body: JSON.stringify({ ...bookingData }),
   })
   return response.json()
 }
@@ -35,11 +36,13 @@ export default function ShowBookingAdmin({
   // in case the props change, update the internal state
   useEffect(() => setBooking(bookingProp), [bookingProp])
 
-  const onStoreBooking = async () => {
+  const onStoreBooking = async (confirmed: boolean) => {
     try {
       setStoringBookingError(null)
       setStoringBooking(true)
-      const updatedBooking = await storeBooking(booking)
+      const updatedBooking = await patchBooking(booking.uuid, {
+        status: confirmed ? BOOKING_STATUS.CONFIRMED : BOOKING_STATUS.REJECTED,
+      })
       setBooking(updatedBooking)
     } catch (error) {
       setStoringBookingError('Buchung konnte nicht gespeichert werden.')
@@ -54,20 +57,33 @@ export default function ShowBookingAdmin({
       <main className="flex-grow">
         <h2 className="text-3xl">Buchung {booking.uuid}</h2>
         <div>
-          <strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
+          <strong>Buchungszeitraum:</strong>{' '}
+          {dateFormatFrontend(new Date(booking.startDate))} -{' '}
+          {dateFormatFrontend(new Date(booking.endDate))}
+        </div>
+        <div>
+          <strong>Bucher:</strong> {booking.booker.name}
+        </div>
+        <div>
+          <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
         </div>
-        <Input label="Von" type="date" value={booking.startDate} readOnly />
-        <Input label="Bis" type="date" value={booking.endDate} readOnly />
         {storingBookingError && (
           <div className="error-message flex-grow">{storingBookingError}</div>
         )}
         <div className="my-6">
           <button
-            onClick={onStoreBooking}
+            onClick={() => onStoreBooking(true)}
             className="btn btn-blue"
             disabled={storingBooking}
           >
-            Buchung Speichern
+            Buchung Bestätigen
+          </button>
+          <button
+            onClick={() => onStoreBooking(false)}
+            className="btn btn-red"
+            disabled={storingBooking}
+          >
+            Buchung Abweisen
           </button>
         </div>
       </main>