From 32d895f78c283cbc992b3cf3452ccb0a8b8819a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Eduardo=20Garc=C3=ADa=20M=C3=A1rquez?=
 <andresgarcia0313@gmail.com>
Date: Thu, 8 Jan 2026 08:41:14 -0500
Subject: [PATCH] fix(frontend): resolve edit student navigation and signal
 timing issues

- Change edit button from <button> to <a> for proper routerLink binding
- Replace ngOnInit with effect() to handle input signal timing correctly
- The route param 'id' was not available during ngOnInit lifecycle

Fixes DEF-001: "Estudiante no encontrado" error when clicking edit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../student-form/student-form.component.ts    | 19 +++++++++++--------
 .../student-list/student-list.component.ts    |  4 ++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/app/features/students/pages/student-form/student-form.component.ts b/src/frontend/src/app/features/students/pages/student-form/student-form.component.ts
index 69ab02b..86ff422 100644
--- a/src/frontend/src/app/features/students/pages/student-form/student-form.component.ts
+++ b/src/frontend/src/app/features/students/pages/student-form/student-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, signal, inject, OnInit, input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, signal, inject, input, effect } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
@@ -167,7 +167,7 @@ import { LoadingSpinnerComponent } from '@shared/index';
     }
   `],
 })
-export class StudentFormComponent implements OnInit {
+export class StudentFormComponent {
   id = input<string>();
 
   private fb = inject(FormBuilder);
@@ -186,12 +186,15 @@ export class StudentFormComponent implements OnInit {
   saving = signal(false);
   serverError = signal<string | null>(null);
 
-  ngOnInit(): void {
-    const studentId = this.id();
-    if (studentId) {
-      this.isEditing.set(true);
-      this.loadStudent(parseInt(studentId, 10));
-    }
+  constructor() {
+    // Use effect to react when route param 'id' becomes available
+    effect(() => {
+      const studentId = this.id();
+      if (studentId && !this.isEditing()) {
+        this.isEditing.set(true);
+        this.loadStudent(parseInt(studentId, 10));
+      }
+    });
   }
 
   private loadStudent(id: number): void {
diff --git a/src/frontend/src/app/features/students/pages/student-list/student-list.component.ts b/src/frontend/src/app/features/students/pages/student-list/student-list.component.ts
index 3f927c4..6cbdb45 100644
--- a/src/frontend/src/app/features/students/pages/student-list/student-list.component.ts
+++ b/src/frontend/src/app/features/students/pages/student-list/student-list.component.ts
@@ -84,13 +84,13 @@ import { CreditsPipe } from '@shared/pipes/credits.pipe';
                     </td>
                     <td>
                       <div class="actions">
-                        <button
+                        <a
                           class="btn btn-icon btn-ghost"
                           [routerLink]="['/students', student.id, 'edit']"
                           matTooltip="Editar"
                         >
                           <mat-icon>edit</mat-icon>
-                        </button>
+                        </a>
                         <button
                           class="btn btn-icon btn-ghost"
                           [routerLink]="['/enrollment', student.id]"