Incorrect display of the 'Selection confirmation' modal in case of an error during portfolio...

On the portfolio selection page, I can either enter an account number or input a name.



When I enter an account number 979-9638403-03 and then click on the Search button



A modal is correctly displayed with the client's data



My problem

If the user's account is incorrect, for example 123-4



Another modal displays that the input is incorrect.



For now, everything is fine, but when I close the modal.

The Selection confirmation modal appears, and it bothers me a lot!



In fact, the second modal should not appear if there is an error.

I think the problem seems to be here?

...
const modalRef = this.modalService.show(SelectPortfolioResultModalComponent, {
...NOT_CLOSABLE_MODAL_OPTIONS,
class: "modal-dialog-centered modal-lg",
ariaLabelledBy: "modal-error-title",
initialState: {
isLoading: true,
},
});
...


Here is the full code

export class SelectPortfolioComponent implements OnDestroy {
private unsubscribe$ = new Subject<void>();
search = new SelectPortfolioModel();
account: number;

constructor(
private service: SelectPortfolioService,
private modalService: BsModalService,
private router: Router
) {}

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

submit(): void {
const modalRef = this.modalService.show(
SelectPortfolioResultModalComponent,
{
...NOT_CLOSABLE_MODAL_OPTIONS,
class: "modal-dialog-centered modal-lg",
ariaLabelledBy: "modal-error-title",
initialState: {
isLoading: true,
},
}
);

modalRef
.content!.selectedPortfolio.pipe(takeUntil(this.unsubscribe$))
.subscribe((val: SelectPortfolio | undefined) => {
if (val) {
this.service
.selectPortfolio(val)
.pipe(takeUntil(this.unsubscribe$))
.subscribe(() => {
this.router.navigate(["/portfolio/valorisation"]);
});
}
modalRef?.hide();
});

this.service
.getPortfolios(this.search)
.pipe(takeUntil(modalRef.content!.selectedPortfolio))
.subscribe((res) => {
if (modalRef) {
modalRef.content!.portfolios = res.PTF;
const noResults = res.RETURNLIST.find(
(item) => item.CODE === ApiResponseCodeEnum.Sch00
);
if (noResults) {
modalRef.content!.errorMessage = noResults.TEXTE;
}
modalRef.content!.isLoading = false;
}
});
}
}


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

Continue reading...