Multiple dialogs

[PiotrMigdal]

Hi guys,
I am using top level query watch to detect if route changes and to load specific dialogs. On mobile, dialogs are full screen with back button in the top left corner (typical mobile behaviour with overlapping pages). The problem starts when I load more than one dialog. For example, I load Job dialog and there is an option to add Client which has separate dialog. Framework doesn't remember previous dialog state so when Client dialog close and disappear, Job dialog is reloaded and all data is lost.

Is it possible to have separate instance of dialog for each window so it remembers state each that use Dialog.create() bus? If not, is there any other way to achieve similar? On mobile dialogs are full screen with back button, on desktop normal dialogs. Its important to me to have this in url (can be get or uri).

This is my watch:

watch(route, () => {
    if (route.query.jd) {
      Dialog.create({
        component: JobDialog,
        componentProps: {
          jobId: route.query.jd,
        },
      })
    }
    if (route.query.cd) {
      Dialog.create({
        component: ClientDialog,
        componentProps: {
          clientId: route.query.cd,
        },
      })
    }
  }, { immediate: true })

Here is my composable to fire dialogs (same is for client and job)

export function useClientDialog() {
  const router = useRouter()

  async function open(id: string) {
   await router.push({ query: { cd: id } })
  }

  function close() {
    router.go(-1)
  }

  return { open, close }
}

[yusufkandemir]

It seems the flow here is like this:

• the route gets loaded with ?jd=1, it launches the job dialog with jobId: 1
• the user clicks add client in the job dialog, and it opens the client dialog:
  • the job dialog is in the background, the client dialog is in front
• the client dialog gets closed, the user gets redirected back to ?jd=1
  • the job dialog is now in the front, but for a very brief moment, more on that below
• the watcher gets triggered, it launches a new instance of the job dialog
  • the initial job dialog is the background, the new job dialog is in the front

So, you must update your logic to not re-open the job/client dialogs if they are already open.

If this is not the case, you must provide much more details and a reproduction. Otherwise, since the problem is unclear, you won't be able to get meaningful help.

[PiotrMigdal]

Thanks for reply. Yes, your flow explanation is correct. The code I sent is not perfect. It is missing check if jd or cd is changed. I fixed this and it still reload dialogs. I am afraid, Dialog.create() creates only one instance of dialog and it is not possible to create multiple overlapping.

Is there any other way to achieve this? Maybe something built-in quasar framework?
If not, its fine. I will create bespoke solution to stack many dialogs.

[yusufkandemir]

You can see this https://stackblitz.com/edit/quasarframework-stackblitz-templates-ngvyjw8d
It shows Dialog can create infinite instances, even recursively. So, the problem lies within your logic. But, due to a very limited amount of information, we can't provide further help.

[PiotrMigdal]

ahh yeah its possible. That's good. I will figure it out tomorrow. Thanks for help.