From dbfe6803c463df9500993f046fb206887f47eb18 Mon Sep 17 00:00:00 2001 From: Ekam Bhullar Date: Sat, 10 May 2025 21:00:36 +1000 Subject: [PATCH 1/2] group selector component review --- .../Project-Templates/Component-Review.md | 62 ++++++++++++------- 1 file changed, 41 insertions(+), 21 deletions(-) diff --git a/docs/Templates/Project-Templates/Component-Review.md b/docs/Templates/Project-Templates/Component-Review.md index 2ec693adb..207e380f8 100644 --- a/docs/Templates/Project-Templates/Component-Review.md +++ b/docs/Templates/Project-Templates/Component-Review.md @@ -1,36 +1,56 @@ -# Ontrack Component review +# Ontrack Component Review -## Team Member Name +## Team Member Name +Ekamjot Singh +224235519 -First select a component to review from the list below: - +## Component Name +`group-selector` -## Component Name +### Files in this component: +- `group-selector.component.ts` +- `group-selector.component.html` +- `group-selector.component.scss` -Here you should enter the component name, also list all the files in this component. -## Component purpose +## Component Purpose -What is the primary purpose of this component and how doesit work? Screenshots are advised. +The `group-selector` component is designed to allow users (typically staff) to view, edit, and manage student tutorial groups within a unit. It presents a table where each row represents a group, displaying attributes like name, tutorial association, capacity, and lock status. +Users can click to edit the group’s details inline using input fields or dropdowns. The interface supports toggling lock status, saving or canceling edits, and deleting groups. -## Component outcomes and interactions +> **Screenshot Example**: +> - **View mode**: Rows display group info with action buttons (Edit, Lock/Unlock, Delete). +> - **Edit mode**: Input fields appear in-place with Save/Cancel options. -What are the expected outcomes of the component and what does it interact with, what kind of data -objects is it taking in and passing out? +## Component Outcomes and Interactions -## Component migration plan +### Expected Outcomes: +- View a list of groups in a unit +- Edit group name, tutorial association, and capacity +- Save or cancel group edits +- Lock/unlock a group +- Delete a group -First add your plan for the migration, how will you do this, what steps are needed. Add some -sketches or diagrams, what will the migrated component look like compared to the current one. +### Interactions: +- **Input**: Accepts a `unit` object that includes groups and tutorials +- **Output**: Emits updated group data back to parent or backend service +- **Services**: May use `UnitService`, `GroupService`, and related observables for saving and deleting -## Component review checklist +## Component Migration Plan -Next add a checklist similar to: then create a checklist: +### Migration Goals: +- Migrate from Angular Material + Bootstrap to Tailwind CSS +- Improve accessibility and responsiveness +- Ensure smooth inline editing without layout shifts -[ ] ability to collect details from the user [ ] succeeds when data is valid [ ] handles errors - -duplicate unit code in the teaching period, or invalid dates [ ] created unit is shown on success +### Steps: +1. Analyze current HTML and styling +2. Replace UI elements with Tailwind CSS equivalents (`input`, `select`, `button`) +3. Use Tailwind spacing and transition utilities for stable layout +4. Ensure responsive design using Tailwind’s flex/grid utilities +5. Update Angular bindings (`[(ngModel)]` or ReactiveForms) +6. Validate UI and UX with mock data -## 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. +###Before +![image](https://github.com/user-attachments/assets/c65f60db-ef86-4f5c-9b53-2087a791911d) \ No newline at end of file From 185672868d4ea3e041153335dbdc7198404978cb Mon Sep 17 00:00:00 2001 From: Ekam Bhullar Date: Sun, 11 May 2025 20:43:20 +1000 Subject: [PATCH 2/2] component review: group-member-contribution-assigner --- .../Project-Templates/Component-Review.md | 76 ++++++++++-------- docs/Templates/Project-Templates/image.png | Bin 0 -> 72950 bytes 2 files changed, 42 insertions(+), 34 deletions(-) create mode 100644 docs/Templates/Project-Templates/image.png diff --git a/docs/Templates/Project-Templates/Component-Review.md b/docs/Templates/Project-Templates/Component-Review.md index 207e380f8..213054cea 100644 --- a/docs/Templates/Project-Templates/Component-Review.md +++ b/docs/Templates/Project-Templates/Component-Review.md @@ -1,56 +1,64 @@ # Ontrack Component Review ## Team Member Name -Ekamjot Singh -224235519 +**Ekamjot Singh** +**Student ID: 224235519** + +--- ## Component Name -`group-selector` +`group-member-contribution-assigner` + +--- -### Files in this component: -- `group-selector.component.ts` -- `group-selector.component.html` -- `group-selector.component.scss` +### Files in this Component: +- `group-member-contribution-assigner.component.ts` +- `group-member-contribution-assigner.component.html` +- `group-member-contribution-assigner.component.scss` +--- ## Component Purpose -The `group-selector` component is designed to allow users (typically staff) to view, edit, and manage student tutorial groups within a unit. It presents a table where each row represents a group, displaying attributes like name, tutorial association, capacity, and lock status. -Users can click to edit the group’s details inline using input fields or dropdowns. The interface supports toggling lock status, saving or canceling edits, and deleting groups. +The `group-member-contribution-assigner` component is designed to allow students to view, edit, and manage their own and their team members' contributions when submitting a group task within a unit. + +It presents a modal where each row represents a student, displaying attributes like **name**, **target grade**, and **contribution**. Users can click to edit a team member's contribution. + -> **Screenshot Example**: -> - **View mode**: Rows display group info with action buttons (Edit, Lock/Unlock, Delete). -> - **Edit mode**: Input fields appear in-place with Save/Cancel options. + +--- ## Component Outcomes and Interactions -### Expected Outcomes: -- View a list of groups in a unit -- Edit group name, tutorial association, and capacity -- Save or cancel group edits -- Lock/unlock a group -- Delete a group +### ✅ Expected Outcomes: +- View a list of group members and their contributions +- Edit a group member’s contribution + -### Interactions: -- **Input**: Accepts a `unit` object that includes groups and tutorials -- **Output**: Emits updated group data back to parent or backend service -- **Services**: May use `UnitService`, `GroupService`, and related observables for saving and deleting +### 🔁 Interactions: +- **Inputs**: Receives a `team` object that contains member contributions +- **Outputs**: Emits updated contribution data to the parent component or backend +- **Services**: Likely interacts with services like `GroupService` for persisting changes + +--- ## Component Migration Plan -### Migration Goals: -- Migrate from Angular Material + Bootstrap to Tailwind CSS +### 🎯 Migration Goals: +- Migrate UI from Angular Material + Bootstrap to **Tailwind CSS** - Improve accessibility and responsiveness -- Ensure smooth inline editing without layout shifts +- Maintain intuitive inline editing with minimal layout shifts + +### 📋 Migration Steps: +1. Analyze current HTML layout and style dependencies +2. Replace UI elements (`