From d5652d5ef7aef495b9f4b78452af86f6f8256cc7 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Wed, 17 Nov 2021 15:51:20 +0200
Subject: [PATCH] pls fix css

---
 src/lib/listing/listing.module.ts             |  3 +-
 src/lib/listing/services/listing.service.ts   | 13 +++++-
 .../table-content.component.html              | 14 +-----
 .../table-content.component.scss              | 43 +-----------------
 .../table-item/table-item.component.html      |  7 +++
 .../table-item/table-item.component.scss      | 45 +++++++++++++++++++
 .../table-item/table-item.component.ts        | 25 +++++++++++
 7 files changed, 93 insertions(+), 57 deletions(-)
 create mode 100644 src/lib/listing/table-content/table-item/table-item.component.html
 create mode 100644 src/lib/listing/table-content/table-item/table-item.component.scss
 create mode 100644 src/lib/listing/table-content/table-item/table-item.component.ts

diff --git a/src/lib/listing/listing.module.ts b/src/lib/listing/listing.module.ts
index 0fa3b7e..2efa848 100644
--- a/src/lib/listing/listing.module.ts
+++ b/src/lib/listing/listing.module.ts
@@ -20,6 +20,7 @@ import { PageHeaderComponent } from './page-header/page-header.component';
 import { IqserButtonsModule } from '../buttons';
 import { IqserHelpModeModule } from '../help-mode';
 import { TableContentComponent } from './table-content/table-content.component';
