Pages

Students Page

Overview

The Students page manages the display, filtering, uploading, and editing of student records. When the page loads, it retrieves an initial list of students from the backend and displays them in a searchable, filterable table. Users can also upload student data from an external file, select a student to view details in a modal, and edit that student’s information. Changes can be saved back to the server.

Initial Load

• When the component mounts, it fetches student data from api/students.
• The list is stored in a reactive students array.
• A computed property (studentsWithFullName) augments each student record with a derived fullName field.
• A separate count (studentCount) keeps track of the number of students.

After Upload

• The user uploads a student file through the FileUploadButton.
• The upload component parses the file and emits a dataParsed event.
• The parent page receives the parsed data and transforms each record into the required Student structure.
• The entire student list is replaced with the uploaded data.

Selection

• Clicking on a table row sets selectedStudent.
• When selectedStudent is not null, the detail modal opens.

Editing

• Clicking “Edit” populates editedStudent with a copy of the selected student.
• The modal switches into edit mode.
• Clicking “Save” sends a PUT request to api/students/:id with the updated data.
• On success, the updated student replaces the old data in both:
  • selectedStudent
  • The main students array

Filter Configuration

All filter states are stored in a filters object, which the table updates reactively.

Selectable Values

The following lists define valid options for filters and edit controls:

• Majors: CS, SE, EE, ME, BME, DS, CE, Systems, Other
• Years: Freshman, Sophomore, Junior, Senior
• Statuses: ACTIVE, INACTIVE

Derived Fields

• fullName is created by computing "LastName, FirstName" from each student.
• Year and Status display functions ensure values appear in a user-friendly format.

Role of handleParsed()

When the upload component finishes parsing, it passes an array of raw student entries. handleParsed() converts each entry into the structure expected by the table.

Transformation Steps

For each uploaded record:

1. Split the student's combined name into:

   • firstName

   • lastName

2. Map each field from the upload format into the Student model.
3. Assign default values (e.g., null) where data is not provided.
4. Replace the current students array with the formatted results.
5. Update the student count.

This ensures the table reflects the uploaded data immediately, without needing a page refresh.

Projects Page

Generate Teams Page

S.C.I.P.E Page

Demographics Page

This page is where the EPICS team can generate and view charts regarding demographic data of students enrolled in EPICS, as well as upload Excel sheets to update the version of the demographic data stored in the database. Demographic data tracks gender, ethnicity, and total enrollment in all sections of EPCS since spring 2016.

Here is an example of what the Demographics page looks like after generating the graph:

You can read more about the Demographics page here.