Design and Development of Page to capture Execom Member Data

[Prajwalprakash3722]

As discussed in #84, we will be transitioning from our current file-based storage system to a database. To facilitate this transition, we need to create a user-friendly form UI for data input that can replace our existing system.

The form UI should be designed to capture all the relevant data fields required for our new database system. Additionally, it should be robust and secure, with proper error handling to ensure data integrity.

Assigning this to @naveenbteli @sannidhi-s-shetty, please discuss and provide an estimated timeline for completion.

@dragonfist453 will be leading this feature

Deadline : 18/03/2023

[Prajwalprakash3722]

Take help of @jahnavi-urs in designing a new UI

[Prajwalprakash3722]

I will clarify more on requirements later by this weekend.

[Prajwalprakash3722]

Requirements

• A user-friendly form with clear labels for each field.
• Validation for each input field to ensure data integrity and prevent user errors.
• Error handling and feedback to alert users of any issues with their input and provide clear instructions for correction.
• The ability to edit and update existing data.
• Access controls to restrict data entry to authorized users. (Authenticated users can only access)
• The form should be responsive for different devices and screen sizes.
• The ability to add additional fields in the future if necessary. (Optional Tho)

Form Field Information:

• First Name: Required, text field, maximum length of 50 characters
• Last Name: Required, text field, maximum length of 50 characters
• Society : Required drop-down field populated with all society options
• Position: Required, drop-down field with pre-defined options such as "Chair", "Vice Chair", "Secretary", etc..
• Tenure Start: Required, date field
• Image File: Required, file upload field with allowed file types (e.g. JPG, PNG, JPEG) and maximum file size (3MB)

Extra Components

• Table: A table to display the list of execom members for each society. The table should include columns for the member's name, position, tenure start, tenure end, an option to end their tenure and include an edit button to allow authorized users to update the execom member's information.

• Confirm End Tenure Modal: when the user clicks end tenure button on the table, a confirmation model should pop up the user can then submit by confirming.

• Form Modal: when the user clicks the "Edit" button on the table, a modal should pop up containing a form with the member's information pre-populated. The user can then make any necessary changes and submit the form to update the member's information.

FYI @dragonfist453

[dragonfist453]

Thanks @Prajwalprakash3722 for the detailed requirements! All of this is good, I just have a better suggestion than using the suggested new table component. We could have a more interesting UI to this.

Here's an example mockup that I tried to give an idea:

When logged in as an admin, an "Add" (plus) icon can show up in the same size as the picture, which is clickable to show the Form Modal as described. Other than this, a "Edit" (pencil) icon can be added for each execom picture on the top right to be clicked on to edit the details of an execom. For the end tenure, a "Close" (X) icon next to the Executive Committee title with a tooltip of "End tenure", with a "Confirm end tenure" with a proper mean red warning along with a confirmation of typing their IEEE membership number should be nice (Idea taken from the "Delete repository" option in GitHub lmao)

@jahnavi-urs You can get as creative as you want with this

[Prajwalprakash3722]

Super cool idea, this means we don't need to develop another page, we just can build on the top of ExecomAccordian.

genius @dragonfist453 🔥🫡

[Prajwalprakash3722]

As we are aware, IEEE numbers are unique to each member. However, asking to enter their IEEE number for endTenure purposes would require additional server-side verification to ensure the correct IEEE number is being entered.

Instead, I suggest that we can validate endTenure using their full name or any other simple identification method. This would not only simplify the process also makes whoever is deleting the member's information to think for a second before confirming the action which doesn't deviate from the original goal.

[dragonfist453]

My question to this is... are we verifying if the Full Name entered is theirs or it's just so that they enter it?? If we are verifying if it is their name, isn't that still going to make a server call? If you mean "Full name of execom member", wasn't the idea to end tenure for the whole batch itself, and not individually for each member?

Another way to do this confirmation without making a server call is simply to store the UserID on login in localStorage and validate with that. It's not a security flaw and is an information we pass to the site when logging in.

OH and, when I meant enter IEEE number, I did not mean of the execom member whose tenure we are ending. I mean the IEEE number of the execom who logged in, whose userID is anyway the IEEE number.

[Prajwalprakash3722]

Oh, you meant the logged user ieee no, I was mistaken, then ieee number makes sense.

QUESTION?
can we have both features?

• Ending tenure for whole execom (batch)
• Ending tenure for a single person

[dragonfist453]

Oh yeah! We can do that but does it make sense?? Why would we end a tenure for just 1 guy? Is it because he got kicked out? left early? We surely can but I don't see how we will use that