Add task-list creation.

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);
+  }
+}