Add guest status to admin booking view (#606)

* improve docs and add the membership status column * allow admin view to overflow on smaller screens
UoaWDCC · Jul 8, 2024 · 026f0fa · 026f0fa
1 parent 69ad946
commit 026f0fa
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 22 deletions.
diff --git a/uasc-next/src/app/admin/layout.tsx b/uasc-next/src/app/admin/layout.tsx
@@ -26,11 +26,11 @@ const AdminLayout = ({ children }: Readonly<{ children: ReactNode }>) => {
           <DateSelectionProvider>
             <AdminNavbar />
             <div
-              className="bg-mountain-background-image relative z-10 flex min-h-[100vh] w-full
-      flex-col items-center bg-cover bg-top bg-no-repeat"
+              className="bg-mountain-background-image relative z-10 flex min-h-[100vh] w-fit
+      min-w-full flex-col items-center bg-cover bg-top bg-no-repeat md:px-8"
             >
               <div className="bg-gray-1 pointer-events-none absolute -z-30 h-full w-full opacity-70" />
-              <div className="z-20 flex w-full max-w-[1200px] flex-col items-center pb-8 pt-16">
+              <div className="z-20 flex w-full flex-col items-center pb-8 pt-16">
                 {children}
               </div>
             </div>

diff --git a/uasc-next/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx b/uasc-next/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx
@@ -11,6 +11,9 @@ import { useClickOutside } from "@/components/utils/Utils"
 import ModalContainer from "@/components/generic/ModalContainer/ModalContainer"
 import AdminBookingCreationPopUp from "./AdminBookingCreationPopUp"
 
+/**
+ * The format of the columns in the admin booking view.
+ */
 export type BookingMemberColumnFormat = {
   /**
    * The user id, used for adding handlers for each individual table row.
@@ -22,6 +25,7 @@ export type BookingMemberColumnFormat = {
   Emergency?: string
   Email?: string
   "Dietary Requirement"?: string
+  Membership?: string
 }
 
 interface IAdminBookingView {
@@ -67,13 +71,18 @@ interface IAdminBookingView {
   isUpdating?: boolean
 }
 
+/**
+ * Should be updated with an "empty" default value so the table displays
+ * the headers even if the list of data is empty
+ */
 const defaultData = {
   [TABLE_ROW_IDENTIFIER_KEY]: "",
   Date: "",
   Name: "",
   Number: "",
   Email: "",
-  "Dietary Requirement": ""
+  "Dietary Requirement": "",
+  Membership: ""
 }
 
 /**

diff --git a/uasc-next/src/components/composite/Admin/AdminBookingView/WrappedAdminBookingView.tsx b/uasc-next/src/components/composite/Admin/AdminBookingView/WrappedAdminBookingView.tsx
@@ -20,24 +20,35 @@ const WrappedAdminBookingView = () => {
     Timestamp.fromDate(DateUtils.convertLocalDateToUTCDate(startDate)),
     Timestamp.fromDate(DateUtils.convertLocalDateToUTCDate(endDate))
   )
-  const dataList = data?.flatMap(
-    (date) =>
-      date.users.map((user) => {
-        const newData: BookingMemberColumnFormat = {
-          uid: ""
-        }
-        newData.uid = user.bookingId
-        newData.Date = DateUtils.formattedNzDate(
-          new Date(DateUtils.timestampMilliseconds(date.date))
-        )
-        newData.Emergency = user.emergency_contact
-        newData.Name = `${user.first_name} ${user.last_name}`
-        newData.Number = user.phone_number ? user.phone_number.toString() : ""
-        newData.Email = user.email
-
-        newData["Dietary Requirement"] = user.dietary_requirements
-        return newData
-      }) || []
+  /**
+   * This chooses the fields to display on the booking view table
+   *
+   * Any field additions/deletions require changing `BookingMemberColumnFormat`
+   */
+  const dataList = useMemo(
+    () =>
+      data?.flatMap(
+        (date) =>
+          date.users.map((user) => {
+            const newData: BookingMemberColumnFormat = {
+              uid: ""
+            }
+            newData.uid = user.bookingId
+            newData.Date = DateUtils.formattedNzDate(
+              new Date(DateUtils.timestampMilliseconds(date.date))
+            )
+            newData.Name = `${user.first_name} ${user.last_name}`
+            newData.Number = user.phone_number
+              ? user.phone_number.toString()
+              : ""
+            newData.Email = user.email
+            newData["Dietary Requirement"] = user.dietary_requirements
+            newData.Emergency = user.emergency_contact
+            newData.Membership = user.membership
+            return newData
+          }) || []
+      ),
+    [data]
   )
   const sortedData = useMemo(
     () =>