Sequential Execution Issue of NEKGBSK HTTP Call After Confirming Step 1

I can’t understand why the HTTP call from NEKGBSK is not being executed sequentially after clicking the confirm button in step 1.

new-buy-order.service.ts

checkOrder(order: Order, trx: string): Observable<OrderCheckResponse> {
return this.http.post<OrderCheckResponse>(
this.api + `/NEKGBSK`,
{
MODE: "CHK_ORD",
TRX: trx,
ID: this.store.selectSnapshot(BasketState.currentBasket),
INPUTORD: {
SVM: order.svm,
AV: order.sense,
QUANTITY: order.quantity,
AMOUNT: order.amount,
PRICE: order.limit,
PRICESTOPLOSS: order.stop,
CURRENCY: !order.against ? "EUR" : order.against,
VALIDITYORDERDATE: this.datePipe.transform(
order.validityDate,
"yyyy-MM-dd"
),
ORDERTYPE: "",
APPROPRIATENESS: "",
BESTEXEC: order.executionPlace ? order.executionPlace : "",
TAUX: 0,
OPENCLOSE: order.openingClosing,
COMPTE: 0,
RAPPORT: "",
QMIN: 0,
QMAX: 0,
},
},
{ headers: { AddCustomer: "" } }
);
}


Here is the complete :

service.ts

@Injectable()
export class NewBuyOrderService {
private readonly api: string = environment.api;

constructor(
private http: HttpClient,
private store: Store,
private datePipe: ArgFormatDatePipe
) {}

getInstrumentInfo(svm: number): Observable<InstrumentInfoResponse> {
return this.http.post<InstrumentInfoResponse>(this.api + `/WNEKTITD`, {
SVM: svm,
});
}

getEtat(svm: number): Observable<EtatTitreResponse> {
return this.http.post<EtatTitreResponse>(
this.api + `/WNEKTITE`,
{
SVM: svm,
},
{ headers: { AddCustomer: "" } }
);
}

getInfoOrder(svm: number): Observable<InfoOrderResponse> {
return this.http.post<InfoOrderResponse>(
this.api + `/WNEKPOW`,
{
SVM: svm,
},
{ headers: { AddCustomer: "" } }
);
}

getOrderTICH(svm: number): Observable<OrderTichResponse> {
return this.http.post<OrderTichResponse>(this.api + `/WNEKTITO`, {
SVM: svm,
});
}

getValuationAccounts(): Observable<ValuationAccountsResponse> {
return this.http.post<ValuationAccountsResponse>(
this.api + `/WNEKESP`,
{},
{ headers: { AddCustomer: "" } }
);
}

checkOrder(order: Order, trx: string): Observable<OrderCheckResponse> {
return this.http.post<OrderCheckResponse>(
this.api + `/WNEKBSK`,
{
MODE: "CHK_ORD",
TRX: trx,
ID: this.store.selectSnapshot(BasketState.currentBasket),
INPUTORD: {
SVM: order.svm,
AV: order.sense,
QUANTITY: order.quantity,
AMOUNT: order.amount,
PRICE: order.limit,
PRICESTOPLOSS: order.stop,
CURRENCY: !order.against ? "EUR" : order.against,
VALIDITYORDERDATE: this.datePipe.transform(
order.validityDate,
"yyyy-MM-dd"
),
ORDERTYPE: "",
APPROPRIATENESS: "",
BESTEXEC: order.executionPlace ? order.executionPlace : "",
TAUX: 0,
OPENCLOSE: order.openingClosing,
COMPTE: 0,
RAPPORT: "",
QMIN: 0,
QMAX: 0,
},
},
{ headers: { AddCustomer: "" } }
);
}


getLastOpenDate(): Observable<SpecificParametersResponse> {
return this.http.post<SpecificParametersResponse>(this.api + `/WNEKTXTP`, {
CODE: "LastOpenDay",
ID: 0,
});
}

newOrderSimulation(order: Order): Observable<SimulationResponse> {
return this.http.post<SimulationResponse>(
this.api + `/WNEKORDS`,
{
INPUTORD: {
SVM: order.svm,
AV: order.sense,
QUANTITY: order.quantity,
AMOUNT: order.amount,
PRICE: order.limit,
PRICESTOPLOSS: order.stop,
CURRENCY: !order.against ? "EUR" : order.against,
VALIDITYORDERDATE: this.datePipe.transform(
order.validityDate,
"yyyy-MM-dd"
),
ORDERTYPE: "",
APPROPRIATENESS: "",
BESTEXEC: "Y",
TAUX: 0,
OPENCLOSE: "",
COMPTE: 0,
RAPPORT: "",
QMIN: 0,
QMAX: 0,
},
},
{ headers: { AddCustomer: "" } }
);
}

getPdfExanteBuyService(order: Order): Observable<ExanteResponse> {
return this.http.post<ExanteResponse>(
this.api + `/WNEKEXAP`,
{
MODE: "ADD",
ORD_KEY: {
ORDRE: 0,
SEQ: 0,
},
INPUTORD: {
SVM: order.svm,
AV: order.sense,
QUANTITY: order.quantity,
AMOUNT: order.amount,
PRICE: order.limit,
PRICESTOPLOSS: order.stop,
CURRENCY: !order.against ? "EUR" : order.against,
VALIDITYORDERDATE: this.datePipe.transform(
order.validityDate,
"yyyy-MM-dd"
),
ORDERTYPE: "",
APPROPRIATENESS: "",
BESTEXEC: order.executionPlace ? order.executionPlace : "",
RAPPORT: order.executionInvoice ? order.executionInvoice : "",
TAUX: 0,
OPENCLOSE: order.openingClosing,
COMPTE: 0,
QMIN: 0,
QMAX: 0,
},
},
{ headers: { AddCustomer: "" } }
);
}

getPurchaseSecurities(
params: { from?: string } = {}
): Observable<SecuritiesResponse> {
return this.http.post<SecuritiesResponse>(this.api + `/WNEKTITC`, {
SECURITYSEARCH: {
FROM: params.from || "ARG",
},
});
}

getSolde(): Observable<SoldeResponse> {
return this.http.post<SoldeResponse>(
`${this.api}/WNEKPTF`,
{},
{ headers: { AddCustomer: "" } }
);
}
}
...


