From 3ebb1560ae7586ac2f00bcc6f921a5ebd6ac217d Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sun, 6 Mar 2022 15:10:07 +0100
Subject: [PATCH] Add snack messages after some actions.

---
 .../task-display.component.spec.ts            |  25 --
 .../task-display/task-display.component.ts    |  25 +-
 .../components/header/header.component.html   |   4 +-
 .../components/header/header.component.ts     |   7 +-
 src/app/core/service/task-list.service.ts     | 355 +++++++++---------
 5 files changed, 212 insertions(+), 204 deletions(-)
 delete mode 100644 src/app/active-list-tasks/task-display/task-display.component.spec.ts

diff --git a/src/app/active-list-tasks/task-display/task-display.component.spec.ts b/src/app/active-list-tasks/task-display/task-display.component.spec.ts
deleted file mode 100644
index 5c074a0..0000000
--- a/src/app/active-list-tasks/task-display/task-display.component.spec.ts
+++ /dev/null
@@ -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();
-  });
-});
diff --git a/src/app/active-list-tasks/task-display/task-display.component.ts b/src/app/active-list-tasks/task-display/task-display.component.ts
index f2be344..9eea60d 100644
--- a/src/app/active-list-tasks/task-display/task-display.component.ts
+++ b/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) {
-      this._taskListService.delete(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);
     }
   }
 }
diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index 1726334..e5fe3d6 100644
--- a/src/app/core/components/header/header.component.html
+++ b/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"
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index 9f69c98..5720102 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/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;
+  }
 }
diff --git a/src/app/core/service/task-list.service.ts b/src/app/core/service/task-list.service.ts
index 8c26223..4ea760a 100644
--- a/src/app/core/service/task-list.service.ts
+++ b/src/app/core/service/task-list.service.ts
@@ -7,208 +7,217 @@ 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'
+	providedIn: 'root'
 })
 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 => {
-        this.saveStore(store, true);
-      });
-    }
-    
-    get store$(): Observable<Store> {
-      return this._store.asObservable()
-      .pipe(filter(store => !!store));
-    }
-    
-    private get store(): Store {
-      let result = this._store.value;
+	private _store: BehaviorSubject<Store> = new BehaviorSubject<Store>(undefined as unknown as Store);
+	
+	constructor(
+		private _router: Router,
+		private _snackBar: MatSnackBar,
+		private _storePersistenceService: StorePersistenceService
+	) {
+		this.store$.subscribe(store => {
+			this.saveStore(store, true);
+		});
+	}
+	
+	get store$(): Observable<Store> {
+		return this._store.asObservable()
+		.pipe(filter(store => !!store));
+	}
+	
+	private get store(): Store {
+		let result = this._store.value;
 
-      if (!result) {
-        result = this._storePersistenceService.load();
-      }
-      return result;
-    }
+		if (!result) {
+			result = this._storePersistenceService.load();
+		}
+		return result;
+	}
 
