Implementation of task-list renaming.

src/app/app.module.ts

@@ -23,7 +23,8 @@ 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 {MatRippleModule} from '@angular/material/core';
+import { RenameTaskListComponent } from './task-lists/rename-task-list/rename-task-list.component'; 
 
 @NgModule({
   declarations: [
@@ -35,7 +36,8 @@ import {MatRippleModule} from '@angular/material/core';
     AddTaskListComponent,
     HeaderComponent,
     ActiveListTasksComponent,
-    TaskDisplayComponent
+    TaskDisplayComponent,
+    RenameTaskListComponent
   ],
   imports: [
     BrowserModule,

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,16 @@ 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();
+    }
+  }
+
   getAll(): TaskList[] {
     return this.store.taskLists ?? [];
   }
@@ -175,4 +190,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/rename-task-list/rename-task-list.component.html

@@ -0,0 +1,15 @@
+<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>
+		<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.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

@@ -22,6 +22,10 @@
   </div>
 </div>
 <div class="selection-actions" *ngIf="isSelectionModeEnabled()">
-  <button class="raised">Renommer</button>
+  <button class="raised"
+      [disabled]="isThereMultipleTaskListsSelected()"
+      (click)="renameSelectedTaskList()">
+    Renommer
+  </button>
   <button class="raised alert">Supprimer</button>
 </div>

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

@@ -1,9 +1,10 @@
-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 { 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',
@@ -16,7 +17,7 @@ export class TaskListsComponent implements OnInit, OnDestroy {
 
   constructor(
     private _dialog: MatDialog,
-    private _taskListService: TaskListService,
+    private _taskListService: TaskListService
   ) {}
 
   ngOnInit(): void {
@@ -53,4 +54,12 @@ export class TaskListsComponent implements OnInit, OnDestroy {
   isSelectionModeEnabled(): boolean {
     return this._taskListService.isSelectionModeEnabled();
   }
+
+  isThereMultipleTaskListsSelected(): boolean {
+    return this._taskListService.isThereMultipleTaskListsSelected();
+  }
+
+  renameSelectedTaskList(): void {
+    this._dialog.open(RenameTaskListComponent);
+  }
 }

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;