Add task list selection system.

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

@@ -3,4 +3,7 @@
     To Do
   </span>
   <button mat-raised-button (click)="openNewListForm()">Nouvelle liste</button>
+  <div *ngIf="activeTaskList">
+    Liste active : {{activeTaskList.name}}
+  </div>
 </nav>

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

@@ -1,19 +1,32 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
 import { AddTaskListComponent } from 'src/app/task-lists/add-task-list/add-task-list.component';
+import { TaskList } from '../../entity/task-list';
+import { TaskListService } from '../../service/task-list.service';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent implements OnInit, OnDestroy {
+  private _storeSubscription?: Subscription;
+  activeTaskList?: TaskList;
 
   constructor(
     private _dialog: MatDialog,
+    private _taskListService: TaskListService
   ) {}
 
   ngOnInit(): void {
+    this._storeSubscription = this._taskListService.store$.subscribe(store => {
+      this.activeTaskList = store.taskLists.find(taskList => store.activeTaskListId === taskList.id);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._storeSubscription?.unsubscribe();
   }
 
   openNewListForm(): void {

src/app/core/entity/store.ts

@@ -3,4 +3,6 @@ import { TaskList } from "./task-list";
 export interface Store {
   activeTaskListId: string | undefined;
   taskLists: TaskList[];
+  selectedTaskLists: TaskList[];
+  selectionMode: boolean;
 }

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

@@ -29,7 +29,9 @@ export class StorePersistenceService {
     } else {
       return {
         activeTaskListId: undefined,
-        taskLists: []
+        taskLists: [],
+        selectedTaskLists: [],
+        selectionMode: false
       } as Store;
     }
   }

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

@@ -15,55 +15,100 @@ export class TaskListService {
 
   constructor(
     private _storePersistenceService: StorePersistenceService
-    ) {
-      this.store$.subscribe(store => {
-        this._storePersistenceService.save(store);
-      });
+  ) {
+    this.store$.subscribe(store => {
+      this._storePersistenceService.save(store);
+    });
+  }
+
+  get store$(): Observable<Store> {
+    return this._store.asObservable()
+        .pipe(filter(store => !!store));
+  }
+
+  private get store(): Store {
+    return this._storePersistenceService.load();
+  }
+
+  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");
     }
 
-    get store$(): Observable<Store> {
-      return this._store.asObservable()
-          .pipe(filter(store => !!store));
+    if (!activeTaskList.tasks) {
+      activeTaskList.tasks = [];
     }
 
-    private get store(): Store {
-      return this._storePersistenceService.load();
+    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);
+  }
+
+  selectTaskList(taskList: TaskList): void {
+    this.enableSelectionMode();
+
+    const store = this.store;
+
+    if (!store.selectedTaskLists) {
+      store.selectedTaskLists = [];
     }
 
-    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 (store.selectedTaskLists.some(tl => tl.id === taskList.id)) {
+        const selectedTaskListIndex = store.selectedTaskLists.findIndex(tl => tl.id === taskList.id);
+        store.selectedTaskLists.splice(selectedTaskListIndex, 1);
 
-      if (!activeTaskList.tasks) {
-        activeTaskList.tasks = [];
-      }
+        if (!store.selectedTaskLists.length) {
+          store.selectionMode = false;
+        }
 
-      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);
+    } else {
+      store.selectedTaskLists.push(taskList);
       this._store.next(store);
     }
   }
+
+  isSelected(taskList: TaskList): boolean {
+    const store = this.store;
+    return store.selectedTaskLists && store.selectedTaskLists.some(tl => tl.id === taskList.id);
+  }
+
+  isSelectionModeEnabled(): boolean {
+    return this.store.selectionMode;
+  }
+
+  enableSelectionMode(): void {
+    const store = this.store;
+    store.selectionMode = true;
+    this._store.next(store);
+  }
+
+  disableSelectionMode(): void {
+    const store = this.store;
+    store.selectionMode = true;
+    this._store.next(store);
+  }
+}

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

@@ -1,6 +1,6 @@
 <div class="task-lists">
   <div *ngFor="let taskList of taskLists" class="task-list-container">
-    <div class="task-list shadowed" (click)="selectActiveTaskList(taskList)">
+    <div class="task-list shadowed" (click)="selectActiveTaskList(taskList)" (contextmenu)="$event.preventDefault(); onRightClick(taskList)">
       <ng-container [ngPlural]="taskList.tasks?.length ?? 0">
         <ng-template ngPluralCase=">1">
           {{taskList.tasks?.length}} tâches
@@ -11,5 +11,8 @@
       </ng-container>
     </div>
     {{taskList.name}}
+    <ng-container *ngIf="isSelectionModeEnabled() && isSelected(taskList)">
+      SELECTED
+    </ng-container>
   </div>
 </div>

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

@@ -35,6 +35,22 @@ export class TaskListsComponent implements OnInit, OnDestroy {
   }
 
   selectActiveTaskList(taskList: TaskList): void {
-    this._taskListService.setActive(taskList);
+    if (this.isSelectionModeEnabled()) {
+      this._taskListService.selectTaskList(taskList);
+    } else {
+      this._taskListService.setActive(taskList);
+    }
+  }
+
+  onRightClick(taskList: TaskList): void {
+    this._taskListService.selectTaskList(taskList);
+  }
+
+  isSelected(taskList: TaskList): boolean {
+    return this._taskListService.isSelected(taskList);
+  }
+
+  isSelectionModeEnabled(): boolean {
+    return this._taskListService.isSelectionModeEnabled();
   }
 }