Implementation of task-lists deletion with dialog.

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { StorePersistenceService } from './core/service/store-persistence.servic
 import {MatTooltipModule} from '@angular/material/tooltip'; 
 import {MatRippleModule} from '@angular/material/core';
 import { RenameTaskListComponent } from './task-lists/rename-task-list/rename-task-list.component';
+import { ConfirmDialogComponent } from './core/components/confirm-dialog/confirm-dialog.component'; 
 
 @NgModule({
   declarations: [
@@ -37,7 +38,8 @@ import { RenameTaskListComponent } from './task-lists/rename-task-list/rename-ta
     HeaderComponent,
     ActiveListTasksComponent,
     TaskDisplayComponent,
-    RenameTaskListComponent
+    RenameTaskListComponent,
+    ConfirmDialogComponent
   ],
   imports: [
     BrowserModule,

src/app/core/components/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,17 @@
+<div class="container">
+    <div class="body">
+        <mat-icon>help_outline</mat-icon>
+        <div class="message">
+            <div class="title">{{data.title}}</div>
+            <div class="description">{{data.description}}</div>
+        </div>
+    </div>
+    <div class="actions">
+        <button class="raised" (click)="cancel()">Annuler</button>
+        <button class="raised" 
+                (click)="confirm()"
+                [ngClass]="data.confirmButtonType">
+            {{data.confirmButtonLabel}}
+        </button>
+    </div>
+</div>

src/app/core/components/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,45 @@
+.container {
+    .body {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        align-items: center;
+
+        mat-icon {
+            $iconSize: 4rem;
+            font-size: $iconSize;
+            width: $iconSize;
+            height: $iconSize;
+            margin: 0 1rem;
+        }
+
+        .message {
+            .title {
+                display: flex;
+                flex-grow: 1;
+                justify-content: center;
+                text-align: center;
+                font-size: 1.5rem;
+                margin: .5rem;
+            }
+    
+            .description {
+                display: flex;
+                flex-grow: 1;
+                justify-content: center;
+                text-align: center;
+                font-size: 1.2rem;
+            }
+        }
+    }
+    .actions {
+        margin-top: 1rem; 
+        display: flex;
+        justify-content: space-between;
+
+        > * {
+            flex: 1 1 45%;
+            max-width: 45%;
+        }
+    }
+}

src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,31 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export interface ConfirmDialogModel {
+  title: string;
+  description: string;
+  confirmButtonLabel: string;
+  confirmButtonType: '' | 'alert';
+}
+
+@Component({
+  selector: 'app-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss']
+})
+export class ConfirmDialogComponent {
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogModel,
+    private _dialogRef: MatDialogRef<ConfirmDialogModel>
+  ) {}
+
+  cancel(): void {
+    this._dialogRef.close();
+  }
+
+  confirm(): void {
+    this._dialogRef.close(true);
+  }
+
+}

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

@@ -127,6 +127,14 @@ export class TaskListService {
     }
   }
 
+  deleteSelectedTaskLists(): void {
+    const store = this.store;
+    const nonSelectedTaskLists = store.taskLists.filter(taskList => !store.selectedTaskLists.some(selectedTaskList => selectedTaskList.id === taskList.id));
+    store.taskLists = nonSelectedTaskLists;
+    this.saveStore(store);
+    this.disableSelectionMode();
+  }
+
   getAll(): TaskList[] {
     return this.store.taskLists ?? [];
   }

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

@@ -1,4 +1,7 @@
 <div class="task-lists">
+  <div *ngIf="!taskLists?.length" class="no-task-list">
+    Aucune task-list.
+  </div>
   <div *ngFor="let taskList of taskLists" class="task-list-container">
     <div class="task-list shadowed"
         (click)="selectActiveTaskList(taskList)"
@@ -27,5 +30,6 @@
       (click)="renameSelectedTaskList()">
     Renommer
   </button>
-  <button class="raised alert">Supprimer</button>
+  <button class="raised alert"
+      (click)="deleteSelectedTaskLists()">Supprimer</button>
 </div>

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

@@ -1,3 +1,10 @@
+.no-task-list {
+  display: flex;
+  margin: auto;
+  margin-top: 3rem;
+  font-size: 1.5rem;
+}
+
 .task-lists {
   display: flex;
   flex-direction: row;

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

@@ -1,6 +1,7 @@
 import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
+import { ConfirmDialogComponent, ConfirmDialogModel } from '../core/components/confirm-dialog/confirm-dialog.component';
 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';
@@ -14,6 +15,7 @@ import { RenameTaskListComponent } from './rename-task-list/rename-task-list.com
 export class TaskListsComponent implements OnInit, OnDestroy {
   taskLists: TaskList[] = [];
   private _storeSubscription?: Subscription;
+  private _subscriptions: Subscription[] = [];
 
   constructor(
     private _dialog: MatDialog,
@@ -22,13 +24,14 @@ export class TaskListsComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.taskLists = this._taskListService.getAll();
-    this._storeSubscription = this._taskListService.store$.subscribe(store => {
+    const storeSubscription = this._taskListService.store$.subscribe(store => {
       this.taskLists = store.taskLists;
     });
+    this._subscriptions.push(storeSubscription);
   }
 
   ngOnDestroy(): void {
-    this._storeSubscription?.unsubscribe();
+    this._subscriptions.forEach(subscription => subscription.unsubscribe());
   }
 
   selectActiveTaskList(taskList: TaskList): void {
@@ -63,4 +66,28 @@ export class TaskListsComponent implements OnInit, OnDestroy {
       }
     );
   }
+
+  deleteSelectedTaskLists(): void {
+    const confirmData = {
+      title: 'Supprimer les task-lists sélectionnées ?',
+      description: 'Une fois supprimées, les task-lists seront perdues définitivement.',
+      confirmButtonLabel: 'Supprimer les task-lists',
+      confirmButtonType: 'alert'
+    } as ConfirmDialogModel;
+
+    const dialogRef = this._dialog.open(
+      ConfirmDialogComponent,
+      {
+        width: '30rem',
+        data: confirmData
+      }
+    );
+
+    const afterDialogCloseSubscription = dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this._taskListService.deleteSelectedTaskLists();
+      }
+    })
+    this._subscriptions.push(afterDialogCloseSubscription);
+  }
 }