Refactor store observer mecanism to pilot edition actions.

src/app/app.component.html

@@ -1 +1,2 @@
-<router-outlet></router-outlet>
+<app-header></app-header>
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -16,6 +16,7 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from '@angular/material/button';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
+import { HeaderComponent } from './core/components/header/header.component';
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
     AddTaskComponent,
     DisplayTaskComponent,
     TaskListsComponent,
-    AddTaskListComponent
+    AddTaskListComponent,
+    HeaderComponent
   ],
   imports: [
     BrowserModule,

src/app/core/components/header/header.component.html

@@ -0,0 +1,6 @@
+<nav>
+  <span class="title">
+    To Do
+  </span>
+  <button mat-raised-button (click)="openNewListForm()">Nouvelle liste</button>
+</nav>

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

@@ -0,0 +1,14 @@
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  height: 4rem;
+
+  .title {
+    font-size: 1.5rem;
+    margin: 0 1rem;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { AddTaskListComponent } from 'src/app/task-lists/add-task-list/add-task-list.component';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor(
+    private _dialog: MatDialog,
+  ) {}
+
+  ngOnInit(): void {
+  }
+
+  openNewListForm(): void {
+    this._dialog.open(AddTaskListComponent);
+  }
+}

src/app/core/entity/store.ts

@@ -1,5 +1,6 @@
 import { TaskList } from "./task-list";
 
 export interface Store {
+  activeTaskListId: string | undefined;
   taskLists: TaskList[];
 }

src/app/core/service/store-persistence.service.ts

@@ -28,6 +28,7 @@ export class StorePersistenceService {
       }
     } else {
       return {
+        activeTaskListId: undefined,
         taskLists: []
       } as Store;
     }

src/app/core/service/task-list.service.ts

@@ -1,53 +1,70 @@
 import { Injectable } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
 import { Task } from "../entity/task";
 import { TaskList } from "../entity/task-list";
 import { StorePersistenceService } from "./store-persistence.service";
 import { v4 as uuidv4 } from 'uuid';
+import { filter, throttleTime } from 'rxjs/operators';
+import { Store } from "../entity/store";
 
 @Injectable({
   providedIn: 'root'
 })
 export class TaskListService {
   private _activeTaskList: BehaviorSubject<TaskList> = new BehaviorSubject<TaskList>(undefined as unknown as TaskList);
+  private _store: BehaviorSubject<Store> = new BehaviorSubject<Store>(undefined as unknown as Store);
 
   constructor(
     private _storePersistenceService: StorePersistenceService
-  ) {
-    this._activeTaskList.asObservable()
-        .subscribe(activeTaskList => {
-          const store = this._storePersistenceService.load();
-          const storedActiveList = store.taskLists.find(taskList => activeTaskList.id === taskList.id);
-          if (storedActiveList) {
-            storedActiveList.name = activeTaskList.name;
-            storedActiveList.tasks = activeTaskList.tasks;
-          } else {
-            store.taskLists.push(activeTaskList);
-          }
-          this._storePersistenceService.save(store);
-        });
-  }
-
-  addTask(task: Task): void {
-    const activeTaskList = this._activeTaskList.value;
-
-    if (!activeTaskList.tasks) {
-      activeTaskList.tasks = [];
+    ) {
+      this.store$.subscribe(store => {
+        this._storePersistenceService.save(store);
+      });
     }
 
-    activeTaskList.tasks.push(task);
-    this._activeTaskList.next(activeTaskList);
-  }
+    get store$(): Observable<Store> {
+      return this._store.asObservable()
+          .pipe(filter(store => !!store));
+    }
 
-  createTaskList(taskListName: string): void {
-    const newTaskList = {
-      id: uuidv4(),
-      name: taskListName,
-      tasks: []
-    } as TaskList;
+    private get store(): Store {
+      return this._storePersistenceService.load();
+    }
 
-    const store = this._storePersistenceService.load();
-    store.taskLists.push(newTaskList);
-    this._storePersistenceService.save(store);
+    addTask(task: Task): void {
+      const store = this.store;
+      const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+      if (!activeTaskList) {
+        throw new Error("No active tasklist");
+      }
+
+      if (!activeTaskList.tasks) {
+        activeTaskList.tasks = [];
+      }
+
+      activeTaskList?.tasks.push(task);
+      this._store.next(store);
+    }
+
+    createTaskList(taskListName: string): void {
+      const newTaskList = {
+        id: uuidv4(),
+        name: taskListName,
+        tasks: []
+      } as TaskList;
+
+      const store = this.store;
+      store.taskLists.push(newTaskList);
+      this._store.next(store);
+    }
+
+    getAll(): TaskList[] {
+      return this.store.taskLists ?? [];
+    }
+
+    setActive(taskList: TaskList) {
+      const store = this.store;
+      store.activeTaskListId = taskList.id;
+      this._store.next(store);
+    }
   }
-}

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);
+  }
 }

src/styles.scss

@@ -1,4 +1,26 @@
 /* You can add global styles to this file, and also import other style files */
 
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  padding-top: 4rem;
+}
+
+
+
+
+
+.shadowed {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  transition: box-shadow .2s ease-out;
+
+  &:hover {
+    box-shadow: 0 .2em .5em #777;
+  }
+}
+
+a.no-style {
+  color: inherit;
+  text-decoration: none;
+}