Merge remote-tracking branch 'origin/css-issues'

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],
 })

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, shareDistinctLast, shareLast } from '../../utils';
 
 @Injectable()
 export class ListingService<E extends IListable> {
@@ -92,7 +92,15 @@ 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),
+            shareDistinctLast(),
+        );
     }
 
     selectAll(): void {

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]="listingService.isSelected(entity)"></iqser-round-checkbox>
-    </div>
-
-    <ng-container *ngTemplateOutlet="listingComponent.tableItemTemplate; context: { entity: entity }"></ng-container>
-
-    <div class="scrollbar-placeholder"></div>
-</ng-template>

src/lib/listing/table-content/table-content.component.scss

@@ -20,53 +20,7 @@
         .table-item {
             display: contents;
 
-            > *:not(.selection-column):not(.scrollbar-placeholder) {
+            &.disabled > iqser-table-item > div,
-                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;
-                }
-            }
-
-            &.disabled > div,
             &.disabled .cell {
                 background-color: var(--iqser-grey-2);
                 color: var(--iqser-disabled);
@@ -76,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;
@@ -117,12 +41,12 @@
                 }
 
                 .action-buttons {
-                    display: flex;
+                    display: flex !important;
                 }
             }
 
             &:hover:not(.disabled) {
-                > div,
+                .cell,
                 > * > div {
                     background-color: var(--iqser-not-disabled-table-item);
                 }
@@ -133,16 +57,14 @@
     &:hover {
         overflow-y: auto !important;
 
-        &.has-scrollbar {
+        &.has-scrollbar .table-item::ng-deep {
-            .table-item {
             .action-buttons {
                 right: 0;
                 padding-right: 13px;
             }
 
             .scrollbar-placeholder {
-                    display: none;
+                display: none !important;
-                }
             }
         }
     }

src/lib/listing/table-content/table-item/table-item.component.html

@@ -0,0 +1,7 @@
+<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selection-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>

src/lib/listing/table-content/table-item/table-item.component.scss

@@ -0,0 +1,82 @@
+@use '../../../../assets/styles/common-mixins' as mixins;
+
+:host::ng-deep {
+    display: contents;
+
+    > *:not(.selection-column):not(.scrollbar-placeholder) {
+        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;
+        }
+    }
+
+
+    .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;
+        }
+    }
+}

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);
+    }
+}