From 53e480867aa8c64a59598030e4ccaaadeae06ef1 Mon Sep 17 00:00:00 2001
From: "thibault.capt" <thibault.capt@etu.hesge.ch>
Date: Wed, 19 Feb 2025 17:11:01 +0100
Subject: [PATCH] (feat): refactor code
---
.../frontend/src/app/app.component.html | 2 +-
.../frontend/src/app/app.component.ts | 2 +-
.../components/add-todo-form.component.ts | 24 +++++++++++++
.../todo-list/components/todo-list-item.ts | 25 +++++++++++++
.../todo-list/todo-list.component.html | 36 +++++--------------
.../features/todo-list/todo-list.component.ts | 8 ++---
todo-workspace/frontend/src/main.ts | 6 ++--
7 files changed, 67 insertions(+), 36 deletions(-)
create mode 100644 todo-workspace/frontend/src/app/features/todo-list/components/add-todo-form.component.ts
create mode 100644 todo-workspace/frontend/src/app/features/todo-list/components/todo-list-item.ts
diff --git a/todo-workspace/frontend/src/app/app.component.html b/todo-workspace/frontend/src/app/app.component.html
index 98f3b93..25331c8 100644
--- a/todo-workspace/frontend/src/app/app.component.html
+++ b/todo-workspace/frontend/src/app/app.component.html
@@ -1 +1 @@
-<app-todo-list />
\ No newline at end of file
+<app-todo-list />
diff --git a/todo-workspace/frontend/src/app/app.component.ts b/todo-workspace/frontend/src/app/app.component.ts
index 131bd9e..4374dbb 100644
--- a/todo-workspace/frontend/src/app/app.component.ts
+++ b/todo-workspace/frontend/src/app/app.component.ts
@@ -1,5 +1,5 @@
import { Component, inject } from '@angular/core';
-import { TodoListComponent } from '@features/todo-list/todo-list.component';
+import TodoListComponent from '@features/todo-list/todo-list.component';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faIcons } from '@shared/fa-icons';
diff --git a/todo-workspace/frontend/src/app/features/todo-list/components/add-todo-form.component.ts b/todo-workspace/frontend/src/app/features/todo-list/components/add-todo-form.component.ts
new file mode 100644
index 0000000..eb54bc7
--- /dev/null
+++ b/todo-workspace/frontend/src/app/features/todo-list/components/add-todo-form.component.ts
@@ -0,0 +1,24 @@
+import { Component, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'app-add-todo-form',
+ template: `
+ <form (ngSubmit)="this.add.emit(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>
+ `,
+ imports: [FormsModule],
+})
+export class AddTodoFormComponent {
+ add = output<string>();
+}
diff --git a/todo-workspace/frontend/src/app/features/todo-list/components/todo-list-item.ts b/todo-workspace/frontend/src/app/features/todo-list/components/todo-list-item.ts
new file mode 100644
index 0000000..4e0fbd9
--- /dev/null
+++ b/todo-workspace/frontend/src/app/features/todo-list/components/todo-list-item.ts
@@ -0,0 +1,25 @@
+import { Component, input, output } from '@angular/core';
+import { Todo } from '@core/models/todo';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { NgClass } from '@angular/common';
+
+@Component({
+ selector: 'app-todo-list-item',
+ template: `
+ <li class="py-2 w-full">
+ <label class="fieldset-label">
+ <input type="checkbox" [checked]="todo().completed" class="checkbox" (change)="toggleCompleted.emit(todo())" />
+ <span [ngClass]="{ 'line-through': todo().completed }">{{ todo().name }}</span>
+ <button class="btn btn-ghost btn-error" (click)="remove.emit(todo())">
+ <fa-icon [icon]="['fas', 'trash']"></fa-icon>
+ </button>
+ </label>
+ </li>
+ `,
+ imports: [FaIconComponent, NgClass],
+})
+export class TodoListItemComponent {
+ todo = input.required<Todo>();
+ toggleCompleted = output<Todo>();
+ remove = output<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 a9933ea..40f14a2 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,36 +2,18 @@
<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 -->
- <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é -->
+ <app-add-todo-form (add)="addTodo($event)" />
+
+ <!-- Liste des tâches -->
<div class="flex-grow flex items-center justify-center py-5">
+ <ul class="list text-gray-600 text-lg">
+ @for (todo of todos(); track todo.id) {
+ <app-todo-list-item [todo]="todo" (toggleCompleted)="toggleCompleted($event)" (remove)="remove($event)" />
+ }
+ </ul>
+
@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">
- @for (todo of todos(); track todo.id) {
- <li class="py-2 w-full">
- <label class="fieldset-label">
- <input type="checkbox" [checked]="todo.completed" class="checkbox" (change)="toggleCompleted(todo)" />
- <span [ngClass]="{ 'line-through': todo.completed }">{{ todo.name }}</span>
- <button class="btn btn-ghost btn-error" (click)="remove(todo)">
- <fa-icon [icon]="['fas', 'trash']"></fa-icon>
- </button>
- </label>
- </li>
- }
- </ul>
}
</div>
</div>
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 e77a171..3af9ca6 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,19 +1,19 @@
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';
import { Todo } from '@core/models/todo';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { AddTodoFormComponent } from '@features/todo-list/components/add-todo-form.component';
+import { TodoListItemComponent } from '@features/todo-list/components/todo-list-item';
@Component({
selector: 'app-todo-list',
- imports: [NgClass, FormsModule, FaIconComponent],
+ imports: [FormsModule, AddTodoFormComponent, TodoListItemComponent, TodoListItemComponent],
templateUrl: './todo-list.component.html',
styleUrl: './todo-list.component.scss',
})
-export class TodoListComponent {
+export default class TodoListComponent {
private reload$$ = new BehaviorSubject<void>(void 0);
private readonly todoService = inject(TodoService);
todos = toSignal(
diff --git a/todo-workspace/frontend/src/main.ts b/todo-workspace/frontend/src/main.ts
index 2876990..ab30ab0 100644
--- a/todo-workspace/frontend/src/main.ts
+++ b/todo-workspace/frontend/src/main.ts
@@ -1,5 +1,5 @@
-import {bootstrapApplication} from '@angular/platform-browser';
-import {appConfig} from '@app/app.config';
-import {AppComponent} from '@app/app.component';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from '@app/app.config';
+import { AppComponent } from '@app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
--
GitLab