Migrate/Students-list

[HasinduWelarathne]

Title

Migrate Students-List Component

Description

This PR migrates the existing students-list component from AngularJS/CoffeeScript to Angular 17/TypeScript, adopting Angular Material and Tailwind CSS. All original functionality (search/typeahead, filters, sorting, progress bars, flag icons, campus/tutorial selects, CSV export, enrol modal, pagination, and row navigation) remains behaviorally identical.

Component Review

• Students-list component Review documentation#597

Type of change

• Migration

How Has This Been Tested?

1. Verified typing in the search bar filters the list and shows autocomplete suggestions.
2. Toggled “Advanced Filters” and applied “All Tutorials” vs “My Tutorials” filters.
3. Clicked each sort button (Grade, Plagiarism, Portfolio) twice to confirm original and reverse ordering.
4. Entered a term yielding no matches and saw the “No students found” alert.
5. Scanned table rows to confirm avatars, usernames, names, progress bars, and flag icons display correctly.
6. Opened campus and tutorial dropdowns to change selections and confirmed the list updates.
7. Clicked on a student row or avatar and confirmed navigation to the student details view.
8. Clicked “Export CSV” and verified the downloaded file’s headers and rows match the table.
9. Clicked “Enrol Student” and ensured the enrolment modal opens.
10. Used pagination controls to switch pages and change page size, ensuring the list updates.

Screenshots

Before:

After:

Testing Checklist

• Tested in latest Chrome
• Tested in latest Safari
• Tested in latest Firefox

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[chelaz1234]

I tried running the branch locally but encountered a couple of build-time Angular errors:

Can you please check and add modules where necessary?

Let me know once updated so I can re-review. Thanks!

[amriith]

Please remove font-bold from the element attributes as font-bold here is not a valid HTML and has no effect.

[amriith]

Hi @HasinduWelarathne please have a look at the commented changes, let me know if you need any help with that. Rest everything looks good to me. Good Work

[chelaz1234]

This migration is done according to the migration guide and the old component has been removed, and the new component has been successfully linked and downgraded. Great work!

[HasinduWelarathne]

Hi @amriith Thank you for the suggestion. I removed the unused font-bold attribute from the header elements and tightened up the SCSS to use consistent font-weight styling for the student-list table

[aNebula]

There's some difference between the before and after:

1. Tabs selector looks different.
2. Previous allows sorting by Username, new allows sorting by flag.

These needs to be resolved.

[HasinduWelarathne]

Updated: unified tab selector styling and disabled flag sorting to match original behavior.