bug: Order of running functions - closing modals

[jcasadogp]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] 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[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.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.