From 13de735be6effa436c0dddb3ffb8c2b31110a1ba Mon Sep 17 00:00:00 2001
From: "riho.takagi" <rihohearts@gmail.com>
Date: Mon, 8 Jan 2024 11:46:38 -0500
Subject: [PATCH] Chartfield for Hiring security

---
 .../client/admin-page/components/Bookings.tsx | 21 +++++-
 .../src/client/booking/approval_email.html    |  3 +
 .../client/booking/components/FormInput.tsx   | 68 ++++++++++++++++++-
 .../client/booking/components/SheetEditor.tsx |  5 +-
 media_commons_booking_app/src/server/admin.js |  4 ++
 5 files changed, 97 insertions(+), 4 deletions(-)

diff --git a/media_commons_booking_app/src/client/admin-page/components/Bookings.tsx b/media_commons_booking_app/src/client/admin-page/components/Bookings.tsx
index 48e8d201..46f2b756 100644
--- a/media_commons_booking_app/src/client/admin-page/components/Bookings.tsx
+++ b/media_commons_booking_app/src/client/admin-page/components/Bookings.tsx
@@ -114,6 +114,9 @@ export const Bookings = () => {
       catering: values[24],
       cateringService: values[25],
       hireSecurity: values[26],
+      chartFieldForCatering: values[27],
+      chartFieldForSecurity: values[28],
+      chartFieldForRoomSetup: values[29],
     };
   };
 
@@ -213,6 +216,9 @@ export const Bookings = () => {
               <th scope="col" className="px-2 py-3">
                 Set up
               </th>
+              <th scope="col" className="px-2 py-3">
+                Chartfield Information for Room Setup
+              </th>
               <th scope="col" className="px-2 py-3">
                 Media Service
               </th>
@@ -223,11 +229,14 @@ export const Bookings = () => {
                 Catering Service
               </th>
               <th scope="col" className="px-2 py-3">
-                Chartfield Information
+                Chartfield Information for catering
               </th>
               <th scope="col" className="px-2 py-3">
                 Hire security
               </th>
+              <th scope="col" className="px-2 py-3">
+                Chartfield Information for security
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -354,6 +363,9 @@ export const Bookings = () => {
                       </>
                     )}
                   </td>
+                  <td className="px-2 py-4 w-24">
+                    {booking.chartFieldForRoomSetup}
+                  </td>
                   <td className="px-2 py-4 w-24">
                     {booking.mediaServices}
                     {booking.mediaServicesDetails && (
@@ -367,8 +379,13 @@ export const Bookings = () => {
                   </td>
                   <td className="px-2 py-4 w-18">{booking.catering}</td>
                   <td className="px-2 py-4 w-18">{booking.cateringService}</td>
-
+                  <td className="px-2 py-4 w-24">
+                    {booking.chartFieldForCatering}
+                  </td>
                   <td className="px-2 py-4 w-18">{booking.hireSecurity}</td>
+                  <td className="px-2 py-4 w-24">
+                    {booking.chartFieldForSecurity}
+                  </td>
                 </tr>
               );
             })}
diff --git a/media_commons_booking_app/src/client/booking/approval_email.html b/media_commons_booking_app/src/client/booking/approval_email.html
index 38732308..3f97ae82 100644
--- a/media_commons_booking_app/src/client/booking/approval_email.html
+++ b/media_commons_booking_app/src/client/booking/approval_email.html
@@ -134,6 +134,9 @@ <h2>Room Reservation Request</h2>
         Room setup needed?:
         <?= roomSetup ?>
         <?= setupDetails ?>
+      </p>
+        Chartfield for Room setup?:
+        <?= char ?>
       </p>
       <p>
         Media Services:
diff --git a/media_commons_booking_app/src/client/booking/components/FormInput.tsx b/media_commons_booking_app/src/client/booking/components/FormInput.tsx
index a554561a..e9c40677 100644
--- a/media_commons_booking_app/src/client/booking/components/FormInput.tsx
+++ b/media_commons_booking_app/src/client/booking/components/FormInput.tsx
@@ -26,6 +26,9 @@ export type Inputs = {
   expectedAttendance: string;
   cateringService: string;
   missingEmail?: string;
+  chartFieldForCatering: string;
+  chartFieldForSecurity: string;
+  chartFieldForRoomSetup: string;
 };
 
 const ErrorMessage = (message) => {
@@ -39,7 +42,7 @@ const ErrorMessage = (message) => {
   );
 };
 
-const FormInput = ({ hasEmail, roomNumber, handleParentSubmit }) => {
+const FormInput = ({ hasEmail, handleParentSubmit, selectedRoom }) => {
   const {
     register,
     handleSubmit,
@@ -56,6 +59,9 @@ const FormInput = ({ hasEmail, roomNumber, handleParentSubmit }) => {
       mediaServicesDetails: '',
       role: '',
       catering: '',
+      chartFieldForCatering: '',
+      chartFieldForSecurity: '',
+      chartFieldForRoomSetup: '',
       hireSecurity: '',
       attendeeAffiliation: '',
       department: '',
@@ -67,7 +73,10 @@ const FormInput = ({ hasEmail, roomNumber, handleParentSubmit }) => {
   const [resetRoom, setResetRoom] = useState(false);
   const [bookingPolicy, setBookingPolicy] = useState(false);
   const [showTextbox, setShowTextbox] = useState(false);
+  const roomNumber = selectedRoom.map((room) => room.roomId);
 
+  const maxCapacity = selectedRoom.map((room) => room.maxCapacity);
+  console.log('maxCapacity', maxCapacity);
   const disabledButton = !(checklist && resetRoom && bookingPolicy);
   useEffect(() => {
     trigger();
@@ -548,6 +557,25 @@ const FormInput = ({ hasEmail, roomNumber, handleParentSubmit }) => {
           />
         </div>
       )}
+      {watch('roomSetup') === 'yes' && (
+        <div className="mb-6">
+          <label
+            htmlFor="chartFieldForRoomSetup"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+          >
+            ChartField for Campus Safety
+          </label>
+          <div className="flex items-center mb-4">
+            <input
+              type="text"
+              id="chartFieldForRoomSetup"
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[600px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              placeholder=""
+              {...register('chartFieldForRoomSetup')}
+            />
+          </div>
+        </div>
+      )}
       <div className="mb-6">
         <label
           htmlFor="mediaServices"
@@ -720,6 +748,25 @@ const FormInput = ({ hasEmail, roomNumber, handleParentSubmit }) => {
           </div>
         </div>
       )}
+      {watch('catering') === 'yes' && (
+        <div className="mb-6">
+          <label
+            htmlFor="chartFieldForCatering"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+          >
+            ChartField for Event Cleanup
+          </label>
+          <div className="flex items-center mb-4">
+            <input
+              type="text"
+              id="chartFieldForCatering"
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[600px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              placeholder=""
+              {...register('chartFieldForCatering')}
+            />
+          </div>
+        </div>
+      )}
 
       <div className="mb-6">
         <label
@@ -756,6 +803,25 @@ const FormInput = ({ hasEmail, roomNumber, handleParentSubmit }) => {
           </select>
         </div>
       </div>
+      {watch('hireSecurity') === 'yes' && (
+        <div className="mb-6">
+          <label
+            htmlFor="chartFieldForSecurity"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+          >
+            ChartField for Campus Safety
+          </label>
+          <div className="flex items-center mb-4">
+            <input
+              type="text"
+              id="chartFieldForSecurity"
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[600px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              placeholder=""
+              {...register('chartFieldForSecurity')}
+            />
+          </div>
+        </div>
+      )}
 
       <div className="mb-6">
         <label
diff --git a/media_commons_booking_app/src/client/booking/components/SheetEditor.tsx b/media_commons_booking_app/src/client/booking/components/SheetEditor.tsx
index 581b1d89..9eaadead 100644
--- a/media_commons_booking_app/src/client/booking/components/SheetEditor.tsx
+++ b/media_commons_booking_app/src/client/booking/components/SheetEditor.tsx
@@ -70,6 +70,9 @@ const SheetEditor = () => {
     'catering',
     'cateringService',
     'hireSecurity',
+    'chartFieldForCatering',
+    'chartFieldForSecurity',
+    'chartFieldForRoomSetup',
   ];
 
   useEffect(() => {
@@ -255,8 +258,8 @@ const SheetEditor = () => {
           </button>
           <FormInput
             hasEmail={userEmail ? true : false}
-            roomNumber={selectedRoom.map((room) => room.roomId)}
             handleParentSubmit={handleSubmit}
+            selectedRoom={selectedRoom}
           />
         </div>
       );
diff --git a/media_commons_booking_app/src/server/admin.js b/media_commons_booking_app/src/server/admin.js
index 26379ee9..db07e338 100644
--- a/media_commons_booking_app/src/server/admin.js
+++ b/media_commons_booking_app/src/server/admin.js
@@ -44,7 +44,11 @@ export const bookingContents = (id) => {
     mediaServicesDetails: values[24],
     catering: values[25],
     cateringService: values[26],
+
     hireSecurity: values[27],
+    chartFieldForCatering: values[28],
+    chartFieldForSecurity: values[29],
+    chartFieldForRoomSetup: values[30],
     approvalUrl: approvalUrl(id),
     rejectedUrl: rejectUrl(id),
   };