Add snack messages after some actions.

src/app/active-list-tasks/active-list-tasks.component.scss

@@ -2,14 +2,21 @@
     max-width: 50rem;
     width: 90%;
     margin: 0 auto;
+    padding: 2rem;
 
     .task {
+        &.new {
             position: relative;
             width: 100%;
-        height: 2.5rem;
             display: flex;
             align-items: center;
-        margin: .5rem 0;
+            margin-top: 1rem;
+            height: 2.5rem;
+
+            mat-icon {
+                position: absolute;
+                left: 1rem;
+            }
 
             input {
                 width: 100%;
@@ -17,15 +24,7 @@
                 padding: 0 3rem;
                 border-radius: .1rem;
                 border-style: none;
-            background-color: #444;
+                background-color: var(--secondary);
-        }
-
-        &.new {
-            margin-top: 1rem;
-
-            mat-icon {
-                position: absolute;
-                left: 1rem;
             }
         }
     }

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

@@ -46,13 +46,7 @@ export class ActiveListTasksComponent implements OnInit, OnDestroy {
   onNewTaskKeyDown(event: KeyboardEvent): void {
     if (event.key === 'Enter') {
       if (this.newTaskControl.valid) {
-        const newTask = {
+        this._taskListService.addTask(this.newTaskControl.value as string);
-          title: this.newTaskControl.value as string,
-          creationDate: new Date(),
-          description: undefined as unknown as string
-        } as Task;
-
-        this._taskListService.addTask(newTask);
         this.newTaskControl.reset();
       }
     }

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

@@ -3,10 +3,35 @@
         <mat-icon class="drag-n-drop">drag_handle</mat-icon>
         <mat-checkbox class="example-margin"></mat-checkbox>
         <div class="input-container">
-            <input type="text" [formControl]="titleControl" />
+            <input type="text" #titleInput [formControl]="titleControl"/>
         </div>
-        <button mat-button type="button" class="expand">
+        <button type="button" class="expand icon" (click)="expand()" matRipple>
-            <mat-icon>expand_more</mat-icon>
+            <mat-icon *ngIf="!isExpanded">expand_more</mat-icon>
+            <mat-icon *ngIf="isExpanded">expand_less</mat-icon>
         </button>
     </div>
+    <div [ngClass]="getExpendedClass()">
+        <div class="container">
+            <div class="description-container">
+                <label for="description">
+                    Description
+                </label>
+                <textarea id="description" [formControl]="descriptionControl"></textarea>
+            </div>
+            <div class="actions">
+                <div class="row">
+                    <button class="stroked secondary" [disabled]="true" matRipple matTooltip="Définir une alerte dans X minutes">
+                        <mat-icon>update</mat-icon>
+                        Rappel
+                    </button>
+                </div>
+                <div class="row">
+                    <button class="stroked alert" [disabled]="!task" (click)="delete()">
+                        <mat-icon>delete</mat-icon>
+                        Supprimer
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>

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

@@ -1,15 +1,15 @@
 .task {
     position: relative;
     width: 100%;
-    height: 2.5rem;
     display: flex;
     align-items: center;
-    margin: .5rem 0;
+    margin-bottom: .5rem;
+    flex-direction: column;
+    background-color: var(--secondary);
+    border-radius: .2rem;
 
     .header {
-        border-radius: .1rem;
         height: 2.5rem;
-        background-color: #444;
         width: 100%;
         display: flex;
         align-items: center;
@@ -21,10 +21,6 @@
             }
         }
 
-        mat-checkbox {
-            // padding: 0 .5rem;
-        }
-
         .input-container {
             display: flex;
             flex-grow: 1;
@@ -34,7 +30,7 @@
                 height: 1.8rem;
                 padding: 0 .8rem;
                 margin: 0 .8rem;
-                background-color: #444;
+                background-color: inherit;
                 border-style: solid;
                 border-width: .1rem;
                 border-color: rgba(0,0,0, 0);
@@ -46,35 +42,76 @@
                         border-color .2s ease-out;
 
                 &:hover {
-                    border-color: rgb(53, 53, 53);
+                    border-color: var(--secondary-border);
                 }
             }
         }
 
         .expand {
-            display: flex;
-            justify-content: end;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 0;
             margin-right: .5rem;
+        }
+    }
 
-            border-style: solid;
+    .body {
-            border-width: .1rem;
+        height: 0;
-            border-color: rgba(0,0,0, 0);
+        visibility: hidden;
+        transition: height .1s ease-in-out;
+        display: flex;
+        border-top: .1rem solid var(--primary-border);
 
-            width: 2rem;
+        &.expanded {
-            height: 2rem;
+            height: 20rem;
-            min-width: 2rem;
+            visibility: visible;
-            min-height: 2rem;
+            width: 100%;
+        }
 
-            transition: background-color .2s ease-out,
+        .container {
-                        border-color .2s ease-out;
+            flex-grow: 1;
+            padding: 1rem;
+            display: flex;
+            flex-direction: row;
 
-            &:hover {
+            .description-container {
-                background-color: #666;
+                width: 80%;
-                border-color: rgb(53, 53, 53);
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+    
+                textarea {
+                    flex-grow: 1;
+                    border: 1px solid var(--secondary-border);
+                    border-radius: .2rem;
+                    background-color: #ddd;
+                    resize: none;
+                    padding: .5rem;
+                }
+            }
+    
+            .actions {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                height: 100%;
+                max-width: 20%;
+
+                .row {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-items: flex-start;
+                    padding: .5rem 0 .5rem 1rem;
+
+                    button {
+                        display: flex;
+                        justify-content: left;
+                        flex-grow: 1;
+
+                        mat-icon {
+                            margin-right: .5rem;
+                        }
+                    }
+                }
             }
         }
     }

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

@@ -1,23 +1,103 @@
-import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+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';
 
+
 @Component({
   selector: 'app-task-display',
   templateUrl: './task-display.component.html',
   styleUrls: ['./task-display.component.scss']
 })
-export class TaskDisplayComponent implements AfterViewInit {
+export class TaskDisplayComponent implements AfterViewInit, OnDestroy {
   @Input() task?: Task;
-  titleControl = new FormControl(this.task?.title);
+  @ViewChild('titleInput', {static: true}) titleInput?: ElementRef<HTMLInputElement>;
+  @ViewChild('descriptionInput', {static: true}) descriptionInput?: ElementRef<HTMLTextAreaElement>;
+  titleControl = new FormControl();
+  descriptionControl = new FormControl();
+  isExpanded = false;
+  private _subscriptions: Subscription[] = [];
 
   constructor(
+    private _dialog: MatDialog,
     private _taskListService: TaskListService
   ) {}
 
-
   ngAfterViewInit(): void {
     this.titleControl.setValue(this?.task?.title);
+    this.descriptionControl.setValue(this?.task?.description);
+
+    const titleControlSubscription = this.titleControl.valueChanges
+        .pipe(
+          distinctUntilChanged(),
+          debounceTime(500)
+        )
+        .subscribe(newTitle => {
+          if (this.task) {
+            this.task.title = newTitle;
+            this._taskListService.updateTask(this.task);
+          }
+        });
+    this._subscriptions.push(titleControlSubscription);
+
+    const descriptionControlSubscription = this.descriptionControl.valueChanges
+    .pipe(
+      distinctUntilChanged(),
+      debounceTime(500)
+    )
+    .subscribe(description => {
+      if (this.task) {
+        this.task.description = description;
+        this._taskListService.updateTask(this.task);
+      }
+    });
+    this._subscriptions.push(descriptionControlSubscription);
+  }
+
+  ngOnDestroy(): void {
+    this._subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  expand(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  getExpendedClass(): string {
+    let result = 'body';
+
+    if (this.isExpanded) {
+      result += ' expanded';
+    }
+    return result;
+  }
+
+  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/app.module.ts

@@ -22,6 +22,10 @@ import { TaskDisplayComponent } from './active-list-tasks/task-display/task-disp
 import {MatCheckboxModule} from '@angular/material/checkbox'; 
 import { TaskListService } from './core/service/task-list.service';
 import { StorePersistenceService } from './core/service/store-persistence.service';
+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: [
@@ -33,7 +37,9 @@ import { StorePersistenceService } from './core/service/store-persistence.servic
     AddTaskListComponent,
     HeaderComponent,
     ActiveListTasksComponent,
-    TaskDisplayComponent
+    TaskDisplayComponent,
+    RenameTaskListComponent,
+    ConfirmDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -45,7 +51,9 @@ import { StorePersistenceService } from './core/service/store-persistence.servic
     MatButtonModule,
     ReactiveFormsModule,
     MatSnackBarModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatTooltipModule,
+    MatRippleModule
   ],
   providers: [
     CookieService,

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="dialog-actions">
+        <button class="stroked" (click)="cancel()">Annuler</button>
+        <button class="stroked"
+                (click)="confirm()"
+                [ngClass]="data.confirmButtonType">
+            {{data.confirmButtonLabel}}
+        </button>
+    </div>
+</div>

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

@@ -0,0 +1,35 @@
+.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;
+            }
+        }
+    }
+}

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

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TaskDisplayComponent } from './task-display.component';
+import { ConfirmDialogComponent } from './confirm-dialog.component';
 
-describe('TaskDisplayComponent', () => {
+describe('ConfirmDialogComponent', () => {
-  let component: TaskDisplayComponent;
+  let component: ConfirmDialogComponent;
-  let fixture: ComponentFixture<TaskDisplayComponent>;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TaskDisplayComponent ]
+      declarations: [ ConfirmDialogComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TaskDisplayComponent);
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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/components/header/header.component.html

@@ -1,19 +1,34 @@
 <nav *ngIf="!selectionMode">
-  <span class="title" routerLink="/">
+  <div class="left">
+    <span class="title">
+      <img src="../../assets/images/to-do.png" />
       To Do
     </span>
-  <button mat-raised-button
+    <button *ngIf="!activeTaskList"
-      *ngIf="!activeTaskList"
+        (click)="openNewListForm()"
-      (click)="openNewListForm()">
+        class="stroked primary"
+        matRipple>
       Nouvelle liste
     </button>
-  <button mat-raised-button
+    <button *ngIf="activeTaskList"
-      *ngIf="activeTaskList"
+        (click)="goTaskListsPane()"
-      (click)="goTaskListsPane()">
+        class="icon stroked primary"
+        matRipple
+        matTooltip="Retourner aux task-lists">
       <mat-icon>chevron_left</mat-icon>
     </button>
-  <div *ngIf="activeTaskList">
+  </div>
-    Liste active : {{activeTaskList.name}}
+  <div class="middle" *ngIf="activeTaskList">
+    {{activeTaskList.name}}
+  </div>
+  <div class="right">
+    <button class="icon stroked primary"
+        (click)="enableSelectionMode()"
+        [disabled]="isNoAnyTaskList()"
+        matTooltip="Activer la sélection des task-lists"
+        matTooltipPosition="left">
+      <mat-icon>checklist_rtl</mat-icon>
+    </button>
   </div>
 </nav>
 <nav *ngIf="selectionMode" class="selectionMode">
@@ -22,6 +37,6 @@
     Cliquez sur une liste pour la sélectionner
   </div>
   <div class="actions">
-    <button mat-raised-button (click)="disableSelectionMode()">Annuler</button>
+    <button class="stroked primary" (click)="disableSelectionMode()">Annuler</button>
   </div>
 </nav>

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

@@ -6,11 +6,36 @@ nav {
   display: flex;
   align-items: center;
   height: 3.2rem;
-  background-color: #666;
+  background-color: #eee;
+
+  .left {
+    position: absolute;
+    left: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .title {
+      font-size: 1.5rem;
+      display: flex;
+      align-items: center;
+      margin-right: 1rem;
+    }
+  }
+
+  .middle {
+    display: flex;
+    margin: auto;
+  }
+
+  .right {
+    position: absolute;
+    right: 1rem;
+  }
   
   &.selectionMode {
     font-weight: bold;
-    background-color: #185eb4;
+    background-color: var(--selection);
     color: white;
     display: flex;
     justify-content: center;
@@ -21,9 +46,4 @@ nav {
       margin: 0 1rem;
     }
   }
-
-  .title {
-    font-size: 1.5rem;
-    margin: 0 1rem;
-  }
 }

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;
     });
   }
@@ -34,14 +31,31 @@ export class HeaderComponent implements OnInit, OnDestroy {
   }
 
   openNewListForm(): void {
-    this._dialog.open(AddTaskListComponent);
+    this._dialog.open(
+      AddTaskListComponent, 
+      {
+        width: '20rem'
+      }
+    );
   }
 
   goTaskListsPane(): void {
     this._taskListService.removeActiveTaskList();
   }
 
+  enableSelectionMode(): void {
+    this._taskListService.enableSelectionMode();
+  }
+
   disableSelectionMode(): void {
     this._taskListService.disableSelectionMode();
   }
+
+  isNoAnyTaskList(): boolean {
+    return this._taskListService.isNoAnyTaskList();
+  }
+
+  get activeTaskList(): TaskList | undefined {
+    return this._taskListService.activeTaskList;
+  }
 }

src/app/core/entity/task.ts

@@ -1,4 +1,5 @@
 export interface Task {
+    id: string;
     title: string;
     creationDate: Date;
     description: string;

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,10 +17,11 @@ export class TaskListService {
 	
 	constructor(
 		private _router: Router,
+		private _snackBar: MatSnackBar,
 		private _storePersistenceService: StorePersistenceService
 	) {
 		this.store$.subscribe(store => {
-      this._storePersistenceService.save(store);
+			this.saveStore(store, true);
 		});
 	}
 	
@@ -29,10 +31,24 @@ export class TaskListService {
 	}
 	
 	private get store(): Store {
-    return this._storePersistenceService.load();
+		let result = this._store.value;
+
+		if (!result) {
+			result = this._storePersistenceService.load();
+		}
+		return result;
 	}
 
-  addTask(task: Task): void {
+	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) {
@@ -43,8 +59,54 @@ export class TaskListService {
 			activeTaskList.tasks = [];
 		}
 		
-    activeTaskList?.tasks.push(task);
+		const newTask = {
-    this._store.next(store);
+			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');
+		}
+
+		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");
+		}
+
+		const taskIndex = activeTaskList?.tasks.findIndex(task => task.id === taskToDelete.id);
+		if (!taskIndex && taskIndex !== 0) {
+			throw new Error('Unknown task to delete');
+		}
+
+		activeTaskList?.tasks.splice(taskIndex, 1);
+		this.saveStore(store);
+		this._snackBar.open('Tâche supprimée.', 'Fermer', {duration: 2000});
 	}
 
 	createTaskList(taskListName: string): void {
@@ -56,7 +118,25 @@ export class TaskListService {
 
 		const store = this.store;
 		store.taskLists.push(newTaskList);
-    this._store.next(store);
+		this.saveStore(store);
+	}
+
+	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();
+		}
+	}
+
+	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[] {
@@ -66,14 +146,14 @@ export class TaskListService {
 	setActive(taskList: TaskList): void {
 		const store = this.store;
 		store.activeTaskListId = taskList.id;
-    this._store.next(store);
+		this.saveStore(store);
 		this._router.navigate(['/task-lists/active']);
 	}
 
 	removeActiveTaskList(): void {
 		const store = this.store;
 		delete store.activeTaskListId;
-    this._store.next(store);
+		this.saveStore(store);
 		this._router.navigate(['/']);
 	}
 
@@ -94,10 +174,10 @@ export class TaskListService {
 					store.selectionMode = false;
 				}
 
-        this._store.next(store);
+				this.saveStore(store);
 		} else {
 			store.selectedTaskLists.push(taskList);
-      this._store.next(store);
+			this.saveStore(store);
 		}
 	}
 
@@ -113,13 +193,31 @@ export class TaskListService {
 	enableSelectionMode(): void {
 		const store = this.store;
 		store.selectionMode = true;
-    this._store.next(store);
+		this.saveStore(store);
 	}
 
 	disableSelectionMode(): void {
 		const store = this.store;
 		store.selectionMode = false;
 		store.selectedTaskLists = [];
-    this._store.next(store);
+		this.saveStore(store);
+	}
+
+	isThereMultipleTaskListsSelected(): boolean {
+		const store = this.store;
+		return (store.selectedTaskLists?.length ?? 0) > 1;
+	}
+
+	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);
 	}
 }

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

