Revert "Change dialog to multi-window mode (#1672)" (#1686)

This reverts commit 43c23e526c.

src/components/dialog/GlobalDialog.vue

@@ -1,37 +1,61 @@
 <!-- The main global dialog to show various things -->
 <template>
   <Dialog
-    v-for="(item, index) in dialogStore.dialogStack"
-    :key="item.key"
-    v-model:visible="item.visible"
+    v-model:visible="dialogStore.isVisible"
     class="global-dialog"
-    v-bind="item.dialogComponentProps"
-    :auto-z-index="false"
-    :pt:mask:style="{ zIndex: 2100 + index + 1 }"
-    :aria-labelledby="item.key"
+    modal
+    closable
+    closeOnEscape
+    dismissableMask
+    :maximizable="maximizable"
+    :maximized="maximized"
+    @hide="dialogStore.closeDialog"
+    @maximize="onMaximize"
+    @unmaximize="onUnmaximize"
+    :aria-labelledby="headerId"
   >
     <template #header>
       <component
-        v-if="item.headerComponent"
-        :is="item.headerComponent"
-        :id="item.key"
+        v-if="dialogStore.headerComponent"
+        :is="dialogStore.headerComponent"
+        :id="headerId"
       />
-      <h3 v-else :id="item.key">{{ item.title || ' ' }}</h3>
+      <h3 v-else :id="headerId">{{ dialogStore.title || ' ' }}</h3>
     </template>
 
-    <component
-      :is="item.component"
-      v-bind="item.contentProps"
-      :maximized="item.dialogComponentProps.maximized"
-    />
+    <component :is="dialogStore.component" v-bind="contentProps" />
   </Dialog>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { useDialogStore } from '@/stores/dialogStore'
 import Dialog from 'primevue/dialog'
 
 const dialogStore = useDialogStore()
+const maximizable = computed(
+  () => dialogStore.dialogComponentProps.maximizable ?? false
+)
+const maximized = ref(false)
+
+const onMaximize = () => {
+  maximized.value = true
+}
+
+const onUnmaximize = () => {
+  maximized.value = false
+}
+
+const contentProps = computed(() =>
+  maximizable.value
+    ? {
+        ...dialogStore.props,
+        maximized: maximized.value
+      }
+    : dialogStore.props
+)
+
+const headerId = `dialog-${Math.random().toString(36).substr(2, 9)}`
 </script>
 
 <style>

src/stores/dialogStore.ts

@@ -2,126 +2,52 @@
 // Currently we need to bridge between legacy app code and Vue app with a Pinia store.
 
 import { defineStore } from 'pinia'
-import { ref, type Component, markRaw } from 'vue'
+import { ref, shallowRef, type Component, markRaw } from 'vue'
 
 interface DialogComponentProps {
   maximizable?: boolean
   onClose?: () => void
 }
 
-interface DialogInstance {
-  key: string
-  visible: boolean
-  title?: string
-  headerComponent?: Component
-  component: Component
-  contentProps: Record<string, any>
-  dialogComponentProps: Record<string, any>
-}
-
 export const useDialogStore = defineStore('dialog', () => {
-  const dialogStack = ref<DialogInstance[]>([])
-
-  const genDialogKey = () => `dialog-${Math.random().toString(36).slice(2, 9)}`
-
-  function riseDialog(options: { key: string }) {
-    const dialogKey = options.key
-
-    const index = dialogStack.value.findIndex((d) => d.key === dialogKey)
-    if (index !== -1) {
-      const dialogs = dialogStack.value.splice(index, 1)
-      dialogStack.value.push(...dialogs)
-    }
-  }
-
-  function closeDialog(options?: { key: string }) {
-    if (!options) {
-      dialogStack.value.pop()
-      return
-    }
-
-    const dialogKey = options.key
-
-    const index = dialogStack.value.findIndex((d) => d.key === dialogKey)
-    if (index === -1) {
-      return
-    }
-    dialogStack.value.splice(index, 1)
-  }
-
-  function createDialog(options: {
-    key: string
-    title?: string
-    headerComponent?: Component
-    component: Component
-    props?: Record<string, any>
-    dialogComponentProps?: DialogComponentProps
-  }) {
-    const dialog = {
-      key: options.key,
-      visible: true,
-      title: options.title,
-      headerComponent: options.headerComponent
-        ? markRaw(options.headerComponent)
-        : undefined,
-      component: markRaw(options.component),
-      contentProps: { ...options.props },
-      dialogComponentProps: {
-        maximizable: false,
-        modal: true,
-        closable: true,
-        closeOnEscape: true,
-        dismissableMask: true,
-        ...options.dialogComponentProps,
-        maximized: false,
-        onMaximize: () => {
-          dialog.dialogComponentProps.maximized = true
-        },
-        onUnmaximize: () => {
-          dialog.dialogComponentProps.maximized = false
-        },
-        onAfterHide: () => {
-          options.dialogComponentProps?.onClose?.()
-          closeDialog(dialog)
-        },
-        pt: {
-          root: {
-            onMousedown: () => {
-              riseDialog(dialog)
-            }
-          }
-        }
-      }
-    }
-    dialogStack.value.push(dialog)
-
-    return dialog
-  }
+  const isVisible = ref(false)
+  const title = ref('')
+  const headerComponent = shallowRef<Component | null>(null)
+  const component = shallowRef<Component | null>(null)
+  const props = ref<Record<string, any>>({})
+  const dialogComponentProps = ref<DialogComponentProps>({})
 
   function showDialog(options: {
-    key?: string
     title?: string
     headerComponent?: Component
     component: Component
     props?: Record<string, any>
     dialogComponentProps?: DialogComponentProps
   }) {
-    const dialogKey = options.key || genDialogKey()
+    isVisible.value = true
+    title.value = options.title ?? ''
+    headerComponent.value = options.headerComponent
+      ? markRaw(options.headerComponent)
+      : null
+    component.value = markRaw(options.component)
+    props.value = options.props || {}
+    dialogComponentProps.value = options.dialogComponentProps || {}
+  }
 
-    let dialog = dialogStack.value.find((d) => d.key === dialogKey)
-
-    if (dialog) {
-      dialog.visible = true
-      riseDialog(dialog)
-    } else {
-      dialog = createDialog({ ...options, key: dialogKey })
+  function closeDialog() {
+    if (dialogComponentProps.value.onClose) {
+      dialogComponentProps.value.onClose()
     }
-    return dialog
+    isVisible.value = false
   }
 
   return {
-    dialogStack,
-    riseDialog,
+    isVisible,
+    title,
+    headerComponent,
+    component,
+    props,
+    dialogComponentProps,
     showDialog,
     closeDialog
   }