update filters & listing component

src/lib/filtering/filter-utils.ts

@@ -2,6 +2,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";
 
 function copySettings(oldFilters: INestedFilter[], newFilters: INestedFilter[]) {
     if (!oldFilters || !newFilters) {
@@ -33,14 +34,14 @@ export function handleCheckedValue(filter: INestedFilter): void {
     }
 }
 
-export function processFilters(oldFilters: INestedFilter[], newFilters: INestedFilter[]): INestedFilter[] {
+export function processFilters(oldFilters: INestedFilter[], newFilters: INestedFilter[]): NestedFilter[] {
     copySettings(oldFilters, newFilters);
     if (newFilters) {
         newFilters.forEach(filter => {
             handleCheckedValue(filter);
         });
     }
-    return newFilters;
+    return newFilters.map(filter => new NestedFilter(filter));
 }
 
 export function checkFilter(

src/lib/filtering/filter.service.ts

@@ -5,6 +5,8 @@ import { processFilters, toFlatFilters } from './filter-utils';
 import { IFilterGroup } from './models/filter-group.model';
 import { INestedFilter } from './models/nested-filter.model';
 import { get } from '../utils';
+import { NestedFilter } from './models/nested-filter';
+import { Filter } from './models/filter';
 
 @Injectable()
 export class FilterService {
@@ -44,7 +46,7 @@ export class FilterService {
             return console.error(`Cannot find filter group "${filterGroupSlug}"`);
         }
 
-        let found = filters.find(f => f.id === key);
+        let found: Filter | NestedFilter | undefined = filters.find(f => f.id === key);
         if (!found) {
             [found] = filters.map(f => f.children?.find(ff => ff.id === key));
         }

src/lib/filtering/models/filter-group.model.ts

@@ -1,8 +1,8 @@
 import { TemplateRef } from '@angular/core';
-import { INestedFilter } from './nested-filter.model';
+import { NestedFilter } from './nested-filter';
 
 export interface IFilterGroup {
-    filters: INestedFilter[];
+    filters: NestedFilter[];
     readonly slug: string;
     readonly label?: string;
     readonly icon?: string;

src/lib/filtering/models/filter.model.ts

@@ -1,8 +1,7 @@
-import { IListable } from '../../listing';
-
-export interface IFilter extends IListable {
+export interface IFilter {
     checked?: boolean;
     matches?: number;
+    readonly id: string;
     readonly label: string;
     readonly icon?: string;
     readonly topLevelFilter?: boolean;

src/lib/filtering/models/filter.ts

@@ -1,6 +1,7 @@
 import { IFilter } from './filter.model';
+import { IListable } from '../../listing';
 
-export class Filter implements IFilter {
+export class Filter implements IFilter, IListable {
     readonly id: string;
     readonly label: string;
     checked: boolean;

src/lib/filtering/models/nested-filter.model.ts

@@ -1,7 +1,8 @@
 import { IFilter } from './filter.model';
+import { Filter } from './filter';
 
 export interface INestedFilter extends IFilter {
     expanded?: boolean;
     indeterminate?: boolean;
-    readonly children?: IFilter[];
+    readonly children?: Filter[];
 }

src/lib/filtering/models/nested-filter.ts

@@ -1,15 +1,15 @@
 import { Filter } from './filter';
-import { IFilter, INestedFilter } from '@iqser/common-ui';
+import { IListable, INestedFilter } from '@iqser/common-ui';
 
-export class NestedFilter extends Filter implements INestedFilter {
+export class NestedFilter extends Filter implements INestedFilter, IListable {
     expanded: boolean;
     indeterminate: boolean;
-    readonly children?: IFilter[];
+    readonly children: Filter[];
 
     constructor(nestedFilter: INestedFilter) {
         super(nestedFilter);
         this.expanded = !!nestedFilter.expanded;
         this.indeterminate = !!nestedFilter.indeterminate;
-        this.children = nestedFilter.children;
+        this.children = nestedFilter.children ?? [];
     }
 }

src/lib/filtering/popup-filter/popup-filter.component.ts

@@ -8,7 +8,7 @@ import { FilterService } from '../filter.service';
 import { IFilterGroup } from '../models/filter-group.model';
 import { INestedFilter } from '../models/nested-filter.model';
 import { SearchService } from '../../search';
-import { IFilter } from '..';
+import { Filter, IFilter } from '..';
 
 const areExpandable = (nestedFilter: INestedFilter) => !!nestedFilter?.children?.length;
 const atLeastOneIsExpandable = pipe(
@@ -48,7 +48,7 @@ export class PopupFilterComponent implements OnInit {
     secondaryFilterGroup$!: Observable<IFilterGroup | undefined>;
     primaryFilters$!: Observable<IFilter[] | undefined>;
 
-    constructor(readonly filterService: FilterService, readonly searchService: SearchService<IFilter>) {}
+    constructor(readonly filterService: FilterService, readonly searchService: SearchService<Filter>) {}
 
     private get _hasActiveFilters$() {
         return combineLatest([this.primaryFilterGroup$, this.secondaryFilterGroup$]).pipe(

src/lib/listing/listing-component.directive.ts

@@ -3,7 +3,7 @@ import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { FilterService } from '../filtering';
 import { SortingService } from '../sorting';
-import { AutoUnsubscribe, KeysOf } from '../utils';
+import { AutoUnsubscribe } from '../utils';
 import { SearchService } from '../search';
 import { EntitiesService } from './services';
 import { IListable, TableColumnConfig } from './models';
@@ -29,14 +29,7 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
     abstract readonly tableColumnConfigs: readonly TableColumnConfig<T>[];
     abstract readonly tableHeaderLabel: string;
 
-    /**
-     * Key used in the *trackBy* function with **ngFor* or **cdkVirtualFor*
-     * and in the default sorting and as the search field
-     * @protected
-     * @deprecated Use searchKey getter from IListable
-     */
     private readonly _listingMode$ = new BehaviorSubject<ListingMode>(ListingModes.table);
-
     protected constructor(protected readonly _injector: Injector) {
         super();
         this.listingMode$ = this._listingMode$.asObservable();

src/lib/listing/models/listable.ts

@@ -1,5 +1,5 @@
 export interface IListable {
     readonly id: string;
-    readonly searchKey?: string;
+    readonly searchKey: string;
     readonly routerLink?: string;
 }