Add task deletion.

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,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">
+                <div class="row">
-                    <mat-icon>update</mat-icon>
+                    <button class="icon raised" matRipple matTooltip="Définir une alerte dans X minutes">
-                </button>
+                        <mat-icon>update</mat-icon>
-                <button class="icon raised alert" matRipple>
+                    </button>
-                    <mat-icon>delete</mat-icon>
+                    <button class="icon raised alert" matRipple>
-                </button>
+                        <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>

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;
+                }
             }
         }
     }

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);
+    }
+  }
 }

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

@@ -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);
   }