bug: Order of running functions - closing modals

[jcasadogp]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Hello, I am developing an app in Ionic with Angular where I can answer some questionnaires; whenever I answer one of them it must be closed until some time has passed.

For this purpose I have a main page called quest.page.tswhere a list of questionnaires appear on the HTML. Whenever I click on questionnaire XXX it takes me to XXX.component.ts where I fill it and send it. The data from all questionnaires is "collected" and managed on the quest.service.tswhere I finally call a data.service.tswhere HTML calls are made to update the database. This database also contains the status of each questionnaire (open/closed) so together with the data of the questionnaire I must update the DB status of each of them.

Hence, my postXXXForm() function, on XXX.component.ts, is:

postXXXForm(): void {

    // *** //

    if(i < 11){
      // *** //
    } else {

      this.questsSrvc.postXXXForm(this.id, this.xxx_form).then(()=>{

        this.questsSrvc.setQuestStatus(this.id, "xxx").then(() => {
          this.modalCntrl.dismiss().then().catch();
          this.presentConfirmationToast();
        });
        
      }).catch((err) => console.log(err));
    }
  }

Then, quest.page.tschecks on the DB the status of each questionnaire in order to enable them with:

getQuestStatus(event) {
    
    this.questsSrvc.getQuestStatus(this.id).subscribe({

      next: (data: QuestControl) => {

        console.log("** Start of .get quest status. in quests.page.ts")
        console.log("** quest status data", data)
        if(data[0].quest_control == 0){ // Automático

          if (data[0].xxx_date_1 && data[0].xxx_date_1 !== "") {
            this.checkQuestDate('XXX', data[0].xxx_date_1);
          } else {
            this.isEnabledXXX = '1'
          }
          // ** //
          console.log('**', this.isEnabledMonitoring)

        } else {
          // ** //
        }
        if (event) event.target.complete();
      },
      error: (err) => {
        console.log(err)
        if (event) event.target.complete();
      },
      complete: () => {}
    })
  }

Finally, the quest.service.ts sets a new status with:

async setQuestStatus(id: string, quest_name: string): Promise<void> {

    console.log("* Start of .set quest status. in quests.service.ts")
    
    this.getQuestStatus(id).subscribe({
      next: (data: QuestControl) => {

        // ** //
          data2[0] = { ...data[0], ...data2[0] };

          this.dataSrvc.import(data2).subscribe((res) => {
            console.log("Data imported on the DB to update status", data2)
            console.log("Quest Status updated on the DB")
          })
        } 
      },
      error: (err) => {console.log(err)},
      complete: () => {}
    })
  }

Expected Behavior

With this part I would expect to run as I explained before. However, the order is inverted somehow.

this.questsSrvc.postXXXForm(this.id, this.xxx_form).then(()=>{

        this.questsSrvc.setQuestStatus(this.id, "xxx").then(() => {
          this.modalCntrl.dismiss().then().catch();
          this.presentConfirmationToast();
        });
        
      })

However, when I look at the console (and see that the questionnaires are not disabled) I see that the quest.page.ts has run before quest.serice.ts sets up the new status on the DB.

I guess it is related with async codes, but I have tries everything with no results... may someone help me please?

Steps to Reproduce

If any further code or information is needed, please contact me!

Code Reproduction URL

I cannot provide URL as it is a huge project linked to several private DBs

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.6.5
   @angular-devkit/build-angular : 17.1.0
   @angular-devkit/schematics    : 17.1.0
   @angular/cli                  : 17.1.0
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : not installed
   @capacitor/core    : 5.6.0
   @capacitor/ios     : not installed

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run (update available: 2.0.1)   : 2.0.0

System:

   NodeJS : v18.16.0 (/usr/local/bin/node)
   npm    : 9.5.1
   OS     : macOS Big Sur

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[thetaPC]

Closing due to the lack of minimal reproduction. Feel free to open another issue with a repro.