diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index db8ce67263eedc9b6fb2638225526f893a7299c3..84956ea1870f36dfd8b0c488b8c7450450a8a919 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,7 +1,6 @@ <div fxLayout="row" class="content-container"> <app-structure-list (searchEvent)="getStructures($event)" - (loadMoreStructures)="loadMoreStructures()" [structureList]="structures" [location]="currentLocation" (displayMapMarkerId)="setMapMarkerId($event)" diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 873be218ab9441be8e729aa92a2e4d01cb8c93a7..9d12bcb5eb330c3f390cccc10adb6c489c3fee70 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -21,9 +21,6 @@ export class HomeComponent implements OnInit { public selectedMarkerId: number; public geolocation = false; public currentLocation: GeoJson; - public pageStructures = 0; - public structuresChunked: Structure[][] = []; - private chunck = 10; public currentStructure: Structure; constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {} @@ -36,10 +33,6 @@ export class HomeComponent implements OnInit { } public getStructures(filters: Filter[]): void { - if (filters) { - this.pageStructures = 0; - this.structuresChunked = []; - } this.structureService.getStructures(filters).subscribe((structures) => { filters ? (structures = this.applyFilters(structures, filters)) : structures; if (structures) { @@ -55,12 +48,7 @@ export class HomeComponent implements OnInit { }) ).then((structureList) => { structureList = _.sortBy(structureList, ['distance']); - if (this.pageStructures == 0) { - for (let i = 0; i < structureList.length; i += this.chunck) { - this.structuresChunked.push(structureList.slice(i, i + this.chunck)); - } - } - this.structures = this.structuresChunked[0]; + this.structures = structureList; }); } else { this.structures = null; @@ -147,14 +135,6 @@ export class HomeComponent implements OnInit { this.selectedMarkerId = id; } - public loadMoreStructures(): void { - if (this.pageStructures < this.structuresChunked.length - 1) { - this.pageStructures++; - const newStructures = _.map(this.structuresChunked[this.pageStructures]); - this.structures = [...this.structures, ...newStructures]; - } - } - public showDetailStructure(structure: Structure): void { this.currentStructure = new Structure(structure); } diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html index 27a1c1029a0a1c0343097fe6f243a5641cabcff8..e70e20bda6e669bd60d07c2ea3034b627d8f2810 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -7,7 +7,7 @@ <div (scroll)="onScrollDown($event)" class="listCard" (mouseout)="mouseOut()"> <app-card - *ngFor="let structure of structureList" + *ngFor="let structure of structuresListChunked" [structure]="structure" (showDetails)="showDetails($event)" (hover)="handleCardHover($event)" diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts index bc35be68b0199ff025324efac1cdec07f1fe669e..19a694e2cddba8665d265c05d845226a6ffcba20 100644 --- a/src/app/structure-list/structure-list.component.ts +++ b/src/app/structure-list/structure-list.component.ts @@ -2,6 +2,8 @@ import { Component, EventEmitter, Input, OnInit, Output, OnChanges, SimpleChange import { Filter } from './models/filter.model'; import { Structure } from '../models/structure.model'; import { GeoJson } from '../map/models/geojson.model'; +import * as _ from 'lodash'; + @Component({ selector: 'app-structure-list', templateUrl: './structure-list.component.html', @@ -15,15 +17,29 @@ export class StructureListComponent implements OnChanges { @Output() public displayMapMarkerId: EventEmitter<Array<number>> = new EventEmitter<Array<number>>(); @Output() public hoverOut: EventEmitter<Array<number>> = new EventEmitter<Array<number>>(); @Output() public selectedMarkerId: EventEmitter<number> = new EventEmitter<number>(); - @Output() loadMoreStructures = new EventEmitter(); public showStructureDetails = false; public structure: Structure; + public structuresListChunked: Structure[]; + private pageStructures = 0; + private arrayChunked: Structure[][] = []; + private chunck = 10; constructor() {} + ngOnChanges(changes: SimpleChanges): void { if (changes.selectedStructure && this.selectedStructure) { this.showDetails(this.selectedStructure); } + if (changes.structureList) { + this.arrayChunked = []; + this.pageStructures = 0; + if (this.pageStructures == 0) { + for (let i = 0; i < this.structureList.length; i += this.chunck) { + this.arrayChunked.push(this.structureList.slice(i, i + this.chunck)); + } + } + this.structuresListChunked = this.arrayChunked[0]; + } } public fetchResults(filters: Filter[]): void { this.searchEvent.emit(filters); @@ -51,7 +67,14 @@ export class StructureListComponent implements OnChanges { if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 100) { } if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 50) { - this.loadMoreStructures.emit(); + this.loadMoreStructures(); + } + } + private loadMoreStructures(): void { + if (this.pageStructures < this.arrayChunked.length - 1) { + this.pageStructures++; + const newStructures = _.map(this.arrayChunked[this.pageStructures]); + this.structuresListChunked = [...this.structuresListChunked, ...newStructures]; } } }