Fix tasks persistence and display.

src/app/add-task/add-task.component.html

@@ -1,3 +1,6 @@
 <div>
-    <mat-icon>add</mat-icon>
+    <input placeholder="Nom de la tâche"/>
-</div>
+    <textarea placeholder="Description">
+
+    </textarea>
+</div>

src/app/app.module.ts

@@ -7,19 +7,23 @@ import { AppComponent } from './app.component';
 import { MainPageComponent } from './main-page/main-page.component';
 import { AddTaskComponent } from './add-task/add-task.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {MatIconModule} from '@angular/material/icon'; 
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import { DisplayTaskComponent } from './display-task/display-task.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     MainPageComponent,
-    AddTaskComponent
+    AddTaskComponent,
+    DisplayTaskComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MatIconModule
+    MatIconModule,
+    MatInputModule
   ],
   providers: [
     CookieService,

src/app/core/service/task.service.ts

@@ -7,7 +7,7 @@ import { TaskPersistenceService } from './task-persistence.service';
   providedIn: 'root'
 })
 export class TaskService {
-  _tasks: BehaviorSubject<Task[]> = new BehaviorSubject<Task[]>([]);
+  private _tasks: BehaviorSubject<Task[]> = new BehaviorSubject<Task[]>([]);
 
   constructor(
     private _taskPersistenceService: TaskPersistenceService
@@ -24,9 +24,15 @@ export class TaskService {
     const tasks = this._tasks.value;
     tasks.push(task);
     this._tasks.next(tasks);
+    this._saveTasks();
   }
 
-  _saveTasks(): void {
+  private _saveTasks(): void {
     this._taskPersistenceService.save(this._tasks.value);
   }
+
+  refresh() {
+    const tasks = this._taskPersistenceService.getAll();
+    this._tasks.next(tasks);
+  }
 }

src/app/display-task/display-task.component.html

@@ -0,0 +1,9 @@
+<div class="component" [title]="getTitle()">
+  <h1 *ngIf="task.title?.length; else titlePlaceholder">{{ task.title }}</h1>
+  <ng-template #titlePlaceholder>
+    <div class="placeholder">
+      Saisissez le titre de la tâche.
+    </div>
+  </ng-template>
+  <p>{{ task.description }}</p>
+</div>

src/app/display-task/display-task.component.scss

@@ -0,0 +1,11 @@
+.component {
+  min-height: 50px;
+  width: 90%;
+  margin: auto;
+
+}
+
+.placeholder {
+  font-style: italic;
+  color: #AAAAAA;
+}

src/app/display-task/display-task.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DisplayTaskComponent } from './display-task.component';
+
+describe('DisplayTaskComponent', () => {
+  let component: DisplayTaskComponent;
+  let fixture: ComponentFixture<DisplayTaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DisplayTaskComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DisplayTaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Task } from '../core/entity/task';
+
+@Component({
+  selector: 'app-display-task',
+  templateUrl: './display-task.component.html',
+  styleUrls: ['./display-task.component.scss']
+})
+export class DisplayTaskComponent {
+  @Input() task: Task = {} as Task;
+
+  getTitle(): string {
+    return `Créé le ${this.task.creationDate?.toLocaleString()}`;
+  }
+}

src/app/main-page/main-page.component.html

@@ -1,12 +1,8 @@
 <div class="component">
     <h1>Todo List</h1>
-    <div *ngFor="let task of tasks" [title]="task.creationDate">
+    <app-display-task *ngFor="let task of tasks" [task]="task"></app-display-task>
-        <h1>{{ task.title }}</h1>
+    <div id="add-task-btn" *ngIf="!isAddingATask" (click)="createTask()">
-        <p>{{ task.description }}</p>
-    </div>
-    <div id="add-task-btn" *ngIf="!isAddingATask" (click)="startTaskAddition()">
         <mat-icon>add</mat-icon>
         <span>Ajouter une nouvelle tâche...</span>
     </div>
-    <app-add-task *ngIf="isAddingATask"></app-add-task>
+</div>
-</div>

src/app/main-page/main-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { Task } from '../core/entity/task';
 import { TaskService } from '../core/service/task.service';
 
@@ -7,7 +7,7 @@ import { TaskService } from '../core/service/task.service';
   templateUrl: './main-page.component.html',
   styleUrls: ['./main-page.component.scss']
 })
-export class MainPageComponent implements OnInit {
+export class MainPageComponent implements OnInit, AfterViewInit {
   tasks: Task[] = [];
   isAddingATask = false;
 
@@ -19,7 +19,15 @@ export class MainPageComponent implements OnInit {
     this._taskService.tasks.subscribe(tasks => this.tasks = tasks);
   }
 
-  startTaskAddition(): void {
+  ngAfterViewInit(): void {
-    this.isAddingATask = true;
+    this._taskService.refresh();
+  }
+
+  createTask(): void {
+    const newTask = {
+      creationDate: new Date()
+    } as Task;
+
+    this._taskService.add(newTask);
   }
 }