fix(map) : show all markers with chunked list structures

src/app/home/home.component.html

 <div fxLayout="row" class="content-container">
   <app-structure-list
     (searchEvent)="getStructures($event)"
-    (loadMoreStructures)="loadMoreStructures()"
     [structureList]="structures"
     [location]="currentLocation"
     (displayMapMarkerId)="setMapMarkerId($event)"

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);
   }

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)"

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];
     }
   }
 }