Migrate/unit ilo edit modal

[ivanjustin83]

Description

This task migrates the unit-ilo-edit-modal component from CoffeeScript to TypeScript. This modal is used to add or edit learning outcomes that correspond to each unit, using OutcomeLearningService to associate it with a certain unit ID. The modal displays the title of the ILO, the abbreviation, and its description.

Type of change

• Frontend Migration

How Has This Been Tested?

• Log in as atutor and select any unit.
• Go to the administration section of the unit, and then select the Learning Outcomes subtab.
• Either press the Add Outcome button or any pre-existing ILO. The former will create a blank ILO; the latter should display the ILO data.
• Click on save and the Learning Outcomes list should update itself.

Previous modal display (edit mode)

Post-migration modal display (new, edit, and results)

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

[AusBruce]

The migration of the timeout component from AngularJS and CoffeeScript to Angular 17 and TypeScript is well-executed.
The component benefits from modern Angular features, improved performance, and enhanced maintainability.
Great job!

[b0ink]

Some of your form elements still contain bootstrap classes such as form-group, form-control, and col-sm-3, etc. These elements should be replaced with Material Form Field components.

You can also align the buttons to the right of the modal by setting the align property to end:

<mat-dialog-actions align="end">

[b0ink]

Visually everything looks good and working well

Few things you'll need to change is swapping out the hardcoded styles into tailwind classes. You can find the corresponding classes for each style by searching the style, such as text-align: right followed with tailwind, and the top link should give you a list of examples for you the match the styles