diff --git a/src/components/base/OptionalWrapper.vue b/src/components/base/OptionalWrapper.vue
index 2cc1b351f..1600785b8 100644
--- a/src/components/base/OptionalWrapper.vue
+++ b/src/components/base/OptionalWrapper.vue
@@ -5,12 +5,7 @@ export default { inheritAttrs: false }
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 7a76229d3..cabc6d1d7 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -32,16 +32,14 @@
-
-
+
+
-
+
+
-
+
baseStore.background)
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index 881fcf6f6..ba0f818de 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -1,56 +1,112 @@
-import { computed, shallowRef, watchEffect, h, type VNode } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, shallowRef, watch, h, type VNode, ref } from 'vue'
+import { useRoute, useRouter, loadRouteLocation, type RouteLocationNormalizedLoaded, type RouteLocationRaw } from 'vue-router'
+import router from '@/router'
+
+ // this is adapted from vue-router
+ // https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
+function getRouteProps(route: RouteLocationNormalizedLoaded) {
+ const routePropsOption = route.matched[0]?.props.default
+ return routePropsOption
+ ? routePropsOption === true
+ ? route.params
+ : typeof routePropsOption === 'function'
+ ? routePropsOption(route)
+ : routePropsOption
+ : {}
+}
+
+function resolveAndLoadRoute(route: RouteLocationRaw) {
+ return loadRouteLocation(router.resolve(route))
+}
export function useRouteWithModal() {
const router = useRouter()
const route = useRoute()
- const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
-
- const routeWithModal = computed(() => {
- return backdropView.value
- ? router.resolve(backdropView.value)
- : route
+
+ const backdropView = computed(() => {
+ // every time the fullPath changes we check the history state
+ // this happens also initially
+ return route.fullPath
+ ? window.history.state?.backdropView
+ : undefined
})
+
+ const routerIsReady = ref(false)
+ router.isReady().then(() => {
+ routerIsReady.value = true
+ })
+
+ const baseRoute = shallowRef()
+ watch(
+ [backdropView, routerIsReady],
+ async () => {
+ if (routerIsReady.value === false || !route.fullPath) {
+ return
+ }
+
+ if (backdropView.value === undefined) {
+ if (route.meta?.showAsModal !== true) {
+ baseRoute.value = route
+ return
+ }
+ // TODO: maybe load parent route here in the future,
+ // via: route.matched[route.matched.length - 2]
+ // see: https://router.vuejs.org/guide/migration/#removal-of-parent-from-route-locations
+ baseRoute.value = await resolveAndLoadRoute({ name: 'home' })
+ return
+ }
+
+ // we get the resolved route from the fullpath
+ // and wait for the route component to be loaded before we assign it
+ baseRoute.value = await resolveAndLoadRoute(backdropView.value)
+ },
+ {immediate: true},
+ )
+
+ const backdropRoute = computed(() => route.fullPath !== baseRoute.value?.fullPath ? baseRoute.value : undefined)
const currentModal = shallowRef()
- watchEffect(() => {
- if (!backdropView.value) {
- currentModal.value = undefined
- return
+ watch(
+ [backdropRoute, baseRoute, route],
+ () => {
+ if (routerIsReady.value === false || !route.fullPath || !backdropRoute.value) {
+ currentModal.value = undefined
+ return
+ }
+
+ const props = getRouteProps(route)
+
+ props.backdropView = backdropRoute.value
+ props.onClose = closeModal
+
+ const component = route.matched[0]?.components?.default
+
+ if (!component) {
+ currentModal.value = undefined
+ return
+ }
+ currentModal.value = h(component, props)
+ },
+ {immediate: true},
+ )
+
+ async function closeModal() {
+ await router.isReady()
+ if (backdropRoute.value !== undefined) {
+ // TODO: Dialog modals might want to replace the route here via router.replace()
+ return router.push(backdropRoute.value)
}
-
- // this is adapted from vue-router
- // https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
- const routePropsOption = route.matched[0]?.props.default
- const routeProps = routePropsOption
- ? routePropsOption === true
- ? route.params
- : typeof routePropsOption === 'function'
- ? routePropsOption(route)
- : routePropsOption
- : {}
-
- routeProps.backdropView = backdropView.value
-
- const component = route.matched[0]?.components?.default
-
- if (!component) {
- currentModal.value = undefined
- return
- }
- currentModal.value = h(component, routeProps)
- })
-
- function closeModal() {
- const historyState = computed(() => route.fullPath && window.history.state)
-
- if (historyState.value === undefined) {
- router.back()
+ if (window.history.state === undefined) {
+ return router.push({ name: 'home' })
} else {
- const backdropRoute = historyState.value.backdropView && router.resolve(historyState.value.backdropView)
- router.push(backdropRoute)
+ router.back()
+ throw new Error('')
}
}
- return {routeWithModal, currentModal, closeModal}
+ return {
+ routeWithModal: baseRoute,
+ currentModal,
+ closeModal,
+ }
}
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 5b897ae7d..d572a7765 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -240,7 +240,7 @@ const router = createRouter({
meta: {
showAsModal: true,
},
- props: route => ({ namespaceId: parseInt(route.params.id as string) }),
+ props: route => ({ namespaceId: Number(route.params.id as string) }),
},
{
path: '/namespaces/:id/settings/delete',
@@ -468,6 +468,9 @@ const router = createRouter({
path: '/about',
name: 'about',
component: About,
+ meta: {
+ showAsModal: true,
+ },
},
],
})
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 190d5377b..cc302951a 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -512,9 +512,6 @@ const props = defineProps({
},
})
-defineEmits(['close'])
-const attrs = useAttrs()
-console.log(JSON.parse(JSON.stringify(attrs)))
const router = useRouter()
const {t} = useI18n({useScope: 'global'})