Initial

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

@@ -0,0 +1,44 @@
+import { JsonPipe } from '@angular/common';
+import { Component, computed, effect, Input, resource } from '@angular/core';
+import { CreateTodo } from '../create-todo/create-todo';
+
+@Component({
+  selector: 'app-todo-table',
+  imports: [JsonPipe, CreateTodo],
+  templateUrl: './todo-table.html',
+  styleUrl: './todo-table.css',
+})
+export class TodoTable {
+  public tasks = resource({
+    loader: async (): Promise<Task[]> => {
+      const response = await fetch('http://localhost:2000/api/tasks');
+      return await response.json();
+    },
+  });
+  @Input({ required: true }) editTask!: (task: Task) => void;
+
+  toggleTaskDoneStatus(task: Task) {
+    fetch('http://localhost:2000/api/tasks/' + task.id, {
+      method: 'PUT',
+      body: JSON.stringify({
+        ...task,
+        done: !task.done,
+      }),
+      headers: {
+        'content-type': 'application/json',
+      },
+    });
+  }
+
+  deleteTask(task: Task) {
+    fetch('http://localhost:2000/api/tasks/' + task.id, {
+      method: 'DELETE',
+    }).then(() => {
+      this.tasks.reload();
+    });
+  }
+
+  ngOnInit() {
+    console.log(this.tasks.value());
+  }
+}