feat(edit): enhance edit functionality with signals and pipes

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

@@ -1,8 +1,8 @@
-import {Component, inject, input, InputSignal, OnInit} from '@angular/core';
+import {Component, computed, effect, inject, input, InputSignal, OnInit, Signal, WritableSignal} from '@angular/core';
 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";
+import {DatePipe} from "@angular/common";
 
 @Component({
   selector: 'app-edit',
@@ -10,6 +10,7 @@ import {assert} from "@angular/compiler-cli/linker";
     ReactiveFormsModule
   ],
   templateUrl: './edit.component.html',
+  standalone: true,
   styleUrl: './edit.component.css'
 })
 export default class EditComponent implements OnInit{
@@ -17,15 +18,28 @@ export default class EditComponent implements OnInit{
   private todoService: TodoService = inject(TodoService);
   public form!: FormGroup;
   public todo: InputSignal<GetTask|null> = input<GetTask|null>(null);
+  public kys = effect(() => {
+    console.log(this.todo())
+  });
 
-  ngOnInit() {
+  constructor() {
+    effect(() => {
       this.form = this.fb.group({
         title: [this.todo()?.title, Validators.required],
-      dueDate: [this.todo()?.dueDate, Validators.required],
+        dueDate: [new DatePipe('en-US').transform(this.todo()?.dueDate, 'yyyy-MM-dd'), Validators.required],
+      })
     });
   }
 
+  ngOnInit() {
+  }
+
   edit() {
-    this.todoService.edit(this.form.value, this.todo()?.id ?? 0)
+    const edited = {
+      ...this.todo(),
+      ...this.form.value,
+    }
+
+    this.todoService.edit(edited, this.todo()?.id ?? 0).subscribe(() => this.todoService.todos.reload())
   }
 }

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

@@ -27,25 +27,17 @@ export class TodoService {
     return this.http.post('http://localhost:2000/api/tasks', todo);
   }
 
-  public markAsDone(todo: GetTask) {
+  public toggleDone(todo: GetTask) {
-    const putTask: PutTask = {
+    todo.done = !todo.done;
-      title: todo.title,
-      dueDate: todo.dueDate,
-      done: true,
-    }
 
-    return this.http.put(`http://localhost:2000/api/tasks/${todo.id}`, putTask);
+    return this.edit(todo, todo.id);
   }
 
   public delete(id: number) {
     return this.http.delete(`http://localhost:2000/api/tasks/${id}`);
   }
 
-  edit(edited: { title: string; dueDate: Date }, id: number) {
+  edit(edited: GetTask, 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

@@ -17,7 +17,13 @@
         </td>
         <td>{{ todo.dueDate | date }}</td>
         <td>
-          <button (click)="markAsDone(todo)">Done</button>
+          <button (click)="toggleDone(todo)">
+          @if (!todo.done) {
+            Done
+          } @else {
+            nvm
+          }
+          </button>
           <button (click)="edit(todo)">Edit</button>
           <button (click)="delete(todo.id)">Delete</button>
         </td>

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

@@ -19,8 +19,8 @@ export class TableComponent {
   todos = this.todoService.todos;
   editingTodo: WritableSignal<GetTask|null> = signal(null);
 
-  markAsDone(todo: GetTask) {
+  toggleDone(todo: GetTask) {
-    this.todoService.markAsDone(todo).subscribe(() => this.todos.reload());
+    this.todoService.toggleDone(todo).subscribe(() => this.todos.reload());
   }
 
   delete(id: number) {