Ajouter deux inputs (date d'entrée et date de sortie)

Bonsoir,

J'ai un webService qui me renvoie des données que j'affiche dans un tableau HTML.
Comme j'ai énormément de lignes dans mon tableau, j'aimerai utiliser 2 inputs pour filtrer les dates.

https://zupimages.net/up/23/03/ddum.jpg

Je galère toujours à comprendre comment je pourrais filtrer les dates....

Dans le fichier service.ts j'appelle un webservice c'est grâce à celui ci que j'affiche les datas dans le tableau html.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@Injectable()
export class HistoricalPricesService {
  private readonly api: string = environment.api;
 
  constructor(private http: HttpClient, private datePipe: ProjetFormatDatePipe) {}
 
  getInstrumentHistoryEquities(svm: string, model: ReturnModel): Observable < InstrumentHistoryResponse > {
    const now = new Date();
    const lastYear = new Date();
    lastYear.setFullYear(now.getFullYear() - 1);
 
    return this.http.post < InstrumentHistoryResponse > (this.api + `/WEBSERVICETITRE`, {
      SVM: parseInt(svm),
      PERIODE: 'XX',
      PERIODEXX: {
        DATEDEBUT: this.datePipe.transform(model.startDate, 'yyyy-MM-dd'),
        DATEFIN: this.datePipe.transform(model.endDate, 'yyyy-MM-dd'),
      }
    }, {
      headers: {
        DoNotSetBusy: ''
      }
    });
  }
}

Ensuite, j'ai créé un fichier return-model.ts pour les deux inputs.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export class ReturnModel {
  startDate: Date;
  endDate ? : Date;
 
  constructor() {
    this.endDate = new Date();
    this.startDate = new Date();
    this.startDate.setFullYear(this.endDate.getFullYear() - 5);
  }
 
  verifyStart(): void {
    if (this.endDate && (this.startDate >= this.endDate)) {
      this.endDate = undefined;
    }
  }
}

vocii le fichier historical-prices.component.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
export class HistoricalPricesComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject < void > ();
 
  infoTitle: string = "";
  historicals: Tit;
  lines: HistoryPoint[] = [];
 
  model = new ReturnModel();
 
  constructor(
    private service: HistoricalPricesService,
    private activatedRoute: ActivatedRoute
  ) {}
 
  ngOnInit(): void {
    const svm = this.activatedRoute.snapshot.paramMap.get('svm');
    if (!svm) {
      return;
    }
    this.getPrices(svm);
  }
 
  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
 
  //Display data //
  getPrices(svm: string): void {
    this.service.getInstrumentHistoryEquities(svm, this.model, ).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        if (res.HISTO.POINT.length > 0) {
          this.lines = res.HISTO.POINT.reverse();
 
          console.log("Display => " + JSON.stringify(res.HISTO.POINT));
        }
      }
    });
  }
 
}

J'ai également un console.log et vous voyez je récupère bien les datas

https://zupimages.net/up/23/03/6gl0.jpg

Si je clique depuis mon browser sur Network > Payload

Je vois bien les 2 inputs (date de début et date de fin)
https://zupimages.net/up/23/03/av7f.jpg

Maintenant mon problème est que je ne comprends vraiment pas ce que je dois faire dans la méthode getPrices() pour adapter les 2 inputs?:roll::roll::roll:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
getPrices(svm: string): void {
  this.service.getInstrumentHistoryEquities(svm, this.model, ).pipe(
    takeUntil(this.unsubscribe$)
  ).subscribe(res => {
    if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
      if (res.HISTO.POINT.length > 0) {
        this.lines = res.HISTO.POINT.reverse();
 
        console.log("Display => " + JSON.stringify(res.HISTO.POINT));
      }
    }
  });
}

Au niveau HTML, j'ai ceci actuellement avec un message d'erreur.... :roll::roll::roll:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && getPrices()">
  <div class="row mb-4 align-items-end">
    <div class="col-12 col-sm-6 col-md-4">
      <div class="mb-2">
        <h5>
          Date de départ
        </h5>
        <input id="startDate" name="startDate" type="text" class="form-control form-max-width" [(ngModel)]="model.startDate" bsDatepicker />
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="mb-2">
        <h5>
          Date de fin
        </h5>
        <input id="endDate" name="endDate" type="text" class="form-control form-max-width" [(ngModel)]="model.endDate" bsDatepicker />
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="mb-2">
        <button type="submit" class="btn btn-primary" [disabled]="formulaire.form.invalid">
          Rechercher
        </button>
      </div>
    </div>
  </div>
</form>

https://zupimages.net/up/23/03/u4kt.jpg
Je vous remercie infiniment pour votre aide.