+import { TableItemComponent } from './table-content/table-item/table-item.component';
 
 const matModules = [MatTooltipModule];
 const components = [
@@ -46,7 +47,7 @@ const modules = [
 const utils = [SyncWidthDirective];
 
 @NgModule({
-    declarations: [...components, ...utils, TableContentComponent],
+    declarations: [...components, ...utils, TableContentComponent, TableItemComponent],
     exports: [...components, ...utils],
     imports: [CommonModule, ...modules, ...matModules],
 })
diff --git a/src/lib/listing/services/listing.service.ts b/src/lib/listing/services/listing.service.ts
index 545692a..ef856d5 100644
--- a/src/lib/listing/services/listing.service.ts
+++ b/src/lib/listing/services/listing.service.ts
@@ -5,7 +5,7 @@ import { FilterService, getFilteredEntities } from '../../filtering';
 import { SearchService } from '../../search';
 import { IListable } from '../models';
 import { EntitiesService } from './entities.service';
-import { getLength, shareDistinctLast, shareLast } from '../../utils';
+import { any, getLength, log, shareDistinctLast, shareLast } from '../../utils';
 
 @Injectable()
 export class ListingService<E extends IListable> {
@@ -92,7 +92,16 @@ export class ListingService<E extends IListable> {
     }
 
     isSelected(entity: E): boolean {
-        return this.selected.indexOf(entity) !== -1;
+        console.log('is selected');
+        return this.selectedIds.indexOf(entity.id) !== -1;
+    }
+
+    isSelected$(entity: E): Observable<boolean> {
+        return this._selected$.pipe(
+            any(selectedId => selectedId === entity.id),
+            log(),
+            shareDistinctLast(),
+        );
     }
 
     selectAll(): void {
diff --git a/src/lib/listing/table-content/table-content.component.html b/src/lib/listing/table-content/table-content.component.html
index e360c0f..877be79 100644
--- a/src/lib/listing/table-content/table-content.component.html
+++ b/src/lib/listing/table-content/table-content.component.html
@@ -15,23 +15,13 @@
             [ngClass]="getTableItemClasses(entity)"
             [routerLink]="entity.routerLink"
         >
-            <ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
+            <iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
         </div>
 
         <ng-template #withoutMouseEvents>
             <div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
-                <ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
+                <iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
             </div>
         </ng-template>
     </ng-container>
 </cdk-virtual-scroll-viewport>
-
-<ng-template #tableItem let-entity="entity">
-    <div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selection-column">
-        <iqser-round-checkbox [active]="listingComponent.isSelected(entity)"></iqser-round-checkbox>
-    </div>
-
-    <ng-container *ngTemplateOutlet="listingComponent.tableItemTemplate; context: { entity: entity }"></ng-container>
-
-    <div class="scrollbar-placeholder"></div>
-</ng-template>
diff --git a/src/lib/listing/table-content/table-content.component.scss b/src/lib/listing/table-content/table-content.component.scss
index 7015a81..e15102d 100644
--- a/src/lib/listing/table-content/table-content.component.scss
+++ b/src/lib/listing/table-content/table-content.component.scss
@@ -24,48 +24,7 @@
                 display: contents;
             }
 
-            > div,
-            .cell {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                position: relative;
-                box-sizing: border-box;
-                border-bottom: 1px solid var(--iqser-separator);
-                height: var(--itemSize);
-                padding: 0 10px;
-
-                &.center {
-                    align-items: center;
-                    justify-content: center;
-                }
-            }
-
-            .cell {
-                min-width: 110px;
-
-                &:first-of-type {
-                    padding: 0 24px;
-                }
-            }
-
-            .selection-column {
-                padding-right: 0 !important;
-
-                iqser-round-checkbox .wrapper {
-                    opacity: 0;
-                    transition: opacity 0.2s;
-
-                    &.active {
-                        opacity: 1;
-                    }
-                }
-
-                & + * > .cell:first-of-type {
-                    padding: 0 10px;
-                }
-            }
-
+            > iqser-table-item
             &.disabled > div,
             &.disabled .cell {
                 background-color: var(--iqser-grey-2);
diff --git a/src/lib/listing/table-content/table-item/table-item.component.html b/src/lib/listing/table-content/table-item/table-item.component.html
new file mode 100644
index 0000000..d06cba6
--- /dev/null
+++ b/src/lib/listing/table-content/table-item/table-item.component.html
@@ -0,0 +1,7 @@
+<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selec tion-column">
+    <iqser-round-checkbox [active]="isSelected$ | async"></iqser-round-checkbox>
+</div>
+
+<ng-container *ngTemplateOutlet="listingComponent.tableItemTemplate; context: { entity: entity }"></ng-container>
+
+<div class="scrollbar-placeholder"></div>
diff --git a/src/lib/listing/table-content/table-item/table-item.component.scss b/src/lib/listing/table-content/table-item/table-item.component.scss
new file mode 100644
index 0000000..881031c
--- /dev/null
+++ b/src/lib/listing/table-content/table-item/table-item.component.scss
@@ -0,0 +1,45 @@
+:host {
+    display: contents;
+}
+
+> div,
+.cell {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--iqser-separator);
+    height: var(--itemSize);
+    padding: 0 10px;
+
+    &.center {
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.cell {
+    min-width: 110px;
+
+    &:first-of-type {
+        padding: 0 24px;
+    }
+}
+
+.selection-column {
+    padding-right: 0 !important;
+
+    iqser-round-checkbox .wrapper {
+        opacity: 0;
+        transition: opacity 0.2s;
+
+        &.active {
+            opacity: 1;
+        }
+    }
+
+    & + * > .cell:first-of-type {
+        padding: 0 10px;
+    }
+}
diff --git a/src/lib/listing/table-content/table-item/table-item.component.ts b/src/lib/listing/table-content/table-item/table-item.component.ts
new file mode 100644
index 0000000..5a2988d
--- /dev/null
+++ b/src/lib/listing/table-content/table-item/table-item.component.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, forwardRef, Inject, Input, OnInit } from '@angular/core';
+import { IListable, ListingComponent, ListingService } from '@iqser/common-ui';
+import { Observable } from 'rxjs';
+
+@Component({
+    selector: 'iqser-table-item',
+    templateUrl: './table-item.component.html',
+    styleUrls: ['./table-item.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableItemComponent<T extends IListable> implements OnInit {
+    @Input() entity!: T;
+    @Input() selectionEnabled = false;
+
+    isSelected$!: Observable<boolean>;
+
+    constructor(
+        @Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
+        readonly listingService: ListingService<T>,
+    ) {}
+
+    ngOnInit(): void {
+        this.isSelected$ = this.listingService.isSelected$(this.entity);
+    }
+}