florian/Todo-tool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add snack messages after some actions.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2022-03-06 15:10:07 +01:00
parent e845bfb27f
commit 3ebb1560ae
5 changed files with 212 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/active-list-tasks/task-display/task-display.component.spec.ts
View File

@@ -1,25 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TaskDisplayComponent } from './task-display.component';
describe('TaskDisplayComponent', () => {
let component: TaskDisplayComponent;
let fixture: ComponentFixture<TaskDisplayComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TaskDisplayComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(TaskDisplayComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

25
src/app/active-list-tasks/task-display/task-display.component.ts
View File

@@ -1,7 +1,9 @@
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { ConfirmDialogComponent, ConfirmDialogModel } from 'src/app/core/components/confirm-dialog/confirm-dialog.component';
import { Task } from 'src/app/core/entity/task'; import { Task } from 'src/app/core/entity/task';
import { TaskListService } from 'src/app/core/service/task-list.service'; import { TaskListService } from 'src/app/core/service/task-list.service';
@@ -21,6 +23,7 @@ export class TaskDisplayComponent implements AfterViewInit, OnDestroy {
private _subscriptions: Subscription[] = []; private _subscriptions: Subscription[] = [];
constructor( constructor(
private _dialog: MatDialog,
private _taskListService: TaskListService private _taskListService: TaskListService
) {} ) {}
@@ -74,7 +77,27 @@ export class TaskDisplayComponent implements AfterViewInit, OnDestroy {
delete(): void { delete(): void {
if (this.task) { if (this.task) {
this._taskListService.delete(this.task); const confirmData = {
title: `Supprimer la tâche ${this.task.title} ?`,
description: 'Une fois supprimé, sa description sera perdue définitivement.',
confirmButtonLabel: 'Supprimer la tâche',
confirmButtonType: 'alert'
} as ConfirmDialogModel;
const dialogRef = this._dialog.open(
ConfirmDialogComponent,
{
width: '30rem',
data: confirmData
}
);
const afterDialogCloseSubscription = dialogRef.afterClosed().subscribe(result => {
if (result && this.task) {
this._taskListService.delete(this.task);
}
})
this._subscriptions.push(afterDialogCloseSubscription);
} }
} }
} }

4
src/app/core/components/header/header.component.html
View File

@@ -18,8 +18,8 @@
<mat-icon>chevron_left</mat-icon> <mat-icon>chevron_left</mat-icon>
</button> </button>
</div> </div>
<div class="middle"> <div class="middle" *ngIf="activeTaskList">
test {{activeTaskList.name}}
</div> </div>
<div class="right"> <div class="right">
<button class="icon stroked primary" <button class="icon stroked primary"

7
src/app/core/components/header/header.component.ts
View File

@@ -13,18 +13,15 @@ import { TaskListService } from '../../service/task-list.service';
}) })
export class HeaderComponent implements OnInit, OnDestroy { export class HeaderComponent implements OnInit, OnDestroy {
private _storeSubscription?: Subscription; private _storeSubscription?: Subscription;
activeTaskList?: TaskList;
selectionMode = false; selectionMode = false;
constructor( constructor(
private _dialog: MatDialog, private _dialog: MatDialog,
private _router: Router,
private _taskListService: TaskListService private _taskListService: TaskListService
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
this._storeSubscription = this._taskListService.store$.subscribe(store => { this._storeSubscription = this._taskListService.store$.subscribe(store => {
this.activeTaskList = store.taskLists.find(taskList => store.activeTaskListId === taskList.id);
this.selectionMode = store.selectionMode; this.selectionMode = store.selectionMode;
}); });
} }
@@ -57,4 +54,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
isNoAnyTaskList(): boolean { isNoAnyTaskList(): boolean {
return this._taskListService.isNoAnyTaskList(); return this._taskListService.isNoAnyTaskList();
} }
get activeTaskList(): TaskList | undefined {
return this._taskListService.activeTaskList;
}
} }

335
src/app/core/service/task-list.service.ts
View File

