Primeng confirm dialog show when it shouldn't

user_17699626 0
Viewed 432

I have a method that checks if any property of object in array is equal to 'not ready'. If it is it should inform user about that and ask if he still wishes to continue. If no, there is return that breaks the method and if yes, method continues and there is one more confirm dialog

createOrder() {
    if(this.orders.filter(e => e.statusName === 'not ready').length > 0){
      this.confirmationService.confirm({
        message: 'There is already ongoing order. Do you want start another?',
        header: 'Order',
        icon: 'fa fa-exclamation-triangle',
        acceptLabel: 'Yes',
        rejectLabel: 'No',
        key: 'ongoin',
        accept: () => {
        },
        reject: () => {
          return
        }
      })
    }
    
    this.confirmationService.confirm({
      message: 'Are you sure?',
      header: 'Order',
      icon: 'fa fa-exclamation-triangle',
      acceptLabel: 'Yes',
      rejectLabel: 'No',
      key: 'confirm',
      accept: () => {
       *//add object code*
      }
    });

This how it looks like in html:

<button pButton tooltipPosition="left" (click)="createOrder()" icon="fa fa-plus-square"
          class="ui-button-warning">
        </button>
        <p-confirmDialog key='ongoin'></p-confirmDialog>
        <p-confirmDialog key='confirm'></p-confirmDialog>

My problem is that both confirm dialogs shows up at the same time. I guess it is because of using twice in html. But if i change that to

<p-confirmDialog></p-confirmDialog>

Only the first one works ('There is already ongoin...') and second one('Are you sure') after clicking yes doesn't show up. How do I make it work?

primeng angular javascript
1 Answers

You should be calling the second dialog after the confirmation happens. Which happens in accept or reject callbacks. But you are immediately calling this.confirmationService.confirm again and it is causing both dialogs to be shown.

You should be having something like below :

createOrder() {
    if(this.orders.filter(e => e.statusName === 'not ready').length > 0){
      this.confirmationService.confirm({
        message: 'There is already ongoing order. Do you want start another?',
        header: 'Order',
        icon: 'fa fa-exclamation-triangle',
        acceptLabel: 'Yes',
        rejectLabel: 'No',
        key: 'ongoin',
        accept: () => {
         // do something here
         this.showAnotherDialog();
        },
        reject: () => {
         // if you want to show another dialog on reject you should call it here
          return
        }
      })
    } else {
       this.showAnotherDialog();
   }   
}

showAnotherDialog() {
   this.confirmationService.confirm({
      message: 'Are you sure?',
      header: 'Order',
      icon: 'fa fa-exclamation-triangle',
      acceptLabel: 'Yes',
      rejectLabel: 'No',
      key: 'confirm',
      accept: () => {
       *//add object code*
      }
    });
}
user_123549110
Related