From bb286a47bd4846fa80afe92cb1f555119bc6fbf6 Mon Sep 17 00:00:00 2001
From: vraj545 <vrpatel545@gmail.com>
Date: Fri, 3 Apr 2026 15:07:07 -0400
Subject: [PATCH] Updated UI based on stakeholder feedback.

---
 .../add-goal-modal/add-goal-modal.html        | 24 ++++++++++---------
 .../goal-card-full/goal-card-full.html        | 12 ++++++----
 .../components/goal-card/goal-card.html       |  6 ++++-
 .../desktop/components/goal-card/goal-card.ts |  1 +
 .../components/goal-list/goal-list.html       |  4 ++--
 5 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
index 407d9a6..96cabbf 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
@@ -20,17 +20,6 @@
             />
         </div>
 
-        <div class="field">
-            <label for="description">Description</label>
-            <textarea
-                id="description"
-                [(ngModel)]="form.description"
-                name="description"
-                rows="3"
-                placeholder="Describe the goal..."
-            ></textarea>
-        </div>
-
         <div class="field">
             <label for="baseline">Baseline</label>
             <textarea
@@ -42,6 +31,19 @@
             ></textarea>
         </div>
 
+        
+        <div class="field">
+            <label for="description">Goal</label>
+            <textarea
+                id="description"
+                [(ngModel)]="form.description"
+                name="description"
+                rows="3"
+                placeholder="Enter goal..."
+            ></textarea>
+        </div>
+
+
         <div class="field">
             <label for="targetCompletionDate">Target Completion Date</label>
             <input
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html
index 8b4bd1d..7f450c1 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html
@@ -20,16 +20,18 @@
             <label class="field-label" for="category">Category</label>
             <input id="category" class="field-input" type="text" [(ngModel)]="category" />
         </div>
-        <div class="field">
-            <label class="field-label" for="description">Description</label>
-            <textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
-                placeholder="Enter description..."></textarea>
-        </div>
+
         <div class="field">
             <label class="field-label" for="baseline">Baseline</label>
             <textarea id="baseline" class="field-input field-textarea" [(ngModel)]="baseline" rows="3"
                 placeholder="Enter baseline..."></textarea>
         </div>
+        <div class="field">
+            <label class="field-label" for="description">Goal</label>
+            <textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
+                placeholder="Enter goal..."></textarea>
+        </div>
+
         <div class="field">
             <label class="field-label" for="targetCompletionDate">Target Completion Date</label>
             <input id="targetCompletionDate" class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html
index 65b39fa..a9961a3 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html
@@ -14,7 +14,11 @@
     </div>
 
     <div class="card-body">
-        <p class="description">{{ goal().description }}</p>
+        @if (goalNumber() > 0) {
+            <p class="description"><strong>Goal {{ goalNumber() }}:</strong> {{ goal().description }}</p>
+        } @else {
+            <p class="description">{{ goal().description }}</p>
+        }
     </div>
 
     <div class="card-footer">
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts
index fb6e3cc..eb8d2d3 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts
@@ -19,6 +19,7 @@ export class GoalCard {
     private readonly route = inject(ActivatedRoute);
 
     readonly goal = input.required<StudentGoalItem>();
+    readonly goalNumber = input<number>(0);
 
     // ************************** Properties ***************************
 
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html
index d5bade3..0c64896 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html
@@ -28,8 +28,8 @@
 </div>
 } @else {
 <div class="card-grid">
-    @for (goal of goals(); track goal.goalId) {
-    <app-goal-card [goal]="goal" />
+    @for (goal of goals(); track goal.goalId; let i = $index) {
+    <app-goal-card [goal]="goal" [goalNumber]="i + 1" />
     }
 </div>
 }