Fix categories loading in side menu component.
This commit is contained in:
@@ -2,6 +2,8 @@ import { Injectable, OnDestroy, inject } from '@angular/core';
|
||||
import { CategoryService } from '../../core/service/category.service';
|
||||
import { BehaviorSubject, Observable, Subscription, map } from 'rxjs';
|
||||
import { Category } from '../../core/rest-services/category/model/category';
|
||||
import { CategoryRestService } from '../../core/rest-services/category/category.rest-service';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
|
||||
export interface DisplayableCategory {
|
||||
id: string;
|
||||
@@ -19,26 +21,28 @@ export interface DisplayableSubCategory {
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class SideMenuService implements OnDestroy {
|
||||
private categoryService = inject(CategoryService);
|
||||
private categoryRestService = inject(CategoryRestService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
private categoriesSubject = new BehaviorSubject<DisplayableCategory[]>([]);
|
||||
private categoriesSubscription: Subscription | undefined;
|
||||
private isLoadingSubject = new BehaviorSubject<boolean>(false);
|
||||
private isLoadedSubject = new BehaviorSubject<boolean>(false);
|
||||
|
||||
constructor() {
|
||||
this.categoriesSubscription = this.categoryService.categories$
|
||||
.pipe(
|
||||
map(categories =>
|
||||
categories
|
||||
.filter(category => category.subCategories?.length)
|
||||
.map(category =>
|
||||
this.mapToDisplayableCategory(category)
|
||||
)
|
||||
)
|
||||
)
|
||||
.subscribe(categories => this.categoriesSubject.next(categories));
|
||||
// this.categoriesSubscription = this.categoryService.categories$
|
||||
// .pipe(
|
||||
// map(categories =>
|
||||
// categories
|
||||
// .filter(category => category.subCategories?.length)
|
||||
// .map(category =>
|
||||
// this.mapToDisplayableCategory(category)
|
||||
// )
|
||||
// )
|
||||
// )
|
||||
// .subscribe(categories => this.categoriesSubject.next(categories));
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.categoriesSubscription?.unsubscribe();
|
||||
// this.categoriesSubscription?.unsubscribe();
|
||||
}
|
||||
|
||||
private mapToDisplayableCategory(category: Category): DisplayableCategory {
|
||||
@@ -57,10 +61,6 @@ export class SideMenuService implements OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
get categories$(): Observable<DisplayableCategory[]> {
|
||||
return this.categoriesSubject.asObservable();
|
||||
}
|
||||
|
||||
private get categories(): DisplayableCategory[] {
|
||||
return this.categoriesSubject.value;
|
||||
}
|
||||
@@ -69,6 +69,36 @@ export class SideMenuService implements OnDestroy {
|
||||
this.categoriesSubject.next(categories);
|
||||
}
|
||||
|
||||
get categories$(): Observable<DisplayableCategory[]> {
|
||||
return this.categoriesSubject.asObservable();
|
||||
}
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.isLoadingSubject.asObservable();
|
||||
}
|
||||
|
||||
loadCategories(): void {
|
||||
this.isLoadingSubject.next(true);
|
||||
this.isLoadedSubject.next(false);
|
||||
|
||||
this.categoryRestService.getCategories()
|
||||
.then(categories => {
|
||||
const displayableCategories = categories
|
||||
.filter(category => category.subCategories?.length)
|
||||
.map(category => this.mapToDisplayableCategory(category));
|
||||
this.categoriesSubject.next(displayableCategories);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = "An error occured while loading categories.";
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoadingSubject.next(false);
|
||||
this.isLoadedSubject.next(true);
|
||||
});
|
||||
}
|
||||
|
||||
setOpenned(category: DisplayableCategory): void {
|
||||
const categories = this.categories;
|
||||
const matchingCategory = categories.find(categoryTemp => categoryTemp.id === category.id);
|
||||
|
||||
Reference in New Issue
Block a user