Add active-list-tasks component and navigation with home pane.

src/app/active-list-tasks/active-list-tasks.component.html

@@ -0,0 +1 @@
+<p>active-list-tasks works!</p>

src/app/active-list-tasks/active-list-tasks.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { TaskList } from '../core/entity/task-list';
+import { TaskListService } from '../core/service/task-list.service';
+
+@Component({
+  selector: 'app-active-list-tasks',
+  templateUrl: './active-list-tasks.component.html',
+  styleUrls: ['./active-list-tasks.component.scss']
+})
+export class ActiveListTasksComponent implements OnInit, OnDestroy {
+  private _activeTaskList?: TaskList;
+  private _storeSubscription?: Subscription;
+
+  constructor(
+    private _router: Router,
+    private _taskListService: TaskListService,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this._storeSubscription = this._taskListService.store$.subscribe(store => {
+      if (store.activeTaskListId) {
+        this._activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+        if (!this._activeTaskList) {
+          this._backToTaskListPane();
+        }
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._storeSubscription?.unsubscribe();
+  }
+
+  private _backToTaskListPane(): void {
+    this._snackBar.open('La task-list active n\'existe pas dans le store.', 'Fermer', {duration: 5000});
+    this._router.navigate(['/']);
+  }
+}

src/app/app-routing.module.ts

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.component';
 import { MainPageComponent } from './main-page/main-page.component';
 
 const routes: Routes = [
-  { path: '', component: MainPageComponent}
+  { path: '', component: MainPageComponent},
+  { path: 'task-lists/active', component: ActiveListTasksComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -17,6 +17,7 @@ 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';
+import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +27,8 @@ import { HeaderComponent } from './core/components/header/header.component';
     DisplayTaskComponent,
     TaskListsComponent,
     AddTaskListComponent,
-    HeaderComponent
+    HeaderComponent,
+    ActiveListTasksComponent
   ],
   imports: [
     BrowserModule,

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

@@ -1,8 +1,17 @@
 <nav>
-  <span class="title">
+  <span class="title" routerLink="/">
     To Do
   </span>
-  <button mat-raised-button (click)="openNewListForm()">Nouvelle liste</button>
+  <button mat-raised-button
+      *ngIf="!activeTaskList"
+      (click)="openNewListForm()">
+    Nouvelle liste
+  </button>
+  <button mat-raised-button
+      *ngIf="activeTaskList"
+      (click)="goTaskListsPane()">
+    <mat-icon>chevron_left</mat-icon>
+  </button>
   <div *ngIf="activeTaskList">
     Liste active : {{activeTaskList.name}}
   </div>

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

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { AddTaskListComponent } from 'src/app/task-lists/add-task-list/add-task-list.component';
 import { TaskList } from '../../entity/task-list';
@@ -16,6 +17,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
   constructor(
     private _dialog: MatDialog,
+    private _router: Router,
     private _taskListService: TaskListService
   ) {}
 
@@ -32,4 +34,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
   openNewListForm(): void {
     this._dialog.open(AddTaskListComponent);
   }
+
+  goTaskListsPane(): void {
+    this._taskListService.removeActiveTaskList();
+  }
 }

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

@@ -6,6 +6,7 @@ import { StorePersistenceService } from "./store-persistence.service";
 import { v4 as uuidv4 } from 'uuid';
 import { filter } from 'rxjs/operators';
 import { Store } from "../entity/store";
+import { Router } from "@angular/router";
 
 @Injectable({
   providedIn: 'root'
@@ -14,6 +15,7 @@ export class TaskListService {
   private _store: BehaviorSubject<Store> = new BehaviorSubject<Store>(undefined as unknown as Store);
 
   constructor(
+    private _router: Router,
     private _storePersistenceService: StorePersistenceService
   ) {
     this.store$.subscribe(store => {
@@ -61,10 +63,18 @@ export class TaskListService {
     return this.store.taskLists ?? [];
   }
 
-  setActive(taskList: TaskList) {
+  setActive(taskList: TaskList): void {
     const store = this.store;
     store.activeTaskListId = taskList.id;
     this._store.next(store);
+    this._router.navigate(['/task-lists/active']);
+  }
+
+  removeActiveTaskList(): void {
+    const store = this.store;
+    delete store.activeTaskListId;
+    this._store.next(store);
+    this._router.navigate(['/']);
   }
 
   selectTaskList(taskList: TaskList): void {