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-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr> <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table> </table>
<br>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</form> </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" (scroll)="onScroll($event)">
<table mat-table [dataSource]="dataSource"> <ng-container matColumnDef="number">
<ng-container matColumnDef="number"> <th mat-header-cell *matHeaderCellDef>Number</th>
<th mat-header-cell *matHeaderCellDef>Number</th> <td mat-cell *matCellDef="let element">{{element.number}}</td>
<td mat-cell *matCellDef="let element">{{element.number}}</td> </ng-container>
</ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th> <th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td> <td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="type"> <ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>Type</th> <th mat-header-cell *matHeaderCellDef>Type</th>
<td mat-cell *matCellDef="let element">{{LayerType[element.type]}}</td> <td mat-cell *matCellDef="let element">{{LayerType[element.type]}}</td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: true"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"></tr>
</table> </table>
</div>

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