feat: add edit functionality for todo items

frontend/src/app/app.routes.ts

@@ -1,3 +1,4 @@
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+];

frontend/src/app/create/create.component.ts

@@ -24,7 +24,9 @@ export class CreateComponent implements OnInit {
   }
 
   public create(): void {
-    console.log(this.form.value);
-    this.todoService.create(this.form.value).subscribe(() => {this.todoService.todos.reload()})
+    this.todoService.create(this.form.value).subscribe(() => {
+      this.todoService.todos.reload();
+      this.form.reset();
+    })
   }
 }

frontend/src/app/edit/edit.component.html

@@ -0,0 +1,6 @@
+<form [formGroup]="form">
+  <input type="text" formControlName="title">
+  <input type="date" formControlName="dueDate">
+
+  <button type="submit" (click)="edit()">Save</button>
+</form>

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

@@ -0,0 +1,44 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {TodoService} from "../service/todo.service";
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'app-edit',
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './edit.component.html',
+  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);
+  public form!: FormGroup;
+
+
+  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],
+      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(edited, this.id).subscribe(() => this.todoService.todos.reload());
+  }
+}

frontend/src/app/service/todo.service.ts

@@ -40,4 +40,12 @@ export class TodoService {
   public delete(id: number) {
     return this.http.delete(`http://localhost:2000/api/tasks/${id}`);
   }
+
+  edit(edited: { title: string; dueDate: Date }, id: number) {
+    return this.http.put(`http://localhost:2000/api/tasks/${id}`, edited);
+  }
+
+  getOne(id: number) {
+    return this.http.get<GetTask>(`http://localhost:2000/api/tasks/${id}`);
+  }
 }

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

@@ -18,7 +18,7 @@
       <td>{{todo.dueDate | date}}</td>
       <td>
         <button (click)="markAsDone(todo)">Done</button>
-        <button>Edit</button>
+        <button (click)="edit(todo)">Edit</button>
         <button (click)="delete(todo.id)">Delete</button>
       </td>
     </tr>

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

@@ -1,14 +1,13 @@
-import {Component, inject, Signal} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {TodoService} from "../service/todo.service";
 import {DatePipe} from "@angular/common";
 import {GetTask} from "../dto/models";
-import {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
   selector: 'app-table',
   standalone: true,
   imports: [
-    DatePipe
+    DatePipe,
   ],
   templateUrl: './table.component.html',
   styleUrl: './table.component.css'
@@ -17,11 +16,16 @@ export class TableComponent {
   todoService: TodoService = inject(TodoService);
   todos = this.todoService.todos;
   
+
   markAsDone(todo: GetTask) {
-    this.todoService.markAsDone(todo).subscribe(() => {this.todos.reload()});
+    this.todoService.markAsDone(todo).subscribe(() => this.todos.reload());
   }
 
   delete(id: number) {
-    this.todoService.delete(id).subscribe(() => {this.todos.reload()});
+    this.todoService.delete(id).subscribe(() => this.todos.reload());
+  }
+
+  edit(todo: GetTask) {
+
   }
 }