refactor: upload files

[tinahoa]

Description

Migrates the grade-icon from CoffeeScript to TypeScript as a visual indicator for grading within the application. It provides a user interface for displaying a grade with an associated tooltip, making it easier for tutors to quickly assess and review student performance.

Before:

After:

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

1. Login as student and create portfolio
   Select the target grade, the grade icon appears properly.

2. Login as tutor and select student list
   The grade icon appears properly according to the student's target grade.

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

[sammyrolfe]

Hi Thuy,

I am receiving type error when trying to load students using your branch. There are students attached the course I'm checking but the page is appearing blank on the students page in the unit.

can you please confirm this is working for your and resubmit?

[tinahoa]

Hi Sam,

I tested it again, and under the inbox dropdown section, please select the "Student" item. It will display their name corresponding to their target grade

Under the tutor's page console output, I don't believe that these errors are coming from my 'grade-icon' component code. Would you mind checking it again and refreshing the Visual Studio Code and Docker to ensure they receive the latest code? (Please see attached image below)

Please let me know if there's any issue.

[b0ink]

The component is working fine and looks good on my end - I believe I encountered a similar issue to @sammyrolfe, but clearing the cache resolved this (most likely conflicts between 9.x and 8.0.x branches)

One issue I noticed was that the tooltips weren't working as intended.

To fix this you'll need to continue using tooltip="..." instead of matTooltip on the components that haven't been migrated yet (in any of the *.tpl.html files)

However, there may now be an issue with both the old bootstrap tooltip and matTooltip from within the grade-icon being displayed.. it would probably be best to remove the matTooltip from the grade-icon entirely so that it doesn't conflict on the tooltip's being set when using the component, and these can later be updated to matTooltip when those components are being migrated.

[tinahoa]

Hi,

I have recovery the tooltip="..." in *.tpl.html files. Can you review my PR again?
Please let me know if there is anything needs to be corrected. Thank you

Thuy Tien Hoa (223623149)

[AusBruce]

The component is working in my local machine, and based on your changed file, I believe your have done the front-end migration, it is ready to put on upstream review!

[DudeUnleashed]

Hi,
Ihe functionality seems intact as shown in the before and after screenshots, works across both my browsers fine for both student and tutors. The code changes seem appropriate, and the other sections that reference this component are updated as expected. Module seems sufficiently migrated.

[aNebula]

@tinahoa The old CoffeeScript, HTML and SCSS files needs to be deleted.
@AusBruce @DudeUnleashed

[aNebula]

@tinahoa please open a upstream PR against doubtfire-lms/doubtfire-web 9.x branch.
The changes to the file src/app/common/grade-icon/grade-icon.component.scss is not necessary, so you can leave that out of the upstream PR.
This upstream PR, when merged, will show up in your personal github portfolio as contribution to open source project, so you might want to do this quickly, as employers often look at candidate's github profile.