@@ -1,3 +1,4 @@
+<h2>Création d'une task-list</h2>
 <form [formGroup]="addTaskListFormGroup" (submit)="onSubmit()" ngNativeValidate>
   <p>
     <mat-form-field>
@@ -8,8 +9,8 @@
       </mat-error>
     </mat-form-field>
   </p>
-  <div>
+  <div class="dialog-actions">
-    <button mat-raised-button type="button" (click)="close()">Annuler</button>
+    <button class="stroked primary" type="button" (click)="close()">Annuler</button>
-    <button mat-raised-button type="submit">Créer une liste</button>
+    <button class="stroked primary"  type="submit">Créer une liste</button>
   </div>
 </form>

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

@@ -0,0 +1,7 @@
+form {
+    p {
+        mat-form-field {
+            width: 100%;
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+<h2>Renommage d'une task-list</h2>
+<form [formGroup]="renameTaskListFormGroup" (submit)="onSubmit()" ngNativeValidate>
+	<p>
+		<mat-form-field>
+			<mat-label>Nom de la liste</mat-label>
+			<input matInput autofocus id="task-name-input" name="task-name-input" formControlName="name" />
+			<mat-error *ngIf="form.name.invalid">
+				Veuillez saisir le nom de la task-list.
+			</mat-error>
+		</mat-form-field>
+	</p>
+	<div class="dialog-actions">
+		<button class="stroked" type="button" (click)="close()">Annuler</button>
+		<button class="stroked" type="submit">Renommer la liste</button>
+	</div>
+</form>

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

@@ -0,0 +1,7 @@
+form {
+    p {
+        mat-form-field {
+            width: 100%;
+        }
+    }
+}

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

@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TaskList } from 'src/app/core/entity/task-list';
+import { TaskListService } from 'src/app/core/service/task-list.service';
+
+@Component({
+  selector: 'app-rename-task-list',
+  templateUrl: './rename-task-list.component.html',
+  styleUrls: ['./rename-task-list.component.scss']
+})
+export class RenameTaskListComponent implements OnInit {
+  renameTaskListFormGroup: FormGroup = this._formBuilder.group({
+    name: [undefined, Validators.required]
+  });
+
+  selectedTaskList?: TaskList;
+
+  constructor(
+    private _dialogRef: MatDialogRef<RenameTaskListComponent>,
+    private _formBuilder: FormBuilder,
+    private _snackBar: MatSnackBar,
+    private _taskListService: TaskListService
+  ) {}
+
+  ngOnInit(): void {
+    this.selectedTaskList = this._taskListService.selectedTaskList;
+
+    if (this.selectedTaskList) {
+      this.renameTaskListFormGroup.controls.name.setValue(this.selectedTaskList.name);
+    } else {
+      this._snackBar.open('Impossible de renommer la task-list : aucune task-list n\'est sélectionnée.', 'Fermer', {duration: 5000});
+      this._dialogRef.close();
+    }
+  }
+
+  get form(): any {
+    return this.renameTaskListFormGroup.controls;
+  }
+
+  onSubmit(): void {
+    if (this.selectedTaskList) {
+      if (this.renameTaskListFormGroup.valid) {
+        this.selectedTaskList.name = this.renameTaskListFormGroup.controls.name.value;
+        this._taskListService.updateTaskListName(this.selectedTaskList);
+        this._snackBar.open('La task-list a été renommée.', 'Fermer', {duration: 5000});
+        this.close();
+      } else {
+        this._snackBar.open('Veuillez vérifier les informations saisies.', 'Fermer', {duration: 5000});
+      }
+    }
+  }
+
+  close(): void {
+    this._dialogRef.close();
+  }
+
+}

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

@@ -1,18 +1,35 @@
 <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)" (contextmenu)="$event.preventDefault(); onRightClick(taskList)">
+    <div class="task-list shadowed"
+        (click)="selectActiveTaskList(taskList)"
+        (contextmenu)="$event.preventDefault(); onRightClick(taskList)"
+        matRipple>
       <ng-container [ngPlural]="taskList.tasks?.length ?? 0">
-        <ng-template ngPluralCase=">1">
+        <ng-template ngPluralCase="0">
-          {{taskList.tasks?.length}} tâches
+          Aucune tâche
         </ng-template>
-        <ng-template ngPluralCase="other">
+        <ng-template ngPluralCase="1">
           {{taskList.tasks?.length}} tâche
         </ng-template>
+        <ng-template ngPluralCase="other">
+          {{taskList.tasks?.length}} tâches
+        </ng-template>
       </ng-container>
+
+      <mat-icon *ngIf="isSelectionModeEnabled() && isSelected(taskList)" class="selection-icon">done</mat-icon>
     </div>
     {{taskList.name}}
-    <ng-container *ngIf="isSelectionModeEnabled() && isSelected(taskList)">
-      SELECTED
-    </ng-container>
   </div>
 </div>
+<div class="selection-actions" *ngIf="isSelectionModeEnabled()">
+  <button class="stroked"
+      [disabled]="isThereMultipleTaskListsSelected()"
+      (click)="renameSelectedTaskList()">
+    Renommer
+  </button>
+  <button class="stroked 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;
@@ -21,6 +28,28 @@
       border-radius: .5rem;
       background-color: aliceblue;
       margin-bottom: .5rem;
+      position: relative;
+
+      .selection-icon {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        font-size: 3rem;
+        width: 3rem;
+        height: 3rem;
+      }
     }
   }
 }
