diff --git a/src/app/carto/carto.component.html b/src/app/carto/carto.component.html index d8c4b0bb7e4ea74e9867f40e5e53dec2180d0b81..e492b6e066f8f5e0661206eccd059d112e032283 100644 --- a/src/app/carto/carto.component.html +++ b/src/app/carto/carto.component.html @@ -7,6 +7,7 @@ class="left-pane" fxLayout="column" [structureList]="structures" + [isLoading]="isLoadingStructures" [selectedStructureList]="structuresSelected" [isOrientation]="isOrientationForm" [location]="currentLocation" @@ -14,7 +15,6 @@ [ngClass]="{ mapPhone: isMapPhone === true }" (displayMapMarkerId)="setMapMarkerId($event)" (selectedMarkerId)="setSelectedMarkerId($event)" - (updatedStructure)="updateStructures($event)" (structureSelected)="selectStructure($event)" /> <div class="btnSwitch"> diff --git a/src/app/carto/carto.component.ts b/src/app/carto/carto.component.ts index dc992f62064e9ad20fecd6e679814c6308952c90..0571ea605c61111d5d06d522488c2e77fb8c08b5 100644 --- a/src/app/carto/carto.component.ts +++ b/src/app/carto/carto.component.ts @@ -26,6 +26,7 @@ export class CartoComponent implements OnInit { @Output() structureSelection = new EventEmitter<any>(); public structures: Structure[] = []; + public isLoadingStructures: boolean = true; public currentLocation: GeoJson; public displayMarkerId: string; public selectedMarkerId: string; @@ -67,6 +68,7 @@ export class CartoComponent implements OnInit { } public getStructures(filters: Filter[]): void { + this.isLoadingStructures = true; const queryString = _.find(filters, { name: 'query' }); if (queryString) { this.searchedValue = queryString.value; @@ -78,14 +80,16 @@ export class CartoComponent implements OnInit { this.currentLocation.geometry.getLon(), this.currentLocation.geometry.getLat() ); + this.isLoadingStructures = false; }); } else { this.structureService.getStructures(filters).subscribe((structures) => { if (structures) { this.updateStructuresDistance(structures, this.userLongitude, this.userLatitude, false); } else { - this.structures = null; + this.structures = []; } + this.isLoadingStructures = false; }); } } else { @@ -94,18 +98,13 @@ export class CartoComponent implements OnInit { if (structures) { this.updateStructuresDistance(structures, this.userLongitude, this.userLatitude); } else { - this.structures = null; + this.structures = []; } + this.isLoadingStructures = false; }); } } - public updateStructures(s: Structure): void { - this.structures = this.structures.map((structure) => { - return structure._id === s._id ? s : structure; - }); - } - /** * Update structure distance according to user actual position. * @param structures structures data to update diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html index a5c95f9a3287443c7f36489d87b8214bbfde6404..0824ffde4c590670a54108197c09043e24082806 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -22,22 +22,24 @@ </div> <div id="listCard" class="listCard" role="list" (mouseleave)="mouseLeave()"> - <app-card - *ngFor="let structure of structureList" - class="structure-card" - role="listitem" - [structure]="structure" - [isOrientation]="isOrientation" - [isSelected]="isInPrintList(structure._id)" - (showDetails)="showDetails(structure)" - (keyup.enter)="showDetails(structure)" - (hover)="handleCardHover($event)" - (addToList)="addToList($event)" - /> - <p *ngIf="structureList && structureList.length <= 0 && !isLoading"> - Il n'y a aucune réponse correspondant à votre recherche - </p> - <div *ngIf="structureList && structureList.length <= 0 && isLoading" class="loader"> + <ng-container *ngIf="!isLoading"> + <app-card + *ngFor="let structure of structureList" + class="structure-card" + role="listitem" + [structure]="structure" + [isOrientation]="isOrientation" + [isSelected]="isInPrintList(structure._id)" + (showDetails)="showDetails(structure)" + (keyup.enter)="showDetails(structure)" + (hover)="handleCardHover($event)" + (addToList)="addToList($event)" + /> + <p *ngIf="structureList.length === 0" class="noStructureFound"> + Il n'y a aucune réponse correspondant à votre recherche + </p> + </ng-container> + <div *ngIf="isLoading" class="loader"> <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt /> </div> </div> diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss index b08856b47e7c5bdd0ad8f60d45700ef5e81d73ce..a3a525ef546048503399cb4e2f8ac3b6a47b7597 100644 --- a/src/app/structure-list/structure-list.component.scss +++ b/src/app/structure-list/structure-list.component.scss @@ -21,7 +21,7 @@ } } -.listCard > p { +.noStructureFound { margin-left: 1rem; } diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts index 26287a5ccdcaeb7b7dc7fcd5c97f2c243b3a1a0a..49569c04962bce07a6aa42e218cc3efd79146c81 100644 --- a/src/app/structure-list/structure-list.component.ts +++ b/src/app/structure-list/structure-list.component.ts @@ -15,18 +15,17 @@ import { PrintService } from '../shared/service/print.service'; export class StructureListComponent implements OnChanges, OnInit { @Input() public isOrientation: boolean = false; @Input() public structureList: Structure[]; + @Input() public isLoading = true; @Input() public location: GeoJson; @Input() public selectedStructure: Structure = new Structure(); @Input() public selectedStructureList: Structure[] = []; @Output() public displayMapMarkerId: EventEmitter<string> = new EventEmitter<string>(); @Output() public selectedMarkerId: EventEmitter<string> = new EventEmitter<string>(); - @Output() public updatedStructure: EventEmitter<Structure> = new EventEmitter<Structure>(); @Output() public structureSelected: EventEmitter<Structure[]> = new EventEmitter<Structure[]>(); public buttonTypeEnum = ButtonType; public structure: Structure; public printMode = false; - public isLoading = true; constructor( private route: ActivatedRoute, @@ -60,7 +59,6 @@ export class StructureListComponent implements OnChanges, OnInit { } if (changes.structureList) { document.getElementById('listCard').scrollTo(0, 0); - this.isLoading = changes.structureList.firstChange; } }