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

This reverts commit 43c23e526c.

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
   }