-    private saveStore(store: Store, silent: boolean = false): void {
-      if (silent) {
-        this._storePersistenceService.save(store);
-      } else {
-        // We send the store into the subject because there is an observable on in, that saves the store at every single value.
-        this._store.next(store);
-      }
-    }
-    
-    addTask(taskTitle: string): void {
-      const store = this.store;
-      const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
-      if (!activeTaskList) {
-        throw new Error("No active tasklist");
-      }
-      
-      if (!activeTaskList.tasks) {
-        activeTaskList.tasks = [];
-      }
-      
-      const newTask = {
-        id: uuidv4(),
-        title: taskTitle,
-        creationDate: new Date(),
-        description: undefined as unknown as string
-      } as Task;
-      
-      
-      activeTaskList?.tasks.push(newTask);
-      this.saveStore(store);
-    }
-    
-    updateTask(taskToUpdate: Task) {
-      const store = this.store;
-      const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
-      if (!activeTaskList) {
-        throw new Error("No active tasklist");
-      }
+	private saveStore(store: Store, silent: boolean = false): void {
+		if (silent) {
+			this._storePersistenceService.save(store);
+		} else {
+			// We send the store into the subject because there is an observable on in, that saves the store at every single value.
+			this._store.next(store);
+		}
+	}
+	
+	addTask(taskTitle: string): void {
+		const store = this.store;
+		const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+		if (!activeTaskList) {
+			throw new Error("No active tasklist");
+		}
+		
+		if (!activeTaskList.tasks) {
+			activeTaskList.tasks = [];
+		}
+		
+		const newTask = {
+			id: uuidv4(),
+			title: taskTitle,
+			creationDate: new Date(),
+			description: undefined as unknown as string
+		} as Task;
+		
+		
+		activeTaskList?.tasks.push(newTask);
+		this.saveStore(store);
+		this._snackBar.open('Tâche ajoutée.', 'Fermer', {duration: 2000});
+	}
+	
+	updateTask(taskToUpdate: Task) {
+		const store = this.store;
+		const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+		if (!activeTaskList) {
+			throw new Error("No active tasklist");
+		}
 
-      const task = activeTaskList?.tasks.find(task => task.id === taskToUpdate.id);
-      if (!task) {
-        throw new Error('Unknown task to update');
-      }
+		const task = activeTaskList?.tasks.find(task => task.id === taskToUpdate.id);
+		if (!task) {
+			throw new Error('Unknown task to update');
+		}
 
-      task.title = taskToUpdate.title;
-      task.description = taskToUpdate.description;
+		task.title = taskToUpdate.title;
+		task.description = taskToUpdate.description;
 
-      // If the store is saved loudly, all views will be refreshed and the user will lose the focus of its input,
-      // so we save the store silently here.
-      this.saveStore(store, true);
-    }
-  
-    delete(taskToDelete: Task) {
-    const store = this.store;
-    const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
-    if (!activeTaskList) {
-      throw new Error("No active tasklist");
-    }
+		// If the store is saved loudly, all views will be refreshed and the user will lose the focus of its input,
+		// so we save the store silently here.
+		this.saveStore(store, true);
+	}
 
-    const taskIndex = activeTaskList?.tasks.findIndex(task => task.id === taskToDelete.id);
-    if (!taskIndex && taskIndex !== 0) {
-      throw new Error('Unknown task to delete');
-    }
+	delete(taskToDelete: Task) {
+		const store = this.store;
+		const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+		if (!activeTaskList) {
+			throw new Error("No active tasklist");
+		}
 
-    activeTaskList?.tasks.splice(taskIndex, 1);
-    this.saveStore(store);
-  }
+		const taskIndex = activeTaskList?.tasks.findIndex(task => task.id === taskToDelete.id);
+		if (!taskIndex && taskIndex !== 0) {
+			throw new Error('Unknown task to delete');
+		}
 
-  createTaskList(taskListName: string): void {
-    const newTaskList = {
-      id: uuidv4(),
-      name: taskListName,
-      tasks: []
-    } as TaskList;
+		activeTaskList?.tasks.splice(taskIndex, 1);
+		this.saveStore(store);
+		this._snackBar.open('Tâche supprimée.', 'Fermer', {duration: 2000});
+	}
 
-    const store = this.store;
-    store.taskLists.push(newTaskList);
-    this.saveStore(store);
-  }
+	createTaskList(taskListName: string): void {
+		const newTaskList = {
+			id: uuidv4(),
+			name: taskListName,
+			tasks: []
+		} as TaskList;
 
-  updateTaskListName(taskListToUpdate: TaskList): void {
-    const store = this.store;
-    const matchingTaskList = store.taskLists.find(taskList => taskList.id === taskListToUpdate.id);
-    if (matchingTaskList) {
-      matchingTaskList.name = taskListToUpdate.name;
-      this.saveStore(store);
-      this.disableSelectionMode();
-    }
-  }
+		const store = this.store;
+		store.taskLists.push(newTaskList);
+		this.saveStore(store);
+	}
 
-  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();
-  }
+	updateTaskListName(taskListToUpdate: TaskList): void {
+		const store = this.store;
+		const matchingTaskList = store.taskLists.find(taskList => taskList.id === taskListToUpdate.id);
+		if (matchingTaskList) {
+			matchingTaskList.name = taskListToUpdate.name;
+			this.saveStore(store);
+			this.disableSelectionMode();
+		}
+	}
 
-  getAll(): TaskList[] {
-    return this.store.taskLists ?? [];
-  }
+	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();
+	}
 
