todo/src/app/todo-table/todo-table.ts
2025-06-23 10:57:19 +02:00

45 lines
1 KiB
TypeScript

import { Component, EventEmitter, Output, resource } from '@angular/core';
@Component({
selector: 'app-todo-table',
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()) as Task[];
},
});
@Output() editTaskEvent = new EventEmitter<Task>();
editTask(task: Task) {
this.editTaskEvent.emit(task);
}
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());
}
}