@@ -7,208 +7,217 @@ import { v4 as uuidv4 } from 'uuid';
import { filter } from 'rxjs/operators'; import { filter } from 'rxjs/operators';
import { Store } from "../entity/store"; import { Store } from "../entity/store";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
import { MatSnackBar } from "@angular/material/snack-bar";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class TaskListService { export class TaskListService {
private _store: BehaviorSubject<Store> = new BehaviorSubject<Store>(undefined as unknown as Store); private _store: BehaviorSubject<Store> = new BehaviorSubject<Store>(undefined as unknown as Store);
constructor( constructor(
private _router: Router, private _router: Router,
private _storePersistenceService: StorePersistenceService private _snackBar: MatSnackBar,
) { private _storePersistenceService: StorePersistenceService
this.store$.subscribe(store => { ) {
this.saveStore(store, true); this.store$.subscribe(store => {
}); this.saveStore(store, true);
} });
}
get store$(): Observable<Store> { get store$(): Observable<Store> {
return this._store.asObservable() return this._store.asObservable()
.pipe(filter(store => !!store)); .pipe(filter(store => !!store));
} }
private get store(): Store { private get store(): Store {
let result = this._store.value; let result = this._store.value;
if (!result) { if (!result) {
result = this._storePersistenceService.load(); result = this._storePersistenceService.load();
} }
return result; return result;
} }
private saveStore(store: Store, silent: boolean = false): void { private saveStore(store: Store, silent: boolean = false): void {
if (silent) { if (silent) {
this._storePersistenceService.save(store); this._storePersistenceService.save(store);
} else { } else {
// We send the store into the subject because there is an observable on in, that saves the store at every single value. // We send the store into the subject because there is an observable on in, that saves the store at every single value.
this._store.next(store); this._store.next(store);
} }
} }
addTask(taskTitle: string): void { addTask(taskTitle: string): void {
const store = this.store; const store = this.store;
const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId); const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
if (!activeTaskList) { if (!activeTaskList) {
throw new Error("No active tasklist"); throw new Error("No active tasklist");
} }
if (!activeTaskList.tasks) { if (!activeTaskList.tasks) {
activeTaskList.tasks = []; activeTaskList.tasks = [];
} }
const newTask = { const newTask = {
id: uuidv4(), id: uuidv4(),
title: taskTitle, title: taskTitle,
creationDate: new Date(), creationDate: new Date(),
description: undefined as unknown as string description: undefined as unknown as string
} as Task; } as Task;
activeTaskList?.tasks.push(newTask); activeTaskList?.tasks.push(newTask);
this.saveStore(store); this.saveStore(store);
} this._snackBar.open('Tâche ajoutée.', 'Fermer', {duration: 2000});
}
updateTask(taskToUpdate: Task) { updateTask(taskToUpdate: Task) {
const store = this.store; const store = this.store;
const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId); const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
if (!activeTaskList) { if (!activeTaskList) {
throw new Error("No active tasklist"); throw new Error("No active tasklist");
} }
const task = activeTaskList?.tasks.find(task => task.id === taskToUpdate.id); const task = activeTaskList?.tasks.find(task => task.id === taskToUpdate.id);
if (!task) { if (!task) {
throw new Error('Unknown task to update'); throw new Error('Unknown task to update');
} }
task.title = taskToUpdate.title; task.title = taskToUpdate.title;
task.description = taskToUpdate.description; task.description = taskToUpdate.description;
// If the store is saved loudly, all views will be refreshed and the user will lose the focus of its input, // If the store is saved loudly, all views will be refreshed and the user will lose the focus of its input,
// so we save the store silently here. // so we save the store silently here.
this.saveStore(store, true); this.saveStore(store, true);
} }
delete(taskToDelete: Task) { delete(taskToDelete: Task) {
const store = this.store; const store = this.store;
const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId); const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
if (!activeTaskList) { if (!activeTaskList) {
throw new Error("No active tasklist"); throw new Error("No active tasklist");
} }
const taskIndex = activeTaskList?.tasks.findIndex(task => task.id === taskToDelete.id); const taskIndex = activeTaskList?.tasks.findIndex(task => task.id === taskToDelete.id);
if (!taskIndex && taskIndex !== 0) { if (!taskIndex && taskIndex !== 0) {
throw new Error('Unknown task to delete'); throw new Error('Unknown task to delete');
} }
activeTaskList?.tasks.splice(taskIndex, 1); activeTaskList?.tasks.splice(taskIndex, 1);
this.saveStore(store); this.saveStore(store);
} this._snackBar.open('Tâche supprimée.', 'Fermer', {duration: 2000});
}
createTaskList(taskListName: string): void { createTaskList(taskListName: string): void {
const newTaskList = { const newTaskList = {
id: uuidv4(), id: uuidv4(),
name: taskListName, name: taskListName,
tasks: [] tasks: []
} as TaskList; } as TaskList;
const store = this.store; const store = this.store;
store.taskLists.push(newTaskList); store.taskLists.push(newTaskList);
this.saveStore(store); this.saveStore(store);
} }
updateTaskListName(taskListToUpdate: TaskList): void { updateTaskListName(taskListToUpdate: TaskList): void {
const store = this.store; const store = this.store;
const matchingTaskList = store.taskLists.find(taskList => taskList.id === taskListToUpdate.id); const matchingTaskList = store.taskLists.find(taskList => taskList.id === taskListToUpdate.id);
if (matchingTaskList) { if (matchingTaskList) {
matchingTaskList.name = taskListToUpdate.name; matchingTaskList.name = taskListToUpdate.name;
this.saveStore(store); this.saveStore(store);
this.disableSelectionMode(); this.disableSelectionMode();
} }
} }
deleteSelectedTaskLists(): void { deleteSelectedTaskLists(): void {
const store = this.store; const store = this.store;
const nonSelectedTaskLists = store.taskLists.filter(taskList => !store.selectedTaskLists.some(selectedTaskList => selectedTaskList.id === taskList.id)); const nonSelectedTaskLists = store.taskLists.filter(taskList => !store.selectedTaskLists.some(selectedTaskList => selectedTaskList.id === taskList.id));
store.taskLists = nonSelectedTaskLists; store.taskLists = nonSelectedTaskLists;
this.saveStore(store); this.saveStore(store);
this.disableSelectionMode(); this.disableSelectionMode();
} }
getAll(): TaskList[] { getAll(): TaskList[] {
return this.store.taskLists ?? []; return this.store.taskLists ?? [];
} }
setActive(taskList: TaskList): void { setActive(taskList: TaskList): void {
const store = this.store; const store = this.store;
store.activeTaskListId = taskList.id; store.activeTaskListId = taskList.id;
this.saveStore(store); this.saveStore(store);
this._router.navigate(['/task-lists/active']); this._router.navigate(['/task-lists/active']);
} }
removeActiveTaskList(): void { removeActiveTaskList(): void {
const store = this.store; const store = this.store;
delete store.activeTaskListId; delete store.activeTaskListId;
this.saveStore(store); this.saveStore(store);
this._router.navigate(['/']); this._router.navigate(['/']);
} }
selectTaskList(taskList: TaskList): void { selectTaskList(taskList: TaskList): void {
this.enableSelectionMode(); this.enableSelectionMode();
const store = this.store; const store = this.store;
if (!store.selectedTaskLists) { if (!store.selectedTaskLists) {
store.selectedTaskLists = []; store.selectedTaskLists = [];
} }
if (store.selectedTaskLists.some(tl => tl.id === taskList.id)) { if (store.selectedTaskLists.some(tl => tl.id === taskList.id)) {
const selectedTaskListIndex = store.selectedTaskLists.findIndex(tl => tl.id === taskList.id); const selectedTaskListIndex = store.selectedTaskLists.findIndex(tl => tl.id === taskList.id);
store.selectedTaskLists.splice(selectedTaskListIndex, 1); store.selectedTaskLists.splice(selectedTaskListIndex, 1);
if (!store.selectedTaskLists.length) { if (!store.selectedTaskLists.length) {
store.selectionMode = false; store.selectionMode = false;
} }
this.saveStore(store); this.saveStore(store);
} else { } else {
store.selectedTaskLists.push(taskList); store.selectedTaskLists.push(taskList);
this.saveStore(store); this.saveStore(store);
} }
} }
isSelected(taskList: TaskList): boolean { isSelected(taskList: TaskList): boolean {
const store = this.store; const store = this.store;
return store.selectedTaskLists && store.selectedTaskLists.some(tl => tl.id === taskList.id); return store.selectedTaskLists && store.selectedTaskLists.some(tl => tl.id === taskList.id);
} }
isSelectionModeEnabled(): boolean { isSelectionModeEnabled(): boolean {
return this.store.selectionMode; return this.store.selectionMode;
} }
enableSelectionMode(): void { enableSelectionMode(): void {
const store = this.store; const store = this.store;
store.selectionMode = true; store.selectionMode = true;
this.saveStore(store); this.saveStore(store);
} }
disableSelectionMode(): void { disableSelectionMode(): void {
const store = this.store; const store = this.store;
store.selectionMode = false; store.selectionMode = false;
store.selectedTaskLists = []; store.selectedTaskLists = [];
this.saveStore(store); this.saveStore(store);
} }
isThereMultipleTaskListsSelected(): boolean { isThereMultipleTaskListsSelected(): boolean {
const store = this.store; const store = this.store;
return (store.selectedTaskLists?.length ?? 0) > 1; return (store.selectedTaskLists?.length ?? 0) > 1;
} }
get selectedTaskList(): TaskList { get selectedTaskList(): TaskList {
return this._store.value?.selectedTaskLists[0]; return this._store.value?.selectedTaskLists[0];
} }
isNoAnyTaskList(): boolean { isNoAnyTaskList(): boolean {
return !this.store?.taskLists?.length; return !this.store?.taskLists?.length;
} }
get activeTaskList(): TaskList | undefined {
const store = this.store;
return store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
}
} }