From 32f6aa1417e262b7d69d8b9c874fbadcdb2fba5a Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Thu, 20 Apr 2023 13:46:57 +0000
Subject: [PATCH] fix(carto): loader not displayed
---
src/app/carto/carto.component.html | 2 +-
src/app/carto/carto.component.ts | 15 ++++----
.../structure-list.component.html | 34 ++++++++++---------
.../structure-list.component.scss | 2 +-
.../structure-list.component.ts | 4 +--
5 files changed, 28 insertions(+), 29 deletions(-)
diff --git a/src/app/carto/carto.component.html b/src/app/carto/carto.component.html
index d8c4b0bb7..e492b6e06 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 dc992f620..0571ea605 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 a5c95f9a3..0824ffde4 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 b08856b47..a3a525ef5 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 26287a5cc..49569c049 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;
}
}
--
GitLab