Add snack messages after some actions.

src/app/active-list-tasks/task-display/task-display.component.spec.ts

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

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

@@ -1,7 +1,9 @@
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { ConfirmDialogComponent, ConfirmDialogModel } from 'src/app/core/components/confirm-dialog/confirm-dialog.component';
 import { Task } from 'src/app/core/entity/task';
 import { TaskListService } from 'src/app/core/service/task-list.service';
 
@@ -21,6 +23,7 @@ export class TaskDisplayComponent implements AfterViewInit, OnDestroy {
   private _subscriptions: Subscription[] = [];
 
   constructor(
+    private _dialog: MatDialog,
     private _taskListService: TaskListService
   ) {}
 
@@ -74,7 +77,27 @@ export class TaskDisplayComponent implements AfterViewInit, OnDestroy {
 
   delete(): void {
     if (this.task) {
+      const confirmData = {
+        title: `Supprimer la tâche ${this.task.title} ?`,
+        description: 'Une fois supprimé, sa description sera perdue définitivement.',
+        confirmButtonLabel: 'Supprimer la tâche',
+        confirmButtonType: 'alert'
+      } as ConfirmDialogModel;
+  
+      const dialogRef = this._dialog.open(
+        ConfirmDialogComponent,
+        {
+          width: '30rem',
+          data: confirmData
+        }
+      );
+  
+      const afterDialogCloseSubscription = dialogRef.afterClosed().subscribe(result => {
+        if (result && this.task) {
           this._taskListService.delete(this.task);
         }
+      })
+      this._subscriptions.push(afterDialogCloseSubscription);
+    }
   }
 }

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

@@ -18,8 +18,8 @@
       <mat-icon>chevron_left</mat-icon>
     </button>
   </div>
-  <div class="middle">
-    test
+  <div class="middle" *ngIf="activeTaskList">
+    {{activeTaskList.name}}
   </div>
   <div class="right">
     <button class="icon stroked primary"

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

@@ -13,18 +13,15 @@ import { TaskListService } from '../../service/task-list.service';
 })
 export class HeaderComponent implements OnInit, OnDestroy {
   private _storeSubscription?: Subscription;
-  activeTaskList?: TaskList;
   selectionMode = false;
 
   constructor(
     private _dialog: MatDialog,
-    private _router: Router,
     private _taskListService: TaskListService
   ) {}
 
   ngOnInit(): void {
     this._storeSubscription = this._taskListService.store$.subscribe(store => {
-      this.activeTaskList = store.taskLists.find(taskList => store.activeTaskListId === taskList.id);
       this.selectionMode = store.selectionMode;
     });
   }
@@ -57,4 +54,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
   isNoAnyTaskList(): boolean {
     return this._taskListService.isNoAnyTaskList();
   }
+
+  get activeTaskList(): TaskList | undefined {
+    return this._taskListService.activeTaskList;
+  }
 }

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

@@ -7,6 +7,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { filter } from 'rxjs/operators';
 import { Store } from "../entity/store";
 import { Router } from "@angular/router";
+import { MatSnackBar } from "@angular/material/snack-bar";
 
 @Injectable({
 	providedIn: 'root'
@@ -16,6 +17,7 @@ export class TaskListService {
 	
 	constructor(
 		private _router: Router,
+		private _snackBar: MatSnackBar,
 		private _storePersistenceService: StorePersistenceService
 	) {
 		this.store$.subscribe(store => {
@@ -67,6 +69,7 @@ export class TaskListService {
 		
 		activeTaskList?.tasks.push(newTask);
 		this.saveStore(store);
+		this._snackBar.open('Tâche ajoutée.', 'Fermer', {duration: 2000});
 	}
 	
 	updateTask(taskToUpdate: Task) {
@@ -103,6 +106,7 @@ export class TaskListService {
 
 		activeTaskList?.tasks.splice(taskIndex, 1);
 		this.saveStore(store);
+		this._snackBar.open('Tâche supprimée.', 'Fermer', {duration: 2000});
 	}
 
 	createTaskList(taskListName: string): void {
@@ -211,4 +215,9 @@ export class TaskListService {
 	isNoAnyTaskList(): boolean {
 		return !this.store?.taskLists?.length;
 	}
+
+	get activeTaskList(): TaskList | undefined {
+		const store = this.store;
+		return store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+	}
 }