From bbe5e30837ca041dca96ee34062992435d7d8b4b Mon Sep 17 00:00:00 2001 From: jank Date: Tue, 24 Jun 2025 07:54:42 +0200 Subject: [PATCH] chore: Minor refactorments --- src/app/app.config.ts | 10 ++-- src/app/create-todo/create-todo.ts | 87 ++++++++++++------------------ src/app/service/task-service.ts | 79 +++++++++++++++++++++++++++ src/app/todo-table/todo-table.ts | 34 +++++------- src/main.ts | 3 +- 5 files changed, 135 insertions(+), 78 deletions(-) create mode 100644 src/app/service/task-service.ts diff --git a/src/app/app.config.ts b/src/app/app.config.ts index d953f4c..414eeae 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,4 +1,8 @@ -import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core'; +import { + ApplicationConfig, + provideBrowserGlobalErrorListeners, + provideZoneChangeDetection, +} from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; @@ -7,6 +11,6 @@ export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), provideZoneChangeDetection({ eventCoalescing: true }), - provideRouter(routes) - ] + provideRouter(routes), + ], }; diff --git a/src/app/create-todo/create-todo.ts b/src/app/create-todo/create-todo.ts index d5f96b4..18bf8e2 100644 --- a/src/app/create-todo/create-todo.ts +++ b/src/app/create-todo/create-todo.ts @@ -1,11 +1,12 @@ import { DatePipe } from '@angular/common'; -import { Component, Input, ResourceRef, signal } from '@angular/core'; +import { Component, inject, Input, ResourceRef, signal } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule, Validators, } from '@angular/forms'; +import { TaskService } from '../service/task-service'; @Component({ selector: 'app-create-todo', @@ -15,61 +16,13 @@ import { }) export class CreateTodo { public form!: FormGroup; - private datePipe = new DatePipe('en-US'); public isEditing = signal(false); + private datePipe = new DatePipe('en-US'); + private taskService: TaskService = inject(TaskService); + @Input({ required: true }) tasks!: ResourceRef; @Input() editTodo: number = -1; - submit() { - if (this.form.valid) { - if (this.form.value.id == -1) { - this.createTask(this.form.value); - } else { - this.updateTask(this.form.value); - } - this.form.controls['id'].setValue(-1); - } - } - - stopEdit() { - this.isEditing.set(false); - this.form.controls['id'].setValue(-1); - } - - updateTask(task: Task) { - fetch('http://localhost:2000/api/tasks/' + task.id, { - method: 'PUT', - body: JSON.stringify(task), - headers: { - 'content-type': 'application/json', - }, - }).then(() => { - this.tasks.reload(); - }); - this.isEditing.set(false); - } - - createTask(task: Task) { - fetch('http://localhost:2000/api/tasks', { - method: 'POST', - body: JSON.stringify(task), - headers: { - 'content-type': 'application/json', - }, - }).then(() => { - this.tasks.reload(); - }); - } - - 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), @@ -80,4 +33,34 @@ export class CreateTodo { done: new FormControl(false), }); } + + submit() { + if (this.form.valid) { + if (this.form.value.id == -1) { + this.taskService + .createTask(this.form.value) + .then(() => this.tasks.reload()); + } else { + this.taskService + .updateTask(this.form.value) + .then(() => this.tasks.reload()); + this.isEditing.set(false); + } + this.form.controls['id'].setValue(-1); + } + } + + stopEdit() { + this.isEditing.set(false); + this.form.controls['id'].setValue(-1); + } + + 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); + } } diff --git a/src/app/service/task-service.ts b/src/app/service/task-service.ts new file mode 100644 index 0000000..e17cfda --- /dev/null +++ b/src/app/service/task-service.ts @@ -0,0 +1,79 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class TaskService { + constructor() {} + + public toggleTaskDoneStatus(task: Task): Promise { + return new Promise((resolve, reject) => { + fetch('http://localhost:2000/api/tasks/' + task.id, { + method: 'PUT', + body: JSON.stringify({ + ...task, + done: !task.done, + }), + headers: { + 'content-type': 'application/json', + }, + }).then((response) => { + if (response.status != 200) { + reject('Error toggling task done status'); + } else { + response.json().then((json) => resolve(json)); + } + }); + }); + } + + public deleteTask(task: Task): Promise { + return new Promise((resolve, reject) => { + fetch('http://localhost:2000/api/tasks/' + task.id, { + method: 'DELETE', + }).then((response) => { + if (response.status != 200) { + reject('Error deleting task'); + } else { + resolve(); + } + }); + }); + } + + public createTask(task: Task): Promise { + return new Promise((resolve, reject) => { + fetch('http://localhost:2000/api/tasks', { + method: 'POST', + body: JSON.stringify(task), + headers: { + 'content-type': 'application/json', + }, + }).then((response) => { + if (response.status != 200) { + reject('Request did not create tasks succesfully'); + } else { + response.json().then((json) => resolve(json)); + } + }); + }); + } + + public updateTask(task: Task): Promise { + return new Promise((resolve, reject) => { + fetch('http://localhost:2000/api/tasks/' + task.id, { + method: 'PUT', + body: JSON.stringify(task), + headers: { + 'content-type': 'application/json', + }, + }).then((response) => { + if (response.status != 200) { + reject('Request did not fetch tasks succesfully'); + } else { + response.json().then((json) => resolve(json)); + } + }); + }); + } +} diff --git a/src/app/todo-table/todo-table.ts b/src/app/todo-table/todo-table.ts index c6d3dd0..51531f3 100644 --- a/src/app/todo-table/todo-table.ts +++ b/src/app/todo-table/todo-table.ts @@ -1,5 +1,12 @@ import { DatePipe } from '@angular/common'; -import { Component, EventEmitter, Output, resource } from '@angular/core'; +import { + Component, + EventEmitter, + inject, + Output, + resource, +} from '@angular/core'; +import { TaskService } from '../service/task-service'; @Component({ selector: 'app-todo-table', @@ -14,34 +21,19 @@ export class TodoTable { return (await response.json()) as Task[]; }, }); + private taskService: TaskService = inject(TaskService); + @Output() editTaskEvent = new EventEmitter(); 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(); - }); + this.taskService.deleteTask(task).then(() => this.tasks.reload()); } - ngOnInit() { - console.log(this.tasks.value()); + toggleTaskDoneStatus(task: Task) { + this.taskService.toggleTaskDoneStatus(task).then(() => this.tasks.reload()); } } diff --git a/src/main.ts b/src/main.ts index 5df75f9..190f341 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { App } from './app/app'; -bootstrapApplication(App, appConfig) - .catch((err) => console.error(err)); +bootstrapApplication(App, appConfig).catch((err) => console.error(err));