Migrate Students-List Component #389

HasinduWelarathne · 2025-08-07T09:08:32Z

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

thoth-tech/documentation#597

Type of change

Migration

How Has This Been Tested?

Verified typing in the search bar filters the list and shows autocomplete suggestions.
Toggled “Advanced Filters” and applied “All Tutorials” vs “My Tutorials” filters.
Clicked each sort button (Grade, Plagiarism, Portfolio) twice to confirm original and reverse ordering.
Entered a term yielding no matches and saw the “No students found” alert.
Scanned table rows to confirm avatars, usernames, names, progress bars, and flag icons display correctly.
Opened campus and tutorial dropdowns to change selections and confirmed the list updates.
Clicked on a student row or avatar and confirmed navigation to the student details view.
Clicked “Export CSV” and verified the downloaded file’s headers and rows match the table.
Clicked “Enrol Student” and ensured the enrolment modal opens.
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

…ting

Pasindufdo98

Hi Hasindu,
I pulled your branch and tested locally, I was able to successfully build and run the application. When I was interacting with your component, I found that students are not correctly mapping when selecting a student in the list.
As an example,
when I selected student 1, it navigates to student 8 so on.
And rest of the functionalities looks good to me.

HasinduWelarathne · 2025-08-18T13:01:42Z

Hi Hasindu, I pulled your branch and tested locally, I was able to successfully build and run the application. When I was interacting with your component, I found that students are not correctly mapping when selecting a student in the list. As an example, when I selected student 1, it navigates to student 8 so on. And rest of the functionalities looks good to me.

Hi @Pasindufdo98 ,

Thanks a lot for testing and pointing that out. You were absolutely right, the navigation was using student.id instead of the project’s id, which caused the mismatch. I’ve fixed it now so that the correct student opens when selecting a student.
Appreciate your thorough review!

WaelAlahamdi · 2025-08-20T12:04:33Z

Hi Hasindu,
I was able to build and run the branch successfully. The new student list view and navigation to individual student dashboards are working as intended.
One issue I observed:
• When selecting a student and then navigating back to the student list, the Stats progress bar in the list disappears. See Student_10 in the screenshot to clarify.
• The progress data only reloads after a full page refresh, which may affect usability for tutors monitoring students.
Overall, the functionality looks good, but this refresh issue should be addressed to ensure consistent display of student stats.

… dashboard - Added sessionStorage-based snapshot mechanism to restore student's taskStats. - Ensures correct stats display when returning from student dashboard. - Keeps other component behavior unchanged.

HasinduWelarathne · 2025-08-24T11:25:05Z

Hi Hasindu, I was able to build and run the branch successfully. The new student list view and navigation to individual student dashboards are working as intended. One issue I observed: • When selecting a student and then navigating back to the student list, the Stats progress bar in the list disappears. See Student_10 in the screenshot to clarify. • The progress data only reloads after a full page refresh, which may affect usability for tutors monitoring students. Overall, the functionality looks good, but this refresh issue should be addressed to ensure consistent display of student stats.

Hi @WaelAlahamdi

Thank you for testing the branch and sharing your feedback. I’ve fixed the issue with the stats progress bar. It would be great if you could review the latest changes again and confirm everything is working as expected.

Thanks!

Pasindufdo98

LGTM

Hi @HasinduWelarathne ,

I retested your PR and confirmed that it now navigates correctly to each student when their name is clicked. Great work!

WaelAlahamdi · 2025-08-25T06:16:14Z

Hi @HasinduWelarathne,

I retested the branch and confirmed that the stats progress bar now works correctly and navigation to each student functions as expected. Everything looks great, well done!

returnMarcco · 2025-09-14T05:38:51Z

Hi @HasinduWelarathne,

I have tested the migration in the Chrome browser. The component functions as expected. There are no immediately obvious UX/UI, console, or API response errors.

The progress bar matches the line graph that can be viewed by clicking into a student record.
I am able to change a student's campus.
I am able to add/remove tutorials.
I am able to modify the student's target grade.
I am able to enrol students.
I am able to export the student list as a csv.

Well done on the migration, great work.

returnMarcco

Pre-approving this PR.

returnMarcco · 2025-09-14T05:28:52Z

src/app/doubtfire-angular.module.ts

 // Lottie animation module
 // import {LottieModule, LottieCacheModule} from 'ngx-lottie';
+import { FStudentsListComponent } from './units/states/students-list/students-list.component';
+


Can you please run the linter (Prettier) on all changed files to remove whitespaces and other inconsistencies. Cheers.

HasinduWelarathne added 5 commits May 20, 2025 01:00

WIP:complete migration to Angular 17 + Tailwind

bf59661

Migrate students-list component

96010fe

fix: update student-list component template and styles

fd6123e

style(students-list): unify tab selector styling and disable flag sor…

fb7a922

…ting

fix: migrate students-list.component.ts to Angular 17

f606f61

Pasindufdo98 reviewed Aug 18, 2025

View reviewed changes

fix(students-list): use project.id instead of student.id for navigation

97349e7

HasinduWelarathne closed this Aug 18, 2025

HasinduWelarathne reopened this Aug 18, 2025

HasinduWelarathne requested a review from Pasindufdo98 August 18, 2025 13:03

fix(students-list): restore progress stats after navigating back from…

80d9bd5

… dashboard - Added sessionStorage-based snapshot mechanism to restore student's taskStats. - Ensures correct stats display when returning from student dashboard. - Keeps other component behavior unchanged.

Pasindufdo98 approved these changes Aug 24, 2025

View reviewed changes

WaelAlahamdi approved these changes Aug 25, 2025

View reviewed changes

returnMarcco approved these changes Sep 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Migrate Students-List Component #389

Migrate Students-List Component #389

Uh oh!

HasinduWelarathne commented Aug 7, 2025

Uh oh!

Pasindufdo98 left a comment

Uh oh!

HasinduWelarathne commented Aug 18, 2025

Uh oh!

WaelAlahamdi commented Aug 20, 2025

Uh oh!

HasinduWelarathne commented Aug 24, 2025

Uh oh!

Pasindufdo98 left a comment •

edited

Loading

Uh oh!

WaelAlahamdi commented Aug 25, 2025

Uh oh!

returnMarcco commented Sep 14, 2025 •

edited

Loading

Uh oh!

returnMarcco left a comment

Uh oh!

returnMarcco Sep 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Migrate Students-List Component #389

Are you sure you want to change the base?

Migrate Students-List Component #389

Uh oh!

Conversation

HasinduWelarathne commented Aug 7, 2025

Description

Component Review

Type of change

How Has This Been Tested?

Screenshots

Testing Checklist

Checklist

Uh oh!

Pasindufdo98 left a comment

Choose a reason for hiding this comment

Uh oh!

HasinduWelarathne commented Aug 18, 2025

Uh oh!

WaelAlahamdi commented Aug 20, 2025

Uh oh!

HasinduWelarathne commented Aug 24, 2025

Uh oh!

Pasindufdo98 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

LGTM

Uh oh!

WaelAlahamdi commented Aug 25, 2025

Uh oh!

returnMarcco commented Sep 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

returnMarcco left a comment

Choose a reason for hiding this comment

Uh oh!

returnMarcco Sep 14, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Pasindufdo98 left a comment •

edited

Loading

returnMarcco commented Sep 14, 2025 •

edited

Loading