Refactor store observer mecanism to pilot edition actions.

src/app/task-lists/task-lists.component.html

@@ -1,2 +1,15 @@
-<button mat-raised-button (click)="openNewListForm()">Nouvelle liste</button>
-
+<div class="task-lists">
+  <div *ngFor="let taskList of taskLists" class="task-list-container">
+    <div class="task-list shadowed" (click)="selectActiveTaskList(taskList)">
+      <ng-container [ngPlural]="taskList.tasks?.length ?? 0">
+        <ng-template ngPluralCase=">1">
+          {{taskList.tasks?.length}} tâches
+        </ng-template>
+        <ng-template ngPluralCase="other">
+          {{taskList.tasks?.length}} tâche
+        </ng-template>
+      </ng-container>
+    </div>
+    {{taskList.name}}
+  </div>
+</div>

src/app/task-lists/task-lists.component.scss

@@ -0,0 +1,26 @@
+.task-lists {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: auto;
+  max-width: 80%;
+
+  .task-list-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 1rem;
+
+    .task-list {
+      width: 150px;
+      height: 150px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: .5rem;
+      background-color: aliceblue;
+      margin-bottom: .5rem;
+    }
+  }
+}

src/app/task-lists/task-lists.component.ts

@@ -1,5 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import {MatDialog, MatDialogModule} from '@angular/material/dialog';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
+import { TaskList } from '../core/entity/task-list';
+import { TaskListService } from '../core/service/task-list.service';
 import { AddTaskListComponent } from './add-task-list/add-task-list.component';
 
 @Component({
@@ -7,16 +10,31 @@ import { AddTaskListComponent } from './add-task-list/add-task-list.component';
   templateUrl: './task-lists.component.html',
   styleUrls: ['./task-lists.component.scss']
 })
-export class TaskListsComponent implements OnInit {
+export class TaskListsComponent implements OnInit, OnDestroy {
+  taskLists: TaskList[] = [];
+  private _storeSubscription?: Subscription;
 
   constructor(
-    private _dialog: MatDialog
+    private _dialog: MatDialog,
+    private _taskListService: TaskListService,
   ) {}
 
   ngOnInit(): void {
+    this.taskLists = this._taskListService.getAll();
+    this._storeSubscription = this._taskListService.store$.subscribe(store => {
+      this.taskLists = store.taskLists;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._storeSubscription?.unsubscribe();
   }
 
   openNewListForm(): void {
     this._dialog.open(AddTaskListComponent);
   }
+
+  selectActiveTaskList(taskList: TaskList): void {
+    this._taskListService.setActive(taskList);
+  }
 }