common-ui/src/lib/listing/table-content/table-content.component.html
2021-12-01 11:43:19 +02:00

35 lines
1.7 KiB
HTML

<div [iqserHelpMode]="helpModeKey">
<cdk-virtual-scroll-viewport
[class.no-data]="listingComponent.noContent$ | async"
[itemSize]="itemSize"
[maxBufferPx]="1500"
[minBufferPx]="300"
iqserHasScrollbar
>
<ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
<!-- 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 -->
<div
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
*ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
[class.help-mode]="helpModeService.isHelpModeActive$ | async"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
</div>
<ng-template #withoutMouseEvents>
<div
[class.help-mode]="helpModeService.isHelpModeActive$ | async"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
</div>
</ng-template>
</ng-container>
</cdk-virtual-scroll-viewport>
</div>