Updated UI based on stakeholder feedback.

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

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" />

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">

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 ***************************
 

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) {
+    @for (goal of goals(); track goal.goalId; let i = $index) {
-    <app-goal-card [goal]="goal" />
+    <app-goal-card [goal]="goal" [goalNumber]="i + 1" />
     }
 </div>
 }