diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ebbf788..507b1a5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,7 +24,8 @@ import { TaskListService } from './core/service/task-list.service'; import { StorePersistenceService } from './core/service/store-persistence.service'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatRippleModule} from '@angular/material/core'; -import { RenameTaskListComponent } from './task-lists/rename-task-list/rename-task-list.component'; +import { RenameTaskListComponent } from './task-lists/rename-task-list/rename-task-list.component'; +import { ConfirmDialogComponent } from './core/components/confirm-dialog/confirm-dialog.component'; @NgModule({ declarations: [ @@ -37,7 +38,8 @@ import { RenameTaskListComponent } from './task-lists/rename-task-list/rename-ta HeaderComponent, ActiveListTasksComponent, TaskDisplayComponent, - RenameTaskListComponent + RenameTaskListComponent, + ConfirmDialogComponent ], imports: [ BrowserModule, diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.html b/src/app/core/components/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 0000000..ca0e6c7 --- /dev/null +++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.html @@ -0,0 +1,17 @@ +
+
+ help_outline +
+
{{data.title}}
+
{{data.description}}
+
+
+
+ + +
+
\ No newline at end of file diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.scss b/src/app/core/components/confirm-dialog/confirm-dialog.component.scss new file mode 100644 index 0000000..92988d0 --- /dev/null +++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.scss @@ -0,0 +1,45 @@ +.container { + .body { + display: flex; + flex-direction: row; + flex-grow: 1; + align-items: center; + + mat-icon { + $iconSize: 4rem; + font-size: $iconSize; + width: $iconSize; + height: $iconSize; + margin: 0 1rem; + } + + .message { + .title { + display: flex; + flex-grow: 1; + justify-content: center; + text-align: center; + font-size: 1.5rem; + margin: .5rem; + } + + .description { + display: flex; + flex-grow: 1; + justify-content: center; + text-align: center; + font-size: 1.2rem; + } + } + } + .actions { + margin-top: 1rem; + display: flex; + justify-content: space-between; + + > * { + flex: 1 1 45%; + max-width: 45%; + } + } +} \ No newline at end of file diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts b/src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts new file mode 100644 index 0000000..fe08dc5 --- /dev/null +++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfirmDialogComponent } from './confirm-dialog.component'; + +describe('ConfirmDialogComponent', () => { + let component: ConfirmDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ConfirmDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.ts b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts new file mode 100644 index 0000000..fcce01c --- /dev/null +++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts @@ -0,0 +1,31 @@ +import { Component, Inject } from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; + +export interface ConfirmDialogModel { + title: string; + description: string; + confirmButtonLabel: string; + confirmButtonType: '' | 'alert'; +} + +@Component({ + selector: 'app-confirm-dialog', + templateUrl: './confirm-dialog.component.html', + styleUrls: ['./confirm-dialog.component.scss'] +}) +export class ConfirmDialogComponent { + + constructor( + @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogModel, + private _dialogRef: MatDialogRef + ) {} + + cancel(): void { + this._dialogRef.close(); + } + + confirm(): void { + this._dialogRef.close(true); + } + +} diff --git a/src/app/core/service/task-list.service.ts b/src/app/core/service/task-list.service.ts index 654a794..8b2913b 100644 --- a/src/app/core/service/task-list.service.ts +++ b/src/app/core/service/task-list.service.ts @@ -127,6 +127,14 @@ export class TaskListService { } } + deleteSelectedTaskLists(): void { + const store = this.store; + const nonSelectedTaskLists = store.taskLists.filter(taskList => !store.selectedTaskLists.some(selectedTaskList => selectedTaskList.id === taskList.id)); + store.taskLists = nonSelectedTaskLists; + this.saveStore(store); + this.disableSelectionMode(); + } + getAll(): TaskList[] { return this.store.taskLists ?? []; } diff --git a/src/app/task-lists/task-lists.component.html b/src/app/task-lists/task-lists.component.html index e5a21f3..659b0af 100644 --- a/src/app/task-lists/task-lists.component.html +++ b/src/app/task-lists/task-lists.component.html @@ -1,4 +1,7 @@
+
+ Aucune task-list. +
Renommer - +
\ 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 index 21aaa5a..41d104b 100644 --- a/src/app/task-lists/task-lists.component.scss +++ b/src/app/task-lists/task-lists.component.scss @@ -1,3 +1,10 @@ +.no-task-list { + display: flex; + margin: auto; + margin-top: 3rem; + font-size: 1.5rem; +} + .task-lists { display: flex; flex-direction: row; diff --git a/src/app/task-lists/task-lists.component.ts b/src/app/task-lists/task-lists.component.ts index 33bd7e5..1f984bb 100644 --- a/src/app/task-lists/task-lists.component.ts +++ b/src/app/task-lists/task-lists.component.ts @@ -1,6 +1,7 @@ import { Component, NgZone, OnDestroy, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { Subscription } from 'rxjs'; +import { ConfirmDialogComponent, ConfirmDialogModel } from '../core/components/confirm-dialog/confirm-dialog.component'; import { TaskList } from '../core/entity/task-list'; import { TaskListService } from '../core/service/task-list.service'; import { AddTaskListComponent } from './add-task-list/add-task-list.component'; @@ -14,6 +15,7 @@ import { RenameTaskListComponent } from './rename-task-list/rename-task-list.com export class TaskListsComponent implements OnInit, OnDestroy { taskLists: TaskList[] = []; private _storeSubscription?: Subscription; + private _subscriptions: Subscription[] = []; constructor( private _dialog: MatDialog, @@ -22,13 +24,14 @@ export class TaskListsComponent implements OnInit, OnDestroy { ngOnInit(): void { this.taskLists = this._taskListService.getAll(); - this._storeSubscription = this._taskListService.store$.subscribe(store => { + const storeSubscription = this._taskListService.store$.subscribe(store => { this.taskLists = store.taskLists; }); + this._subscriptions.push(storeSubscription); } ngOnDestroy(): void { - this._storeSubscription?.unsubscribe(); + this._subscriptions.forEach(subscription => subscription.unsubscribe()); } selectActiveTaskList(taskList: TaskList): void { @@ -63,4 +66,28 @@ export class TaskListsComponent implements OnInit, OnDestroy { } ); } + + deleteSelectedTaskLists(): void { + const confirmData = { + title: 'Supprimer les task-lists sélectionnées ?', + description: 'Une fois supprimées, les task-lists seront perdues définitivement.', + confirmButtonLabel: 'Supprimer les task-lists', + confirmButtonType: 'alert' + } as ConfirmDialogModel; + + const dialogRef = this._dialog.open( + ConfirmDialogComponent, + { + width: '30rem', + data: confirmData + } + ); + + const afterDialogCloseSubscription = dialogRef.afterClosed().subscribe(result => { + if (result) { + this._taskListService.deleteSelectedTaskLists(); + } + }) + this._subscriptions.push(afterDialogCloseSubscription); + } }