+
+.selection-actions {
+  padding: .5rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+  border-top: 1px solid #444;
+}

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

@@ -1,9 +1,11 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+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';
+import { RenameTaskListComponent } from './rename-task-list/rename-task-list.component';
 
 @Component({
   selector: 'app-task-lists',
@@ -13,25 +15,23 @@ import { AddTaskListComponent } from './add-task-list/add-task-list.component';
 export class TaskListsComponent implements OnInit, OnDestroy {
   taskLists: TaskList[] = [];
   private _storeSubscription?: Subscription;
+  private _subscriptions: Subscription[] = [];
 
   constructor(
     private _dialog: MatDialog,
-    private _taskListService: TaskListService,
+    private _taskListService: TaskListService
   ) {}
 
   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());
-  }
-
-  openNewListForm(): void {
-    this._dialog.open(AddTaskListComponent);
   }
 
   selectActiveTaskList(taskList: TaskList): void {
@@ -53,4 +53,41 @@ export class TaskListsComponent implements OnInit, OnDestroy {
   isSelectionModeEnabled(): boolean {
     return this._taskListService.isSelectionModeEnabled();
   }
+
+  isThereMultipleTaskListsSelected(): boolean {
+    return this._taskListService.isThereMultipleTaskListsSelected();
+  }
+
+  renameSelectedTaskList(): void {
+    this._dialog.open(
+      RenameTaskListComponent,
+      {
+        width: '25rem'
+      }
+    );
+  }
+
+  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);
+  }
 }

