From 7283e4f1aadceb6684a6fcf0afa58ca7d23a9fcf Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sun, 6 Mar 2022 12:57:31 +0100
Subject: [PATCH] Implementation of task-list renaming.

---
 src/app/app.module.ts                         |  6 +-
 src/app/core/service/task-list.service.ts     | 26 +++++++-
 .../rename-task-list.component.html           | 15 +++++
 .../rename-task-list.component.scss           |  0
 .../rename-task-list.component.ts             | 59 +++++++++++++++++++
 src/app/task-lists/task-lists.component.html  |  6 +-
 src/app/task-lists/task-lists.component.ts    | 13 +++-
 src/styles.scss                               | 10 +++-
 8 files changed, 128 insertions(+), 7 deletions(-)
 create mode 100644 src/app/task-lists/rename-task-list/rename-task-list.component.html
 create mode 100644 src/app/task-lists/rename-task-list/rename-task-list.component.scss
 create mode 100644 src/app/task-lists/rename-task-list/rename-task-list.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 29bbadd..ebbf788 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/core/service/task-list.service.ts b/src/app/core/service/task-list.service.ts
index 9f433b5..654a794 100644
--- a/src/app/core/service/task-list.service.ts
+++ b/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];
+  }
 }
diff --git a/src/app/task-lists/rename-task-list/rename-task-list.component.html b/src/app/task-lists/rename-task-list/rename-task-list.component.html
new file mode 100644
index 0000000..aee5bd2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/app/task-lists/rename-task-list/rename-task-list.component.scss b/src/app/task-lists/rename-task-list/rename-task-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/task-lists/rename-task-list/rename-task-list.component.ts b/src/app/task-lists/rename-task-list/rename-task-list.component.ts
new file mode 100644
index 0000000..06ce6a6
--- /dev/null
+++ b/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();
+  }
+
+}
diff --git a/src/app/task-lists/task-lists.component.html b/src/app/task-lists/task-lists.component.html
index cbaed9c..e5a21f3 100644
--- a/src/app/task-lists/task-lists.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/task-lists/task-lists.component.ts b/src/app/task-lists/task-lists.component.ts
index 2dcf224..8a40ce3 100644
--- a/src/app/task-lists/task-lists.component.ts
+++ b/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);
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 255a598..198129d 100644
--- a/src/styles.scss
+++ b/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;