mz/DiunaBI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LayersList sticky header

Browse Source
This commit is contained in:
Michał Zieliński
2023-08-22 21:37:37 +02:00
parent 898471e8fa
commit ebf67b8d88
3 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Frontend/src/app/modules/layers/layer-detail/layer-detail.component.html
View File

@@ -46,7 +46,6 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>
<br>
</mat-card-content>
</mat-card>
</form>

34
Frontend/src/app/modules/layers/layers-list/layers-list.component.html
View File

@@ -1,21 +1,19 @@
<div class="list-container" (scroll)="onScroll($event)" style="overflow-y: scroll;">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef>Number</th>
<td mat-cell *matCellDef="let element">{{element.number}}</td>
</ng-container>
<table mat-table [dataSource]="dataSource" (scroll)="onScroll($event)">
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef>Number</th>
<td mat-cell *matCellDef="let element">{{element.number}}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>Type</th>
<td mat-cell *matCellDef="let element">{{LayerType[element.type]}}</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>Type</th>
<td mat-cell *matCellDef="let element">{{LayerType[element.type]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"></tr>
</table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"></tr>
</table>

1
Frontend/src/app/modules/layers/layers-list/layers-list.component.ts
View File

@@ -43,6 +43,7 @@ export class LayersListComponent implements OnInit {
@HostListener('document:scroll', ['$event'])
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public async onScroll(event: any) {
console.log('on scrool', event);
if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 1 && !this.loadingInProgress) {
this.loadingInProgress = true;
this.dataSource = await Layer.getList(this._http, this.start, this.limit, this.codes);