Add task deletion.

package-lock.json

@@ -21,6 +21,7 @@
         "ngx-cookie-service": "^12.0.3",
         "rxjs": "~6.6.0",
         "tslib": "^2.3.0",
+        "uuid": "^8.3.2",
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
@@ -29,6 +30,7 @@
         "@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",
@@ -2573,6 +2575,12 @@
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
       "dev": true
     },
+    "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
+    },
     "node_modules/@types/webpack-sources": {
       "version": "0.1.9",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.9.tgz",
@@ -14882,7 +14890,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -17916,6 +17923,12 @@
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
       "dev": true
     },
+    "@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
+    },
     "@types/webpack-sources": {
       "version": "0.1.9",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.9.tgz",
@@ -27377,8 +27390,7 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "validate-npm-package-name": {
       "version": "3.0.0",

package.json

@@ -20,9 +20,9 @@
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
-    "ngx-cookie-service": "^12.0.3",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
+    "uuid": "^8.3.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -31,6 +31,7 @@
     "@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",
@@ -39,4 +40,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.3.5"
   }
-}
+}

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

@@ -0,0 +1,10 @@
+<div class="container">
+    <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 placeholder="Nouvelle tâche..."
+                (keydown)="onNewTaskKeyDown($event)"
+                [formControl]="newTaskControl"/>
+    </div>
+</div>

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

