diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index 13d060a..158b172 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -3,4 +3,7 @@ To Do +
+ Liste active : {{activeTaskList.name}} +
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts index 5468361..e5da682 100644 --- a/src/app/core/components/header/header.component.ts +++ b/src/app/core/components/header/header.component.ts @@ -1,19 +1,32 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; +import { Subscription } from 'rxjs'; import { AddTaskListComponent } from 'src/app/task-lists/add-task-list/add-task-list.component'; +import { TaskList } from '../../entity/task-list'; +import { TaskListService } from '../../service/task-list.service'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) -export class HeaderComponent implements OnInit { +export class HeaderComponent implements OnInit, OnDestroy { + private _storeSubscription?: Subscription; + activeTaskList?: TaskList; constructor( private _dialog: MatDialog, + private _taskListService: TaskListService ) {} ngOnInit(): void { + this._storeSubscription = this._taskListService.store$.subscribe(store => { + this.activeTaskList = store.taskLists.find(taskList => store.activeTaskListId === taskList.id); + }); + } + + ngOnDestroy(): void { + this._storeSubscription?.unsubscribe(); } openNewListForm(): void { diff --git a/src/app/core/entity/store.ts b/src/app/core/entity/store.ts index c286ff1..043ed0f 100644 --- a/src/app/core/entity/store.ts +++ b/src/app/core/entity/store.ts @@ -3,4 +3,6 @@ import { TaskList } from "./task-list"; export interface Store { activeTaskListId: string | undefined; taskLists: TaskList[]; + selectedTaskLists: TaskList[]; + selectionMode: boolean; } diff --git a/src/app/core/service/store-persistence.service.ts b/src/app/core/service/store-persistence.service.ts index cfefb53..275a476 100644 --- a/src/app/core/service/store-persistence.service.ts +++ b/src/app/core/service/store-persistence.service.ts @@ -29,7 +29,9 @@ export class StorePersistenceService { } else { return { activeTaskListId: undefined, - taskLists: [] + taskLists: [], + selectedTaskLists: [], + selectionMode: false } as Store; } } diff --git a/src/app/core/service/task-list.service.ts b/src/app/core/service/task-list.service.ts index a90544d..6f91334 100644 --- a/src/app/core/service/task-list.service.ts +++ b/src/app/core/service/task-list.service.ts @@ -15,55 +15,100 @@ export class TaskListService { constructor( private _storePersistenceService: StorePersistenceService - ) { - this.store$.subscribe(store => { - this._storePersistenceService.save(store); - }); + ) { + this.store$.subscribe(store => { + this._storePersistenceService.save(store); + }); + } + + get store$(): Observable { + return this._store.asObservable() + .pipe(filter(store => !!store)); + } + + private get store(): Store { + return this._storePersistenceService.load(); + } + + addTask(task: Task): void { + const store = this.store; + const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId); + if (!activeTaskList) { + throw new Error("No active tasklist"); } - get store$(): Observable { - return this._store.asObservable() - .pipe(filter(store => !!store)); + if (!activeTaskList.tasks) { + activeTaskList.tasks = []; } - private get store(): Store { - return this._storePersistenceService.load(); + activeTaskList?.tasks.push(task); + this._store.next(store); + } + + createTaskList(taskListName: string): void { + const newTaskList = { + id: uuidv4(), + name: taskListName, + tasks: [] + } as TaskList; + + const store = this.store; + store.taskLists.push(newTaskList); + this._store.next(store); + } + + getAll(): TaskList[] { + return this.store.taskLists ?? []; + } + + setActive(taskList: TaskList) { + const store = this.store; + store.activeTaskListId = taskList.id; + this._store.next(store); + } + + selectTaskList(taskList: TaskList): void { + this.enableSelectionMode(); + + const store = this.store; + + if (!store.selectedTaskLists) { + store.selectedTaskLists = []; } - addTask(task: Task): void { - const store = this.store; - const activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId); - if (!activeTaskList) { - throw new Error("No active tasklist"); - } + if (store.selectedTaskLists.some(tl => tl.id === taskList.id)) { + const selectedTaskListIndex = store.selectedTaskLists.findIndex(tl => tl.id === taskList.id); + store.selectedTaskLists.splice(selectedTaskListIndex, 1); - if (!activeTaskList.tasks) { - activeTaskList.tasks = []; - } + if (!store.selectedTaskLists.length) { + store.selectionMode = false; + } - activeTaskList?.tasks.push(task); - this._store.next(store); - } - - createTaskList(taskListName: string): void { - const newTaskList = { - id: uuidv4(), - name: taskListName, - tasks: [] - } as TaskList; - - const store = this.store; - store.taskLists.push(newTaskList); - this._store.next(store); - } - - getAll(): TaskList[] { - return this.store.taskLists ?? []; - } - - setActive(taskList: TaskList) { - const store = this.store; - store.activeTaskListId = taskList.id; + this._store.next(store); + } else { + store.selectedTaskLists.push(taskList); this._store.next(store); } } + + isSelected(taskList: TaskList): boolean { + const store = this.store; + return store.selectedTaskLists && store.selectedTaskLists.some(tl => tl.id === taskList.id); + } + + isSelectionModeEnabled(): boolean { + return this.store.selectionMode; + } + + enableSelectionMode(): void { + const store = this.store; + store.selectionMode = true; + this._store.next(store); + } + + disableSelectionMode(): void { + const store = this.store; + store.selectionMode = true; + this._store.next(store); + } +} diff --git a/src/app/task-lists/task-lists.component.html b/src/app/task-lists/task-lists.component.html index 1a3ea09..86c618a 100644 --- a/src/app/task-lists/task-lists.component.html +++ b/src/app/task-lists/task-lists.component.html @@ -1,6 +1,6 @@
-
+
{{taskList.tasks?.length}} tâches @@ -11,5 +11,8 @@
{{taskList.name}} + + SELECTED +
diff --git a/src/app/task-lists/task-lists.component.ts b/src/app/task-lists/task-lists.component.ts index c89ac19..2dcf224 100644 --- a/src/app/task-lists/task-lists.component.ts +++ b/src/app/task-lists/task-lists.component.ts @@ -35,6 +35,22 @@ export class TaskListsComponent implements OnInit, OnDestroy { } selectActiveTaskList(taskList: TaskList): void { - this._taskListService.setActive(taskList); + if (this.isSelectionModeEnabled()) { + this._taskListService.selectTaskList(taskList); + } else { + this._taskListService.setActive(taskList); + } + } + + onRightClick(taskList: TaskList): void { + this._taskListService.selectTaskList(taskList); + } + + isSelected(taskList: TaskList): boolean { + return this._taskListService.isSelected(taskList); + } + + isSelectionModeEnabled(): boolean { + return this._taskListService.isSelectionModeEnabled(); } }