Listable by ID instead of reference

src/index.ts

@@ -35,3 +35,4 @@ export * from './lib/inputs/editable-input/editable-input.component';
 export * from './lib/inputs/input-with-action/input-with-action.component';
 export * from './lib/buttons';
 export * from './lib/help-mode';
+export * from './lib/tables/models/listable';

src/lib/tables/entities.service.ts

@@ -4,12 +4,13 @@ import { distinctUntilChanged, map, tap } from 'rxjs/operators';
 import { FilterService } from '../filtering/filter.service';
 import { SearchService } from '../search/search.service';
 import { getFilteredEntities } from '../filtering/filter-utils';
+import { Listable } from './models/listable';
 
 const toLengthValue = (entities: unknown[]) => entities?.length ?? 0;
 const getLength = pipe(map(toLengthValue), distinctUntilChanged());
 
 @Injectable()
-export class EntitiesService<T> {
+export class EntitiesService<T extends Listable> {
     private readonly _all$ = new BehaviorSubject<T[]>([]);
     readonly all$ = this._all$.asObservable();
     readonly allLength$ = this._all$.pipe(getLength);
@@ -18,8 +19,9 @@ export class EntitiesService<T> {
     readonly displayed$ = this._getDisplayed$;
     readonly displayedLength$ = this.displayed$.pipe(getLength);
 
-    private readonly _selected$ = new BehaviorSubject<T[]>([]);
+    private readonly _selected$ = new BehaviorSubject<(string | number)[]>([]);
     readonly selected$ = this._selected$.asObservable();
+    readonly selectedEntities$ = this._selected$.asObservable().pipe(map(() => this.selected));
     readonly selectedLength$ = this._selected$.pipe(getLength);
 
     readonly noData$ = this._noData$;
@@ -34,7 +36,8 @@ export class EntitiesService<T> {
     }
 
     get selected(): T[] {
-        return Object.values(this._selected$.getValue());
+        const selectedIds = Object.values(this._selected$.getValue());
+        return this.all.filter(a => selectedIds.indexOf(a.id) !== -1);
     }
 
     private get _getDisplayed$(): Observable<T[]> {
@@ -87,7 +90,8 @@ export class EntitiesService<T> {
     }
 
     setSelected(newEntities: T[]): void {
-        this._selected$.next(newEntities);
+        const selectedIds = newEntities.map(e => e.id);
+        this._selected$.next(selectedIds);
     }
 
     isSelected(entity: T): boolean {

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

@@ -10,11 +10,12 @@ import { SearchService } from '../search/search.service';
 import { KeysOf } from '../utils/types/utility-types';
 import { TableColumnConfig } from './models/table-column-config.model';
 import { EntitiesService } from './entities.service';
+import { Listable } from './models/listable';
 
 export const DefaultListingServices = [FilterService, SearchService, EntitiesService, SortingService] as const;
 
 @Directive()
-export abstract class ListingComponent<T> extends AutoUnsubscribe implements OnDestroy {
+export abstract class ListingComponent<T extends Listable> extends AutoUnsubscribe implements OnDestroy {
     readonly filterService = this._injector.get(FilterService);
     readonly searchService = this._injector.get<SearchService<T>>(SearchService);
     readonly sortingService = this._injector.get<SortingService<T>>(SortingService);

src/lib/tables/models/listable.ts

@@ -0,0 +1,3 @@
+export interface Listable {
+    readonly id: string | number;
+}

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

@@ -3,6 +3,7 @@ import { Required } from '../../utils/decorators/required.decorator';
 import { FilterService } from '../../filtering/filter.service';
 import { TableColumnConfig } from '../models/table-column-config.model';
 import { EntitiesService } from '../entities.service';
+import { Listable } from '../models/listable';
 
 @Component({
     selector: 'iqser-table-header',
@@ -10,7 +11,7 @@ import { EntitiesService } from '../entities.service';
     styleUrls: ['./table-header.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TableHeaderComponent<T> {
+export class TableHeaderComponent<T extends Listable> {
     @Input() @Required() tableHeaderLabel!: string;
     @Input() @Required() tableColumnConfigs!: readonly TableColumnConfig<T>[];
     @Input() hasEmptyColumn = false;