Change store storage system.

src/app/active-list-tasks/active-list-tasks.component.html

@@ -1,7 +1,10 @@
 <div class="container">
-    <app-task-display class="task" *ngFor="let i of [0,1,2,3,4,5,6,7,8,9]" class="task"></app-task-display>
+    <app-task-display *ngFor="let task of activeTaskList?.tasks"
+        [task]="task" class="task"></app-task-display>
     <div class="task new">
         <mat-icon>add</mat-icon>
-        <input />
+        <input placeholder="Nouvelle tâche..."
+                (keydown)="onNewTaskKeyDown($event)"
+                [formControl]="newTaskControl"/>
     </div>
 </div>

src/app/active-list-tasks/active-list-tasks.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { Task } from '../core/entity/task';
 import { TaskList } from '../core/entity/task-list';
 import { TaskListService } from '../core/service/task-list.service';
 
@@ -11,8 +13,9 @@ import { TaskListService } from '../core/service/task-list.service';
   styleUrls: ['./active-list-tasks.component.scss']
 })
 export class ActiveListTasksComponent implements OnInit, OnDestroy {
-  private _activeTaskList?: TaskList;
   private _storeSubscription?: Subscription;
+  activeTaskList?: TaskList;
+  newTaskControl: FormControl = new FormControl(undefined, Validators.required);
 
   constructor(
     private _router: Router,
@@ -23,8 +26,8 @@ export class ActiveListTasksComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this._storeSubscription = this._taskListService.store$.subscribe(store => {
       if (store.activeTaskListId) {
-        this._activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
-        if (!this._activeTaskList) {
+        this.activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+        if (!this.activeTaskList) {
           this._backToTaskListPane();
         }
       }
@@ -36,7 +39,21 @@ export class ActiveListTasksComponent implements OnInit, OnDestroy {
   }
 
   private _backToTaskListPane(): void {
-    this._snackBar.open('La task-list active n\'existe pas dans le store.', 'Fermer', {duration: 5000});
+    console.error('La task-list active n\'existe pas dans le store.', 'Fermer', {duration: 5000});
     this._router.navigate(['/']);
   }
+
+  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);
+      }
+    }
+  }
 }

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]="taskNameControl" />
+            <input type="text" [formControl]="titleControl" />
         </div>
         <button mat-button type="button" class="expand">
             <mat-icon>expand_more</mat-icon>

src/app/active-list-tasks/task-display/task-display.component.scss

@@ -35,13 +35,11 @@
                 padding: 0 .8rem;
                 margin: 0 .8rem;
                 background-color: #444;
-
                 border-style: solid;
                 border-width: .1rem;
                 border-color: rgba(0,0,0, 0);
                 border-radius: .2rem;
 
-
                 width: 100%;
 
                 transition: background-color .2s ease-out,

src/app/active-list-tasks/task-display/task-display.component.ts

@@ -1,16 +1,23 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { AfterViewInit, Component, Input, OnInit } 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';
 
 @Component({
   selector: 'app-task-display',
   templateUrl: './task-display.component.html',
   styleUrls: ['./task-display.component.scss']
 })
-export class TaskDisplayComponent implements OnInit {
-  taskNameControl = new FormControl(undefined);
+export class TaskDisplayComponent implements AfterViewInit {
+  @Input() task?: Task;
+  titleControl = new FormControl(this.task?.title);
 
-  constructor() { }
+  constructor(
+    private _taskListService: TaskListService
+  ) {}
+  
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
+    this.titleControl.setValue(this?.task?.title);
   }
 }