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
This commit is contained in:
parent
5156689e13
commit
12a4c881f5
|
|
@ -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 { Router, RouterLink } from '@angular/router';
|
||||||
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
|
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
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>();
|
id = input<string>();
|
||||||
|
|
||||||
private fb = inject(FormBuilder);
|
private fb = inject(FormBuilder);
|
||||||
|
|
@ -186,12 +186,15 @@ export class StudentFormComponent implements OnInit {
|
||||||
saving = signal(false);
|
saving = signal(false);
|
||||||
serverError = signal<string | null>(null);
|
serverError = signal<string | null>(null);
|
||||||
|
|
||||||
ngOnInit(): void {
|
constructor() {
|
||||||
|
// Use effect to react when route param 'id' becomes available
|
||||||
|
effect(() => {
|
||||||
const studentId = this.id();
|
const studentId = this.id();
|
||||||
if (studentId) {
|
if (studentId && !this.isEditing()) {
|
||||||
this.isEditing.set(true);
|
this.isEditing.set(true);
|
||||||
this.loadStudent(parseInt(studentId, 10));
|
this.loadStudent(parseInt(studentId, 10));
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private loadStudent(id: number): void {
|
private loadStudent(id: number): void {
|
||||||
|
|
|
||||||
|
|
@ -84,13 +84,13 @@ import { CreditsPipe } from '@shared/pipes/credits.pipe';
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button
|
<a
|
||||||
class="btn btn-icon btn-ghost"
|
class="btn btn-icon btn-ghost"
|
||||||
[routerLink]="['/students', student.id, 'edit']"
|
[routerLink]="['/students', student.id, 'edit']"
|
||||||
matTooltip="Editar"
|
matTooltip="Editar"
|
||||||
>
|
>
|
||||||
<mat-icon>edit</mat-icon>
|
<mat-icon>edit</mat-icon>
|
||||||
</button>
|
</a>
|
||||||
<button
|
<button
|
||||||
class="btn btn-icon btn-ghost"
|
class="btn btn-icon btn-ghost"
|
||||||
[routerLink]="['/enrollment', student.id]"
|
[routerLink]="['/enrollment', student.id]"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue