From 69a9b200c58c99954862b0276d6186e7e8b552a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Zieli=C5=84ski?= Date: Sun, 25 Jun 2023 17:03:17 +0200 Subject: [PATCH] infinite list scroll --- .../app/main-view/main-view.component.html | 7 ++-- Frontend/src/app/models/layer.model.ts | 4 +-- .../layers-list/layers-list.component.html | 9 ++---- .../layers-list/layers-list.component.ts | 32 ++++++++++++++----- Frontend/src/environments/environment.ts | 4 +-- WebAPI/Controllers/LayersController.cs | 6 ++-- 6 files changed, 38 insertions(+), 24 deletions(-) diff --git a/Frontend/src/app/main-view/main-view.component.html b/Frontend/src/app/main-view/main-view.component.html index 4799714..b76379e 100644 --- a/Frontend/src/app/main-view/main-view.component.html +++ b/Frontend/src/app/main-view/main-view.component.html @@ -38,13 +38,12 @@ {{appVersion}} + +  © DiunaBI {{currentDate | date: 'yyyy'}} + - -
- © DiunaBI {{currentDate | date: 'yyyy'}} -
\ No newline at end of file diff --git a/Frontend/src/app/models/layer.model.ts b/Frontend/src/app/models/layer.model.ts index b20f8b3..3e81e4a 100644 --- a/Frontend/src/app/models/layer.model.ts +++ b/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(`${environment.api.url}/layers`) + _http.get(`${environment.api.url}/layers?start=${start}&limit=${limit}`) .pipe(map(data => data.map(x => new Layer().deserialize(x)))) .subscribe({ next: (data) => resolve(data), diff --git a/Frontend/src/app/modules/layers/layers-list/layers-list.component.html b/Frontend/src/app/modules/layers/layers-list/layers-list.component.html index 2970bfe..817ea62 100644 --- a/Frontend/src/app/modules/layers/layers-list/layers-list.component.html +++ b/Frontend/src/app/modules/layers/layers-list/layers-list.component.html @@ -1,4 +1,4 @@ -
+
@@ -15,7 +15,8 @@
- + Number @@ -35,9 +36,5 @@ - -
\ No newline at end of file diff --git a/Frontend/src/app/modules/layers/layers-list/layers-list.component.ts b/Frontend/src/app/modules/layers/layers-list/layers-list.component.ts index b513f1e..fa2389e 100644 --- a/Frontend/src/app/modules/layers/layers-list/layers-list.component.ts +++ b/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; - @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; } } + diff --git a/Frontend/src/environments/environment.ts b/Frontend/src/environments/environment.ts index a1bc68a..09cfd9d 100644 --- a/Frontend/src/environments/environment.ts +++ b/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" diff --git a/WebAPI/Controllers/LayersController.cs b/WebAPI/Controllers/LayersController.cs index b8dbd92..7da7406 100644 --- a/WebAPI/Controllers/LayersController.cs +++ b/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) {