From 3b3d2085f7719904d9b84ca7691ac86cacc608c2 Mon Sep 17 00:00:00 2001
From: "thibault.capt" <thibault.capt@etu.hesge.ch>
Date: Tue, 18 Feb 2025 20:26:57 +0100
Subject: [PATCH] (feat): list todos
---
.../frontend/src/app/app.component.html | 2 +-
.../frontend/src/app/app.component.ts | 5 ++-
todo-workspace/frontend/src/app/app.config.ts | 25 +++++++++++---
.../core/adapters/in-memory-todo.service.ts | 16 +++++++++
.../frontend/src/app/core/models/todo.ts | 7 ++++
.../src/app/core/ports/todo.service.ts | 6 ++++
.../todo-list/todo-list.component.html | 34 +++++++++++++++++++
.../todo-list/todo-list.component.scss | 0
.../features/todo-list/todo-list.component.ts | 14 ++++++++
9 files changed, 102 insertions(+), 7 deletions(-)
create mode 100644 todo-workspace/frontend/src/app/core/adapters/in-memory-todo.service.ts
create mode 100644 todo-workspace/frontend/src/app/core/models/todo.ts
create mode 100644 todo-workspace/frontend/src/app/core/ports/todo.service.ts
create mode 100644 todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html
create mode 100644 todo-workspace/frontend/src/app/features/todo-list/todo-list.component.scss
create mode 100644 todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts
diff --git a/todo-workspace/frontend/src/app/app.component.html b/todo-workspace/frontend/src/app/app.component.html
index c272e07..98f3b93 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 e603cb4..1c3a486 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 62aa0ae..0a0318a 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 0000000..7152499
--- /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 0000000..c36bcc5
--- /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 0000000..81c4c8d
--- /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 0000000..6e1f28e
--- /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 0000000..e69de29
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 0000000..2c2d6f1
--- /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());
+}
--
GitLab