diff --git a/package-lock.json b/package-lock.json index ab7bb5b..c5d9c0f 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 566b065..9be2cbb 100644 --- a/package.json +++ b/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", @@ -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.module.ts b/src/app/app.module.ts index 52d96cd..167878b 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/core/service/store-persistence.service.ts b/src/app/core/service/store-persistence.service.ts index 923fb45..e4d2eea 100644 --- a/src/app/core/service/store-persistence.service.ts +++ b/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; } } } diff --git a/src/app/core/service/task-list.service.ts b/src/app/core/service/task-list.service.ts index d79159f..76c4c9e 100644 --- a/src/app/core/service/task-list.service.ts +++ b/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; diff --git a/src/app/main-page/main-page.component.html b/src/app/main-page/main-page.component.html index b2a0180..8451980 100644 --- a/src/app/main-page/main-page.component.html +++ b/src/app/main-page/main-page.component.html @@ -1,8 +1,10 @@
-

Todo List

+ + +
diff --git a/src/app/task-lists/add-task-list/add-task-list.component.html b/src/app/task-lists/add-task-list/add-task-list.component.html new file mode 100644 index 0000000..d559bc9 --- /dev/null +++ b/src/app/task-lists/add-task-list/add-task-list.component.html @@ -0,0 +1,15 @@ +
+

+ + Nom de la liste + + + Veuillez saisir le nom de la task-list. + + +

+
+ + +
+
diff --git a/src/app/task-lists/add-task-list/add-task-list.component.scss b/src/app/task-lists/add-task-list/add-task-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/task-lists/add-task-list/add-task-list.component.ts b/src/app/task-lists/add-task-list/add-task-list.component.ts new file mode 100644 index 0000000..7b99885 --- /dev/null +++ b/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, + 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(); + } +} 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..c5f31d9 --- /dev/null +++ b/src/app/task-lists/task-lists.component.html @@ -0,0 +1,2 @@ + + 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..46d2f0e --- /dev/null +++ b/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); + } +}