Using q-dialog-plugin in a loop

[CWoodman]

I have a bunch of q-tabs managed by a vuex store. There’s a command to remove all tabs, but if the component on a tab has unsaved data, I want to show a dialog and give the option to skip closing that tab.
But I don’t know how to continue the loop for other tabs.
Here’s my code: the ‘continue’ statement gives me a lint error so can’t compile it…

removeAllTabs ({ commit }) {
    for (const index in state.tabList) {
      if (state.tabList[index].tabState.unsaved) {
        const tabName = state.tabList[index].name
        Dialog.create({
          title: tabName + ' has un-saved changes!',
          message: 'Close without saving changes?',
          cancel: true,
          persistent: true
        }).onOk(() => {
          commit('REMOVE_TAB', index)
        }).onCancel(() => {
          continue
        })
      } else {
        commit('REMOVE_TAB', index)
      }
    }
  }

[CWoodman]

@CWoodman Decided to move the loop outside of the store module. It works, but there’s still an issue…
If several tabs trigger the dialog because they have unsaved changes, the loop continues and the dialogs pile on top of each other. Still works but looks ugly.
It would be better if the loop would pause until a dialog was closed. Any suggestion how to do this?
Here’s the code now:

    closeAll () {
      const nameList = this.tabList.map(tab => tab.name)
      nameList.forEach((tabName) => {
        // Check whether tab has unsaved changes
        const tabState = this.getTabState(tabName)
        if (Object.keys(tabState).includes('unsaved') && tabState.unsaved) {
          // Tab has unsaved changes
          console.log('Ask if ok to remove unsaved tab')
          this.$q.dialog({
            title: tabName + ' has un-saved changes!',
            message: 'Close without saving changes?',
            cancel: true,
            persistent: true
          }).onOk(() => {
            this.removeTab(tabName)
          }).onCancel(() => {
            // Make sure this tab is selected
            this.selectTab({ name: tabName })
          })
        } else {
          // No unsaved changes - go ahead and remove it
          this.removeTab(tabName)
        }
      })
    },

[dobbel]

@CWoodman you could make a queu(array) that stores the tabs with unsaved data or the dialogs. Then you popup the first dialog in the queu and after each dialog is completed( check in ‘ok’ or ‘onCancel’) you look in queue to popup the next dialog.

[CWoodman]

@dobbel Good idea. I’ll give that a try. Thanks.

[CWoodman]

@dobbel Works great! Thanks again.
Here’s my revised code…

    closeAll () {
      const nameList = this.tabList.map(tab => tab.name)
      const unsavedNames = []
      nameList.forEach((tabName) => {
        // Check whether tab has unsaved changes
        const tabState = this.getTabState(tabName)
        if (Object.keys(tabState).includes('unsaved') && tabState.unsaved) {
          // Tab has unsaved changes
          unsavedNames.push(tabName) // Save for confirming with user
        } else {
          // No unsaved changes - go ahead and remove it
          this.removeTab(tabName)
        }
      })
      if (unsavedNames.length > 0) { // One or more tabs with unsaved changes
        this.confirmClose(unsavedNames)
      }
    },

    confirmClose (nameList) { // Confirm closing tab with unsaved changes}
      if (nameList.length > 0) {
        const tabName = nameList.pop()
        this.$q.dialog({
          title: tabName + ' has un-saved changes!',
          message: 'Close without saving changes?',
          cancel: true,
          persistent: true
        }).onOk(() => {
          this.removeTab(tabName)
          this.confirmClose(nameList) // Check for more unsaved tabs
        }).onCancel(() => { // USer decided not to close this tab
          // Make sure this tab is selected
          this.selectTab({ name: tabName })
          this.confirmClose(nameList) // Check for more unsaved tabs
        })
      }
    },

[dobbel]

@CWoodman thats fast, great work ! Will save this code for myself