Making up task list layout.

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==",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
-      "dev": true
     },
     "@types/webpack-sources": {
       "version": "0.1.9",

package.json

@@ -20,6 +20,8 @@
     "@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",
     "uuid": "^8.3.2",
@@ -31,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,10 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-.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: var(--secondary);
-            }
-        }
-    }
-}

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

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

@@ -1,37 +0,0 @@
-<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" [formControl]="descriptionControl"></textarea>
-            </div>
-            <div class="actions">
-                <div class="row">
-                    <button class="stroked secondary" [disabled]="true" matRipple matTooltip="Définir une alerte dans X minutes">
-                        <mat-icon>update</mat-icon>
-                        Rappel
-                    </button>
-                </div>
-                <div class="row">
-                    <button class="stroked 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

@@ -1,118 +0,0 @@
-.task {
-    position: relative;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    margin-bottom: .5rem;
-    flex-direction: column;
-    background-color: var(--secondary);
-    border-radius: .2rem;
-
-    .header {
-        height: 2.5rem;
-        width: 100%;
-        display: flex;
-        align-items: center;
-
-        .drag-n-drop {
-            padding: 0 1rem;
-            &:hover {
-                cursor: grab;
-            }
-        }
-
-        .input-container {
-            display: flex;
-            flex-grow: 1;
-
-            input {
-                border-style: none;
-                height: 1.8rem;
-                padding: 0 .8rem;
-                margin: 0 .8rem;
-                background-color: inherit;
-                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: var(--secondary-border);
-                }
-            }
-        }
-
-        .expand {
-            margin-right: .5rem;
-        }
-    }
-
-    .body {
-        height: 0;
-        visibility: hidden;
-        transition: height .1s ease-in-out;
-        display: flex;
-        border-top: .1rem solid var(--primary-border);
-
-        &.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 var(--secondary-border);
-                    border-radius: .2rem;
-                    background-color: #ddd;
-                    resize: none;
-                    padding: .5rem;
-                }
-            }
-    
-            .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: .5rem 0 .5rem 1rem;
-
-                    button {
-                        display: flex;
-                        justify-content: left;
-                        flex-grow: 1;
-
-                        mat-icon {
-                            margin-right: .5rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

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

@@ -1,103 +0,0 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
-import { Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { ConfirmDialogComponent, ConfirmDialogModel } from 'src/app/core/components/confirm-dialog/confirm-dialog.component';
-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, OnDestroy {
-  @Input() task?: Task;
-  @ViewChild('titleInput', {static: true}) titleInput?: ElementRef<HTMLInputElement>;
-  @ViewChild('descriptionInput', {static: true}) descriptionInput?: ElementRef<HTMLTextAreaElement>;
-  titleControl = new FormControl();
-  descriptionControl = new FormControl();
-  isExpanded = false;
-  private _subscriptions: Subscription[] = [];
-
-  constructor(
-    private _dialog: MatDialog,
-    private _taskListService: TaskListService
-  ) {}
-
-  ngAfterViewInit(): void {
-    this.titleControl.setValue(this?.task?.title);
-    this.descriptionControl.setValue(this?.task?.description);
-
-    const titleControlSubscription = this.titleControl.valueChanges
-        .pipe(
-          distinctUntilChanged(),
-          debounceTime(500)
-        )
-        .subscribe(newTitle => {
-          if (this.task) {
-            this.task.title = newTitle;
-            this._taskListService.updateTask(this.task);
-          }
-        });
-    this._subscriptions.push(titleControlSubscription);
-
-    const descriptionControlSubscription = this.descriptionControl.valueChanges
-    .pipe(
-      distinctUntilChanged(),
-      debounceTime(500)
-    )
-    .subscribe(description => {
-      if (this.task) {
-        this.task.description = description;
-        this._taskListService.updateTask(this.task);
-      }
-    });
-    this._subscriptions.push(descriptionControlSubscription);
-  }
-
-  ngOnDestroy(): void {
-    this._subscriptions.forEach(subscription => subscription.unsubscribe());
-  }
-
-  expand(): void {
-    this.isExpanded = !this.isExpanded;
-  }
-
-  getExpendedClass(): string {
-    let result = 'body';
-
-    if (this.isExpanded) {
-      result += ' expanded';
-    }
-    return result;
-  }
-
-  delete(): void {
-    if (this.task) {
-      const confirmData = {
-        title: `Supprimer la tâche ${this.task.title} ?`,
-        description: 'Une fois supprimé, sa description sera perdue définitivement.',
-        confirmButtonLabel: 'Supprimer la tâche',
-        confirmButtonType: 'alert'
-      } as ConfirmDialogModel;
-  
-      const dialogRef = this._dialog.open(
-        ConfirmDialogComponent,
-        {
-          width: '30rem',
-          data: confirmData
-        }
-      );
-  
-      const afterDialogCloseSubscription = dialogRef.afterClosed().subscribe(result => {
-        if (result && this.task) {
-          this._taskListService.delete(this.task);
-        }
-      })
-      this._subscriptions.push(afterDialogCloseSubscription);
-    }
-  }
-}

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

src/app/app.module.ts

@@ -1,31 +1,22 @@
 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 { MatIconModule } from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
+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 { AddNewListComponent } from './task-lists/add-new-list/add-new-list.component';
-import {MatDialogModule} from '@angular/material/dialog';
+import { initTaskListService, TaskListService } from './core/service/task-list.service';
-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';
-import { RenameTaskListComponent } from './task-lists/rename-task-list/rename-task-list.component';
-import { ConfirmDialogComponent } from './core/components/confirm-dialog/confirm-dialog.component'; 
 
 @NgModule({
   declarations: [
@@ -34,33 +25,26 @@ import { ConfirmDialogComponent } from './core/components/confirm-dialog/confirm
     AddTaskComponent,
     DisplayTaskComponent,
     TaskListsComponent,
-    AddTaskListComponent,
+    AddNewListComponent
-    HeaderComponent,
-    ActiveListTasksComponent,
-    TaskDisplayComponent,
-    RenameTaskListComponent,
-    ConfirmDialogComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
     MatIconModule,
     MatInputModule,
     MatDialogModule,
     MatButtonModule,
-    ReactiveFormsModule,
+    MatSnackBarModule
-    MatSnackBarModule,
-    MatCheckboxModule,
-    MatTooltipModule,
-    MatRippleModule
   ],
   providers: [
     CookieService,
     {
       provide: APP_INITIALIZER,
-      useFactory: (taskListService: TaskListService) => () => taskListService.removeActiveTaskList(),
+      useFactory: initTaskListService,
-      deps: [TaskListService, StorePersistenceService],
+      deps: [TaskListService],
       multi: true
     }
   ],

src/app/core/components/confirm-dialog/confirm-dialog.component.html

@@ -1,17 +0,0 @@
-<div class="container">
-    <div class="body">
-        <mat-icon>help_outline</mat-icon>
-        <div class="message">
-            <div class="title">{{data.title}}</div>
-            <div class="description">{{data.description}}</div>
-        </div>
-    </div>
-    <div class="dialog-actions">
-        <button class="stroked" (click)="cancel()">Annuler</button>
-        <button class="stroked"
-                (click)="confirm()"
-                [ngClass]="data.confirmButtonType">
-            {{data.confirmButtonLabel}}
-        </button>
-    </div>
-</div>

src/app/core/components/confirm-dialog/confirm-dialog.component.scss

@@ -1,35 +0,0 @@
-.container {
-    .body {
-        display: flex;
-        flex-direction: row;
-        flex-grow: 1;
-        align-items: center;
-
-        mat-icon {
-            $iconSize: 4rem;
-            font-size: $iconSize;
-            width: $iconSize;
-            height: $iconSize;
-            margin: 0 1rem;
-        }
-
-        .message {
-            .title {
-                display: flex;
-                flex-grow: 1;
-                justify-content: center;
-                text-align: center;
-                font-size: 1.5rem;
-                margin: .5rem;
-            }
-    
-            .description {
-                display: flex;
-                flex-grow: 1;
-                justify-content: center;
-                text-align: center;
-                font-size: 1.2rem;
-            }
-        }
-    }
-}

src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts

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

src/app/core/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,31 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-export interface ConfirmDialogModel {
-  title: string;
-  description: string;
-  confirmButtonLabel: string;
-  confirmButtonType: '' | 'alert';
-}
-
-@Component({
-  selector: 'app-confirm-dialog',
-  templateUrl: './confirm-dialog.component.html',
-  styleUrls: ['./confirm-dialog.component.scss']
-})
-export class ConfirmDialogComponent {
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogModel,
-    private _dialogRef: MatDialogRef<ConfirmDialogModel>
-  ) {}
-
-  cancel(): void {
-    this._dialogRef.close();
-  }
-
-  confirm(): void {
-    this._dialogRef.close(true);
-  }
-
-}

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

@@ -1,42 +0,0 @@
-<nav *ngIf="!selectionMode">
-  <div class="left">
-    <span class="title">
-      <img src="../../assets/images/to-do.png" />
-      To Do
-    </span>
-    <button *ngIf="!activeTaskList"
-        (click)="openNewListForm()"
-        class="stroked primary"
-        matRipple>
-      Nouvelle liste
-    </button>
-    <button *ngIf="activeTaskList"
-        (click)="goTaskListsPane()"
-        class="icon stroked primary"
-        matRipple
-        matTooltip="Retourner aux task-lists">
-      <mat-icon>chevron_left</mat-icon>
-    </button>
-  </div>
-  <div class="middle" *ngIf="activeTaskList">
-    {{activeTaskList.name}}
-  </div>
-  <div class="right">
-    <button class="icon stroked primary"
-        (click)="enableSelectionMode()"
-        [disabled]="isNoAnyTaskList()"
-        matTooltip="Activer la sélection des task-lists"
-        matTooltipPosition="left">
-      <mat-icon>checklist_rtl</mat-icon>
-    </button>
-  </div>
-</nav>
-<nav *ngIf="selectionMode" class="selectionMode">
-  <div></div>
-  <div>
-    Cliquez sur une liste pour la sélectionner
-  </div>
-  <div class="actions">
-    <button class="stroked primary" (click)="disableSelectionMode()">Annuler</button>
-  </div>
-</nav>

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

@@ -1,49 +0,0 @@
-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  height: 3.2rem;
-  background-color: #eee;
-
-  .left {
-    position: absolute;
-    left: 1rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .title {
-      font-size: 1.5rem;
-      display: flex;
-      align-items: center;
-      margin-right: 1rem;
-    }
-  }
-
-  .middle {
-    display: flex;
-    margin: auto;
-  }
-
-  .right {
-    position: absolute;
-    right: 1rem;
-  }
-  
-  &.selectionMode {
-    font-weight: bold;
-    background-color: var(--selection);
-    color: white;
-    display: flex;
-    justify-content: center;
-
-    .actions {
-      position: absolute;
-      right: 0;
-      margin: 0 1rem;
-    }
-  }
-}

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

@@ -1,61 +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;
-  selectionMode = false;
-
-  constructor(
-    private _dialog: MatDialog,
-    private _taskListService: TaskListService
-  ) {}
-
-  ngOnInit(): void {
-    this._storeSubscription = this._taskListService.store$.subscribe(store => {
-      this.selectionMode = store.selectionMode;
-    });
-  }
-
-  ngOnDestroy(): void {
-    this._storeSubscription?.unsubscribe();
-  }
-
-  openNewListForm(): void {
-    this._dialog.open(
-      AddTaskListComponent, 
-      {
-        width: '20rem'
-      }
-    );
-  }
-
-  goTaskListsPane(): void {
-    this._taskListService.removeActiveTaskList();
-  }
-
-  enableSelectionMode(): void {
-    this._taskListService.enableSelectionMode();
-  }
-
-  disableSelectionMode(): void {
-    this._taskListService.disableSelectionMode();
-  }
-
-  isNoAnyTaskList(): boolean {
-    return this._taskListService.isNoAnyTaskList();
-  }
-
-  get activeTaskList(): TaskList | undefined {
-    return this._taskListService.activeTaskList;
-  }
-}

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

@@ -1,6 +1,7 @@
 export interface Task {
-    id: string;
     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,33 +0,0 @@
-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.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,223 +1,35 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from "rxjs";
+import { BehaviorSubject, Observable } from 'rxjs';
-import { Task } from "../entity/task";
+import { TaskList } from '../entity/taskList';
-import { TaskList } from "../entity/task-list";
+import { TaskPersistenceService } from './task-persistence.service';
-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 { MatSnackBar } from "@angular/material/snack-bar";
 
 @Injectable({
-	providedIn: 'root'
+  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(
+  constructor(
-		private _router: Router,
+    private _taskPersistenceService: TaskPersistenceService
-		private _snackBar: MatSnackBar,
+  ) {}
-		private _storePersistenceService: StorePersistenceService
-	) {
-		this.store$.subscribe(store => {
-			this.saveStore(store, true);
-		});
-	}
 
-	get store$(): Observable<Store> {
+  init(): void {
-		return this._store.asObservable()
+    const taskLists = this._taskPersistenceService.getAll();
-		.pipe(filter(store => !!store));
+    this._taskListsSubject.next(taskLists);
-	}
+  }
 
-	private get store(): Store {
+  add(taskList: TaskList): void {
-		let result = this._store.value;
+    const taskLists = this._taskPersistenceService.getAll();
+    taskLists.push(taskList);
+    this._taskPersistenceService.save(taskLists);
+    this._taskListsSubject.next(taskLists);
+  }
 
-		if (!result) {
+  get taskLists$(): Observable<TaskList[]> {
-			result = this._storePersistenceService.load();
+    return this._taskListsSubject.asObservable();
-		}
+  }
-		return result;
+}
-	}
+
-
+export function initTaskListService(taskListService: TaskListService) {
-	private saveStore(store: Store, silent: boolean = false): void {
+  return () => taskListService.init();
-		if (silent) {
-			this._storePersistenceService.save(store);
-		} else {
-			// We send the store into the subject because there is an observable on in, that saves the store at every single value.
-			this._store.next(store);
-		}
-	}
-	
-	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.saveStore(store);
-		this._snackBar.open('Tâche ajoutée.', 'Fermer', {duration: 2000});
-	}
-	
-	updateTask(taskToUpdate: Task) {
-		const store = this.store;
-		const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
-		if (!activeTaskList) {
-			throw new Error("No active tasklist");
-		}
-
-		const task = activeTaskList?.tasks.find(task => task.id === taskToUpdate.id);
-		if (!task) {
-			throw new Error('Unknown task to update');
-		}
-
-		task.title = taskToUpdate.title;
-		task.description = taskToUpdate.description;
-
-		// If the store is saved loudly, all views will be refreshed and the user will lose the focus of its input,
-		// so we save the store silently here.
-		this.saveStore(store, true);
-	}
-
-	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.saveStore(store);
-		this._snackBar.open('Tâche supprimée.', 'Fermer', {duration: 2000});
-	}
-
-	createTaskList(taskListName: string): void {
-		const newTaskList = {
-			id: uuidv4(),
-			name: taskListName,
-			tasks: []
-		} as TaskList;
-
-		const store = this.store;
-		store.taskLists.push(newTaskList);
-		this.saveStore(store);
-	}
-
-	updateTaskListName(taskListToUpdate: TaskList): void {
-		const store = this.store;
-		const matchingTaskList = store.taskLists.find(taskList => taskList.id === taskListToUpdate.id);
-		if (matchingTaskList) {
-			matchingTaskList.name = taskListToUpdate.name;
-			this.saveStore(store);
-			this.disableSelectionMode();
-		}
-	}
-
-	deleteSelectedTaskLists(): void {
-		const store = this.store;
-		const nonSelectedTaskLists = store.taskLists.filter(taskList => !store.selectedTaskLists.some(selectedTaskList => selectedTaskList.id === taskList.id));
-		store.taskLists = nonSelectedTaskLists;
-		this.saveStore(store);
-		this.disableSelectionMode();
-	}
-
-	getAll(): TaskList[] {
-		return this.store.taskLists ?? [];
-	}
-
-	setActive(taskList: TaskList): void {
-		const store = this.store;
-		store.activeTaskListId = taskList.id;
-		this.saveStore(store);
-		this._router.navigate(['/task-lists/active']);
-	}
-
-	removeActiveTaskList(): void {
-		const store = this.store;
-		delete store.activeTaskListId;
-		this.saveStore(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.saveStore(store);
-		} else {
-			store.selectedTaskLists.push(taskList);
-			this.saveStore(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.saveStore(store);
-	}
-
-	disableSelectionMode(): void {
-		const store = this.store;
-		store.selectionMode = false;
-		store.selectedTaskLists = [];
-		this.saveStore(store);
-	}
-
-	isThereMultipleTaskListsSelected(): boolean {
-		const store = this.store;
-		return (store.selectedTaskLists?.length ?? 0) > 1;
-	}
-
-	get selectedTaskList(): TaskList {
-		return this._store.value?.selectedTaskLists[0];
-	}
-
-	isNoAnyTaskList(): boolean {
-		return !this.store?.taskLists?.length;
-	}
-
-	get activeTaskList(): TaskList | undefined {
-		const store = this.store;
-		return store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
-	}
 }

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 {
+  save(taskLists: TaskList[]): void {
-    this._cookieService.set(COOKIE_NAME, JSON.stringify(tasks));
+    this._cookieService.set(COOKIE_NAME, JSON.stringify(taskLists));
   }
 
-  getAll(): Task[] {
+  getAll(): TaskList[] {
-    const serializedTasks = this._cookieService.get(COOKIE_NAME);
+    const serializedTaskLists = this._cookieService.get(COOKIE_NAME);
-    let result: Task[] = [];
+    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() || [];
+    const taskLists = this._taskPersistenceService.getAll() || [];
-    this._tasks.next(tasks);
+    // 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">
+<!-- <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>
-
+</div> -->
-    <app-task-lists></app-task-lists>
+<app-task-lists></app-task-lists>
-</div>

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,16 +0,0 @@
-<h2>Création d'une task-list</h2>
-<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 class="dialog-actions">
-    <button class="stroked primary" type="button" (click)="close()">Annuler</button>
-    <button class="stroked primary"  type="submit">Créer une liste</button>
-  </div>
-</form>

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

@@ -1,7 +0,0 @@
-form {
-    p {
-        mat-form-field {
-            width: 100%;
-        }
-    }
-}

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/rename-task-list/rename-task-list.component.html

@@ -1,16 +0,0 @@
-<h2>Renommage d'une task-list</h2>
-<form [formGroup]="renameTaskListFormGroup" (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 class="dialog-actions">
-		<button class="stroked" type="button" (click)="close()">Annuler</button>
-		<button class="stroked" type="submit">Renommer la liste</button>
-	</div>
-</form>

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

@@ -1,7 +0,0 @@
-form {
-    p {
-        mat-form-field {
-            width: 100%;
-        }
-    }
-}

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

@@ -1,59 +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-rename-task-list',
-  templateUrl: './rename-task-list.component.html',
-  styleUrls: ['./rename-task-list.component.scss']
-})
-export class RenameTaskListComponent implements OnInit {
-  renameTaskListFormGroup: FormGroup = this._formBuilder.group({
-    name: [undefined, Validators.required]
-  });
-
-  selectedTaskList?: TaskList;
-
-  constructor(
-    private _dialogRef: MatDialogRef<RenameTaskListComponent>,
-    private _formBuilder: FormBuilder,
-    private _snackBar: MatSnackBar,
-    private _taskListService: TaskListService
-  ) {}
-
-  ngOnInit(): void {
-    this.selectedTaskList = this._taskListService.selectedTaskList;
-
-    if (this.selectedTaskList) {
-      this.renameTaskListFormGroup.controls.name.setValue(this.selectedTaskList.name);
-    } else {
-      this._snackBar.open('Impossible de renommer la task-list : aucune task-list n\'est sélectionnée.', 'Fermer', {duration: 5000});
-      this._dialogRef.close();
-    }
-  }
-
-  get form(): any {
-    return this.renameTaskListFormGroup.controls;
-  }
-
-  onSubmit(): void {
-    if (this.selectedTaskList) {
-      if (this.renameTaskListFormGroup.valid) {
-        this.selectedTaskList.name = this.renameTaskListFormGroup.controls.name.value;
-        this._taskListService.updateTaskListName(this.selectedTaskList);
-        this._snackBar.open('La task-list a été renommé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,35 +1,14 @@
-<div class="task-lists">
+<button mat-raised-button (click)="addNewList()">Nouvelle liste</button>
-  <div *ngIf="!taskLists?.length" class="no-task-list">
+<div class="task-list-container">
-    Aucune task-list.
+    <div *ngFor="let list of taskLists$ | async" class="task-list">
-  </div>
+        <div class="card">
-  <div *ngFor="let taskList of taskLists" class="task-list-container">
+            <span *ngIf="list?.tasks?.length">
-    <div class="task-list shadowed"
+                {{list?.tasks?.length}} tâches
-        (click)="selectActiveTaskList(taskList)"
+            </span>
-        (contextmenu)="$event.preventDefault(); onRightClick(taskList)"
+            <span *ngIf="!list?.tasks?.length">
-        matRipple>
+                Aucune tâche
-      <ng-container [ngPlural]="taskList.tasks?.length ?? 0">
+            </span>
-        <ng-template ngPluralCase="0">
+        </div>
-          Aucune tâche
+        <h3>{{list?.name}}</h3>
-        </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>
-
-      <mat-icon *ngIf="isSelectionModeEnabled() && isSelected(taskList)" class="selection-icon">done</mat-icon>
     </div>
-    {{taskList.name}}
-  </div>
-</div>
-<div class="selection-actions" *ngIf="isSelectionModeEnabled()">
-  <button class="stroked"
-      [disabled]="isThereMultipleTaskListsSelected()"
-      (click)="renameSelectedTaskList()">
-    Renommer
-  </button>
-  <button class="stroked alert"
-      (click)="deleteSelectedTaskLists()">Supprimer</button>
 </div>

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

@@ -1,55 +1,23 @@
-.no-task-list {
+.task-list-container {
-  display: flex;
-  margin: auto;
-  margin-top: 3rem;
-  font-size: 1.5rem;
-}
-
-.task-lists {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: auto;
-  max-width: 80%;
-
-  .task-list-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    justify-content: center;
+    flex-wrap: wrap;
-    align-items: center;
-    margin: 1rem;
 
     .task-list {
-      width: 150px;
+        width: 10rem;
-      height: 150px;
+        margin: 1rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: .5rem;
-      background-color: aliceblue;
-      margin-bottom: .5rem;
-      position: relative;
 
-      .selection-icon {
+        .card {
-        position: absolute;
+            height: 10rem;
-        bottom: 0;
+            border: 1px solid black;
-        right: 0;
+            display: flex;
-        font-size: 3rem;
+            justify-content: center;
-        width: 3rem;
+            align-items: center;
-        height: 3rem;
+            border-radius: .3rem;
-      }
+        }
+        h3 {
+            display: flex;
+            justify-content: center;
+        }
     }
-  }
-}
-
-.selection-actions {
-  padding: .5rem;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-grow: 1;
-  justify-content: space-between;
-  border-top: 1px solid #444;
 }

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

@@ -1,21 +1,18 @@
-import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
-import { ConfirmDialogComponent, ConfirmDialogModel } from '../core/components/confirm-dialog/confirm-dialog.component';
+import { TaskList } from '../core/entity/taskList';
-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';
+import { AddNewListComponent } from './add-new-list/add-new-list.component';
-import { RenameTaskListComponent } from './rename-task-list/rename-task-list.component';
 
 @Component({
   selector: 'app-task-lists',
   templateUrl: './task-lists.component.html',
   styleUrls: ['./task-lists.component.scss']
 })
-export class TaskListsComponent implements OnInit, OnDestroy {
+export class TaskListsComponent implements OnInit {
-  taskLists: TaskList[] = [];
+  taskLists$?: Observable<TaskList[]>;
-  private _storeSubscription?: Subscription;
+  private _taskListsSubscription?: Subscription;
-  private _subscriptions: Subscription[] = [];
 
   constructor(
     private _dialog: MatDialog,
@@ -23,71 +20,13 @@ export class TaskListsComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.taskLists = this._taskListService.getAll();
+    this.taskLists$ = this._taskListService.taskLists$;
-    const storeSubscription = this._taskListService.store$.subscribe(store => {
+  }
-      this.taskLists = store.taskLists;
+
+  addNewList(): void {
+    const dialogRef = this._dialog.open(AddNewListComponent);
+    dialogRef.afterClosed().subscribe(newList => {
+      this._taskListService.add(newList);
     });
-    this._subscriptions.push(storeSubscription);
-  }
-
-  ngOnDestroy(): void {
-    this._subscriptions.forEach(subscription => subscription.unsubscribe());
-  }
-
-  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();
-  }
-
-  isThereMultipleTaskListsSelected(): boolean {
-    return this._taskListService.isThereMultipleTaskListsSelected();
-  }
-
-  renameSelectedTaskList(): void {
-    this._dialog.open(
-      RenameTaskListComponent,
-      {
-        width: '25rem'
-      }
-    );
-  }
-
-  deleteSelectedTaskLists(): void {
-    const confirmData = {
-      title: 'Supprimer les task-lists sélectionnées ?',
-      description: 'Une fois supprimées, les task-lists seront perdues définitivement.',
-      confirmButtonLabel: 'Supprimer les task-lists',
-      confirmButtonType: 'alert'
-    } as ConfirmDialogModel;
-
-    const dialogRef = this._dialog.open(
-      ConfirmDialogComponent,
-      {
-        width: '30rem',
-        data: confirmData
-      }
-    );
-
-    const afterDialogCloseSubscription = dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this._taskListService.deleteSelectedTaskLists();
-      }
-    })
-    this._subscriptions.push(afterDialogCloseSubscription);
   }
 }

src/styles.scss

@@ -1,139 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-:root {
-  --primary: #fff;
-  --primary-text: #444444;
-  --primary-border: #ccc;
-  --primary-hover: #eee;
-  --secondary: #eee;
-  --secondary-hover: #c9c9c9;
-  --secondary-border: #bbb;
 
-  --disabled: #eee;
+html, body { height: 100%; }
-  --disabled-text: #aaa;
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-
-  --transparent: rgba(0,0,0, 0);
-
-  --shadow-1: rgba(0, 0, 0, 0.2);
-  --shadow-2: rgba(0, 0, 0, 0.14);
-  --shadow-3: rgba(0, 0, 0, 0.12);
-  --shadow-hover: #777;
-
-  --alert: #eb1d3f;
-  --alert-text: #fff;
-  --alert-hover: #c20d2b;
-  --alert-border: #b91b35;
-
-  --selection: #185eb4;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  padding-top: 3.2rem;
-  background-color: var(--primary);
-}
-
-.shadowed {
-  box-shadow: 0px 2px 1px -1px var(--shadow-1),
-              0px 1px 1px 0px var(--shadow-2),
-              0px 1px 3px 0px var(--shadow-3);
-  transition: box-shadow .2s ease-out;
-
-  &:hover {
-    box-shadow: 0 .2em .5em var(--shadow-hover);
-  }
-}
-
-a.no-style {
-  color: inherit;
-  text-decoration: none;
-}
-
-button {
-  border-style: solid;
-  border-width: .1rem;
-  border-color: var(--transparent);
-  border-radius: .2rem;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  padding: .5rem;
-  background-color: var(--transparent);
-  color: var(--primary-text);
-
-  transition: background-color .2s ease-out,
-              border-color .2s ease-out;
-
-  &:hover {
-      background-color: var(--primary-hover);
-      border-color: var(--primary-border);
-  }
-
-  &:disabled {
-    background-color: var(--disabled);
-    color: var(--disabled-text);
-    cursor: not-allowed;
-  }
-
-  &.icon {
-      width: 2rem;
-      height: 2rem;
-      min-width: 1rem;
-      min-height: 1rem;
-      padding: 0;
-  }
-
-  &.raised {
-    background-color: var(--primary); //#4a4a4a;
-    box-shadow: 0px 2px 1px -1px var(--shadow-1),
-              0px 1px 1px 0px var(--shadow-2),
-              0px 1px 3px 0px var(--shadow-3);
-  }
-
-  &.stroked {
-    border-color: var(--primary-border);
-
-    &.primary {
-      background-color: var(--primary);
-
-      &:hover {
-        background-color: var(--primary-hover);
-      }
-    }
-
-    &.secondary {
-      background-color: var(--secondary);
-
-      &:hover {
-        background-color: var(--secondary-hover)
-      }
-    }
-  }
-
-  &.alert {
-    background-color: var(--alert);
-    color: var(--alert-text);
-
-    &:hover {
-      background-color: var(--alert-hover);
-      border-color: var(--alert-border);
-    }
-  }
-}
-
-.dialog-actions {
-  margin-top: 1rem; 
-  display: flex;
-  justify-content: space-between;
-
-  > * {
-      flex: 1 1 45%;
-      max-width: 45%;
-  }
-}