From 844e2657774200f14f79ed5c75e06f2c6c554bb4 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Tue, 24 Aug 2021 13:34:23 +0300
Subject: [PATCH] Listable by ID instead of reference

---
 src/index.ts                                         |  1 +
 src/lib/tables/entities.service.ts                   | 12 ++++++++----
 src/lib/tables/listing-component.directive.ts        |  3 ++-
 src/lib/tables/models/listable.ts                    |  3 +++
 .../tables/table-header/table-header.component.ts    |  3 ++-
 5 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/tables/models/listable.ts

diff --git a/src/index.ts b/src/index.ts
index bca8310..fef87ed 100644
--- a/src/index.ts
+++ b/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';
diff --git a/src/lib/tables/entities.service.ts b/src/lib/tables/entities.service.ts
index 99754b9..cfa79ad 100644
--- a/src/lib/tables/entities.service.ts
+++ b/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 {
diff --git a/src/lib/tables/listing-component.directive.ts b/src/lib/tables/listing-component.directive.ts
index fc5b894..f878981 100644
--- a/src/lib/tables/listing-component.directive.ts
+++ b/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);
diff --git a/src/lib/tables/models/listable.ts b/src/lib/tables/models/listable.ts
new file mode 100644
index 0000000..a6635c2
--- /dev/null
+++ b/src/lib/tables/models/listable.ts
@@ -0,0 +1,3 @@
+export interface Listable {
+    readonly id: string | number;
+}
diff --git a/src/lib/tables/table-header/table-header.component.ts b/src/lib/tables/table-header/table-header.component.ts
index 6b673bc..158e17c 100644
--- a/src/lib/tables/table-header/table-header.component.ts
+++ b/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;