src/styles.scss

@@ -1,23 +1,50 @@
 /* You can add global styles to this file, and also import other style files */
+:root {
+  --primary: #fff;
+  --primary-text: #444444;
+  --primary-border: #ccc;
+  --primary-hover: #eee;
+  --secondary: #eee;
+  --secondary-hover: #c9c9c9;
+  --secondary-border: #bbb;
+
+  --disabled: #eee;
+  --disabled-text: #aaa;
+
+  --transparent: rgba(0,0,0, 0);
+
+  --shadow-1: rgba(0, 0, 0, 0.2);
+  --shadow-2: rgba(0, 0, 0, 0.14);
+  --shadow-3: rgba(0, 0, 0, 0.12);
+  --shadow-hover: #777;
+
+  --alert: #eb1d3f;
+  --alert-text: #fff;
+  --alert-hover: #c20d2b;
+  --alert-border: #b91b35;
+
+  --selection: #185eb4;
+}
+
+html {
+  height: 100%;
+}
 
-html, body { height: 100%; }
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
   padding-top: 3.2rem;
-  background-color: #555;
+  background-color: var(--primary);
 }
 
-
-
-
-
 .shadowed {
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 1px -1px var(--shadow-1),
+              0px 1px 1px 0px var(--shadow-2),
+              0px 1px 3px 0px var(--shadow-3);
   transition: box-shadow .2s ease-out;
 
   &:hover {
-    box-shadow: 0 .2em .5em #777;
+    box-shadow: 0 .2em .5em var(--shadow-hover);
   }
 }
 
