Ajout d'une fonction de recherche

sur la liste des DZs
This commit is contained in:
Sébastien André
2020-01-21 14:47:59 +01:00
parent ea56a17f5a
commit 92a657d649
2 changed files with 16 additions and 5 deletions

View File

@@ -29,9 +29,10 @@
<mat-form-field>
<mat-label>Choose the DZ</mat-label>
<input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz" name="selectedDz">
<input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz"
(ngModelChange)="onChangeDz($event)" name="selectedDz">
<mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let dropZone of listOfDropZone" [value]="dropZone">
<mat-option *ngFor="let dropZone of listOfFilteredDropZone" [value]="dropZone">
{{dropZone.name}}
<img src="../../assets/img/favorite.png" alt="favorite DZ" *ngIf="dropZone.isFavorite === true"
style="width: 16px;">

View File

@@ -27,7 +27,8 @@ export class NewJumpComponent implements OnInit {
withCutaway: boolean;
listOfJumpType: Array<JumpTypeResp>;
listOfAircraft: Array<AircraftResp>;
listOfDropZone: Array<DropZoneResp>;
private listOfDropZone: Array<DropZoneResp>;
listOfFilteredDropZone: Array<DropZoneResp>;
listOfGear: Array<GearResp>;
constructor(
@@ -41,7 +42,6 @@ export class NewJumpComponent implements OnInit {
this.serviceComm.UpdatedComponentTitle('Add a new jump');
this.endDate = new Date();
this.beginDate = this.dateService.AddDays(new Date(), -1);
this.exitAltitude = 4000;
@@ -97,6 +97,7 @@ export class NewJumpComponent implements OnInit {
this.serviceApiGet.getListOfDropZones().subscribe(data => {
data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
this.listOfDropZone = data;
this.listOfFilteredDropZone = data;
});
}
@@ -107,7 +108,16 @@ export class NewJumpComponent implements OnInit {
}
displayFn(data?: JumpTypeResp): string | undefined {
public displayFn(data?: JumpTypeResp): string | undefined {
return data ? data.name : undefined;
}
public onChangeDz(event: string) {
if (event.length > 3) {
const filterValue = event.toLowerCase();
this.listOfFilteredDropZone = this.listOfDropZone;
this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter(option => option.name.toLowerCase().includes(filterValue));
}
}
}