chore: Fix editing

src/app/create-todo/create-todo.html

@@ -1,7 +1,8 @@
-<p>create-todo works!</p>
 <form [formGroup]="form" (submit)="submit()">
-  <input type="number" formControlName="id" style="display: hidden" />
   <input type="text" formControlName="title" />
   <input type="date" formControlName="dueDate" />
-  <button type="submit">Create</button>
+  <button type="submit">{{ isEditing() ? "Update" : "Create" }}</button>
+  @if (isEditing()) {
+  <button type="button" (click)="stopEdit()">Stop Editing</button>
+  }
 </form>

src/app/create-todo/create-todo.ts

@@ -1,9 +1,8 @@
 import { DatePipe } from '@angular/common';
-import { Component, Input, input, ResourceRef } from '@angular/core';
+import { Component, Input, ResourceRef, signal } from '@angular/core';
 import {
   FormControl,
   FormGroup,
-  FormsModule,
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
@@ -17,7 +16,9 @@ import {
 export class CreateTodo {
   public form!: FormGroup;
   private datePipe = new DatePipe('en-US');
+  public isEditing = signal(false);
   @Input({ required: true }) tasks!: ResourceRef<any>;
+  @Input() editTodo: number = -1;
 
   submit() {
     if (this.form.valid) {
@@ -30,8 +31,9 @@ export class CreateTodo {
     }
   }
 
-  editTask(task: Task) {
-    this.form.patchValue({ id: task.id });
+  stopEdit() {
+    this.isEditing.set(false);
+    this.form.controls['id'].setValue(-1);
   }
 
   updateTask(task: Task) {
@@ -44,6 +46,7 @@ export class CreateTodo {
     }).then(() => {
       this.tasks.reload();
     });
+    this.isEditing.set(false);
   }
 
   createTask(task: Task) {
@@ -58,6 +61,15 @@ export class CreateTodo {
     });
   }
 
+  editTask(task: Task) {
+    this.form.controls['id'].setValue(task.id);
+    this.form.controls['title'].setValue(task.title);
+    this.form.controls['dueDate'].setValue(
+      this.datePipe.transform(task.dueDate, 'yyyy-MM-dd'),
+    );
+    this.isEditing.set(true);
+  }
+
   ngOnInit() {
     this.form = new FormGroup({
       id: new FormControl(-1),
@@ -65,6 +77,7 @@ export class CreateTodo {
       dueDate: new FormControl(
         this.datePipe.transform(new Date(), 'yyyy-MM-dd'),
       ),
+      done: new FormControl(false),
     });
   }
 }

src/app/home/home.html

@@ -1,2 +1,2 @@
 <app-create-todo #form [tasks]="table.tasks"></app-create-todo>
-<app-todo-table #table [editTask]="form.editTask"></app-todo-table>
+<app-todo-table #table (editTaskEvent)="form.editTask($event)"></app-todo-table>

src/app/home/home.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 import { TodoTable } from '../todo-table/todo-table';
 import { CreateTodo } from '../create-todo/create-todo';
 
 @Component({
   selector: 'app-home',
-  imports: [RouterOutlet, TodoTable, CreateTodo],
+  imports: [TodoTable, CreateTodo],
   templateUrl: './home.html',
   styleUrl: './home.css',
 })

src/app/todo-table/todo-table.html

@@ -1,4 +1,3 @@
-<p>todo-table works!</p>
 <table>
   <thead>
     <tr>

src/app/todo-table/todo-table.ts

@@ -1,10 +1,7 @@
-import { JsonPipe } from '@angular/common';
-import { Component, computed, effect, Input, resource } from '@angular/core';
-import { CreateTodo } from '../create-todo/create-todo';
+import { Component, EventEmitter, Output, resource } from '@angular/core';
 
 @Component({
   selector: 'app-todo-table',
-  imports: [JsonPipe, CreateTodo],
   templateUrl: './todo-table.html',
   styleUrl: './todo-table.css',
 })
@@ -12,10 +9,14 @@ export class TodoTable {
   public tasks = resource({
     loader: async (): Promise<Task[]> => {
       const response = await fetch('http://localhost:2000/api/tasks');
-      return await response.json();
+      return (await response.json()) as Task[];
     },
   });
-  @Input({ required: true }) editTask!: (task: Task) => void;
+  @Output() editTaskEvent = new EventEmitter<Task>();
+
+  editTask(task: Task) {
+    this.editTaskEvent.emit(task);
+  }
 
   toggleTaskDoneStatus(task: Task) {
     fetch('http://localhost:2000/api/tasks/' + task.id, {