fix calling method in ngif, create addFilterGroups

src/lib/filtering/filter-utils.ts

@@ -3,6 +3,7 @@ import { INestedFilter } from './models/nested-filter.model';
 import { IFilterGroup } from './models/filter-group.model';
 import { IFilter } from './models/filter.model';
 import { NestedFilter } from './models/nested-filter';
+import { IListable } from '../listing';
 
 function copySettings(oldFilters: INestedFilter[], newFilters: INestedFilter[]) {
     if (!oldFilters || !newFilters) {
@@ -52,7 +53,7 @@ export function checkFilter(
     validateArgs: any = [],
     matchAll = false,
 ): boolean {
-    const hasChecked = filters.find(f => f.checked);
+    const hasChecked = filters.some(f => f.checked);
 
     if (!hasChecked) {
         return true;
@@ -77,7 +78,7 @@ export const keyChecker =
     (entity: Record<string, string>, filter: INestedFilter): boolean =>
         entity[key] === filter.id;
 
-export function getFilteredEntities<T>(entities: T[], filters: IFilterGroup[]): T[] {
+export function getFilteredEntities<T extends IListable>(entities: T[], filters: IFilterGroup[]): T[] {
     const filteredEntities: T[] = [];
     entities.forEach(entity => {
         let add = true;

src/lib/filtering/filter.service.ts

@@ -73,6 +73,21 @@ export class FilterService {
         this._filterGroups$.next([...this.filterGroups.filter(f => f.slug !== newGroup.slug), newGroup]);
     }
 
+    addFilterGroups(values: IFilterGroup[]): void {
+        const newFilters = values.map(value => {
+            const oldFilters = this.getGroup(value.slug)?.filters;
+            if (!oldFilters) {
+                return value;
+            }
+
+            return { ...value, filters: processFilters(oldFilters, value.filters) };
+        });
+
+        const filterSlugs = newFilters.map(f => f.slug);
+
+        this._filterGroups$.next([...this.filterGroups.filter(f => !filterSlugs.includes(f.slug)), ...newFilters]);
+    }
+
     getGroup(slug: string): IFilterGroup | undefined {
         return this.filterGroups.find(group => group.slug === slug);
     }
@@ -82,7 +97,10 @@ export class FilterService {
     }
 
     getGroup$(slug: string): Observable<IFilterGroup | undefined> {
-        return this.filterGroups$.pipe(get(group => group.slug === slug));
+        return this.filterGroups$.pipe(
+            get(group => group.slug === slug),
+            shareReplay(),
+        );
     }
 
     reset(): void {

src/lib/listing/services/listing.service.ts

@@ -27,7 +27,7 @@ export class ListingService<E extends IListable> extends AutoUnsubscribe {
     ) {
         super();
 
-        this.displayed$ = this._getDisplayed$.pipe(shareReplay());
+        this.displayed$ = this._getDisplayed$;
         this.displayedLength$ = this.displayed$.pipe(getLength, distinctUntilChanged(), shareReplay());
 
         this.selected$ = this._selected$.asObservable().pipe(shareReplay());

src/lib/listing/table-header/table-header.component.html

@@ -12,7 +12,7 @@
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
-    <iqser-quick-filters *ngIf="filterService.getFilterModels$('quickFilters') | async"></iqser-quick-filters>
+    <iqser-quick-filters *ngIf="quickFilters$ | async"></iqser-quick-filters>
 
     <!--    Custom content-->
     <ng-content></ng-content>

src/lib/listing/table-header/table-header.component.ts

@@ -21,6 +21,8 @@ export class TableHeaderComponent<T extends IListable> {
     @Input() totalSize?: number;
     @Input() bulkActions?: TemplateRef<unknown>;
 
+    readonly quickFilters$ = this.filterService.getFilterModels$('quickFilters');
+
     constructor(
         readonly entitiesService: EntitiesService<T>,
         readonly listingService: ListingService<T>,