Add taskList addition system.

package-lock.json

@@ -18,9 +18,11 @@
         "@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",
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
@@ -2573,6 +2575,11 @@
       "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=="
+    },
     "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 +14889,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 +17922,11 @@
       "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=="
+    },
     "@types/webpack-sources": {
       "version": "0.1.9",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.9.tgz",
@@ -27377,8 +27388,7 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
-      "dev": true
     },
     "validate-npm-package-name": {
       "version": "3.0.0",

package.json

@@ -20,9 +20,11 @@
     "@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",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

src/app/app.module.ts

@@ -1,6 +1,7 @@
-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';
@@ -9,24 +10,43 @@ 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 { 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 { AddNewListComponent } from './task-lists/add-new-list/add-new-list.component';
+import { initTaskListService, TaskListService } from './core/service/task-list.service';
 
 @NgModule({
   declarations: [
     AppComponent,
     MainPageComponent,
     AddTaskComponent,
-    DisplayTaskComponent
+    DisplayTaskComponent,
+    TaskListsComponent,
+    AddNewListComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
     MatIconModule,
-    MatInputModule
+    MatInputModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatSnackBarModule
   ],
   providers: [
     CookieService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initTaskListService,
+      deps: [TaskListService],
+      multi: true
+    }
   ],
   bootstrap: [AppComponent]
 })

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

@@ -0,0 +1,35 @@
+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 _taskListsSubject: BehaviorSubject<TaskList[]> = new BehaviorSubject<TaskList[]>([]);
+
+  constructor(
+    private _taskPersistenceService: TaskPersistenceService
+  ) {}
+
+  init(): void {
+    const taskLists = this._taskPersistenceService.getAll();
+    this._taskListsSubject.next(taskLists);
+  }
+
+  add(taskList: TaskList): void {
+    const taskLists = this._taskPersistenceService.getAll();
+    taskLists.push(taskList);
+    this._taskPersistenceService.save(taskLists);
+    this._taskListsSubject.next(taskLists);
+  }
+
+  get taskLists$(): Observable<TaskList[]> {
+    return this._taskListsSubject.asObservable();
+  }
+}
+
+export function initTaskListService(taskListService: TaskListService) {
+  return () => taskListService.init();
+}

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

@@ -1,8 +1,9 @@
-<div class="component">
+<!-- <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>
-</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/task-lists.component.html

@@ -0,0 +1,4 @@
+<button mat-raised-button (click)="addNewList()">Nouvelle liste</button>
+<div *ngFor="let list of taskLists$ | async">
+    <h1>{{list?.name}}</h1>
+</div>

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

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable, Subscription } from 'rxjs';
+import { TaskList } from '../core/entity/taskList';
+import { TaskListService } from '../core/service/task-list.service';
+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 {
+  taskLists$?: Observable<TaskList[]>;
+  private _taskListsSubscription?: Subscription;
+
+  constructor(
+    private _dialog: MatDialog,
+    private _taskListService: TaskListService
+  ) {}
+
+  ngOnInit(): void {
+    this.taskLists$ = this._taskListService.taskLists$;
+  }
+
+  addNewList(): void {
+    const dialogRef = this._dialog.open(AddNewListComponent);
+    dialogRef.afterClosed().subscribe(newList => {
+      this._taskListService.add(newList);
+    });
+  }
+}