Implementation of task-lists deletion with dialog.

src/app/app.module.ts

@@ -24,6 +24,8 @@ 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: [
@@ -35,7 +37,9 @@ import {MatRippleModule} from '@angular/material/core';
     AddTaskListComponent,
     HeaderComponent,
     ActiveListTasksComponent,
-    TaskDisplayComponent
+    TaskDisplayComponent,
+    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/components/header/header.component.html

@@ -16,9 +16,6 @@
       matTooltip="Retourner aux task-lists">
     <mat-icon>chevron_left</mat-icon>
   </button>
-  <!-- <div *ngIf="activeTaskList">
-    Liste active : {{activeTaskList.name}}
-  </div> -->
 </nav>
 <nav *ngIf="selectionMode" class="selectionMode">
   <div></div>

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

@@ -34,7 +34,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
   }
 
   openNewListForm(): void {
-    this._dialog.open(AddTaskListComponent);
+    this._dialog.open(
+      AddTaskListComponent, 
+      {
+        width: '20rem'
+      }
+    );
   }
 
   goTaskListsPane(): void {

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

@@ -29,7 +29,12 @@ export class TaskListService {
     }
     
     private get store(): Store {
-      return this._storePersistenceService.load();
+      let result = this._store.value;
+
+      if (!result) {
+        result = this._storePersistenceService.load();
+      }
+      return result;
     }
 
     private saveStore(store: Store, silent: boolean = false): void {
@@ -112,6 +117,24 @@ export class TaskListService {
     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[] {
     return this.store.taskLists ?? [];
   }
@@ -175,4 +198,13 @@ export class TaskListService {
     store.selectedTaskLists = [];
     this.saveStore(store);
   }
+
+  isThereMultipleTaskListsSelected(): boolean {
+    const store = this.store;
+    return (store.selectedTaskLists?.length ?? 0) > 1;
+  }
+
+  get selectedTaskList(): TaskList {
+    return this._store.value?.selectedTaskLists[0];
+  }
 }

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="actions">
-    <button mat-raised-button type="button" (click)="close()">Annuler</button>
+    <button class="raised" type="button" (click)="close()">Annuler</button>
-    <button mat-raised-button type="submit">Créer une liste</button>
+    <button class="raised"  type="submit">Créer une liste</button>
   </div>
 </form>

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

@@ -0,0 +1,12 @@
+form {
+    p {
+        mat-form-field {
+            width: 100%;
+        }
+    }
+    .actions {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}

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="actions">
+		<button class="raised" type="button" (click)="close()">Annuler</button>
+		<button class="raised" type="submit">Renommer la liste</button>
+	</div>
+</form>

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

@@ -0,0 +1,12 @@
+form {
+    p {
+        mat-form-field {
+            width: 100%;
+        }
+    }
+    .actions {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}

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,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)"
@@ -19,8 +22,14 @@
       <mat-icon *ngIf="isSelectionModeEnabled() && isSelected(taskList)" class="selection-icon">done</mat-icon>
     </div>
     {{taskList.name}}
-    <ng-container >
-      SELECTED
-    </ng-container>
   </div>
 </div>
+<div class="selection-actions" *ngIf="isSelectionModeEnabled()">
+  <button class="raised"
+      [disabled]="isThereMultipleTaskListsSelected()"
+      (click)="renameSelectedTaskList()">
+    Renommer
+  </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;
@@ -34,3 +41,15 @@
     }
   }
 }
+
+.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: '20rem'
+      }
+    );
+  }
+
+  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,6 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
+html {
+  height: 100%;
+}
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
@@ -46,6 +48,12 @@ button {
       border-color: rgb(53, 53, 53);
   }
 
+  &:disabled {
+    background-color: #aaa;
+    color: #ccc;
+    cursor: not-allowed;
+  }
+
   &.icon {
       width: 2rem;
       height: 2rem;