first comit

src/app/app.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './core/layout/header/header.component';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-header />
+    <main class="container">
+      <router-outlet></router-outlet>
+    </main>
+  `,
+  styles: `
+    .container {
+      padding: 2rem;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, HeaderComponent],
+})
+export class AppComponent {
+}

src/app/app.config.ts

@@ -0,0 +1,13 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes, withComponentInputBinding())
+  ]
+};
+

src/app/app.routes.ts

@@ -0,0 +1,19 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+
+  {
+    path:'todos',
+    // Lazy loading des routes de la fonctionnalité "todos"
+    loadChildren: () =>
+      import('./features/todo/todo.routes').then((m) => m.TODO_ROUTES),
+  },
+
+  {
+    path:'',
+    redirectTo:'todos',
+    pathMatch: 'full',
+  }
+
+
+];

src/app/core/layout/header/header.component.scss

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+}
+
+.header {
+  background-color: var(--surface-color);
+  padding: 0 2rem;
+  box-shadow: var(--box-shadow);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+  height: 64px;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+
+.nav-link {
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: var(--border-radius);
+  transition: background-color 0.2s ease, color 0.2s ease;
+
+  &.active {
+    background-color: var(--primary-color);
+    color: var(--text-color-light);
+  }
+
+  &:not(.active):hover {
+    background-color: var(--background-color);
+  }
+}

src/app/core/layout/header/header.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {RouterLink, RouterLinkActive} from '@angular/router';
+
+@Component({
+  selector: 'app-header',
+  template: `
+    <header class="header">
+      <nav class="header-nav">
+        <a class="logo" routerLink="/">ToDo List</a>
+        <a class="nav-link" routerLink="/todos" routerLinkActive="active">
+          Liste des tâches
+        </a>
+        <a class="nav-link" routerLink="/todos/new" routerLinkActive="active">
+          Créer une tâche
+        </a>
+      </nav>
+    </header>
+  `,
+  styleUrls: ['./header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, RouterLinkActive],
+})
+export class HeaderComponent {}

src/app/core/models/todo.model.ts

@@ -0,0 +1,9 @@
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+}
+
+// Type utilisé pour la création d'une tâche, où l'ID n'est pas encore défini.
+export type TodoCreate = Omit<Todo, 'id'>;
+

src/app/core/services/todo.service.ts

@@ -0,0 +1,53 @@
+import { Injectable, signal, Signal } from '@angular/core';
+import { Observable, of, delay } from 'rxjs';
+import { Todo, TodoCreate } from '../models/todo.model';
+
+@Injectable({ providedIn: 'root' })
+export class TodoApiService {
+
+  // TODO 1.1: Créer un signal privé pour stocker la liste de tâches.
+  // Initialisez-le avec le tableau de données fourni dans les commentaires.
+  /*
+    [
+      { id: 1, title: 'Apprendre les signaux Angular', completed: true },
+      { id: 2, title: 'Créer un service en mémoire', completed: false },
+      { id: 3, title: 'Préparer la transition vers HttpClient', completed: false },
+    ]
+  */
+  private readonly todos = signal<Todo[]>([]);
+
+  private nextId = 4;
+
+  // TODO 1.2: Exposer le signal `todos` en tant que propriété publique `todos$`
+  // en lecture seule en utilisant `.asReadonly()`.
+  public readonly todos$: Signal<Todo[]> = this.todos.asReadonly();
+
+  // Cette méthode sert uniquement à SIMULER un appel réseau pour le chargement initial.
+  fetchInitialTodos(): Observable<void> {
+    console.log('SERVICE: Simulation du chargement initial des tâches...');
+    // On ne retourne pas les données ici, on retourne `void` après un délai.
+    // Le composant saura que le chargement est terminé.
+    return of(undefined).pipe(delay(800));
+  }
+
+  createTodo(todoData: TodoCreate): Observable<Todo> {
+    // TODO 1.3: Implémenter la logique de création.
+    // 1. Créez un objet `newTodo` avec un nouvel `id`, et les données de `todoData`.
+    // 2. Mettez à jour le signal `todos` avec `.update()`.
+    // 3. Retournez le `newTodo` dans un `Observable` avec un `delay` de 300ms.
+    const newTodo: Todo = { id: 0, title: '', completed: false }; // A MODIFIER
+    return of(newTodo); // A MODIFIER
+  }
+
+  toggleTodo(id: number): void {
+    // TODO 1.4: Implémenter la logique de bascule (toggle).
+    // Utilisez `this.todos.update()` et la méthode `.map()` pour inverser
+    // l'état `completed` de la tâche correspondante.
+  }
+
+  deleteTodo(id: number): void {
+    // TODO 1.4 (suite): Implémenter la logique de suppression.
+    // Utilisez `this.todos.update()` et la méthode `.filter()` pour
+    // supprimer la tâche correspondante.
+  }
+}

src/app/features/todo/todo-form/todo-form.component.html

@@ -0,0 +1,33 @@
+<div class="form-container">
+  <div class="form-header">
+    <h1>Ajouter un nouveau todo</h1>
+    <a routerLink="/todos" class="btn btn-secondary">Annuler</a>
+  </div>
+
+  <form> <!-- formGroup et ngSubmit à ajouter -->
+    <div class="form-group">
+      <label for="title">Titre</label>
+      <input id="title" type="text" class="form-control"> <!-- formControlName à ajouter -->
+      @if (todoForm.get('title')?.invalid && todoForm.get('title')?.touched) {
+        <small class="form-error">Le titre est requis (2 caractères min).</small>
+      }
+    </div>
+
+    <div class="form-group">
+      <div class="form-check-group">
+        <input id="completed" type="checkbox" class="form-check-input">  <!-- formControlName à ajouter -->
+        <label for="completed" class="form-check-label">Terminé ?</label>
+      </div>
+    </div>
+
+    <div class="form-actions">
+      @if (isSaving()) {
+        <span>Enregistrement...</span>
+      } @else {
+        <button type="submit" class="btn btn-primary" [disabled]="todoForm.invalid">
+          Enregistrer le todo
+        </button>
+      }
+    </div>
+  </form>
+</div>

src/app/features/todo/todo-form/todo-form.component.scss

@@ -0,0 +1,104 @@
+.form-container {
+  max-width: 600px;
+  margin: 2rem auto;
+  padding: 2rem;
+  background-color: var(--surface-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+}
+
+.form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+
+  h1 {
+    margin: 0;
+    color: var(--primary-color);
+  }
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.2);
+  }
+}
+
+.form-check-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.form-check-input {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+
+.form-error {
+  color: var(--error-color);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
+}
+
+// Styles pour les boutons (générique)
+.btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: background-color 0.2s, opacity 0.2s;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.btn-primary {
+  color: var(--text-color-light);
+  background-color: var(--primary-color);
+
+  &:hover:not(:disabled) {
+    background-color: var(--primary-color-dark);
+  }
+}
+
+.btn-secondary {
+  background-color: #f0f0f0;
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+
+  &:hover:not(:disabled) {
+    background-color: #e0e0e0;
+  }
+}

src/app/features/todo/todo-form/todo-form.component.ts

@@ -0,0 +1,39 @@
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+import { TodoApiService } from '../../../core/services/todo.service';
+import { TodoCreate } from '../../../core/models/todo.model';
+
+@Component({
+  selector: 'app-todo-form',
+  templateUrl: './todo-form.component.html',
+  styleUrls: ['./todo-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, RouterLink],
+})
+export class TodoFormComponent {
+  // TODO 3.1: Injecter le FormBuilder, le Router et le TodoApiService.
+  private readonly fb = inject(FormBuilder);
+  private readonly router = inject(Router);
+  private readonly todoApiService = inject(TodoApiService);
+
+  readonly isSaving = signal(false);
+
+  // TODO 3.2: Créer le formulaire `todoForm` avec le FormBuilder.
+  // Il doit contenir deux contrôles :
+  // - 'title': chaîne vide, validateurs 'required' et 'minLength(2)'
+  // - 'completed': booléen `false`, validateur 'required'
+  readonly todoForm = this.fb.nonNullable.group({
+    // À COMPLÉTER
+  });
+
+  saveTodo(): void {
+    // TODO 3.3: Implémenter la logique de sauvegarde.
+    // 1. Vérifier si `this.todoForm` est invalide. Si oui, marquer tous les champs comme "touchés" et arrêter.
+    // 2. Passer le signal `isSaving` à `true`.
+    // 3. Créer un `todoPayload` à partir des valeurs du formulaire.
+    // 4. Appeler `this.todoApiService.createTodo()` et souscrire à l'Observable.
+    // 5. Dans `next`, passer `isSaving` à `false` et naviguer vers '/todos'.
+    // 6. Dans `error`, passer `isSaving` à `false` et afficher une erreur en console.
+  }
+}

src/app/features/todo/todo-list/todo-list.component.html

@@ -0,0 +1,18 @@
+<div class="todo-container">
+  @if (false) { <!-- remplacer par isLoading() lorsque le loading sera implémenté -->
+    <app-spinner />
+  } @else {
+    @if (todos().length > 0) {
+      <ul class="todo-list">
+        @for (todo of todos(); track todo.id) {
+          <li [class.completed]="todo.completed">
+            <span class="todo-title" (click)="toggleTodo(todo.id)">{{ todo.title }}</span>
+            <button class="btn-remove" (click)="deleteTodo(todo.id)">X</button>
+          </li>
+        }
+      </ul>
+    } @else {
+      <p class="empty-state">Bravo, aucune tâche pour le moment !</p>
+    }
+  }
+</div>

src/app/features/todo/todo-list/todo-list.component.scss

@@ -0,0 +1,158 @@
+.todo-container {
+  max-width: 600px;
+  margin: 2rem auto;
+  background: var(--surface-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  padding: 2rem;
+
+  h1 {
+    text-align: center;
+    color: var(--primary-color);
+    margin-bottom: 1.5rem;
+  }
+}
+
+.todo-input-group {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+
+  input[type='text'] {
+    flex-grow: 1;
+    padding: 0.75rem;
+    font-size: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:focus {
+      outline: none;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.2);
+    }
+  }
+
+  button {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--text-color-light);
+    background-color: var(--primary-color);
+    border: none;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover:not(:disabled) {
+      background-color: var(--primary-color-dark);
+    }
+
+    &:disabled {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.todo-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  transition: background-color 0.2s;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.completed .todo-title {
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+
+.todo-title {
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.btn-remove {
+  background-color: transparent;
+  border: none;
+  color: var(--error-color);
+  font-weight: bold;
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 50%;
+  line-height: 1;
+  width: 30px;
+  height: 30px;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: rgba(244, 67, 54, 0.1);
+  }
+}
+
+footer {
+  margin-top: 1.5rem;
+  text-align: center;
+  color: #777;
+  font-size: 0.9rem;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 2rem;
+  color: #888;
+  font-style: italic;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+
+  h1 {
+    margin: 0;
+  }
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+  transition: background-color 0.2s, opacity 0.2s;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.btn-primary {
+  color: var(--text-color-light);
+  background-color: var(--primary-color);
+
+  &:hover:not(:disabled) {
+    background-color: var(--primary-color-dark);
+  }
+}

src/app/features/todo/todo-list/todo-list.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, inject, Signal } from '@angular/core';
+import { TodoApiService } from '../../../core/services/todo.service';
+import { Todo } from '../../../core/models/todo.model';
+import { SpinnerComponent } from '../../../shared/components/spinner/spinner.component';
+
+@Component({
+  selector: 'app-todo-list',
+  templateUrl: './todo-list.component.html',
+  styleUrls: ['./todo-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SpinnerComponent],
+})
+export class TodoListComponent {
+  // TODO 2.1: Injecter le TodoApiService.
+  private readonly todoApiService = inject(TodoApiService); // À COMPLÉTER
+
+  // TODO 2.2: Connecter le signal `todos` du composant au signal public `todos$` du service.
+  readonly todos: Signal<Todo[]> = this.todoApiService.todos$; // À COMPLÉTER
+
+  toggleTodo(id: number): void {
+    // TODO 2.3: Appeler la méthode `toggleTodo` du service.
+  }
+
+  deleteTodo(id: number): void {
+    // TODO 2.3 (suite): Appeler la méthode `deleteTodo` du service.
+  }
+}

src/app/features/todo/todo.routes.ts

@@ -0,0 +1,16 @@
+import { Routes } from '@angular/router';
+import {TodoListComponent} from './todo-list/todo-list.component';
+import {TodoFormComponent} from "./todo-form/todo-form.component";
+
+export const TODO_ROUTES: Routes = [
+  {
+    path: '',
+    component: TodoListComponent,
+    title: 'Todo List',
+  },
+  {
+    path: 'new',
+    component: TodoFormComponent,
+    title: 'Add Todo',
+  }
+];

src/app/models/todo.model.ts

@@ -0,0 +1,5 @@
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+}

src/app/shared/components/spinner/spinner.component.scss

@@ -0,0 +1,19 @@
+.spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border-left-color: var(--primary-color);
+  margin: 2rem auto;
+
+  animation: spin 1s ease infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/app/shared/components/spinner/spinner.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-spinner',
+  template: `<div class="spinner"></div>`,
+  styleUrls: ['./spinner.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpinnerComponent {}