Making up task list layout.

functionalities.md

@@ -11,4 +11,4 @@
 
 - J'aimerai "tagger" une tâche comme "asynchrone/bloquante" (où je dois attendre la fin, genre un build jenkins) et donc être notifié toutes les 5mins d'aller vérifier si la tâche est terminée. 
 - Quand je termine une sous tâche, je veux qu'elle soit archivée pour pouvoir la consulter à postériori
-- J'aimerai définir un e API sur laquelle je pourrais sauverader mes tâches, à la manière de git
+- J'aimerai définir un e API sur laquelle je pourrais sauverader mes tâches, à la manière de git

package-lock.json

@@ -18,6 +18,7 @@
         "@angular/platform-browser": "~12.2.0",
         "@angular/platform-browser-dynamic": "~12.2.0",
         "@angular/router": "~12.2.0",
+        "@types/uuid": "^8.3.4",
         "ngx-cookie-service": "^12.0.3",
         "rxjs": "~6.6.0",
         "tslib": "^2.3.0",
@@ -30,7 +31,6 @@
         "@angular/compiler-cli": "~12.2.0",
         "@types/jasmine": "~3.8.0",
         "@types/node": "^12.11.1",
-        "@types/uuid": "^8.3.4",
         "jasmine-core": "~3.8.0",
         "karma": "~6.3.0",
         "karma-chrome-launcher": "~3.1.0",
@@ -2578,8 +2578,7 @@
     "node_modules/@types/uuid": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
-      "dev": true
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
     },
     "node_modules/@types/webpack-sources": {
       "version": "0.1.9",
@@ -17926,8 +17925,7 @@
     "@types/uuid": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
-      "dev": true
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
     },
     "@types/webpack-sources": {
       "version": "0.1.9",

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
+    "@types/uuid": "^8.3.4",
     "ngx-cookie-service": "^12.0.3",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
@@ -32,7 +33,6 @@
     "@angular/compiler-cli": "~12.2.0",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",
-    "@types/uuid": "^8.3.4",
     "jasmine-core": "~3.8.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",

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

@@ -1 +0,0 @@
-<p>active-list-tasks works!</p>

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

@@ -1,42 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { TaskList } from '../core/entity/task-list';
-import { TaskListService } from '../core/service/task-list.service';
-
-@Component({
-  selector: 'app-active-list-tasks',
-  templateUrl: './active-list-tasks.component.html',
-  styleUrls: ['./active-list-tasks.component.scss']
-})
-export class ActiveListTasksComponent implements OnInit, OnDestroy {
-  private _activeTaskList?: TaskList;
-  private _storeSubscription?: Subscription;
-
-  constructor(
-    private _router: Router,
-    private _taskListService: TaskListService,
-    private _snackBar: MatSnackBar
-  ) {}
-
-  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._backToTaskListPane();
-        }
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this._storeSubscription?.unsubscribe();
-  }
-
-  private _backToTaskListPane(): void {
-    this._snackBar.open('La task-list active n\'existe pas dans le store.', 'Fermer', {duration: 5000});
-    this._router.navigate(['/']);
-  }
-}

src/app/app-routing.module.ts

@@ -1,15 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.component';
 import { MainPageComponent } from './main-page/main-page.component';
 
 const routes: Routes = [
-  { path: '', component: MainPageComponent},
-  { path: 'task-lists/active', component: ActiveListTasksComponent }
+  { path: '', component: MainPageComponent}
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.html

@@ -1,2 +1 @@
-<app-header></app-header>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -1,23 +1,22 @@
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { CookieService } from 'ngx-cookie-service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 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 {MatInputModule} from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatDialogModule } from '@angular/material/dialog'; 
+import { MatButtonModule } from '@angular/material/button'; 
+import { MatSnackBarModule } from '@angular/material/snack-bar'; 
 import { DisplayTaskComponent } from './display-task/display-task.component';
 import { TaskListsComponent } from './task-lists/task-lists.component';
-import { AddTaskListComponent } from './task-lists/add-task-list/add-task-list.component';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatButtonModule} from '@angular/material/button';
-import {ReactiveFormsModule} from '@angular/forms';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-import { HeaderComponent } from './core/components/header/header.component';
-import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.component';
+import { AddNewListComponent } from './task-lists/add-new-list/add-new-list.component';
+import { initTaskListService, TaskListService } from './core/service/task-list.service';
 
 @NgModule({
   declarations: [
@@ -26,23 +25,28 @@ import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.
     AddTaskComponent,
     DisplayTaskComponent,
     TaskListsComponent,
-    AddTaskListComponent,
-    HeaderComponent,
-    ActiveListTasksComponent
+    AddNewListComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
     MatIconModule,
     MatInputModule,
     MatDialogModule,
     MatButtonModule,
-    ReactiveFormsModule,
     MatSnackBarModule
   ],
   providers: [
     CookieService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initTaskListService,
+      deps: [TaskListService],
+      multi: true
+    }
   ],
   bootstrap: [AppComponent]
 })

