Students-list component Review

[HasinduWelarathne]

Add Component Review: students-list Component

Team Member

Hasindu Welarathne | 224009927

---

Component Name & Files

• students-list.coffee
• students-list.tpl.html
• students-list.scss

---

Component Purpose

The students-list component is responsible for displaying and managing a list of students within a unit.

It allows instructors (Convenors, Tutors, Admins, Auditors) to:

• View a dynamically filtered list of students based on user role.
• Search for students by name or email.
• Sort and paginate the list of students.
• Export the displayed student list to a CSV file.
• Navigate to an individual student’s dashboard for further details.
• Open an enrolment modal to add new students to the unit.

---

Component Outcomes and Interactions

✅ View and filter students dynamically based on user role
✅ Search by student name or email in real time
✅ Sort students by attributes like name, email, or status
✅ Paginate the list of students for easier navigation
✅ Export CSV of the filtered and sorted student list
✅ Navigate to an individual student’s dashboard on selection
✅ Open enrolment modal to add new students

---

Services and Dependencies

• UnitStudentEnrolmentModal
  ➔ Opens modal to enrol a new student
• newTaskService
  ➔ Provides statusClass and statusText for displaying student task/project status
• newUserService
  ➔ Supplies the current user info to filter students (e.g., tutor’s students only)
• analyticsService
  ➔ Logs analytics events (e.g., opening enrolment modal)

AngularJS Filters Used:

• showStudents
• projectFilter
• paginateAndSort

---

Visual References

Original design (before migration):

---

Component Review Checklist

• Student list displays correctly for the unit
• Filtering by role (Convenor/Tutor/Admin) works as expected
• Search box filters results by student name/email
• Pagination controls work for navigating pages
• Sorting columns reorders the list properly
• Export button downloads correct CSV data
• Clicking a student navigates to their dashboard
• Enrolment modal opens and allows adding a new student

---

Notes

This review documents the current state of the students-list component before migration to Angular 17 and TypeScript. It provides a reference baseline for functionality, UI behavior, and service dependencies.

The component will be migrated in a future task following the Doubtfire Web Migration Guide.

---

[nodogx]

I have looked at all 3 files located at doubtfire-web/src/app/units/states/students-list/ to ensure that the component review matches the above. Based on the code, I can confirm that purpose for this is to provide an interface that helps instructors to manage student lists effectively, enhancing usability by filtering, sorting and interaction pattens.

Good job with the Component Review @HasinduWelarathne

Please also note, Version Branch 9.x uses Angular version 18 instead of 17.

[amriith]

Hi @HasinduWelarathne Component Review Looks good, has covered all the essential steps. Good Work

[HasinduWelarathne]

Thank you very much for the comments, guys!