common-ui/src/lib/listing/table-content/table-content.component.html
Dan Percic 8582f2e6be ng 19
2024-12-05 11:46:15 +02:00

45 lines
2.1 KiB
HTML

<div class="display-contents noselect">
<cdk-virtual-scroll-viewport
[class.no-data]="listingComponent.noContent$ | async"
[itemSize]="itemSize"
[maxBufferPx]="3000"
[minBufferPx]="1000"
id="virtual-scroll"
iqserHasScrollbar
>
<ng-container *cdkVirtualFor="let entity of listingService.sortedDisplayedEntities$ | async; trackBy: trackBy">
<!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->
<!-- this little hack below ensures that change detection won't be triggered if functions are undefined -->
@if (itemMouseEnterFn || itemMouseLeaveFn) {
<a
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
[class.help-mode-active]="helpModeService?.isHelpModeActive$ | async"
[id]="rowIdPrefix + '-' + ((entity[namePropertyKey] | snakeCase) ?? entity.id)"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<iqser-table-item
(click)="multiSelect(entity, $event)"
[entity]="$any(entity)"
[selectionEnabled]="selectionEnabled"
></iqser-table-item>
</a>
} @else {
<a
[class.help-mode-active]="helpModeService?.isHelpModeActive$ | async"
[id]="rowIdPrefix + '-' + ((entity[namePropertyKey] | snakeCase) ?? entity.id)"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<iqser-table-item
(click)="multiSelect(entity, $event)"
[entity]="$any(entity)"
[selectionEnabled]="selectionEnabled"
></iqser-table-item>
</a>
}
</ng-container>
</cdk-virtual-scroll-viewport>
</div>