src/app/core/components/header/header.component.html

@@ -1,18 +0,0 @@
-<nav>
-  <span class="title" routerLink="/">
-    To Do
-  </span>
-  <button mat-raised-button
-      *ngIf="!activeTaskList"
-      (click)="openNewListForm()">
-    Nouvelle liste
-  </button>
-  <button mat-raised-button
-      *ngIf="activeTaskList"
-      (click)="goTaskListsPane()">
-    <mat-icon>chevron_left</mat-icon>
-  </button>
-  <div *ngIf="activeTaskList">
-    Liste active : {{activeTaskList.name}}
-  </div>
-</nav>

src/app/core/components/header/header.component.scss

@@ -1,14 +0,0 @@
-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  height: 4rem;
-
-  .title {
-    font-size: 1.5rem;
-    margin: 0 1rem;
-  }
-}

src/app/core/components/header/header.component.ts

@@ -1,41 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { AddTaskListComponent } from 'src/app/task-lists/add-task-list/add-task-list.component';
-import { TaskList } from '../../entity/task-list';
-import { TaskListService } from '../../service/task-list.service';
-
-@Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
-})
-export class HeaderComponent implements OnInit, OnDestroy {
-  private _storeSubscription?: Subscription;
-  activeTaskList?: TaskList;
-
-  constructor(
-    private _dialog: MatDialog,
-    private _router: Router,
-    private _taskListService: TaskListService
-  ) {}
-
-  ngOnInit(): void {
-    this._storeSubscription = this._taskListService.store$.subscribe(store => {
-      this.activeTaskList = store.taskLists.find(taskList => store.activeTaskListId === taskList.id);
-    });
-  }
-
-  ngOnDestroy(): void {
-    this._storeSubscription?.unsubscribe();
-  }
-
-  openNewListForm(): void {
-    this._dialog.open(AddTaskListComponent);
-  }
-
-  goTaskListsPane(): void {
-    this._taskListService.removeActiveTaskList();
-  }
-}

src/app/core/entity/store.ts

@@ -1,8 +0,0 @@
-import { TaskList } from "./task-list";
-
-export interface Store {
-  activeTaskListId: string | undefined;
-  taskLists: TaskList[];
-  selectedTaskLists: TaskList[];
-  selectionMode: boolean;
-}

src/app/core/entity/task-list.ts

@@ -1,7 +0,0 @@
-import { Task } from "./task";
-
-export interface TaskList {
-  id: string;
-  name: string;
-  tasks: Task[];
-}

src/app/core/entity/task.ts

@@ -2,4 +2,6 @@ export interface Task {
     title: string;
     creationDate: Date;
     description: string;
+    subtasks: Task[];
+    isAsync: boolean;
 }

src/app/core/entity/taskList.ts

@@ -0,0 +1,9 @@
+import { Task } from "./task";
+
+export interface TaskList {
+    id: string;
+    name: string;
+    tasks: Task[],
+    achievedTasks: Task[];
+    abandonnedTasks: Task[];
+}

src/app/core/service/store-persistence.service.ts

