Redesigned Add Student Modal

[Atikpui007]

Summary

This pull request is the first step towards implementing Add/Edit Student feature by redesigning the modal to match the Figma design

Notes

1. Name Field

• Name Field according to the Figma is only one field.
• Split name field by spaces into two parts representing the first name and last name
• This is of the form [n....n-1, lastName]. This also handles cases where there are 2 or more names in the field.
• E.g First Middle Last splits into firstName = First Middle, lastName = Last

2. Accessibility Needs

• According to the Figma design, accessibility needs are to be treated as checkboxes and not single items
• Combined selected needs into comma-separated string
• E.g Crutches, Assistant, Knee Scooter

3. Other Field

• Other Field input adds to the selected needs
• E.g Crutches, Assistant, Other : Deaf/ Mute

Other Features

• Accessibility Needs are sorted in alphabetical order in the dropdown except Other which always remains at the bottom
• Persistent checkboxes for when Next Button is not yet clicked or form is not yet submitted
• Other field only shows when other is selected and next button is clicked
• Needs DropDown is another modal to be more inline with the Figma design
• Used Flexbox instead of the old grid layout : grid did not fully represent elements in the Modal
• Arrow in Needs field is a Unicode Character

Issues

1.Payload Response Error on needs

• When multiple needs are sent in the payload, the response error indicates that the accessibility needs list does not match the expected list
• Payload response with multiple needs : "accessibility must equal [\"\",\"Assistant\",\"Crutches\",\"Wheelchair\",\"Motorized Scooter\",\"Knee Scooter\",\"Low Vision/Blind\",\"Service Animals\",\"Other\"], but is set to Knee Scooter,Low Vision/Blind"

2.Inconsistent Add/Edit Behavior

• Some data is successfully added while others are not
  -Issue appears to be with the address field
  -Addresses such as "123 Example St","1 T St" and "Robert Purcell Community Center" work , while others such as "300 Day Hall" and "Cornell University" do not work, even with the same data as the ones that work for other fields

Add/Edit Student Modal

[dti-github-bot]

[diff-counting] Significant lines: 337.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[harrisonchin2523]

Hey Desmond, great work on redesigning the add student modal; it follows the Figma design extremely well and functions perfectly, except for the errors that you pointed out. I feel these errors may be due to how we are parsing addresses and how this parser determines if an address is correct. I'm not exactly sure why checking all of the accessibility needs creates an error because when I try to add a student with all these needs or even more than one need, they are not even added. If I were to be a little nitpicky, I would ask that the "Address" field be shifted further right to follow the Figma design; otherwise, nice work!

[Atikpui007]

Hey Desmond, great work on redesigning the add student modal, it follows the Figma design extremely well and functions perfectly except for the errors that you pointed out. I have a feeling that these errors may be due to how we are parsing addresses and how this parser determines if an address is correct or not. I'm not exactly sure why checking all of the accessibility needs creates an error because when I try to add a student with all these needs, they are not even added. If I were to be a little nitpicky, I would ask that the "Address" field be shifted further right to follow the Figma design, otherwise, nice work!

Thank you.
About the errors, for the accessibility needs I assume this happens because the needs are hardcoded in the rider model
carriage-web/server/src/models/rider.ts

export enum Accessibility { NONE = '', ASSISTANT = 'Assistant', CRUTCHES = 'Crutches', WHEELCHAIR = 'Wheelchair', MOTOR_SCOOTER = 'Motorized Scooter', KNEE_SCOOTER = 'Knee Scooter', LOW_VISION = 'Low Vision/Blind', SERVICE_ANIMALS = 'Service Animals', OTHER = 'Other', }

accessibility: { type: String, enum: Object.values(Accessibility), required: false, },

Commenting out the enum : Object.values(Accessibility) allows the addition of the comma-separated needs.
That's a potential fix that works for me.

For the address like you said it probably has to do with the parsing on the backend as well

address: { type: String, required: true, set: (address) => formatAddress(address as string), validate: (address) => isAddress(address as string), },

the formatAddress function does not account for all the different types of addresses.
The code for that is also in carriage-web/server/src/util/index.ts

[pratyush1712]

The work is awesome Desmond!! You are getting familiar with the codebase pretty quickly!

The issues you raised about the accesibility is on the backend. In the server/src/routes/rider, the Rider.accesibility is supposed to be a string. However, if we want to have multiple accesibilities, we would need to make accesibility field an array instead. We would also need to remove the enum condition, otherwise, we won't be able to store the information about Other.

For the invalidity of address, the problem is with the parseAddress function. We need to provide the following information in the address

export interface IParsedAddress {
zipCode: string;
stateAbbreviation: string;
stateName: string;
placeName: string;
addressLine1: string;
streetNumber: string;
streetSuffix: string;
streetName: string;
id: string;
}

We are gonna have to trust that that CULift provides all these information correctly, or we will have to remove the parsing completely. I would discuss this issue with Andrew

[namanhboi]

close