infinite list scroll

Frontend/src/app/main-view/main-view.component.html

@@ -38,13 +38,12 @@
                     {{appVersion}}
                 </a>
             </mat-nav-list>
+            <small>
+                &nbsp;&copy;&nbsp;DiunaBI {{currentDate | date: 'yyyy'}}
+            </small>
         </mat-sidenav>
-
         <mat-sidenav-content>
             <router-outlet></router-outlet>
-            <div class="footer">
-                <span>&copy;&nbsp;DiunaBI {{currentDate | date: 'yyyy'}}</span>
-            </div>
         </mat-sidenav-content>
     </mat-sidenav-container>
 </div>

Frontend/src/app/models/layer.model.ts

@@ -66,9 +66,9 @@ export class Layer extends Base {
         });
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    static getList(_http: HttpClient): any {
+    static getList(_http: HttpClient, start: number, limit: number): any {
         return new Promise((resolve, reject) => {
-            _http.get<Layer[]>(`${environment.api.url}/layers`)
+            _http.get<Layer[]>(`${environment.api.url}/layers?start=${start}&limit=${limit}`)
                 .pipe(map(data => data.map(x => new Layer().deserialize(x))))
                 .subscribe({
                     next: (data) => resolve(data),

Frontend/src/app/modules/layers/layers-list/layers-list.component.html

@@ -1,4 +1,4 @@
-<div class="list-container mat-elevation-z8">
+<div class="list-container mat-elevation-z8" (scroll)="onScroll($event)" style="overflow-y: scroll;">
     <div class="list-header">
       <mat-grid-list cols="10" rowHeight="60">
         <mat-grid-tile>
@@ -15,7 +15,8 @@
       </mat-grid-list>
     </div>
   
-    <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
+    <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" 
+      matSort class="animate">
   
       <ng-container matColumnDef="number">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Number</mat-header-cell>
@@ -35,9 +36,5 @@
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let item; columns: displayedColumns;" [routerLink]="['Detail/', item.id]"></mat-row>
     </mat-table>
-    <mat-paginator #paginator
-                   [pageSize]="500"
-                   [pageSizeOptions]="[500, 1000, 2500, 10000]">
-    </mat-paginator>
   </div>
   

Frontend/src/app/modules/layers/layers-list/layers-list.component.ts

@@ -1,6 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
 import { MatSort, MatSortable, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Layer } from 'src/app/models/layer.model';
@@ -9,33 +8,49 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
-import { NotificationsService } from 'src/app/services/notifications.service';
 
 @Component({
     selector: 'app-layers-list',
     templateUrl: './layers-list.component.html',
     styleUrls: ['./layers-list.component.scss'],
     standalone: true,
-    imports: [MatGridListModule, MatButtonModule, RouterLink, MatFormFieldModule, MatInputModule, MatTableModule, MatSortModule, MatPaginatorModule]
+    imports: [MatGridListModule, MatButtonModule, RouterLink, MatFormFieldModule, MatInputModule, MatTableModule, MatSortModule]
 })
 export class LayersListComponent implements OnInit {
   displayedColumns = ['number', 'name', 'source'];
   dataSource!: MatTableDataSource<Layer>;
 
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
 
+  start: number = 0;
+  limit: number = 50;
+  end: number = this.limit + this.start;
+  loadingInProgress: boolean = false;
+
   constructor(
     private _http: HttpClient,
   ) { }
 
+  @HostListener('document:scroll', ['$event'])
+  public async  onScroll(event: any) {
+    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 1 && !this.loadingInProgress) {
+      this.loadingInProgress = true;
+      let data: Layer[] = await Layer.getList(this._http, this.start, this.limit);
+      this.dataSource.data = this.dataSource.data.concat(data);
+      this.start = this.end;
+      this.end = this.limit + this.start;
+      setTimeout(() => {
+        this.loadingInProgress = false;
+      }, 500);
+    }
+  }
   async ngOnInit() {
-    this.dataSource = new MatTableDataSource(await Layer.getList(this._http));
-    this.dataSource.paginator = this.paginator;
+    this.dataSource = new MatTableDataSource(await Layer.getList(this._http, this.start, this.limit));
     this.dataSource.sort = this.sort;
     this.dataSource.sort.sort({ id: 'number', start: 'desc' } as MatSortable);
+    this.start = this.end;
+    this.end = this.limit + this.start;
   }
-
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
     this.dataSource.filter =  filterValue.trim().toLowerCase();
@@ -44,3 +59,4 @@ export class LayersListComponent implements OnInit {
     return item.id;
   }
 }
+

Frontend/src/environments/environment.ts

@@ -6,8 +6,8 @@ export const environment = {
   appEnvironment: "local",
   production: false,
   api: {
-    //url: "http://localhost:5400/api"
-    url: "https://diunabi.bim-it.pl/api"
+    url: "http://localhost:5400/api"
+    //url: "https://diunabi.bim-it.pl/api"
   },
   google: {
     clientId: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com"

WebAPI/Controllers/LayersController.cs

@@ -40,11 +40,13 @@ namespace WebAPI.Controllers
         }
 
         [HttpGet]
-        public IActionResult GetAll()
+        public IActionResult GetAll(int start, int limit)
         {
             try
             {
-                return Ok(db.Layers.Where(x => !x.IsDeleted).ToList());
+                return Ok(db.Layers.Where(x => !x.IsDeleted)
+                    .OrderByDescending(x => x.Number)
+                    .Skip(start).Take(limit).ToList());
             }
             catch (Exception e)
             {