@@ -1,38 +0,0 @@
-import { Injectable } from "@angular/core";
-import { CookieService } from "ngx-cookie-service";
-import { Store } from "../entity/store";
-
-const COOKIE_NAME = 'todo-store';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class StorePersistenceService {
-  constructor(
-    private _cookieService: CookieService
-  ) {}
-
-  save(store: Store): void {
-    const serializedStore = JSON.stringify(store);
-    this._cookieService.set(COOKIE_NAME, serializedStore);
-  }
-
-  load(): Store {
-    const serializedStore = this._cookieService.get(COOKIE_NAME);
-
-    if (serializedStore?.length) {
-      try {
-        return JSON.parse(serializedStore);
-      } catch (jsonParseError) {
-        throw new Error(`JsonSerializationException: Invalid format for store in cookie "${COOKIE_NAME}".`);
-      }
-    } else {
-      return {
-        activeTaskListId: undefined,
-        taskLists: [],
-        selectedTaskLists: [],
-        selectionMode: false
-      } as Store;
-    }
-  }
-}

src/app/core/service/task-list.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TaskListService } from './task-list.service';
+
+describe('TaskListService', () => {
+  let service: TaskListService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TaskListService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -1,124 +1,35 @@
-import { Injectable } from "@angular/core";
-import { BehaviorSubject, Observable } from "rxjs";
-import { Task } from "../entity/task";
-import { TaskList } from "../entity/task-list";
-import { StorePersistenceService } from "./store-persistence.service";
-import { v4 as uuidv4 } from 'uuid';
-import { filter } from 'rxjs/operators';
-import { Store } from "../entity/store";
-import { Router } from "@angular/router";
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { TaskList } from '../entity/taskList';
+import { TaskPersistenceService } from './task-persistence.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TaskListService {
-  private _store: BehaviorSubject<Store> = new BehaviorSubject<Store>(undefined as unknown as Store);
+  private _taskListsSubject: BehaviorSubject<TaskList[]> = new BehaviorSubject<TaskList[]>([]);
 
   constructor(
-    private _router: Router,
-    private _storePersistenceService: StorePersistenceService
-  ) {
-    this.store$.subscribe(store => {
-      this._storePersistenceService.save(store);
-    });
+    private _taskPersistenceService: TaskPersistenceService
+  ) {}
+
+  init(): void {
+    const taskLists = this._taskPersistenceService.getAll();
+    this._taskListsSubject.next(taskLists);
   }
 
-  get store$(): Observable<Store> {
-    return this._store.asObservable()
-        .pipe(filter(store => !!store));
+  add(taskList: TaskList): void {
+    const taskLists = this._taskPersistenceService.getAll();
+    taskLists.push(taskList);
+    this._taskPersistenceService.save(taskLists);
+    this._taskListsSubject.next(taskLists);
   }
 
-  private get store(): Store {
-    return this._storePersistenceService.load();
-  }
-
-  addTask(task: Task): void {
-    const store = this.store;
-    const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
-    if (!activeTaskList) {
-      throw new Error("No active tasklist");
-    }
-
-    if (!activeTaskList.tasks) {
-      activeTaskList.tasks = [];
-    }
-
-    activeTaskList?.tasks.push(task);
-    this._store.next(store);
-  }
-
-  createTaskList(taskListName: string): void {
-    const newTaskList = {
-      id: uuidv4(),
-      name: taskListName,
-      tasks: []
-    } as TaskList;
-
-    const store = this.store;
-    store.taskLists.push(newTaskList);
-    this._store.next(store);
-  }
-
-  getAll(): TaskList[] {
-    return this.store.taskLists ?? [];
-  }
-
-  setActive(taskList: TaskList): void {
-    const store = this.store;
-    store.activeTaskListId = taskList.id;
-    this._store.next(store);
-    this._router.navigate(['/task-lists/active']);
-  }
-
-  removeActiveTaskList(): void {
-    const store = this.store;
-    delete store.activeTaskListId;
-    this._store.next(store);
-    this._router.navigate(['/']);
-  }
-
-  selectTaskList(taskList: TaskList): void {
-    this.enableSelectionMode();
-
-    const store = this.store;
-
-    if (!store.selectedTaskLists) {
-      store.selectedTaskLists = [];
-    }
-
-    if (store.selectedTaskLists.some(tl => tl.id === taskList.id)) {
-        const selectedTaskListIndex = store.selectedTaskLists.findIndex(tl => tl.id === taskList.id);
-        store.selectedTaskLists.splice(selectedTaskListIndex, 1);
-
-        if (!store.selectedTaskLists.length) {
-          store.selectionMode = false;
-        }
-
-        this._store.next(store);
-    } else {
-      store.selectedTaskLists.push(taskList);
-      this._store.next(store);
-    }
-  }
-
-  isSelected(taskList: TaskList): boolean {
-    const store = this.store;
-    return store.selectedTaskLists && store.selectedTaskLists.some(tl => tl.id === taskList.id);
-  }
-
-  isSelectionModeEnabled(): boolean {
-    return this.store.selectionMode;
-  }
-
-  enableSelectionMode(): void {
-    const store = this.store;
-    store.selectionMode = true;
-    this._store.next(store);
-  }
-
-  disableSelectionMode(): void {
-    const store = this.store;
-    store.selectionMode = true;
-    this._store.next(store);
+  get taskLists$(): Observable<TaskList[]> {
+    return this._taskListsSubject.asObservable();
   }
 }
+
+export function initTaskListService(taskListService: TaskListService) {
+  return () => taskListService.init();
+}

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

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 import { Task } from '../entity/task';
+import { TaskList } from '../entity/taskList';
 
 const COOKIE_NAME = 'todo-data';
 
@@ -12,17 +13,17 @@ export class TaskPersistenceService {
     private _cookieService: CookieService
   ) {}
 
-  save(tasks: Task[]): void {
-    this._cookieService.set(COOKIE_NAME, JSON.stringify(tasks));
+  save(taskLists: TaskList[]): void {
+    this._cookieService.set(COOKIE_NAME, JSON.stringify(taskLists));
   }
 
-  getAll(): Task[] {
-    const serializedTasks = this._cookieService.get(COOKIE_NAME);
-    let result: Task[] = [];
+  getAll(): TaskList[] {
+    const serializedTaskLists = this._cookieService.get(COOKIE_NAME);
+    let result: TaskList[] = [];
     try {
-      result = JSON.parse(serializedTasks);
+      result = JSON.parse(serializedTaskLists);
     } catch(jsonParseError) {
-      console.log(`Unable to parse tasks from cookie: ${serializedTasks}`);
+      console.log(`Unable to parse task lists from cookie: ${serializedTaskLists}`);
     }
     return result;
   }

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

@@ -12,8 +12,8 @@ export class TaskService {
   constructor(
     private _taskPersistenceService: TaskPersistenceService
   ) {
-    const tasks = this._taskPersistenceService.getAll() || [];
-    this._tasks.next(tasks);
+    const taskLists = this._taskPersistenceService.getAll() || [];
+    // this._tasks.next(taskLists);
   }
 
   get tasks(): Observable<Task[]> {
@@ -28,11 +28,11 @@ export class TaskService {
   }
 
   private _saveTasks(): void {
-    this._taskPersistenceService.save(this._tasks.value);
+    // this._taskPersistenceService.save(this._tasks.value);
   }
 
   refresh() {
     const tasks = this._taskPersistenceService.getAll();
-    this._tasks.next(tasks);
+    // this._tasks.next(tasks);
   }
 }

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

@@ -1,10 +1,9 @@
-<div class="component">
-    <!-- <h1>Todo List</h1>
+<!-- <div class="component">
+    <h1>Todo List</h1>
     <app-display-task *ngFor="let task of tasks" [task]="task"></app-display-task>
     <div id="add-task-btn" *ngIf="!isAddingATask" (click)="createTask()">
         <mat-icon>add</mat-icon>
         <span>Ajouter une nouvelle tâche...</span>
-    </div> -->
-
-    <app-task-lists></app-task-lists>
-</div>
+    </div>
+</div> -->
+<app-task-lists></app-task-lists>

src/app/task-lists/add-new-list/add-new-list.component.html

@@ -0,0 +1,22 @@
+<h1>Création d'une liste de tâches</h1>
+<form [formGroup]="taskListForm" (ngSubmit)="onSubmit()" ngNativeValidate>
+    <mat-form-field>
+        <mat-label>Nom de la liste</mat-label>
+        <input matInput formControlName="name" required>
+        <mat-error *ngIf="!taskListForm.controls.name.valid">
+            Veuillez saisir le nom de la liste.
+        </mat-error>
+    </mat-form-field>
+    <div class="actions">
+        <button mat-raised-button 
+                type="button"
+                (click)="close()">
+            Annuler
+        </button>
+        <button mat-raised-button
+                type="submit"
+                color="primary">
+            Créer une liste
+        </button>
+    </div>
+</form>

src/app/task-lists/add-new-list/add-new-list.component.scss

@@ -0,0 +1,16 @@
+form {
+    width: 20rem;
+
+    mat-form-field {
+        width: 100%;
+
+        input {
+            width: 100%;
+        }
+    }
+
+    .actions {
+        display: flex;
+        justify-content: space-between;
+    }
+}

src/app/task-lists/add-new-list/add-new-list.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { TaskList } from 'src/app/core/entity/taskList';
+import { v4 as uuidv4 } from 'uuid';
+
+@Component({
+  selector: 'app-add-new-list',
+  templateUrl: './add-new-list.component.html',
+  styleUrls: ['./add-new-list.component.scss']
+})
+export class AddNewListComponent {
+  taskListForm: FormGroup;
+
+  constructor(
+    private _dialogRef: MatDialogRef<AddNewListComponent>,
+    private _formBuilder: FormBuilder
+  ) {
+    this.taskListForm = this._formBuilder.group(
+      {
+        name: [undefined, Validators.required]
+      }
+    )
+  }
+
+  onSubmit(): void {
+    if (this.taskListForm.valid) {
+      const newList = {
+        id: uuidv4(),
+        name: this.taskListForm.controls.name.value,
+        tasks: [],
+        achievedTasks: [],
+        abandonnedTasks: []
+      } as TaskList;
+      this._dialogRef.close(newList);
+    }
+  }
+
+  close(): void {
+    this._dialogRef.close();
+  }
+}

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

@@ -1,15 +0,0 @@
-<form [formGroup]="addTaskListFormGroup" (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 mat-raised-button type="button" (click)="close()">Annuler</button>
-    <button mat-raised-button type="submit">Créer une liste</button>
-  </div>
-</form>

src/app/task-lists/add-task-list/add-task-list.component.ts

@@ -1,42 +0,0 @@
-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-add-task-list',
-  templateUrl: './add-task-list.component.html',
-  styleUrls: ['./add-task-list.component.scss']
-})
-export class AddTaskListComponent {
-  addTaskListFormGroup: FormGroup = this._formBuilder.group({
-    name: [undefined, Validators.required]
-  });
-
-  constructor(
-    private _dialogRef: MatDialogRef<AddTaskListComponent>,
-    private _formBuilder: FormBuilder,
-    private _snackBar: MatSnackBar,
-    private _taskListService: TaskListService
-  ) {}
-
-  get form(): any {
-    return this.addTaskListFormGroup.controls;
-  }
-
-  onSubmit(): void {
-    if (this.addTaskListFormGroup.valid) {
-      this._taskListService.createTaskList(this.addTaskListFormGroup.controls.name.value);
-      this._snackBar.open('La task-list a été créée.', 'Fermer', {duration: 5000});
-      this.close();
-    } else {
-      this._snackBar.open('Veuillez vérifier les informations saisies.', 'Fermer', {duration: 5000});
-    }
-  }
-
-  close(): void {
-    this._dialogRef.close();
-  }
-}

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

@@ -1,18 +1,14 @@
-<div class="task-lists">
-  <div *ngFor="let taskList of taskLists" class="task-list-container">
-    <div class="task-list shadowed" (click)="selectActiveTaskList(taskList)" (contextmenu)="$event.preventDefault(); onRightClick(taskList)">
-      <ng-container [ngPlural]="taskList.tasks?.length ?? 0">
-        <ng-template ngPluralCase=">1">
-          {{taskList.tasks?.length}} tâches
-        </ng-template>
-        <ng-template ngPluralCase="other">
-          {{taskList.tasks?.length}} tâche
-        </ng-template>
-      </ng-container>
+<button mat-raised-button (click)="addNewList()">Nouvelle liste</button>
+<div class="task-list-container">
+    <div *ngFor="let list of taskLists$ | async" class="task-list">
+        <div class="card">
+            <span *ngIf="list?.tasks?.length">
+                {{list?.tasks?.length}} tâches
+            </span>
+            <span *ngIf="!list?.tasks?.length">
+                Aucune tâche
+            </span>
+        </div>
+        <h3>{{list?.name}}</h3>
     </div>
-    {{taskList.name}}
-    <ng-container *ngIf="isSelectionModeEnabled() && isSelected(taskList)">
-      SELECTED
-    </ng-container>
-  </div>
-</div>
+</div>

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

@@ -1,26 +1,23 @@
-.task-lists {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: auto;
-  max-width: 80%;
-
-  .task-list-container {
+.task-list-container {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin: 1rem;
+    flex-direction: row;
+    flex-wrap: wrap;
 
     .task-list {
-      width: 150px;
-      height: 150px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: .5rem;
-      background-color: aliceblue;
-      margin-bottom: .5rem;
+        width: 10rem;
+        margin: 1rem;
+
+        .card {
+            height: 10rem;
+            border: 1px solid black;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: .3rem;
+        }
+        h3 {
+            display: flex;
+            justify-content: center;
+        }
     }
-  }
-}
+}

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

@@ -1,56 +1,32 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { Subscription } from 'rxjs';
-import { TaskList } from '../core/entity/task-list';
+import { Observable, Subscription } from 'rxjs';
+import { TaskList } from '../core/entity/taskList';
 import { TaskListService } from '../core/service/task-list.service';
-import { AddTaskListComponent } from './add-task-list/add-task-list.component';
+import { AddNewListComponent } from './add-new-list/add-new-list.component';
 
 @Component({
   selector: 'app-task-lists',
   templateUrl: './task-lists.component.html',
   styleUrls: ['./task-lists.component.scss']
 })
-export class TaskListsComponent implements OnInit, OnDestroy {
-  taskLists: TaskList[] = [];
-  private _storeSubscription?: Subscription;
+export class TaskListsComponent implements OnInit {
+  taskLists$?: Observable<TaskList[]>;
+  private _taskListsSubscription?: Subscription;
 
   constructor(
     private _dialog: MatDialog,
-    private _taskListService: TaskListService,
+    private _taskListService: TaskListService
   ) {}
 
   ngOnInit(): void {
-    this.taskLists = this._taskListService.getAll();
-    this._storeSubscription = this._taskListService.store$.subscribe(store => {
-      this.taskLists = store.taskLists;
+    this.taskLists$ = this._taskListService.taskLists$;
+  }
+
+  addNewList(): void {
+    const dialogRef = this._dialog.open(AddNewListComponent);
+    dialogRef.afterClosed().subscribe(newList => {
+      this._taskListService.add(newList);
     });
   }
-
-  ngOnDestroy(): void {
-    this._storeSubscription?.unsubscribe();
-  }
-
-  openNewListForm(): void {
-    this._dialog.open(AddTaskListComponent);
-  }
-
-  selectActiveTaskList(taskList: TaskList): void {
-    if (this.isSelectionModeEnabled()) {
-      this._taskListService.selectTaskList(taskList);
-    } else {
-      this._taskListService.setActive(taskList);
-    }
-  }
-
-  onRightClick(taskList: TaskList): void {
-    this._taskListService.selectTaskList(taskList);
-  }
-
-  isSelected(taskList: TaskList): boolean {
-    return this._taskListService.isSelected(taskList);
-  }
-
-  isSelectionModeEnabled(): boolean {
-    return this._taskListService.isSelectionModeEnabled();
-  }
 }

src/styles.scss

@@ -1,26 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 
 html, body { height: 100%; }
-body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  padding-top: 4rem;
-}
-
-
-
-
-
-.shadowed {
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-  transition: box-shadow .2s ease-out;
-
-  &:hover {
-    box-shadow: 0 .2em .5em #777;
-  }
-}
-
-a.no-style {
-  color: inherit;
-  text-decoration: none;
-}
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }