Added Goals fields

ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.html

@@ -1,7 +1,7 @@
 <div class="card">
     <p class="content">{{ event().content }}</p>
     <div class="action-icons">
-        <button class="icon-btn" title="Edit">&#9998;</button>
+        <button class="edit-btn" (click)="onEdit()">Edit</button>
         <!-- <button class="icon-btn" title="Delete">&#128465;</button> -->
     </div>
     <span class="author">{{ event().createdByName }}</span>

ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.scss

@@ -47,15 +47,17 @@
     text-align: right;
 }
 
-// .icon-btn {
-//     background: none;
-//     border: none;
-//     cursor: pointer;
-//     font-size: 1rem;
-//     color: #888;
-//     padding: 0.125rem;
-// }
-
-.icon-btn:hover {
+.edit-btn {
+    padding: 0.25rem 0.625rem;
+    background: transparent;
     color: #4f46e5;
+    border: 1px solid #4f46e5;
+    border-radius: 6px;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.edit-btn:hover {
+    background: #eef2ff;
 }

ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.ts

@@ -1,5 +1,6 @@
-import { Component, input } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { DatePipe } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
 
 @Component({
@@ -14,6 +15,8 @@ export class ProgressItem {
 
   // ************************** Declarations *************************
 
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
   readonly event = input.required<ProgressEventDto>();
 
   // ************************** Properties ***************************
@@ -22,5 +25,9 @@ export class ProgressItem {
 
   // ************************ Event Handlers *************************
 
+  onEdit() {
+    this.router.navigate([this.event().progressEventId], { relativeTo: this.route });
+  }
+
   // ********************** Support Procedures ***********************
 }