From 3819b859feb0919d8d7b2181082a72f7938bb01a Mon Sep 17 00:00:00 2001
From: Florian THIERRY <fthierry@ippon.fr>
Date: Fri, 4 Mar 2022 17:40:47 +0100
Subject: [PATCH] Change header display in selection mode.

---
 .../core/components/header/header.component.html   | 11 ++++++++++-
 .../core/components/header/header.component.scss   | 14 ++++++++++++++
 src/app/core/components/header/header.component.ts |  6 ++++++
 src/app/core/service/task-list.service.ts          |  3 ++-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index b0bf001..b841047 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -1,4 +1,4 @@
-<nav>
+<nav *ngIf="!selectionMode">
   <span class="title" routerLink="/">
     To Do
   </span>
@@ -16,3 +16,12 @@
     Liste active : {{activeTaskList.name}}
   </div>
 </nav>
+<nav *ngIf="selectionMode" class="selectionMode">
+  <div></div>
+  <div>
+    Cliquez sur une liste pour la sélectionner
+  </div>
+  <div class="actions">
+    <button mat-raised-button (click)="disableSelectionMode()">Annuler</button>
+  </div>
+</nav>
diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss
index a3e6be0..0b145c1 100644
--- a/src/app/core/components/header/header.component.scss
+++ b/src/app/core/components/header/header.component.scss
@@ -7,6 +7,20 @@ nav {
   align-items: center;
   height: 4rem;
 
+  &.selectionMode {
+    font-weight: bold;
+    background-color: #185eb4;
+    color: white;
+    display: flex;
+    justify-content: center;
+
+    .actions {
+      position: absolute;
+      right: 0;
+      margin: 0 1rem;
+    }
+  }
+
   .title {
     font-size: 1.5rem;
     margin: 0 1rem;
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index b9d13cf..0a4e54e 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -14,6 +14,7 @@ import { TaskListService } from '../../service/task-list.service';
 export class HeaderComponent implements OnInit, OnDestroy {
   private _storeSubscription?: Subscription;
   activeTaskList?: TaskList;
+  selectionMode = false;
 
   constructor(
     private _dialog: MatDialog,
@@ -24,6 +25,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this._storeSubscription = this._taskListService.store$.subscribe(store => {
       this.activeTaskList = store.taskLists.find(taskList => store.activeTaskListId === taskList.id);
+      this.selectionMode = store.selectionMode;
     });
   }
 
@@ -38,4 +40,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
   goTaskListsPane(): void {
     this._taskListService.removeActiveTaskList();
   }
+
+  disableSelectionMode(): void {
+    this._taskListService.disableSelectionMode();
+  }
 }
diff --git a/src/app/core/service/task-list.service.ts b/src/app/core/service/task-list.service.ts
index b714206..4dfa52e 100644
--- a/src/app/core/service/task-list.service.ts
+++ b/src/app/core/service/task-list.service.ts
@@ -118,7 +118,8 @@ export class TaskListService {
 
   disableSelectionMode(): void {
     const store = this.store;
-    store.selectionMode = true;
+    store.selectionMode = false;
+    store.selectedTaskLists = [];
     this._store.next(store);
   }
 }