new-buy-order.component.ts

export class NewBuyOrderComponent implements OnInit, OnDestroy {
private unsubscribe$ = new Subject<void>();
private unsubscribeLoop$ = new Subject<void>();

private isFromSimulation: boolean = false;

readonly allSense = SenseEnum;
readonly allInstrumentType = InstrumentTypeEnum;

today: Date = new Date();
maxDate?: Date;

pageTitle: string = '';
order: Order;

orderDetails: OrderDetails;

againsts: string[] = [];
infosOrder: string[] = [];
executionPlaces: { name: string, value: string }[] = [];

instrumentType?: InstrumentTypeEnum;
titaut?: Titaut;
devise?: string;

etats?: EtatStatus;
statusList: AchVdnStatus[] = [];

orderCheckMessages: ApiErrorResponse[] = [];
confirmOrderAction: any;
simulation: any;
trx: string;

step = 0;

showSimulationButton: boolean = true;

TIT: SecuritiesResponse[] = [];



constructor(
private service: NewBuyOrderService,
private location: Location,
private activatedRoute: ActivatedRoute,
private router: Router,
private createDateTimePipe: CreateDateTimePipe,
private modalService: BsModalService,
) {
this.step = 1;

}

ngOnInit(): void {
const svm = this.activatedRoute.snapshot.paramMap.get('svm');
if (!svm) {
this.goBack();
return;
}

this.maxDate = new Date(this.today.getFullYear() + 1, this.today.getMonth(), this.today.getDate());

const validityDate = new Date(new Date().getFullYear(), 11, 31);
this.order = new Order(+svm, validityDate);

this.order.sense = 'S';
const from = this.activatedRoute.snapshot.paramMap.get('from');

this.getPurchaseSecurities();
this.getDetails();
}

ngOnDestroy(): void {
this.resetSubscriptions(false);
this.unsubscribe$.next();
this.unsubscribe$.complete();
}

private getDetails(): void {
this.service.getInstrumentInfo(this.order!.svm).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.pageTitle = res.TIT.ADVTITRE.BASIQUETITRE.LABEL + " (" + res.TIT.ADVTITRE.BASIQUETITRE.PLACELABEL + ")";
this.devise = res.TIT.ADVTITRE.BASIQUETITRE.DEVISE;
this.instrumentType = res.TIT.ADVTITRE.BASIQUETITRE.REGR;
this.executionPlaces = [
{
name: 'Best Execution',
value: 'Y'
},
{
name: res.TIT.ADVTITRE.BASIQUETITRE.PLACELABEL,
value: 'N'
},
];

concat(
this.getOrderTICH(),
this.getValuationAccounts(),
this.getLastOpenDate()
).pipe(
toArray(),
takeUntil(this.unsubscribe$)
).subscribe(() => {
});
}
});
}

