From ab702d7ce64efb6d5fc6136fa2903524635d2d14 Mon Sep 17 00:00:00 2001
From: "thibault.capt" <thibault.capt@etu.hesge.ch>
Date: Wed, 19 Feb 2025 16:05:52 +0100
Subject: [PATCH] (feat): form for add a new todo
---
Documents/JournalDeBord.md | 1 +
todo-workspace/frontend/src/app/app.config.ts | 6 +++---
.../core/adapters/in-memory-todo.service.ts | 12 ++++++++---
.../frontend/src/app/core/models/todo.ts | 2 +-
.../src/app/core/ports/todo.service.ts | 3 ++-
.../todo-list/todo-list.component.html | 21 ++++++++++++-------
.../features/todo-list/todo-list.component.ts | 21 +++++++++++++++++--
7 files changed, 49 insertions(+), 17 deletions(-)
diff --git a/Documents/JournalDeBord.md b/Documents/JournalDeBord.md
index 7b8d2c3..bf800c9 100644
--- a/Documents/JournalDeBord.md
+++ b/Documents/JournalDeBord.md
@@ -20,3 +20,4 @@
| 28.01.2025 | Avancement d'un petit projet (garage de voiture) | - | - | Début du frontend angular |
| 01.02.2025 | Reformulation de quelques parties de l'introduction | - | - | - |
| 18.02.2025 | Modal pour ajouter une voiture | - | - | Angular garage -> Je me rends compte que c'est trop gros pour un "petit projet". Je recommence pour une TODO list |
+| 19.02.2025 | Essayer de finir le front de la TODO's list | - | - | - |
diff --git a/todo-workspace/frontend/src/app/app.config.ts b/todo-workspace/frontend/src/app/app.config.ts
index 0a0318a..4735ffe 100644
--- a/todo-workspace/frontend/src/app/app.config.ts
+++ b/todo-workspace/frontend/src/app/app.config.ts
@@ -15,9 +15,9 @@ export const appConfig: ApplicationConfig = {
provide: TodoService,
useFactory: () =>
new InMemoryTodoService().withTodos([
- { id: 1, title: 'Apprendre Angular 19', completed: false },
- { id: 1, title: 'Apprendre Java Spring Boot', completed: false },
- { id: 1, title: 'Apprendre PostgreSQL', completed: false },
+ { id: 1, name: 'Apprendre Angular 19', completed: false },
+ { id: 1, name: 'Apprendre Java Spring Boot', completed: true },
+ { id: 1, name: 'Apprendre PostgreSQL', completed: false },
]),
},
],
diff --git a/todo-workspace/frontend/src/app/core/adapters/in-memory-todo.service.ts b/todo-workspace/frontend/src/app/core/adapters/in-memory-todo.service.ts
index 7152499..fe8fe48 100644
--- a/todo-workspace/frontend/src/app/core/adapters/in-memory-todo.service.ts
+++ b/todo-workspace/frontend/src/app/core/adapters/in-memory-todo.service.ts
@@ -1,6 +1,6 @@
-import { of } from 'rxjs';
+import { Observable, of } from 'rxjs';
import { TodoService } from '@core/ports/todo.service';
-import { Todos } from '@core/models/todo';
+import { Todo, Todos } from '@core/models/todo';
export class InMemoryTodoService extends TodoService {
private todos: Todos = [];
@@ -10,7 +10,13 @@ export class InMemoryTodoService extends TodoService {
return this;
}
- getAll() {
+ override getAll() {
return of(this.todos);
}
+
+ override add(todoName: string): Observable<Todo> {
+ const todo: Todo = { id: this.todos.length + 1, name: todoName, completed: false };
+ this.todos = [...this.todos, todo];
+ return of(todo);
+ }
}
diff --git a/todo-workspace/frontend/src/app/core/models/todo.ts b/todo-workspace/frontend/src/app/core/models/todo.ts
index c36bcc5..232af03 100644
--- a/todo-workspace/frontend/src/app/core/models/todo.ts
+++ b/todo-workspace/frontend/src/app/core/models/todo.ts
@@ -1,6 +1,6 @@
export interface Todo {
id: number;
- title: string;
+ name: string;
completed: boolean;
}
diff --git a/todo-workspace/frontend/src/app/core/ports/todo.service.ts b/todo-workspace/frontend/src/app/core/ports/todo.service.ts
index 81c4c8d..7663e92 100644
--- a/todo-workspace/frontend/src/app/core/ports/todo.service.ts
+++ b/todo-workspace/frontend/src/app/core/ports/todo.service.ts
@@ -1,6 +1,7 @@
import { Observable } from 'rxjs';
-import { Todos } from '@core/models/todo';
+import { Todo, Todos } from '@core/models/todo';
export abstract class TodoService {
abstract getAll(): Observable<Todos>;
+ abstract add(todoName: string): Observable<Todo>;
}
diff --git a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html
index 82ebc3f..96cb86c 100644
--- a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html
+++ b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html
@@ -2,14 +2,21 @@
<div class="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
<h1 class="text-center text-3xl font-bold mb-4">Check-list</h1>
<!-- Input et bouton -->
- <div class="flex space-x-2">
- <input class="input input-bordered w-full" placeholder="Ex : Tourner une vidéo sur Angular" type="text" />
- <button class="btn btn-neutral">Ajouter</button>
- </div>
-
+ <form (ngSubmit)="addTodo(todoInput.value); todoInput.value = ''">
+ <div class="flex space-x-2">
+ <input
+ #todoInput
+ class="input input-bordered w-full"
+ name="add todo"
+ placeholder="Ex : Tourner une vidéo sur Angular"
+ type="text"
+ />
+ <button class="btn btn-neutral" type="submit">Ajouter</button>
+ </div>
+ </form>
<!-- Texte centré -->
<div class="flex-grow flex items-center justify-center py-5">
- @if (todos()?.length == 0) {
+ @if (!todos()?.length) {
<p class="text-gray-600 text-lg">Ajoute ta première tâche 👆</p>
} @else {
<ul class="list text-gray-600 text-lg">
@@ -17,7 +24,7 @@
<li class="py-2 w-full">
<label class="fieldset-label">
<input type="checkbox" [checked]="todo.completed" class="checkbox" />
- {{ todo.title }}
+ <span [ngClass]="{ 'line-through': todo.completed }">{{ todo.name }}</span>
</label>
</li>
}
diff --git a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts
index 2c2d6f1..d757965 100644
--- a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts
+++ b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts
@@ -1,14 +1,31 @@
import { Component, inject } from '@angular/core';
import { TodoService } from '@core/ports/todo.service';
import { toSignal } from '@angular/core/rxjs-interop';
+import { NgClass } from '@angular/common';
+import { BehaviorSubject, switchMap, tap } from 'rxjs';
+import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-todo-list',
- imports: [],
+ imports: [NgClass, FormsModule],
templateUrl: './todo-list.component.html',
styleUrl: './todo-list.component.scss',
})
export class TodoListComponent {
+ private reload$$ = new BehaviorSubject<void>(void 0);
private readonly todoService = inject(TodoService);
- todos = toSignal(this.todoService.getAll());
+ todos = toSignal(
+ this.reload$$.pipe(
+ switchMap(() => this.todoService.getAll()),
+ tap((t) => console.log('Tâches mises à jour:', t))
+ )
+ );
+
+ addTodo(todoName: string) {
+ if (!todoName) return;
+ this.todoService
+ .add(todoName)
+ .pipe(tap(() => this.reload$$.next()))
+ .subscribe();
+ }
}
--
GitLab