@@ -25,3 +52,88 @@ a.no-style {
   color: inherit;
   text-decoration: none;
 }
+
+button {
+  border-style: solid;
+  border-width: .1rem;
+  border-color: var(--transparent);
+  border-radius: .2rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: .5rem;
+  background-color: var(--transparent);
+  color: var(--primary-text);
+
+  transition: background-color .2s ease-out,
+              border-color .2s ease-out;
+
+  &:hover {
+      background-color: var(--primary-hover);
+      border-color: var(--primary-border);
+  }
+
+  &:disabled {
+    background-color: var(--disabled);
+    color: var(--disabled-text);
+    cursor: not-allowed;
+  }
+
+  &.icon {
+      width: 2rem;
+      height: 2rem;
+      min-width: 1rem;
+      min-height: 1rem;
+      padding: 0;
+  }
+
+  &.raised {
+    background-color: var(--primary); //#4a4a4a;
+    box-shadow: 0px 2px 1px -1px var(--shadow-1),
+              0px 1px 1px 0px var(--shadow-2),
+              0px 1px 3px 0px var(--shadow-3);
+  }
+
+  &.stroked {
+    border-color: var(--primary-border);
+
+    &.primary {
+      background-color: var(--primary);
+
+      &:hover {
+        background-color: var(--primary-hover);
+      }
+    }
+
+    &.secondary {
+      background-color: var(--secondary);
+
+      &:hover {
+        background-color: var(--secondary-hover)
+      }
+    }
+  }
+
+  &.alert {
+    background-color: var(--alert);
+    color: var(--alert-text);
+
+    &:hover {
+      background-color: var(--alert-hover);
+      border-color: var(--alert-border);
+    }
+  }
+}
+
+.dialog-actions {
+  margin-top: 1rem; 
+  display: flex;
+  justify-content: space-between;
+
+  > * {
+      flex: 1 1 45%;
+      max-width: 45%;
+  }
+}