private getOrderTICH(): Observable<void> {
return this.service.getOrderTICH(this.order!.svm).pipe(
map(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.titaut = res.TITAUT;
}
return;
}),
takeUntil(this.unsubscribe$)
);
}

private getValuationAccounts(): Observable<void> {
return this.service.getValuationAccounts().pipe(
map(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
if (res.PTF.ESPECES.length > 0) {
const tmpAgainst = [...new Set(res.PTF.ESPECES.map(x => x.COMPTE.CURRENCY))];
this.againsts = this.clearAgainsts(tmpAgainst);

if (!this.isFromSimulation) {
const index = this.againsts.findIndex(x => x === this.devise);
if (index !== -1) {
this.order!.against = this.againsts[index];
}
}
}
}
return;
}),
takeUntil(this.unsubscribe$)
);
}

private getLastOpenDate(): Observable<void> {
return this.service.getLastOpenDate().pipe(
map(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.order!.validityDate = this.createDateTimePipe.transform({ date: res.TEXTE.COURT, time: null });
}
return;
}),
takeUntil(this.unsubscribe$)
);
}

private clearAgainsts(array: string[]): string[] {
const indexEur = array.findIndex(x => x === 'EUR');
if (indexEur !== -1 && indexEur > 0) {
const tmp = array[indexEur];
array.splice(indexEur, 1);
array.unshift(tmp);
}
return array;
}


private getEtat(): void {
this.service.getEtat(this.order!.svm).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
if (res.ETAT.OVERTURE.COURS !== 0) {
this.etats = new EtatStatus(res.ETAT);

}

if (res.ETAT.PROFONDEURACHTEUR.length === res.ETAT.PROFONDEURVENDEUR.length) {
const array: AchVdnStatus[] = [];
res.ETAT.PROFONDEURACHTEUR.forEach((element, index) => {
array.push({
ACHETEURNUMBER: element.NUMBRE,
ACHETEURQTY: element.QTY,
ACHETEURCOURS: element.COURS,
VENDEURNUMBER: res.ETAT.PROFONDEURVENDEUR[index].NUMBRE,
VENDEURQTY: res.ETAT.PROFONDEURVENDEUR[index].QTY,
VENDEURCOURS: res.ETAT.PROFONDEURVENDEUR[index].COURS,
});
});
this.statusList = array;
}
}
});
}

private resetSubscriptions(recreate: boolean = true): void {
this.unsubscribeLoop$.next();
this.unsubscribeLoop$.complete();
if (recreate) {
this.unsubscribeLoop$ = new Subject<void>();
}
}

goBack(): void {
if (this.simulation) {
this.simulation = undefined;
this.resetSubscriptions();
} else {
this.location.back();
}
}

openConfirmModal(): void {
const modalRef = this.modalService.show(NewBuyOrderConfirmModalComponent, {
...NOT_CLOSABLE_MODAL_OPTIONS,
class: 'modal-dialog-centered modal-lg',
ariaLabelledBy: 'modal-error-title',
initialState: {
orderToConfirm: this.order,
},

providers: [

{ provide: NewBuyOrderService}

]
});

}

getPurchaseSecurities(): void {
this.service.getPurchaseSecurities().pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.TIT = res["TIT"];
}
});
}

newOrderSimulation(): void {
this.resetSubscriptions();
this.service.newOrderSimulation(this.order!).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.simulation = res.ORDS;
this.step = 3;
}
});
this.showSimulationButton = false;
}


newSimulationRequest(event: boolean): void {
if (event === true) {
const data = {
quantity: this.order?.quantity,
limit: this.order?.limit,
sense: this.order?.sense,
against: this.order?.against
};
this.router.navigate(['/orders/newOrder/' + this.order!.svm + '/simulation/' + JSON.stringify(data)])
} else {
this.location.back();

}
}

checkOrder(): void {
this.resetSubscriptions();
this.service.checkOrder(this.order!, this.trx).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.orderCheckMessages = res.RETURNLIST;
this.simulation = null;
this.step = 2;
}
});
}


