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 1/2] 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);
+    }
+}

From 358fa42ebd474e92d06c20a4a1fe8bd02e3433e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 17 Nov 2021 16:37:09 +0200
Subject: [PATCH 2/2] Fixed css stuff

---
 src/lib/listing/services/listing.service.ts   |   3 +-
 .../table-content.component.scss              |  57 ++--------
 .../table-item/table-item.component.html      |   2 +-
 .../table-item/table-item.component.scss      | 107 ++++++++++++------
 4 files changed, 84 insertions(+), 85 deletions(-)

diff --git a/src/lib/listing/services/listing.service.ts b/src/lib/listing/services/listing.service.ts
index ef856d5..4f348fd 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 { any, getLength, log, shareDistinctLast, shareLast } from '../../utils';
+import { any, getLength, shareDistinctLast, shareLast } from '../../utils';
 
 @Injectable()
 export class ListingService<E extends IListable> {
@@ -99,7 +99,6 @@ export class ListingService<E extends IListable> {
     isSelected$(entity: E): Observable<boolean> {
         return this._selected$.pipe(
             any(selectedId => selectedId === entity.id),
-            log(),
             shareDistinctLast(),
         );
     }
diff --git a/src/lib/listing/table-content/table-content.component.scss b/src/lib/listing/table-content/table-content.component.scss
index e15102d..3ad7b2c 100644
--- a/src/lib/listing/table-content/table-content.component.scss
+++ b/src/lib/listing/table-content/table-content.component.scss
@@ -20,12 +20,7 @@
         .table-item {
             display: contents;
 
-            > *:not(.selection-column):not(.scrollbar-placeholder) {
-                display: contents;
-            }
-
-            > iqser-table-item
-            &.disabled > div,
+            &.disabled > iqser-table-item > div,
             &.disabled .cell {
                 background-color: var(--iqser-grey-2);
                 color: var(--iqser-disabled);
@@ -35,36 +30,6 @@
                 }
             }
 
-            .table-item-title {
-                font-weight: 600;
-                @include mixins.line-clamp(1);
-                width: fit-content;
-                max-width: 100%;
-            }
-
-            .action-buttons {
-                position: absolute;
-                display: none;
-                right: -11px;
-                top: 0;
-                height: 100%;
-                width: fit-content;
-                flex-direction: row;
-                align-items: center;
-                padding-left: 100px;
-                padding-right: 21px;
-                z-index: 1;
-                background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);
-
-                mat-icon {
-                    width: 14px;
-                }
-
-                iqser-circle-button:not(:last-child) {
-                    margin-right: 2px;
-                }
-            }
-
             input,
             mat-select {
                 margin-top: 0;
@@ -76,12 +41,12 @@
                 }
 
                 .action-buttons {
-                    display: flex;
+                    display: flex !important;
                 }
             }
 
             &:hover:not(.disabled) {
-                > div,
+                .cell,
                 > * > div {
                     background-color: var(--iqser-not-disabled-table-item);
                 }
@@ -92,16 +57,14 @@
     &:hover {
         overflow-y: auto !important;
 
-        &.has-scrollbar {
-            .table-item {
-                .action-buttons {
-                    right: 0;
-                    padding-right: 13px;
-                }
+        &.has-scrollbar .table-item::ng-deep {
+            .action-buttons {
+                right: 0;
+                padding-right: 13px;
+            }
 
-                .scrollbar-placeholder {
-                    display: none;
-                }
+            .scrollbar-placeholder {
+                display: none !important;
             }
         }
     }
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
index d06cba6..2a34876 100644
--- a/src/lib/listing/table-content/table-item/table-item.component.html
+++ b/src/lib/listing/table-content/table-item/table-item.component.html
@@ -1,4 +1,4 @@
-<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selec tion-column">
+<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selection-column">
     <iqser-round-checkbox [active]="isSelected$ | async"></iqser-round-checkbox>
 </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
index 881031c..854f246 100644
--- a/src/lib/listing/table-content/table-item/table-item.component.scss
+++ b/src/lib/listing/table-content/table-item/table-item.component.scss
@@ -1,45 +1,82 @@
-:host {
+@use '../../../../assets/styles/common-mixins' as mixins;
+
+:host::ng-deep {
     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;
+    > *:not(.selection-column):not(.scrollbar-placeholder) {
+        display: contents;
+    }
 
-    &.center {
-        align-items: center;
+    > 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;
 
-.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;
+        &.center {
+            align-items: center;
+            justify-content: center;
         }
     }
 
-    & + * > .cell:first-of-type {
-        padding: 0 10px;
+    .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;
+        }
+    }
+
+
+    .table-item-title {
+        font-weight: 600;
+        @include mixins.line-clamp(1);
+        width: fit-content;
+        max-width: 100%;
+    }
+
+    .action-buttons {
+        position: absolute;
+        display: none !important;
+        right: -11px;
+        top: 0;
+        height: 100%;
+        width: fit-content;
+        flex-direction: row;
+        align-items: center;
+        padding-left: 100px;
+        padding-right: 21px;
+        z-index: 1;
+        background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);
+
+        mat-icon {
+            width: 14px;
+        }
+
+        iqser-circle-button:not(:last-child) {
+            margin-right: 2px;
+        }
     }
 }