@@ -0,0 +1,31 @@
+.container {
+    max-width: 50rem;
+    width: 90%;
+    margin: 0 auto;
+    padding: 2rem;
+
+    .task {
+        &.new {
+            position: relative;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            margin-top: 1rem;
+            height: 2.5rem;
+
+            mat-icon {
+                position: absolute;
+                left: 1rem;
+            }
+
+            input {
+                width: 100%;
+                height: 100%;
+                padding: 0 3rem;
+                border-radius: .1rem;
+                border-style: none;
+                background-color: #444;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,54 @@
+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';
+
+@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 _storeSubscription?: Subscription;
+  activeTaskList?: TaskList;
+  newTaskControl: FormControl = new FormControl(undefined, Validators.required);
+
+  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 {
+    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) {
+        this._taskListService.addTask(this.newTaskControl.value as string);
+        this.newTaskControl.reset();
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+<div class="task">
+    <div class="header">
+        <mat-icon class="drag-n-drop">drag_handle</mat-icon>
+        <mat-checkbox class="example-margin"></mat-checkbox>
+        <div class="input-container">
+            <input type="text" #titleInput [formControl]="titleControl"/>
+        </div>
+        <button type="button" class="expand icon" (click)="expand()" matRipple>
+            <mat-icon *ngIf="!isExpanded">expand_more</mat-icon>
+            <mat-icon *ngIf="isExpanded">expand_less</mat-icon>
+        </button>
+    </div>
+    <div [ngClass]="getExpendedClass()">
+        <div class="container">
+            <div class="description-container">
+                <label for="description">
+                    Description
+                </label>
+                <textarea id="description"></textarea>
+            </div>
+            <div class="actions">
+                <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>
+</div>

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

@@ -0,0 +1,112 @@
+.task {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: .5rem;
+    flex-direction: column;
+    background-color: #444;
+
+    .header {
+        border-radius: .1rem;
+        height: 2.5rem;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .drag-n-drop {
+            padding: 0 1rem;
+            &:hover {
+                cursor: grab;
+            }
+        }
+
+        mat-checkbox {
+            // padding: 0 .5rem;
+        }
+
+        .input-container {
+            display: flex;
+            flex-grow: 1;
+
+            input {
+                border-style: none;
+                height: 1.8rem;
+                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,
+                        border-color .2s ease-out;
+
+                &:hover {
+                    border-color: rgb(53, 53, 53);
+                }
+            }
+        }
+
+        .expand {
+            margin-right: .5rem;
+        }
+    }
+
+    .body {
+        height: 0;
+        visibility: hidden;
+        transition: height .1s ease-in-out;
+        display: flex;
+
+        &.expanded {
+            height: 20rem;
+            visibility: visible;
+            width: 100%;
+        }
+
+        .container {
+            flex-grow: 1;
+            padding: 1rem;
+            display: flex;
+            flex-direction: row;
+
+            .description-container {
+                width: 80%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+    
+                textarea {
+                    flex-grow: 1;
+                    border: 1px solid #444;
+                    border-radius: .2rem;
+                    background-color: #4a4a4a;
+                    resize: none;
+                }
+            }
+    
+            .actions {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                height: 100%;
+                
+                max-width: 20%;
+                
+
+                .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.spec.ts

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

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

@@ -0,0 +1,44 @@
+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';
+
+
+@Component({
+  selector: 'app-task-display',
+  templateUrl: './task-display.component.html',
+  styleUrls: ['./task-display.component.scss']
+})
+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
+  ) {}
+
+  ngAfterViewInit(): void {
+    this.titleControl.setValue(this?.task?.title);
+  }
+
+  expand(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  getExpendedClass(): string {
+    let result = 'body';
+
+    if (this.isExpanded) {
+      result += ' expanded';
+    }
+    return result;
+  }
+
+  delete(): void {
+    if (this.task) {
+      this._taskListService.delete(this.task);
+    }
+  }
+}

src/app/app-routing.module.ts

@@ -1,9 +1,11 @@
 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: '', component: MainPageComponent},
+  { path: 'task-lists/active', component: ActiveListTasksComponent }
 ];
 
 @NgModule({

src/app/app.component.html

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

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { CookieService } from 'ngx-cookie-service';
 
@@ -10,23 +10,55 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
 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 { TaskDisplayComponent } from './active-list-tasks/task-display/task-display.component';
+import {MatCheckboxModule} from '@angular/material/checkbox'; 
+import { TaskListService } from './core/service/task-list.service';
+import { StorePersistenceService } from './core/service/store-persistence.service';
+import {MatTooltipModule} from '@angular/material/tooltip'; 
+import {MatRippleModule} from '@angular/material/core'; 
 
 @NgModule({
   declarations: [
     AppComponent,
     MainPageComponent,
     AddTaskComponent,
-    DisplayTaskComponent
+    DisplayTaskComponent,
+    TaskListsComponent,
+    AddTaskListComponent,
+    HeaderComponent,
+    ActiveListTasksComponent,
+    TaskDisplayComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     MatIconModule,
-    MatInputModule
+    MatInputModule,
+    MatDialogModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatSnackBarModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    MatRippleModule
   ],
   providers: [
     CookieService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (taskListService: TaskListService) => () => taskListService.removeActiveTaskList(),
+      deps: [TaskListService, StorePersistenceService],
+      multi: true
+    }
   ],
   bootstrap: [AppComponent]
 })

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

@@ -0,0 +1,31 @@
+<nav *ngIf="!selectionMode">
+  <span class="title">
+    <img src="../../assets/images/to-do.png" />
+    To Do
+  </span>
+  <button *ngIf="!activeTaskList"
+      (click)="openNewListForm()"
+      class="raised"
+      matRipple>
+    Nouvelle liste
+  </button>
+  <button *ngIf="activeTaskList"
+      (click)="goTaskListsPane()"
+      class="icon raised"
+      matRipple
+      matTooltip="Retourner aux task-lists">
+    <mat-icon>chevron_left</mat-icon>
+  </button>
+  <!-- <div *ngIf="activeTaskList">
+    Liste active : {{activeTaskList.name}}
+  </div> -->
+</nav>
+<nav *ngIf="selectionMode" class="selectionMode">
+  <div></div>
+  <div>
+    Cliquez sur une liste pour la sélectionner
+  </div>
+  <div class="actions">
+    <button mat-raised-button (click)="disableSelectionMode()">Annuler</button>
+  </div>
+</nav>

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

@@ -0,0 +1,31 @@
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  height: 3.2rem;
+  background-color: #666;
+
+  &.selectionMode {
+    font-weight: bold;
+    background-color: #185eb4;
+    color: white;
+    display: flex;
+    justify-content: center;
+
+    .actions {
+      position: absolute;
+      right: 0;
+      margin: 0 1rem;
+    }
+  }
+
+  .title {
+    font-size: 1.5rem;
+    margin: 0 1rem;
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,47 @@
+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;
+  selectionMode = false;
+
+  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);
+      this.selectionMode = store.selectionMode;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._storeSubscription?.unsubscribe();
+  }
+
+  openNewListForm(): void {
+    this._dialog.open(AddTaskListComponent);
+  }
+
+  goTaskListsPane(): void {
+    this._taskListService.removeActiveTaskList();
+  }
+
+  disableSelectionMode(): void {
+    this._taskListService.disableSelectionMode();
+  }
+}

src/app/core/entity/store.ts

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

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

@@ -0,0 +1,7 @@
+import { Task } from "./task";
+
+export interface TaskList {
+  id: string;
+  name: string;
+  tasks: 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/store-persistence.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from "@angular/core";
+import { Store } from "../entity/store";
+
+const STORE_NAME = 'todo-store';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StorePersistenceService {
+  save(store: Store): void {
+    const serializedStore = JSON.stringify(store);
+    localStorage.setItem(STORE_NAME, serializedStore);
+  }
+
+  load(): Store {
+    const serializedStore = localStorage.getItem(STORE_NAME);
+
+    if (serializedStore?.length && serializedStore !== 'undefined') {
+      try {
+        return JSON.parse(serializedStore);
+      } catch (jsonParseError) {
+        throw new Error(`JsonSerializationException: Invalid format for store in cookie "${STORE_NAME}".`);
+      }
+    } else {
+      return {
+        activeTaskListId: undefined,
+        taskLists: [],
+        selectedTaskLists: [],
+        selectionMode: false
+      } as Store;
+    }
+  }
+}

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

@@ -0,0 +1,149 @@
+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";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TaskListService {
+  private _store: BehaviorSubject<Store> = new BehaviorSubject<Store>(undefined as unknown as Store);
+
+  constructor(
+    private _router: Router,
+    private _storePersistenceService: StorePersistenceService
+  ) {
+    this.store$.subscribe(store => {
+      this._storePersistenceService.save(store);
+    });
+  }
+
+  get store$(): Observable<Store> {
+    return this._store.asObservable()
+        .pipe(filter(store => !!store));
+  }
+
+  private get store(): Store {
+    return this._storePersistenceService.load();
+  }
+
+  addTask(taskTitle: string): 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 = [];
+    }
+
+    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);
+  }
+
+  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 = false;
+    store.selectedTaskLists = [];
+    this._store.next(store);
+  }
+}

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

@@ -1,8 +1,10 @@
 <div class="component">
-    <h1>Todo List</h1>
+    <!-- <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>
+    </div> -->
+
+    <app-task-lists></app-task-lists>
 </div>

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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,24 @@
+<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)"
+        matRipple>
+      <ng-container [ngPlural]="taskList.tasks?.length ?? 0">
+        <ng-template ngPluralCase="0">
+          Aucune tâche
+        </ng-template>
+        <ng-template ngPluralCase="1">
+          {{taskList.tasks?.length}} tâche
+        </ng-template>
+        <ng-template ngPluralCase="other">
+          {{taskList.tasks?.length}} tâches
+        </ng-template>
+      </ng-container>
+    </div>
+    {{taskList.name}}
+    <ng-container *ngIf="isSelectionModeEnabled() && isSelected(taskList)">
+      SELECTED
+    </ng-container>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,56 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
+import { TaskList } from '../core/entity/task-list';
+import { TaskListService } from '../core/service/task-list.service';
+import { AddTaskListComponent } from './add-task-list/add-task-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;
+
+  constructor(
+    private _dialog: MatDialog,
+    private _taskListService: TaskListService,
+  ) {}
+
+  ngOnInit(): void {
+    this.taskLists = this._taskListService.getAll();
+    this._storeSubscription = this._taskListService.store$.subscribe(store => {
+      this.taskLists = store.taskLists;
+    });
+  }
+
+  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,4 +1,65 @@
 /* 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; }
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  padding-top: 3.2rem;
+  background-color: #555;
+}
+
+
+
+
+
+.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;
+}
+
+
+button {
+  border-style: solid;
+  border-width: .1rem;
+  border-color: rgba(0,0,0, 0);
+  border-radius: .2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: .5rem;
+
+  transition: background-color .2s ease-out,
+              border-color .2s ease-out;
+
+  &:hover {
+      background-color: #666;
+      border-color: rgb(53, 53, 53);
+  }
+
+  &.icon {
+      width: 2rem;
+      height: 2rem;
+      min-width: 1rem;
+      min-height: 1rem;
+      padding: 0;
+      background-color: inherit;
+  }
+
+  &.raised {
+    background-color: #4a4a4a;
+  }
+
+  &.alert {
+    background: #F93154;
+    color: #fff;
+  }
+}

todo.md

@@ -0,0 +1,14 @@
+# Fonctionnalités
+- Ajouter une tâche
+- Renommer la tâche
+- Terminer une tâche
+- Supprimer une tâche
+- Saisir la note d'une tâche
+- Ajouter des sous tâches à une autre
+- Renommer des sous tâches d'une autre
+- Terminer des sous tâches d'une autre
+- Supprimer des sous tâches d'une autre
+
+- 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