Redesigned the Add/Edit Student Modal

frontend/src/components/Modal/RiderModalInfo.tsx

@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import cn from 'classnames';
-import {
-  Button,
-  Input,
-  Label,
-  SelectComponent,
-} from '../FormElements/FormElements';
+import { Button, Input, Label } from '../FormElements/FormElements';
 import styles from './ridermodal.module.css';
 import { ObjectType, Accessibility, Rider } from '../../types/index';
 
@@ -18,11 +13,10 @@ type ModalFormProps = {
 };
 
 type FormData = {
-  firstName: string;
-  lastName: string;
+  name: string;
   netid: string;
   phoneNumber: string;
-  needs: string;
+  needs: Accessibility[];
   address: string;
   joinDate: string;
   endDate: string;
@@ -36,27 +30,24 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
   rider,
 }) => {
   const {
-    control,
     register,
     formState: { errors },
     handleSubmit,
     getValues,
   } = useForm<FormData>({
     defaultValues: {
-      firstName: rider?.firstName ?? '',
-      lastName: rider?.lastName ?? '',
+      name: (rider?.firstName ?? '') + (rider?.lastName ?? ''),
       netid: rider?.email.split('@')[0] ?? '',
       phoneNumber: rider?.phoneNumber ?? '',
-      needs: rider?.accessibility ?? '',
+      needs: [],
       address: rider?.address ?? '',
       joinDate: rider?.joinDate ?? '',
       endDate: rider?.endDate ?? '',
     },
   });
 
   const beforeSubmit: SubmitHandler<FormData> = ({
-    firstName,
-    lastName,
+    name,
     netid,
     phoneNumber,
     needs,
@@ -66,7 +57,12 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
   }) => {
     const email = netid ? `${netid}@cornell.edu` : undefined;
     const accessibility = needs;
-    onSubmit({
+    const nameParts = name.trim().split(/\s+/);
+    const firstName =
+      nameParts.length > 1 ? nameParts.slice(0, -1).join(' ') : nameParts[0];
+    const lastName = nameParts.length > 1 ? nameParts.slice(-1)[0] : '';
+
+    const payload = {
       firstName,
       lastName,
       email,
@@ -75,7 +71,11 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
       address,
       joinDate,
       endDate,
-    });
+    };
+
+    console.log('Form payload:', payload);
+
+    onSubmit(payload);
   };
 
   const cancel = () => {
@@ -92,32 +92,19 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
     <form onSubmit={handleSubmit(beforeSubmit)} className={styles.form}>
       <div className={cn(styles.inputContainer, styles.rideTime)}>
         <div className={cn(styles.gridR1, styles.gridCSmall1)}>
-          <Label className={styles.label} htmlFor="firstName">
-            First Name:{' '}
+          <Label className={styles.label} htmlFor="name">
+            Name:{' '}
           </Label>
           <Input
-            id="firstName"
-            {...register('firstName', { required: true })}
+            id="name"
             type="text"
+            {...register('name', {
+              required: true,
+            })}
             aria-required="true"
             className={styles.firstRow}
           />
-          {errors.firstName && (
-            <p className={styles.error}>First name cannot be empty</p>
-          )}
-          <Label className={styles.label} htmlFor="lastName">
-            Last Name:{' '}
-          </Label>
-          <Input
-            id="lastName"
-            {...register('lastName', { required: true })}
-            type="text"
-            className={styles.firstRow}
-            aria-required="true"
-          />
-          {errors.lastName && (
-            <p className={styles.error}>Last name cannot be empty</p>
-          )}
+          {errors.name && <p className={styles.error}>Name cannot be empty</p>}
         </div>
         <div className={cn(styles.gridR1, styles.gridCSmall2)}>
           <Label className={styles.label} htmlFor="netid">
@@ -156,51 +143,29 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
             <p className={styles.error}>Phone number is not valid</p>
           )}
         </div>
+
+        {/* Replacing SelectComponent with native <select> */}
         <div className={cn(styles.gridR2, styles.gridCBig1)}>
           <Label className={styles.label} htmlFor="needs">
             Needs:{' '}
           </Label>
           <select
             id="needs"
             {...register('needs', { required: true })}
-            aria-required="true"
-            onChange={(e) => setNeedsOption(e.target.value)}
+            multiple
+            className={styles.firstRow}
           >
-            {Object.values(Accessibility).map((value, index) => (
-              <option key={index} value={value}>
+            {Object.entries(Accessibility).map(([key, value]) => (
+              <option key={key} value={value}>
                 {value}
               </option>
             ))}
           </select>
-          {needsOption === 'Other' && (
-            <Input
-              id="otherNeeds"
-              {...register('otherNeeds')}
-              type="text"
-              placeholder="Please Specify Needs"
-            />
-          )}
-          {errors.needs?.type === 'validate' && (
-            <p className={styles.error}>
-              Invalid needs. You can enter 'Assistant', 'Crutches', or
-              'Wheelchair'
-            </p>
+          {errors.needs && (
+            <p className={styles.error}>Please select at least one need</p>
           )}
         </div>
 
-        <div className={cn(styles.gridR2, styles.gridCBig2)}>
-          <SelectComponent<FormData>
-            name="needs"
-            datalist={Object.entries(Accessibility).map(([key, value]) => ({
-              id: key,
-              name: value,
-            }))}
-            isSearchable={true}
-            control={control}
-            isMulti={true}
-            rules={{ required: 'Rider name is required' }}
-          />
-        </div>
         <div className={cn(styles.gridR2, styles.gridCBig2)}>
           <Label className={styles.label} htmlFor="address">
             Address:{' '}

frontend/src/components/Modal/ridermodal.module.css

@@ -9,31 +9,63 @@
   margin-bottom: 1.5rem;
 }
 
+.inputContainer input[type='text'],
+.inputContainer input[type='tel'],
+.inputContainer input[type='date'],
+.inputContainer select {
+  border: 1px solid #808080;
+  width: 100%;
+  border-radius: 6px;
+  height: 1.75rem; /* Adjust height as needed */
+  font-size: 1rem; /* Adjust font size as needed */
+  /* Add any other relevant styling here */
+}
+
+.inputContainer input[type='text'],
+.inputContainer input[type='tel'],
+.inputContainer input[type='date'],
+.inputContainer select {
+  border: 1px solid #808080;
+  width: 100%;
+  border-radius: 6px;
+  height: 1.75rem; /* Adjust height as needed */
+  font-size: 1rem; /* Adjust font size as needed */
+  /* Add any other relevant styling here */
+}
+
 .rideTime {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-columns: repeat(10, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  column-gap: 1rem;
-  row-gap: 1rem;
+  column-gap: 2rem;
+  row-gap: 2rem;
+  column-gap: 2rem;
+  row-gap: 2rem;
 }
 
 .gridCSmall1 {
-  grid-column: 1 / span 2;
+  grid-column: 1 / 5;
+  grid-column: 1 / 5;
 }
 
 .gridCSmall2 {
-  grid-column: 3 / span 2;
+  grid-column: 5 / 7;
+  grid-column: 5 / 7;
 }
 
 .gridCSmall3 {
-  grid-column: 5 / span 2;
+  grid-column: 7 / 11;
+  grid-column: 7 / 11;
 }
 
 .gridCBig1 {
-  grid-column: 1 / span 3;
+  grid-column: 1 / 5;
+  grid-column: 1 / 5;
 }
 .gridCBig2 {
-  grid-column: 4 / span 3;
+  grid-column: 5 / 11;
+  grid-column: 5 / 11;
 }
 .gridCAll {
   grid-column: 1 / span 6;
@@ -72,10 +104,13 @@
 
 .riderDate {
   font-size: 1rem !important;
+  color: #808080;
+  color: #808080;
 }
 
 .firstRow {
-  max-width: 90%;
+  max-width: 100%;
+  max-width: 100%;
 }
 
 .lastRow {
@@ -109,6 +144,11 @@
   cursor: pointer;
 }
 
+.label {
+  font-size: smaller;
+  color: #000000;
+}
+
 @media screen and (max-width: 1092px) {
   .form {
     display: block;

frontend/src/components/UserDetail/PastRides.tsx

@@ -3,12 +3,12 @@ import { Row, Table } from '../TableComponents/TableComponents';
 import { Ride } from '../../types';
 import styles from './userDetail.module.css';
 
-type pastRideProps = {
+type PastRideProps = {
   isStudent: boolean;
   rides: Ride[];
 };
 
-const PastRides = ({ isStudent, rides }: pastRideProps) => {
+const PastRides = ({ isStudent, rides }: PastRideProps) => {
   const colSizes = [1, 1, 1, 1, 1];
   const headers = [
     isStudent ? 'Date' : 'Name',
@@ -38,15 +38,21 @@ const PastRides = ({ isStudent, rides }: pastRideProps) => {
               .toLowerCase();
             const { rider } = ride;
             const name = `${rider.firstName} ${rider.lastName}`;
-            const needs = rider.accessibility || '';
+
+            // Convert accessibility array to string
+            const needs =
+              rider.accessibility && rider.accessibility.length > 0
+                ? rider.accessibility.join(', ')
+                : 'None';
+
             const pickupLocation = ride.startLocation.name;
             const pickupTag = ride.startLocation.tag;
             const dropoffLocation = ride.endLocation.name;
             const dropoffTag = ride.endLocation.tag;
 
             const valueNameDate = isStudent ? date : name;
             const valueDateTime = isStudent
-              ? `${startTime}${' - '}${endTime}`
+              ? `${startTime} - ${endTime}`
               : date;
             const valuePickup = { data: pickupLocation, tag: pickupTag };
             const valueDropoff = { data: dropoffLocation, tag: dropoffTag };
@@ -56,7 +62,7 @@ const PastRides = ({ isStudent, rides }: pastRideProps) => {
               valueDateTime,
               valuePickup,
               valueDropoff,
-              needs,
+              needs, // Now needs is a string
             ];
 
             return <Row data={inputValues} colSizes={colSizes} key={index} />;

frontend/src/components/UserTables/RidesTable.tsx

@@ -63,7 +63,13 @@ const RidesTable = ({ rides, hasButtons }: RidesTableProps) => {
           });
           const { rider } = ride;
           const riderName = rider ? `${rider.firstName} ${rider.lastName}` : '';
-          const needs = rider ? rider.accessibility || '' : '';
+
+          // Convert accessibility array to string
+          const needs =
+            rider && rider.accessibility && rider.accessibility.length > 0
+              ? rider.accessibility.join(', ')
+              : 'None';
+
           const pickupLocation = ride.startLocation.name;
           const pickupTag = ride.startLocation.tag;
           const dropoffLocation = ride.endLocation.name;