From 7de3746499dff977e51f13db35303b2387f439c6 Mon Sep 17 00:00:00 2001 From: Jason Vellucci Date: Fri, 9 May 2025 00:25:31 +1000 Subject: [PATCH 1/7] create unit-staff-editor component review --- .../Component Reviews/unit-staff-editor.md | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md diff --git a/docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md b/docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md new file mode 100644 index 000000000..fb4dcd3cd --- /dev/null +++ b/docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md @@ -0,0 +1,69 @@ +# Ontrack Component review + +## Team Member Name +Jason Mark Vellucci | SID: 221437402 + +First select a component to review from the list below: + + +## Component Name + +- Component name: `unit-staff-editor.coffee` to convert to `unit-staff-editor.component.ts` +- Additional files: `unit-staff-editor.tpl.html` + +## Component purpose + +The purpose of this component is to: +- Assign staff members to units +- Assign staff members the roles of `Convenors` (if authorised) or `Tutor` +- Assign a staff member as the `Main Convenor` of a unit +- Remove staff members from a unit + +## Screenshots + +Before Migration +![unit_staff_selector_before](https://github.com/user-attachments/assets/5c1bd8ce-d36d-41c7-947b-3934f5badd2d) +![unit_staff_selector_before_2](https://github.com/user-attachments/assets/f98a575e-4db8-4ca3-ade7-042ce3c28952) + +After Migration +![after_1](https://github.com/user-attachments/assets/659b0f71-56cc-48b5-bbd9-fcae42b75063) +![after_2](https://github.com/user-attachments/assets/782b8a73-f832-4cc2-b75f-f1f247201c85) + +## Component outcomes and interactions + +- This component mainly takes `Unit`, `UnitRole`, and `UnitRole[]` data types. +- Interactivity: + - The table view lists all staff members assigned to the chosen unit. + - The user can search for staff members in the autocomplete input field. The list is filtered based on the current search term, and filters out staff members already assigned to the unit. + - Upon clicking a staff member from the drop-down list, the staff member is added to the unit. + - The user can assign the `Tutor` and `Convenor` roles to staff members at the click of a button. Note: `Convenor` roles are for authorised staff members only. + - The user can `remove` staff from a unit by clicking the `bin` icon. + - The user can assign an authorised staff member as the `Main Convenor` of a unit by clicking the `Main Convenor` button. + +## Component migration plan + +- Initially, in the UI, I navigate to the original implementation of the feature. +- I use the feature in its current state and take notes of its behavior. +- I check devtools for any existing errors and make notes of these so that I can be sure I'm not introducing any new errors during my migration. +- I create a branch off the base branch instructed in the MSPlanner ticket. +- I create skeleton files for the migration. +- I take note of the existing template file, and note the `Bootstrap` components that need to be swapped with `Angular Material` components. +- I unlink the old component from the app. +- I link the new component to the app and test. +- I generally start with the TS logic, and then move onto the template. The other way around also suffices. +- Once the migration is complete, I step through each TS method in devtools and ensure it functions as expected. I debug as needed. +- I adjust template layout and styling as needed. +- I delete the old, redundant files. + +## Component review checklist + +Next add a checklist similar to: then create a checklist: + +- [x] ability to collect details from the user +- [x] succeeds when data is valid +- [x] handles errors (uses type checking instead of exception handlers) + +## Discussion with Client (Andrew Cain) + +Finally you will need to take the feedback from Andrew and Discuss any addtional considertions he +may have with this component before writing any code. From 5a1dcef57d930e1cd6850524c8b3c325148cadf7 Mon Sep 17 00:00:00 2001 From: Jason Vellucci Date: Mon, 19 May 2025 00:02:19 +1000 Subject: [PATCH 2/7] Create tutorials.md --- .../Component Reviews/tutorials.md | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md diff --git a/docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md b/docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md new file mode 100644 index 000000000..ef48dc4b7 --- /dev/null +++ b/docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md @@ -0,0 +1,68 @@ +# Ontrack Component review + +## Team Member Name + +- Jason Mark Vellucci | SID: 221437402 + +First select a component to review from the list below: + + +## Component Name + +- `tutorials` + - `tutorials.component.ts` + - `tutorials.component.tpl.html` + - `tutorials.component.scss` + +## Component purpose +- The purpose of the component is to enable students to `Enrol` or `Withdraw` from tutorials for any particular unit. +![after](https://github.com/user-attachments/assets/49255060-9ff9-4cf6-ab5d-acbacb7f3075) + +## Component outcomes and interactions +- The expected outcomes of this component are: + - Show a list of tutorials for the selected unit (filtered by campus) + - Enroll in a tutorial by clicking the `Enrol` button + - Withdraw from a tutorial by clicking the `Withdraw` button + - Sort the table view of tutorials by most `TH` fields. +- This component interacts with: + - The files listed above + - The `doubtfire-states` file (UI-Router library for routing) +- Data: + - `projectId`: number is passed in as @Input() + - Fetches the selected `project` model from the cache (if it exists), or the backend, asynchronously on load of the component + - Extracts the `unit` from the fetched `project` + - Extracts a list of tutorials from the `unit` object + +## Component migration plan +- Analyse existing functionality: + - How does the UI behave? + - How does the UI look? +- Analyse existing code + - What data does it take in from parent components? + - Are there any nested components? + - What object methods are required? + - What template elements need replacing with Angular Material elements? + - What SCSS needs replacing? +- Unlink old component +- Link new component +- Define Typescript logic + - Test iteratively +- Implement template markup + - Replace Bootstrap Angular tags with Angular Material equivalents +- Debug as needed (logging and devtools) +- Commit small, commit often +- Final manual test + +## Component review checklist + +Next add a checklist similar to: then create a checklist: + +- [x] Can enrol in unit +- [x] Can withdraw from tutorial +- [x] Can sort tutorials by most model keys +- [x] Authorisation fails when selecting tutorial for different project (pre-filtering of tutorials by `campus_id`) + +## Discussion with Client (Andrew Cain) + +Finally you will need to take the feedback from Andrew and Discuss any addtional considertions he +may have with this component before writing any code. From 20198404b9d40e40a421c6bae42e00d243ce1f9e Mon Sep 17 00:00:00 2001 From: Jason Vellucci Date: Mon, 19 May 2025 00:05:03 +1000 Subject: [PATCH 3/7] Delete docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md --- .../Component Reviews/tutorials.md | 68 ------------------- 1 file changed, 68 deletions(-) delete mode 100644 docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md diff --git a/docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md b/docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md deleted file mode 100644 index ef48dc4b7..000000000 --- a/docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md +++ /dev/null @@ -1,68 +0,0 @@ -# Ontrack Component review - -## Team Member Name - -- Jason Mark Vellucci | SID: 221437402 - -First select a component to review from the list below: - - -## Component Name - -- `tutorials` - - `tutorials.component.ts` - - `tutorials.component.tpl.html` - - `tutorials.component.scss` - -## Component purpose -- The purpose of the component is to enable students to `Enrol` or `Withdraw` from tutorials for any particular unit. -![after](https://github.com/user-attachments/assets/49255060-9ff9-4cf6-ab5d-acbacb7f3075) - -## Component outcomes and interactions -- The expected outcomes of this component are: - - Show a list of tutorials for the selected unit (filtered by campus) - - Enroll in a tutorial by clicking the `Enrol` button - - Withdraw from a tutorial by clicking the `Withdraw` button - - Sort the table view of tutorials by most `TH` fields. -- This component interacts with: - - The files listed above - - The `doubtfire-states` file (UI-Router library for routing) -- Data: - - `projectId`: number is passed in as @Input() - - Fetches the selected `project` model from the cache (if it exists), or the backend, asynchronously on load of the component - - Extracts the `unit` from the fetched `project` - - Extracts a list of tutorials from the `unit` object - -## Component migration plan -- Analyse existing functionality: - - How does the UI behave? - - How does the UI look? -- Analyse existing code - - What data does it take in from parent components? - - Are there any nested components? - - What object methods are required? - - What template elements need replacing with Angular Material elements? - - What SCSS needs replacing? -- Unlink old component -- Link new component -- Define Typescript logic - - Test iteratively -- Implement template markup - - Replace Bootstrap Angular tags with Angular Material equivalents -- Debug as needed (logging and devtools) -- Commit small, commit often -- Final manual test - -## Component review checklist - -Next add a checklist similar to: then create a checklist: - -- [x] Can enrol in unit -- [x] Can withdraw from tutorial -- [x] Can sort tutorials by most model keys -- [x] Authorisation fails when selecting tutorial for different project (pre-filtering of tutorials by `campus_id`) - -## Discussion with Client (Andrew Cain) - -Finally you will need to take the feedback from Andrew and Discuss any addtional considertions he -may have with this component before writing any code. From 4402da28438cd12507aea3aa3c0654e3dfc7a161 Mon Sep 17 00:00:00 2001 From: Jason Vellucci Date: Mon, 19 May 2025 00:05:58 +1000 Subject: [PATCH 4/7] Create tutorials --- .../Component Reviews/tutorials | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 docs/OnTrack/UI Enhancement/Component Reviews/tutorials diff --git a/docs/OnTrack/UI Enhancement/Component Reviews/tutorials b/docs/OnTrack/UI Enhancement/Component Reviews/tutorials new file mode 100644 index 000000000..ef48dc4b7 --- /dev/null +++ b/docs/OnTrack/UI Enhancement/Component Reviews/tutorials @@ -0,0 +1,68 @@ +# Ontrack Component review + +## Team Member Name + +- Jason Mark Vellucci | SID: 221437402 + +First select a component to review from the list below: + + +## Component Name + +- `tutorials` + - `tutorials.component.ts` + - `tutorials.component.tpl.html` + - `tutorials.component.scss` + +## Component purpose +- The purpose of the component is to enable students to `Enrol` or `Withdraw` from tutorials for any particular unit. +![after](https://github.com/user-attachments/assets/49255060-9ff9-4cf6-ab5d-acbacb7f3075) + +## Component outcomes and interactions +- The expected outcomes of this component are: + - Show a list of tutorials for the selected unit (filtered by campus) + - Enroll in a tutorial by clicking the `Enrol` button + - Withdraw from a tutorial by clicking the `Withdraw` button + - Sort the table view of tutorials by most `TH` fields. +- This component interacts with: + - The files listed above + - The `doubtfire-states` file (UI-Router library for routing) +- Data: + - `projectId`: number is passed in as @Input() + - Fetches the selected `project` model from the cache (if it exists), or the backend, asynchronously on load of the component + - Extracts the `unit` from the fetched `project` + - Extracts a list of tutorials from the `unit` object + +## Component migration plan +- Analyse existing functionality: + - How does the UI behave? + - How does the UI look? +- Analyse existing code + - What data does it take in from parent components? + - Are there any nested components? + - What object methods are required? + - What template elements need replacing with Angular Material elements? + - What SCSS needs replacing? +- Unlink old component +- Link new component +- Define Typescript logic + - Test iteratively +- Implement template markup + - Replace Bootstrap Angular tags with Angular Material equivalents +- Debug as needed (logging and devtools) +- Commit small, commit often +- Final manual test + +## Component review checklist + +Next add a checklist similar to: then create a checklist: + +- [x] Can enrol in unit +- [x] Can withdraw from tutorial +- [x] Can sort tutorials by most model keys +- [x] Authorisation fails when selecting tutorial for different project (pre-filtering of tutorials by `campus_id`) + +## Discussion with Client (Andrew Cain) + +Finally you will need to take the feedback from Andrew and Discuss any addtional considertions he +may have with this component before writing any code. From ee088048e10be77d20c6c6d224e903d13b6612b7 Mon Sep 17 00:00:00 2001 From: Jason Vellucci Date: Mon, 19 May 2025 00:07:27 +1000 Subject: [PATCH 5/7] Delete docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md --- .../Component Reviews/unit-staff-editor.md | 69 ------------------- 1 file changed, 69 deletions(-) delete mode 100644 docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md diff --git a/docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md b/docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md deleted file mode 100644 index fb4dcd3cd..000000000 --- a/docs/OnTrack/UI Enhancement/Component Reviews/unit-staff-editor.md +++ /dev/null @@ -1,69 +0,0 @@ -# Ontrack Component review - -## Team Member Name -Jason Mark Vellucci | SID: 221437402 - -First select a component to review from the list below: - - -## Component Name - -- Component name: `unit-staff-editor.coffee` to convert to `unit-staff-editor.component.ts` -- Additional files: `unit-staff-editor.tpl.html` - -## Component purpose - -The purpose of this component is to: -- Assign staff members to units -- Assign staff members the roles of `Convenors` (if authorised) or `Tutor` -- Assign a staff member as the `Main Convenor` of a unit -- Remove staff members from a unit - -## Screenshots - -Before Migration -![unit_staff_selector_before](https://github.com/user-attachments/assets/5c1bd8ce-d36d-41c7-947b-3934f5badd2d) -![unit_staff_selector_before_2](https://github.com/user-attachments/assets/f98a575e-4db8-4ca3-ade7-042ce3c28952) - -After Migration -![after_1](https://github.com/user-attachments/assets/659b0f71-56cc-48b5-bbd9-fcae42b75063) -![after_2](https://github.com/user-attachments/assets/782b8a73-f832-4cc2-b75f-f1f247201c85) - -## Component outcomes and interactions - -- This component mainly takes `Unit`, `UnitRole`, and `UnitRole[]` data types. -- Interactivity: - - The table view lists all staff members assigned to the chosen unit. - - The user can search for staff members in the autocomplete input field. The list is filtered based on the current search term, and filters out staff members already assigned to the unit. - - Upon clicking a staff member from the drop-down list, the staff member is added to the unit. - - The user can assign the `Tutor` and `Convenor` roles to staff members at the click of a button. Note: `Convenor` roles are for authorised staff members only. - - The user can `remove` staff from a unit by clicking the `bin` icon. - - The user can assign an authorised staff member as the `Main Convenor` of a unit by clicking the `Main Convenor` button. - -## Component migration plan - -- Initially, in the UI, I navigate to the original implementation of the feature. -- I use the feature in its current state and take notes of its behavior. -- I check devtools for any existing errors and make notes of these so that I can be sure I'm not introducing any new errors during my migration. -- I create a branch off the base branch instructed in the MSPlanner ticket. -- I create skeleton files for the migration. -- I take note of the existing template file, and note the `Bootstrap` components that need to be swapped with `Angular Material` components. -- I unlink the old component from the app. -- I link the new component to the app and test. -- I generally start with the TS logic, and then move onto the template. The other way around also suffices. -- Once the migration is complete, I step through each TS method in devtools and ensure it functions as expected. I debug as needed. -- I adjust template layout and styling as needed. -- I delete the old, redundant files. - -## Component review checklist - -Next add a checklist similar to: then create a checklist: - -- [x] ability to collect details from the user -- [x] succeeds when data is valid -- [x] handles errors (uses type checking instead of exception handlers) - -## Discussion with Client (Andrew Cain) - -Finally you will need to take the feedback from Andrew and Discuss any addtional considertions he -may have with this component before writing any code. From a2d53e147aee98de3b2526038b8ba97429cf5d3f Mon Sep 17 00:00:00 2001 From: Jason Vellucci Date: Tue, 27 May 2025 21:37:57 +1000 Subject: [PATCH 6/7] Update tutorials --- .../UI Enhancement/Component Reviews/tutorials | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/OnTrack/UI Enhancement/Component Reviews/tutorials b/docs/OnTrack/UI Enhancement/Component Reviews/tutorials index ef48dc4b7..20a5ab02f 100644 --- a/docs/OnTrack/UI Enhancement/Component Reviews/tutorials +++ b/docs/OnTrack/UI Enhancement/Component Reviews/tutorials @@ -15,7 +15,15 @@ First select a component to review from the list below: - `tutorials.component.scss` ## Component purpose -- The purpose of the component is to enable students to `Enrol` or `Withdraw` from tutorials for any particular unit. +- The purpose of the component is to enable students to `Enrol` or `Withdraw` from tutorials for any particular unit +- This component does not contain any nested components +- Available tutorials are filtered by `campus_id` +- The files that interact with this component are: + - `doubtfire-angular.module.ts`: Links the component to the main Angular module, making it available in the web app + - `doubtfire-angularjs.module.ts: Downgrades the component, making it backwards-compatible with `AngularJS` + - `doubtfire.states.ts`: Configures the `UI Router` (routing library) for the component, making it navigatable from other components that declare the defined route + - `task-dropdown-component.html`: Triggers the route `onClick` of a button, subsequently rendering the `tutorials.component.tpl.html` template + - `group-selector.tpl.html`: Triggers the route `onClick` of an `anchor` tag, subsequently rendering the `tutorials.component.tpl.html` template ![after](https://github.com/user-attachments/assets/49255060-9ff9-4cf6-ab5d-acbacb7f3075) ## Component outcomes and interactions @@ -23,7 +31,7 @@ First select a component to review from the list below: - Show a list of tutorials for the selected unit (filtered by campus) - Enroll in a tutorial by clicking the `Enrol` button - Withdraw from a tutorial by clicking the `Withdraw` button - - Sort the table view of tutorials by most `TH` fields. + - Sort the table view of tutorials by most `TH` field - This component interacts with: - The files listed above - The `doubtfire-states` file (UI-Router library for routing) From 04eaa90f26517ab6c01cc2fdaa31c14f59ffef61 Mon Sep 17 00:00:00 2001 From: Jason Vellucci Date: Tue, 27 May 2025 21:38:39 +1000 Subject: [PATCH 7/7] Rename tutorials to tutorials.md --- .../UI Enhancement/Component Reviews/{tutorials => tutorials.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/OnTrack/UI Enhancement/Component Reviews/{tutorials => tutorials.md} (100%) diff --git a/docs/OnTrack/UI Enhancement/Component Reviews/tutorials b/docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md similarity index 100% rename from docs/OnTrack/UI Enhancement/Component Reviews/tutorials rename to docs/OnTrack/UI Enhancement/Component Reviews/tutorials.md