Add task-list creation.

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

@@ -23,6 +23,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": {
@@ -31,6 +32,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",

src/app/app.module.ts

@@ -10,20 +10,32 @@ 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';
 
 @NgModule({
   declarations: [
     AppComponent,
     MainPageComponent,
     AddTaskComponent,
-    DisplayTaskComponent
+    DisplayTaskComponent,
+    TaskListsComponent,
+    AddTaskListComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     MatIconModule,
-    MatInputModule
+    MatInputModule,
+    MatDialogModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatSnackBarModule
   ],
   providers: [
     CookieService,

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

@@ -19,10 +19,17 @@ export class StorePersistenceService {
 
   load(): Store {
     const serializedStore = this._cookieService.get(COOKIE_NAME);
-    try {
-      return JSON.parse(serializedStore);
-    } catch (jsonParseError) {
-      throw new Error(`JsonSerializationException: Invalid format for store in cookie "${COOKIE_NAME}".`);
+
+    if (serializedStore?.length) {
+      try {
+        return JSON.parse(serializedStore);
+      } catch (jsonParseError) {
+        throw new Error(`JsonSerializationException: Invalid format for store in cookie "${COOKIE_NAME}".`);
+      }
+    } else {
+      return {
+        taskLists: []
+      } as Store;
     }
   }
 }

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

@@ -3,7 +3,7 @@ import { BehaviorSubject } 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';
 
 @Injectable({
   providedIn: 'root'
@@ -41,7 +41,7 @@ export class TaskListService {
 
   createTaskList(taskListName: string): void {
     const newTaskList = {
-      id: taskListName,
+      id: uuidv4(),
       name: taskListName,
       tasks: []
     } as TaskList;

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,2 @@
+<button mat-raised-button (click)="openNewListForm()">Nouvelle liste</button>
+

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

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import {MatDialog, MatDialogModule} from '@angular/material/dialog';
+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 {
+
+  constructor(
+    private _dialog: MatDialog
+  ) {}
+
+  ngOnInit(): void {
+  }
+
+  openNewListForm(): void {
+    this._dialog.open(AddTaskListComponent);
+  }
+}