pdfExanteBuy(): void {
this.service.getPdfExanteBuyService(this.order!).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {

convert64AndDownload(res.PDF, res.FULLNAME + res.FINFICHIER , "pdf");
});
}

goToCorrection(): void {
this.simulation = null;
this.step = 4;
}


previous(): void {
this.step--;
if (this.step === 1) {
this.simulation = null;
}
}

goToStep2(): void {
this.step = 2;
this.showSimulationButton = true;
}


}


new-buy-order.component.html

<ng-container *ngIf="step == 1">
<div class="home-content wrapper-component">
<div class="breadcrumb d-flex justify-content-between border-bottom pt-5">
<!-- Introduction d'un ordre en -->
<h3 class="text-center alignTitleH3">Introduction d'un ordre en {{ pageTitle }}</h3>
<!-- Retour -->
<button type="button" (click)="goBack()" class="btn-green">Retour</button>
</div>
<div class="card">
<div class="card-body">
<ng-container *ngIf="order && !simulation">
<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && checkOrder()" class="card-body">
<div class="row justify-content-start">
<div class="col-md-8">
<table class="table table-bordered table-striped">
<thead class="thead-light">
<tr>
<!-- Sens -->
<th>Sens</th>
<th>
<select id="filterForQuantityOrAmount" name="filterForQuantityOrAmount" class="form-control form-max-width" [(ngModel)]="order.quantityOrAmount" (ngModelChange)="order.cleanQuantityAmount()">
<option value="0" selected>Sélectionnez un item </option>
<!-- Quantité -->
<option value="q" >Quantité</option>
<!-- Montant -->
<option value="a" >Montant</option>
</select>
</th>
<!-- Contre -->
<th>Contre</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- Souscription -->
<select id="filterForSense" name="filterForSense" class="form-control form-max-width" style="width:200px" [(ngModel)]="order.sense" disabled required>
<!-- SOUSCRIPTION -->
<option [value]="allSense.Souscription" *ngIf="titaut?.AOUS === allSense.Souscription" >SOUSCRIPTION </option>
</select>
</td>
<td>
<input id="quantityOrAmountA" name="quantityOrAmountA" type="number" greaterThanZero class="form-control form-max-width" *ngIf="order.quantityOrAmount === 'a'" [(ngModel)]="order.amount" />
<input id="quantityOrAmountQ" name="quantityOrAmountQ" type="number" greaterThanZero class="form-control form-max-width" *ngIf="order.quantityOrAmount === 'q'" [(ngModel)]="order.quantity" />
</td>
<td>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">EUR</span>
<input type="hidden" name="DD" value="EUR">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<table class="table table-bordered table-striped" *ngIf="TIT">
<thead class="bg-light">
<tr>
<!-- Fréquence de la VNI -->
<th>Fréquence de la VNI</th>
<!-- Heure du Cut-Off -->
<th>Heure du Cut-Off</th>
<!-- Cut-Off time passé -->
<th>Cut-Off time passé</th>
</tr>
</thead>
<tbody>
<tr>
<!-- Une fois par semaine -->
<td>{{ TIT[0].CUT_OFF.FREQUENCE_VNI_LIB }}</td>
<!-- Date -->
<td>{{ TIT[0].CUT_OFF.DATE | argFormatDate }} {{ TIT[0].CUT_OFF.TIME .slice(0, 5) }}</td>
<!-- Non -->
<td>{{ TIT[0].CUT_OFF.CUT_OFF_PASSED_LIB }}</td>
</tr>
<tr>
<td colspan="2"></td>
<!-- Vous devez enregistrer votre ordre au moins 15 minutes avant l'heure de clôture (cut off time). -->
<td>
Vous devez enregistrer votre ordre au moins 15 minutes avant l'heure de clôture (cut off time).<br>
<!-- Sinon, il n'y a aucune garantie que votre ordre soit envoyé avec ce cut off -->
Sinon, il n'y a aucune garantie que votre ordre soit envoyé avec ce cut off
</td>
</tr>
</tbody>
</table>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="text-center mx-auto">
<!-- Confirmation -->
<button class="btn btn-success btn_green_arg" [disabled]="formulaire.form.invalid">Confirmation</button>
</div>
</div>
</div>
</form>
</ng-container>
</div>
</div>
</div>
<div class="pb-3 "></div>
</ng-container>


Thank you for your help and the time you dedicated to my problem.

Continue reading...