diff --git a/todo-workspace/frontend/src/app/app.component.html b/todo-workspace/frontend/src/app/app.component.html
index c272e07014fcdff25bf420099352dd85044f08d2..98f3b93574fc62d8a788d6e416ab2183ce184f6d 100644
--- a/todo-workspace/frontend/src/app/app.component.html
+++ b/todo-workspace/frontend/src/app/app.component.html
@@ -1 +1 @@
-<h1 class="text-3xl font-bold underline">Hello world!</h1>
+<app-todo-list />
\ No newline at end of file
diff --git a/todo-workspace/frontend/src/app/app.component.ts b/todo-workspace/frontend/src/app/app.component.ts
index e603cb48da5c2063d7b10797984f8d2069c6b38f..1c3a4866e83aff7f1f91f4997ea2ae9e804b3098 100644
--- a/todo-workspace/frontend/src/app/app.component.ts
+++ b/todo-workspace/frontend/src/app/app.component.ts
@@ -1,8 +1,11 @@
import { Component } from '@angular/core';
+import {TodoListComponent} from "@features/todo-list/todo-list.component";
@Component({
selector: 'app-root',
- imports: [],
+ imports: [
+ TodoListComponent
+ ],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
diff --git a/todo-workspace/frontend/src/app/app.config.ts b/todo-workspace/frontend/src/app/app.config.ts
index 62aa0aecefb27a1bcb35a84e688e3a11465ea50b..0a0318a55cd34ad9dca24dea58448aac1ea4ae00 100644
--- a/todo-workspace/frontend/src/app/app.config.ts
+++ b/todo-workspace/frontend/src/app/app.config.ts
@@ -1,9 +1,24 @@
-import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
-import {provideRouter} from '@angular/router';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
-import {routes} from './app.routes';
-import {provideHttpClient} from "@angular/common/http";
+import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+import { TodoService } from '@core/ports/todo.service';
+import { InMemoryTodoService } from '@core/adapters/in-memory-todo.service';
export const appConfig: ApplicationConfig = {
- providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()],
+ providers: [
+ provideZoneChangeDetection({ eventCoalescing: true }),
+ provideRouter(routes),
+ provideHttpClient(),
+ {
+ 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 },
+ ]),
+ },
+ ],
};
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
new file mode 100644
index 0000000000000000000000000000000000000000..7152499bba9e4f5e9365e4ab97cce2da5b12f822
--- /dev/null
+++ b/todo-workspace/frontend/src/app/core/adapters/in-memory-todo.service.ts
@@ -0,0 +1,16 @@
+import { of } from 'rxjs';
+import { TodoService } from '@core/ports/todo.service';
+import { Todos } from '@core/models/todo';
+
+export class InMemoryTodoService extends TodoService {
+ private todos: Todos = [];
+
+ withTodos(todos: Todos): this {
+ this.todos = todos;
+ return this;
+ }
+
+ getAll() {
+ return of(this.todos);
+ }
+}
diff --git a/todo-workspace/frontend/src/app/core/models/todo.ts b/todo-workspace/frontend/src/app/core/models/todo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c36bcc50f395a1d0293d2cb28570bddbfa21a20b
--- /dev/null
+++ b/todo-workspace/frontend/src/app/core/models/todo.ts
@@ -0,0 +1,7 @@
+export interface Todo {
+ id: number;
+ title: string;
+ completed: boolean;
+}
+
+export type Todos = Todo[];
diff --git a/todo-workspace/frontend/src/app/core/ports/todo.service.ts b/todo-workspace/frontend/src/app/core/ports/todo.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..81c4c8dc2e2c35f84d15e4b65c5d0809ca737127
--- /dev/null
+++ b/todo-workspace/frontend/src/app/core/ports/todo.service.ts
@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+import { Todos } from '@core/models/todo';
+
+export abstract class TodoService {
+ abstract getAll(): Observable<Todos>;
+}
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
new file mode 100644
index 0000000000000000000000000000000000000000..6e1f28e166be814cf89f0c37f16cab1588227487
--- /dev/null
+++ b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html
@@ -0,0 +1,34 @@
+<div class="flex items-center justify-center min-h-screen bg-gray-100">
+ <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>
+
+ <!-- Texte centré -->
+ <div class="flex-grow flex items-center justify-center py-5">
+ @if (todos()?.length == 0) {
+ <p class="text-gray-600 text-lg">Ajoute ta première tâche 👆</p>
+ } @else {
+ <ul class="list bg-base-100 rounded-box shadow-md">
+ <li class="list-row">
+ <div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
+ <div class="list-col-grow">
+ <div>Dio Lupa</div>
+ <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+ </div>
+ <button class="btn btn-square btn-ghost">
+ <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
+ <path d="M6 3L20 12 6 21 6 3z"></path>
+ </g>
+ </svg>
+ </button>
+ </li>
+ </ul>
+ }
+ </div>
+ </div>
+</div>
diff --git a/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.scss b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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
new file mode 100644
index 0000000000000000000000000000000000000000..2c2d6f19b8637a8e56a836ff5149a463ab207b80
--- /dev/null
+++ b/todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts
@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { TodoService } from '@core/ports/todo.service';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+ selector: 'app-todo-list',
+ imports: [],
+ templateUrl: './todo-list.component.html',
+ styleUrl: './todo-list.component.scss',
+})
+export class TodoListComponent {
+ private readonly todoService = inject(TodoService);
+ todos = toSignal(this.todoService.getAll());
+}