Autcomplete ajouté sur les dropdown list

du formulaire d'ajout de sauts

Front/skydivelogs-app/src/app/app.module.ts

@@ -1,24 +1,24 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
-import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
-import { AppComponent } from "./app.component";
+import { AppComponent } from './app.component';
 
-import { SummaryComponent } from "./summary/summary.component";
-import { ListOfJumpsComponent } from "./list-of-jumps/list-of-jumps.component";
-import { ListOfDzsComponent } from "./list-of-dzs/list-of-dzs.component";
-import { NewJumpComponent } from "./new-jump/new-jump.component";
-import { ListOfAircraftsComponent } from "./list-of-aircrafts/list-of-aircrafts.component";
-import { ListOfJumpTypesComponent } from "./list-of-jump-types/list-of-jump-types.component";
-import { ListOfGearsComponent } from "./list-of-gears/list-of-gears.component";
+import { SummaryComponent } from './summary/summary.component';
+import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component';
+import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component';
+import { NewJumpComponent } from './new-jump/new-jump.component';
+import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component';
+import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component';
+import { ListOfGearsComponent } from './list-of-gears/list-of-gears.component';
 
-import { DateService } from "../services/date.service";
-import { ServiceApiGet } from "../services/service-api-get.service";
-import { ServiceApiPost } from "../services/service-api-post.service";
-import { ServiceComm } from "../services/service-comm.service";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { FormsModule } from "@angular/forms";
+import { DateService } from '../services/date.service';
+import { ServiceApiGet } from '../services/service-api-get.service';
+import { ServiceApiPost } from '../services/service-api-post.service';
+import { ServiceComm } from '../services/service-comm.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
 import {
   MatPaginatorModule,
   MatTableModule,
@@ -30,19 +30,20 @@ import {
   MatNativeDateModule,
   MatInputModule,
   MatButtonModule,
-  MatIconModule
-} from "@angular/material";
-import { RequestCache } from "../services/request-cache.service";
-import { CachingInterceptor } from "../services/caching-interceptor.service";
+  MatIconModule,
+  MatAutocompleteModule
+} from '@angular/material';
+import { RequestCache } from '../services/request-cache.service';
+import { CachingInterceptor } from '../services/caching-interceptor.service';
 
 const appRoutes: Routes = [
-  { path: "summary", component: SummaryComponent },
-  { path: "jumps", component: ListOfJumpsComponent },
-  { path: "dzs", component: ListOfDzsComponent },
-  { path: "newjump", component: NewJumpComponent },
-  { path: "aircrafts", component: ListOfAircraftsComponent },
-  { path: "jumpTypes", component: ListOfJumpTypesComponent },
-  { path: "gears", component: ListOfGearsComponent }
+  { path: 'summary', component: SummaryComponent },
+  { path: 'jumps', component: ListOfJumpsComponent },
+  { path: 'dzs', component: ListOfDzsComponent },
+  { path: 'newjump', component: NewJumpComponent },
+  { path: 'aircrafts', component: ListOfAircraftsComponent },
+  { path: 'jumpTypes', component: ListOfJumpTypesComponent },
+  { path: 'gears', component: ListOfGearsComponent }
 ];
 
 @NgModule({
@@ -74,7 +75,8 @@ const appRoutes: Routes = [
     MatNativeDateModule,
     MatInputModule,
     MatButtonModule,
-    MatIconModule
+    MatIconModule,
+    MatAutocompleteModule
   ],
   exports: [HttpClientModule],
   providers: [
@@ -87,4 +89,4 @@ const appRoutes: Routes = [
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -1,38 +1,57 @@
 <form class="example-container" (ngSubmit)="onFormSubmit()">
   <mat-form-field>
     <mat-label>Choose the jump type</mat-label>
-    <mat-select [(ngModel)]="selectedJumpType" name="selectedJumpType">
-      <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType.id">
+    <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">
+    <mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayFn">
+      <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
         {{jumpType.name}}
       </mat-option>
-    </mat-select>
+    </mat-autocomplete>
+    <button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
+      (click)="selectedJumpType=undefined">
+      <mat-icon>close</mat-icon>
+    </button>
   </mat-form-field>
 
   <mat-form-field>
     <mat-label>Choose the aircraft</mat-label>
-    <mat-select [(ngModel)]="selectedAircraft" name="selectedAircraft">
-      <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft.id">
+    <input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft" name="selectedAircraft">
+    <mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayFn">
+      <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
         {{aircraft.name}}
       </mat-option>
-    </mat-select>
+    </mat-autocomplete>
+    <button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
+      (click)="selectedAircraft=undefined">
+      <mat-icon>close</mat-icon>
+    </button>
   </mat-form-field>
 
   <mat-form-field>
     <mat-label>Choose the DZ</mat-label>
-    <mat-select [(ngModel)]="selectedDz" name="selectedDz">
-      <mat-option *ngFor="let dropZone of listOfDropZone" [value]="dropZone.id">
+    <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz" name="selectedDz">
+    <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayFn">
+      <mat-option *ngFor="let dropZone of listOfDropZone" [value]="dropZone">
         {{dropZone.name}}
       </mat-option>
-    </mat-select>
+    </mat-autocomplete>
+    <button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
+      <mat-icon>close</mat-icon>
+    </button>
   </mat-form-field>
 
   <mat-form-field>
     <mat-label>Choose the used gear</mat-label>
-    <mat-select [(ngModel)]="selectedGear" name="selectedGear">
-      <mat-option *ngFor="let gear of listOfGear" [value]="gear.id">
+    <input type="text" matInput [matAutocomplete]="autoGear" [(ngModel)]="selectedGear" name="selectedGear">
+    <mat-autocomplete #autoGear="matAutocomplete" [displayWith]="displayFn">
+      <mat-option *ngFor="let gear of listOfGear" [value]="gear">
         {{gear.name}}
       </mat-option>
-    </mat-select>
+    </mat-autocomplete>
+    <button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
+      (click)="selectedGear=undefined">
+      <mat-icon>close</mat-icon>
+    </button>
   </mat-form-field>
 
   <mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">With a cutaway ?</mat-checkbox>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -1,18 +1,18 @@
-import { Component, OnInit } from "@angular/core";
-import { ServiceComm } from "../../services/service-comm.service";
-import { ServiceApiGet } from "../../services/service-api-get.service";
-import { ServiceApiPost } from "../../services/service-api-post.service";
-import { JumpTypeResp } from "../../models/jumpType";
-import { AircraftResp } from "../../models/aircraft";
-import { DropZoneResp } from "../../models/dropzone";
-import { DateService } from "../../services/date.service";
-import { GearResp } from "../../models/gear";
-import { isNumber } from "util";
+import { Component, OnInit } from '@angular/core';
+import { ServiceComm } from '../../services/service-comm.service';
+import { ServiceApiGet } from '../../services/service-api-get.service';
+import { ServiceApiPost } from '../../services/service-api-post.service';
+import { JumpTypeResp } from '../../models/jumpType';
+import { AircraftResp } from '../../models/aircraft';
+import { DropZoneResp } from '../../models/dropzone';
+import { DateService } from '../../services/date.service';
+import { GearResp } from '../../models/gear';
+import { isNumber } from 'util';
 
 @Component({
-  selector: "app-new-jump",
-  templateUrl: "./new-jump.component.html",
-  styleUrls: ["./new-jump.component.css"]
+  selector: 'app-new-jump',
+  templateUrl: './new-jump.component.html',
+  styleUrls: ['./new-jump.component.css']
 })
 export class NewJumpComponent implements OnInit {
   beginDate: Date;
@@ -20,10 +20,10 @@ export class NewJumpComponent implements OnInit {
   exitAltitude: number;
   deployAltitude: number;
   countOfJumps: number;
-  selectedDz: number;
-  selectedGear: number;
-  selectedAircraft: number;
-  selectedJumpType: number;
+  selectedDz: DropZoneResp;
+  selectedGear: GearResp;
+  selectedAircraft: AircraftResp;
+  selectedJumpType: JumpTypeResp;
   withCutaway: boolean;
   listOfJumpType: Array<JumpTypeResp>;
   listOfAircraft: Array<AircraftResp>;
@@ -35,10 +35,10 @@ export class NewJumpComponent implements OnInit {
     private serviceApiGet: ServiceApiGet,
     private serviceApiPost: ServiceApiPost,
     private dateService: DateService
-  ) {}
+  ) { }
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle("Add a new jump");
+    this.serviceComm.updatedComponentTitle('Add a new jump');
 
     this.endDate = new Date();
 
@@ -53,10 +53,10 @@ export class NewJumpComponent implements OnInit {
 
   onFormSubmit() {
     this.serviceApiPost.AddListOfJump(
-      this.selectedJumpType,
-      this.selectedAircraft,
-      this.selectedDz,
-      this.selectedGear,
+      this.selectedJumpType.id,
+      this.selectedAircraft.id,
+      this.selectedDz.id,
+      this.selectedGear.id,
       this.withCutaway,
       this.beginDate,
       this.endDate,
@@ -68,13 +68,13 @@ export class NewJumpComponent implements OnInit {
 
   public isValidatedForm(): boolean {
     return (
-      this.selectedDz != undefined &&
-      this.selectedGear != undefined &&
-      this.selectedAircraft != undefined &&
-      this.selectedJumpType != undefined &&
-      this.exitAltitude != undefined && isNumber(this.exitAltitude) &&
-      this.deployAltitude != undefined && isNumber(this.deployAltitude) &&
-      this.countOfJumps != undefined && isNumber(this.countOfJumps)
+      this.selectedDz !== undefined &&
+      this.selectedGear !== undefined &&
+      this.selectedAircraft !== undefined &&
+      this.selectedJumpType !== undefined &&
+      this.exitAltitude !== undefined && isNumber(this.exitAltitude) &&
+      this.deployAltitude !== undefined && isNumber(this.deployAltitude) &&
+      this.countOfJumps !== undefined && isNumber(this.countOfJumps)
     );
   }
 
@@ -104,4 +104,9 @@ export class NewJumpComponent implements OnInit {
       this.listOfGear = data;
     });
   }
+
+
+  displayFn(data?: JumpTypeResp): string | undefined {
+    return data ? data.name : undefined;
+  }
 }