From bc5209b60e8de1d421b2dab7dbc115836e14ac37 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Sun, 20 Feb 2022 23:35:12 +0100 Subject: [PATCH] Add taskList addition system. --- package-lock.json | 16 +++++-- package.json | 4 +- src/app/app-routing.module.ts | 2 +- src/app/app.module.ts | 30 ++++++++++--- .../core/service/task-list.service.spec.ts | 16 +++++++ src/app/core/service/task-list.service.ts | 35 ++++++++++++++++ src/app/main-page/main-page.component.html | 5 ++- .../add-new-list/add-new-list.component.html | 22 ++++++++++ .../add-new-list/add-new-list.component.scss | 16 +++++++ .../add-new-list/add-new-list.component.ts | 42 +++++++++++++++++++ src/app/task-lists/task-lists.component.html | 4 ++ src/app/task-lists/task-lists.component.scss | 0 src/app/task-lists/task-lists.component.ts | 32 ++++++++++++++ 13 files changed, 212 insertions(+), 12 deletions(-) create mode 100644 src/app/core/service/task-list.service.spec.ts create mode 100644 src/app/core/service/task-list.service.ts create mode 100644 src/app/task-lists/add-new-list/add-new-list.component.html create mode 100644 src/app/task-lists/add-new-list/add-new-list.component.scss create mode 100644 src/app/task-lists/add-new-list/add-new-list.component.ts create mode 100644 src/app/task-lists/task-lists.component.html create mode 100644 src/app/task-lists/task-lists.component.scss create mode 100644 src/app/task-lists/task-lists.component.ts diff --git a/package-lock.json b/package-lock.json index ab7bb5b..e6cd537 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, "validate-npm-package-name": { "version": "3.0.0", diff --git a/package.json b/package.json index 566b065..b5c33e6 100644 --- a/package.json +++ b/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": { @@ -39,4 +41,4 @@ "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.3.5" } -} \ No newline at end of file +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 93ce6d6..c32f3a0 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -10,4 +10,4 @@ const routes: Routes = [ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 52d96cd..1e533d1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,32 +1,52 @@ -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'; 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 {MatInputModule} from '@angular/material/input'; +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] }) diff --git a/src/app/core/service/task-list.service.spec.ts b/src/app/core/service/task-list.service.spec.ts new file mode 100644 index 0000000..d8f3793 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/core/service/task-list.service.ts b/src/app/core/service/task-list.service.ts new file mode 100644 index 0000000..141c953 --- /dev/null +++ b/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 = new BehaviorSubject([]); + + 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 { + return this._taskListsSubject.asObservable(); + } +} + +export function initTaskListService(taskListService: TaskListService) { + return () => taskListService.init(); +} \ No newline at end of file diff --git a/src/app/main-page/main-page.component.html b/src/app/main-page/main-page.component.html index b2a0180..ec98a00 100644 --- a/src/app/main-page/main-page.component.html +++ b/src/app/main-page/main-page.component.html @@ -1,8 +1,9 @@ -
+ + \ No newline at end of file diff --git a/src/app/task-lists/add-new-list/add-new-list.component.html b/src/app/task-lists/add-new-list/add-new-list.component.html new file mode 100644 index 0000000..afbc129 --- /dev/null +++ b/src/app/task-lists/add-new-list/add-new-list.component.html @@ -0,0 +1,22 @@ +

Création d'une liste de tâches

+
+ + Nom de la liste + + + Veuillez saisir le nom de la liste. + + +
+ + +
+
\ No newline at end of file diff --git a/src/app/task-lists/add-new-list/add-new-list.component.scss b/src/app/task-lists/add-new-list/add-new-list.component.scss new file mode 100644 index 0000000..a5c0d2d --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/app/task-lists/add-new-list/add-new-list.component.ts b/src/app/task-lists/add-new-list/add-new-list.component.ts new file mode 100644 index 0000000..f73e32e --- /dev/null +++ b/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, + 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(); + } +} diff --git a/src/app/task-lists/task-lists.component.html b/src/app/task-lists/task-lists.component.html new file mode 100644 index 0000000..aed06c9 --- /dev/null +++ b/src/app/task-lists/task-lists.component.html @@ -0,0 +1,4 @@ + +
+

{{list?.name}}

+
\ No newline at end of file diff --git a/src/app/task-lists/task-lists.component.scss b/src/app/task-lists/task-lists.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/task-lists/task-lists.component.ts b/src/app/task-lists/task-lists.component.ts new file mode 100644 index 0000000..978899b --- /dev/null +++ b/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; + 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); + }); + } +}