From a5f4c18eb51bccc83b415fa6ae662d5a3e621fc8 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sat, 5 Mar 2022 12:11:41 +0100
Subject: [PATCH] Add task deletion.

---
 .../active-list-tasks.component.ts            |  8 +-----
 .../task-display/task-display.component.html  | 22 ++++++++++-----
 .../task-display/task-display.component.scss  | 16 ++++++++---
 .../task-display/task-display.component.ts    |  9 +++++-
 src/app/core/entity/task.ts                   |  1 +
 src/app/core/service/task-list.service.ts     | 28 +++++++++++++++++--
 6 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/src/app/active-list-tasks/active-list-tasks.component.ts b/src/app/active-list-tasks/active-list-tasks.component.ts
index e6b260b..267c74b 100644
--- a/src/app/active-list-tasks/active-list-tasks.component.ts
+++ b/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 = {
-          title: this.newTaskControl.value as string,
-          creationDate: new Date(),
-          description: undefined as unknown as string
-        } as Task;
-
-        this._taskListService.addTask(newTask);
+        this._taskListService.addTask(this.newTaskControl.value as string);
         this.newTaskControl.reset();
       }
     }
diff --git a/src/app/active-list-tasks/task-display/task-display.component.html b/src/app/active-list-tasks/task-display/task-display.component.html
index 8b5a39f..f4bc947 100644
--- a/src/app/active-list-tasks/task-display/task-display.component.html
+++ b/src/app/active-list-tasks/task-display/task-display.component.html
@@ -3,7 +3,7 @@
         <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 type="button" class="expand icon" (click)="expand()" matRipple>
             <mat-icon *ngIf="!isExpanded">expand_more</mat-icon>
@@ -19,12 +19,20 @@
                 <textarea id="description"></textarea>
             </div>
             <div class="actions">
-                <button class="icon raised" matRipple matTooltip="Définir une alerte dans X minutes">
-                    <mat-icon>update</mat-icon>
-                </button>
-                <button class="icon raised alert" matRipple>
-                    <mat-icon>delete</mat-icon>
-                </button>
+                <div class="row">
+                    <button class="icon raised" matRipple matTooltip="Définir une alerte dans X minutes">
+                        <mat-icon>update</mat-icon>
+                    </button>
+                    <button class="icon raised alert" matRipple>
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </div>
+                <div class="row">
+                    <button class="raised alert" [disabled]="!task" (click)="delete()">
+                        <mat-icon>delete</mat-icon>
+                        Supprimer
+                    </button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/app/active-list-tasks/task-display/task-display.component.scss b/src/app/active-list-tasks/task-display/task-display.component.scss
index aa39270..e0e234a 100644
--- a/src/app/active-list-tasks/task-display/task-display.component.scss
+++ b/src/app/active-list-tasks/task-display/task-display.component.scss
@@ -91,13 +91,21 @@
     
             .actions {
                 display: flex;
+                flex-direction: column;
                 flex-grow: 1;
                 height: 100%;
-                flex-wrap: wrap;
+                
                 max-width: 20%;
-                justify-content: space-around;
-                align-items: flex-start;
-                padding: 1rem;
+                
+
+                .row {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-items: flex-start;
+                    padding: 1rem;
+                }
             }
         }
     }
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 4f67e20..d857eff 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,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Task } from 'src/app/core/entity/task';
 import { TaskListService } from 'src/app/core/service/task-list.service';
@@ -13,6 +13,7 @@ export class TaskDisplayComponent implements AfterViewInit {
   @Input() task?: Task;
   titleControl = new FormControl(this.task?.title);
   isExpanded = false;
+  @ViewChild('titleInput', {static: true}) titleInput?: ElementRef<HTMLInputElement>;
 
   constructor(
     private _taskListService: TaskListService
@@ -34,4 +35,10 @@ export class TaskDisplayComponent implements AfterViewInit {
     }
     return result;
   }
+
+  delete(): void {
+    if (this.task) {
+      this._taskListService.delete(this.task);
+    }
+  }
 }
diff --git a/src/app/core/entity/task.ts b/src/app/core/entity/task.ts
index ec412e7..cc431e0 100644
--- a/src/app/core/entity/task.ts
+++ b/src/app/core/entity/task.ts
@@ -1,4 +1,5 @@
 export interface Task {
+    id: string;
     title: string;
     creationDate: Date;
     description: string;
diff --git a/src/app/core/service/task-list.service.ts b/src/app/core/service/task-list.service.ts
index 4dfa52e..629272c 100644
--- a/src/app/core/service/task-list.service.ts
+++ b/src/app/core/service/task-list.service.ts
@@ -32,7 +32,7 @@ export class TaskListService {
     return this._storePersistenceService.load();
   }
 
-  addTask(task: Task): void {
+  addTask(taskTitle: string): void {
     const store = this.store;
     const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
     if (!activeTaskList) {
@@ -43,7 +43,31 @@ export class TaskListService {
       activeTaskList.tasks = [];
     }
 
-    activeTaskList?.tasks.push(task);
+    const newTask = {
+      id: uuidv4(),
+      title: taskTitle,
+      creationDate: new Date(),
+      description: undefined as unknown as string
+    } as Task;
+
+
+    activeTaskList?.tasks.push(newTask);
+    this._store.next(store);
+  }
+
+  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._store.next(store);
   }