-  setActive(taskList: TaskList): void {
-    const store = this.store;
-    store.activeTaskListId = taskList.id;
-    this.saveStore(store);
-    this._router.navigate(['/task-lists/active']);
-  }
+	getAll(): TaskList[] {
+		return this.store.taskLists ?? [];
+	}
 
-  removeActiveTaskList(): void {
-    const store = this.store;
-    delete store.activeTaskListId;
-    this.saveStore(store);
-    this._router.navigate(['/']);
-  }
+	setActive(taskList: TaskList): void {
+		const store = this.store;
+		store.activeTaskListId = taskList.id;
+		this.saveStore(store);
+		this._router.navigate(['/task-lists/active']);
+	}
 
-  selectTaskList(taskList: TaskList): void {
-    this.enableSelectionMode();
+	removeActiveTaskList(): void {
+		const store = this.store;
+		delete store.activeTaskListId;
+		this.saveStore(store);
+		this._router.navigate(['/']);
+	}
 
-    const store = this.store;
+	selectTaskList(taskList: TaskList): void {
+		this.enableSelectionMode();
 
-    if (!store.selectedTaskLists) {
-      store.selectedTaskLists = [];
-    }
+		const store = this.store;
 
-    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 (!store.selectedTaskLists) {
+			store.selectedTaskLists = [];
+		}
 
-        if (!store.selectedTaskLists.length) {
-          store.selectionMode = false;
-        }
+		if (store.selectedTaskLists.some(tl => tl.id === taskList.id)) {
+				const selectedTaskListIndex = store.selectedTaskLists.findIndex(tl => tl.id === taskList.id);
+				store.selectedTaskLists.splice(selectedTaskListIndex, 1);
 
-        this.saveStore(store);
-    } else {
-      store.selectedTaskLists.push(taskList);
-      this.saveStore(store);
-    }
-  }
+				if (!store.selectedTaskLists.length) {
+					store.selectionMode = false;
+				}
 
-  isSelected(taskList: TaskList): boolean {
-    const store = this.store;
-    return store.selectedTaskLists && store.selectedTaskLists.some(tl => tl.id === taskList.id);
-  }
+				this.saveStore(store);
+		} else {
+			store.selectedTaskLists.push(taskList);
+			this.saveStore(store);
+		}
+	}
 
-  isSelectionModeEnabled(): boolean {
-    return this.store.selectionMode;
-  }
+	isSelected(taskList: TaskList): boolean {
+		const store = this.store;
+		return store.selectedTaskLists && store.selectedTaskLists.some(tl => tl.id === taskList.id);
+	}
 
-  enableSelectionMode(): void {
-    const store = this.store;
-    store.selectionMode = true;
-    this.saveStore(store);
-  }
+	isSelectionModeEnabled(): boolean {
+		return this.store.selectionMode;
+	}
 
-  disableSelectionMode(): void {
-    const store = this.store;
-    store.selectionMode = false;
-    store.selectedTaskLists = [];
-    this.saveStore(store);
-  }
+	enableSelectionMode(): void {
+		const store = this.store;
+		store.selectionMode = true;
+		this.saveStore(store);
+	}
 
-  isThereMultipleTaskListsSelected(): boolean {
-    const store = this.store;
-    return (store.selectedTaskLists?.length ?? 0) > 1;
-  }
+	disableSelectionMode(): void {
+		const store = this.store;
+		store.selectionMode = false;
+		store.selectedTaskLists = [];
+		this.saveStore(store);
+	}
 
-  get selectedTaskList(): TaskList {
-    return this._store.value?.selectedTaskLists[0];
-  }
+	isThereMultipleTaskListsSelected(): boolean {
+		const store = this.store;
+		return (store.selectedTaskLists?.length ?? 0) > 1;
+	}
 
-  isNoAnyTaskList(): boolean {
-    return !this.store?.taskLists?.length;
-  }
+	get selectedTaskList(): TaskList {
+		return this._store.value?.selectedTaskLists[0];
+	}
+
+	isNoAnyTaskList(): boolean {
+		return !this.store?.taskLists?.length;
+	}
+
+	get activeTaskList(): TaskList | undefined {
+		const store = this.store;
+		return store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+	}
 }