feat(edit): implement editing functionality for todos

frontend/src/app/edit/edit.component.ts

@@ -1,7 +1,8 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, inject, input, InputSignal, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from "@angular/router";
-import {TodoService} from "../service/todo.service";
 import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {GetTask} from "../dto/models";
+import {TodoService} from "../service/todo.service";
+import {assert} from "@angular/compiler-cli/linker";
 
 @Component({
   selector: 'app-edit',
@@ -12,33 +13,19 @@ import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/
   styleUrl: './edit.component.css'
 })
 export default class EditComponent implements OnInit{
-  private id!: number;
-  private todoService: TodoService = inject(TodoService);
-  private route: ActivatedRoute = inject(ActivatedRoute);
   private fb: FormBuilder = inject(FormBuilder);
+  private todoService: TodoService = inject(TodoService);
   public form!: FormGroup;
-
+  public todo: InputSignal<GetTask|null> = input<GetTask|null>(null);
 
   ngOnInit() {
-    this.id = parseInt(this.route.snapshot.paramMap.get('id') ?? '', 10);
-
-    const old = this.todoService.getOne(this.id);
     this.form = this.fb.group({
-      title: ['', Validators.required],
+      title: [this.todo()?.title, Validators.required],
-      dueDate: ['', Validators.required],
+      dueDate: [this.todo()?.dueDate, Validators.required],
     });
-
-    old.subscribe((old => {
-      this.form.patchValue({
-        title: old.title,
-        dueDate: old.dueDate,
-      })
-    }))
   }
 
   edit() {
-    const edited = this.form.value as { title: string, dueDate: Date };
+    this.todoService.edit(this.form.value, this.todo()?.id ?? 0)
-
-    this.todoService.edit(edited, this.id).subscribe(() => this.todoService.todos.reload());
   }
 }

frontend/src/app/table/table.component.html

@@ -10,12 +10,12 @@
     @for (todo of todos.value(); track todo.id) {
       <tr>
         <td>
-        {{todo.title}}
+          {{ todo.title }}
           @if (todo.done) {
             &checkmark;
           }
         </td>
-      <td>{{todo.dueDate | date}}</td>
+        <td>{{ todo.dueDate | date }}</td>
         <td>
           <button (click)="markAsDone(todo)">Done</button>
           <button (click)="edit(todo)">Edit</button>
@@ -25,3 +25,7 @@
     }
   </tbody>
 </table>
+
+@if (editingTodo() !== null) {
+  <app-edit [todo]="editingTodo()" />
+}

frontend/src/app/table/table.component.ts

@@ -1,13 +1,15 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal, WritableSignal} from '@angular/core';
 import {TodoService} from "../service/todo.service";
 import {DatePipe} from "@angular/common";
 import {GetTask} from "../dto/models";
+import EditComponent from "../edit/edit.component";
 
 @Component({
   selector: 'app-table',
   standalone: true,
   imports: [
     DatePipe,
+    EditComponent,
   ],
   templateUrl: './table.component.html',
   styleUrl: './table.component.css'
@@ -15,7 +17,7 @@ import {GetTask} from "../dto/models";
 export class TableComponent {
   todoService: TodoService = inject(TodoService);
   todos = this.todoService.todos;
-  
+  editingTodo: WritableSignal<GetTask|null> = signal(null);
 
   markAsDone(todo: GetTask) {
     this.todoService.markAsDone(todo).subscribe(() => this.todos.reload());
@@ -26,6 +28,6 @@ export class TableComponent {
   }
 
   edit(todo: GetTask) {
-
+    this.editingTodo.set(todo);
   }
 }