vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: rename backdropView to backdropRoute(Path)

This commit is contained in:
Dominik Pschenitschni 2022-11-22 18:30:57 +01:00
parent 13e68ac94d
commit 308cfe4748
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
16 changed files with 57 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/home/TheNavigation.vue
View File

@ -16,7 +16,7 @@
{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
</h1>
<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}, state: {backdropView: $route.fullPath}}" class="info-button">
<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}, state: {backdropRoutePath: $route.fullPath}}" class="info-button">
<icon icon="circle-info"/>
</BaseButton>
@ -75,7 +75,7 @@
{{ $t('keyboardShortcuts.title') }}
</dropdown-item>
<dropdown-item
:to="{name: 'about', state: {backdropView: $route.fullPath}}"
:to="{name: 'about', state: {backdropRoutePath: $route.fullPath}}"
>
{{ $t('about.title') }}
</dropdown-item>

11
src/components/home/contentAuth.vue
View File

@ -32,14 +32,13 @@
<quick-actions/>
<router-view v-if="routeWithModal" :route="routeWithModal" v-slot="{ Component }">
<!-- <keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']"> -->
<router-view :route="baseRoute" v-slot="{ Component }">
<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
<component :is="Component"/>
<!-- test -->
<!-- </keep-alive> -->
</keep-alive>
</router-view>
<component :is="currentModal" />
<component :is="modalRoute" />
<BaseButton
class="keyboard-shortcuts-button d-print-none"
@ -67,7 +66,7 @@ import {useLabelStore} from '@/stores/labels'
import {useRouteWithModal} from '@/composables/useRouteWithModal'
import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
const {routeWithModal, currentModal} = useRouteWithModal()
const {baseRoute, modalRoute} = useRouteWithModal()
const baseStore = useBaseStore()
const background = computed(() => baseStore.background)

18
src/components/list/list-settings-dropdown.vue
View File

@ -10,13 +10,13 @@
<template v-if="isSavedFilter(list)">
<dropdown-item
:to="{ name: 'filter.settings.edit', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'filter.settings.edit', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="pen"
>
{{ $t('menu.edit') }}
</dropdown-item>
<dropdown-item
:to="{ name: 'filter.settings.delete', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'filter.settings.delete', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="trash-alt"
>
{{ $t('misc.delete') }}
@ -25,7 +25,7 @@
<template v-else-if="list.isArchived">
<dropdown-item
:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="archive"
>
{{ $t('menu.unarchive') }}
@ -33,32 +33,32 @@
</template>
<template v-else>
<dropdown-item
:to="{ name: 'list.settings.edit', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'list.settings.edit', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="pen"
>
{{ $t('menu.edit') }}
</dropdown-item>
<dropdown-item
v-if="backgroundsEnabled"
:to="{ name: 'list.settings.background', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'list.settings.background', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="image"
>
{{ $t('menu.setBackground') }}
</dropdown-item>
<dropdown-item
:to="{ name: 'list.settings.share', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'list.settings.share', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="share-alt"
>
{{ $t('menu.share') }}
</dropdown-item>
<dropdown-item
:to="{ name: 'list.settings.duplicate', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'list.settings.duplicate', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="paste"
>
{{ $t('menu.duplicate') }}
</dropdown-item>
<dropdown-item
:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="archive"
>
{{ $t('menu.archive') }}
@ -73,7 +73,7 @@
type="dropdown"
/>
<dropdown-item
:to="{ name: 'list.settings.delete', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
:to="{ name: 'list.settings.delete', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
icon="trash-alt"
class="has-text-danger"
>

12
src/components/namespace/namespace-settings-dropdown.vue
View File

@ -10,7 +10,7 @@
<template v-if="namespace.isArchived">
<dropdown-item
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
icon="archive"
>
{{ $t('menu.unarchive') }}
@ -18,25 +18,25 @@
</template>
<template v-else>
<dropdown-item
:to="{ name: 'namespace.settings.edit', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
:to="{ name: 'namespace.settings.edit', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
icon="pen"
>
{{ $t('menu.edit') }}
</dropdown-item>
<dropdown-item
:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id }, state: { backdropView: $route.fullPath } }"
:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
icon="share-alt"
>
{{ $t('menu.share') }}
</dropdown-item>
<dropdown-item
:to="{ name: 'list.create', params: { namespaceId: namespace.id }, state: { backdropView: $route.fullPath } }"
:to="{ name: 'list.create', params: { namespaceId: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
icon="plus"
>
{{ $t('menu.newList') }}
</dropdown-item>
<dropdown-item
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
icon="archive"
>
{{ $t('menu.archive') }}
@ -51,7 +51,7 @@
type="dropdown"
/>
<dropdown-item
:to="{ name: 'namespace.settings.delete', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
:to="{ name: 'namespace.settings.delete', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
icon="trash-alt"
class="has-text-danger"
>

2
src/components/tasks/GanttChart.vue
View File

@ -153,7 +153,7 @@ function openTask(e: {
router.push({
name: 'task.detail',
params: {id: e.bar.ganttBarConfig.id},
state: {backdropView: router.currentRoute.value.fullPath},
state: {backdropRoutePath: router.currentRoute.value.fullPath},
})
}

2
src/components/tasks/partials/kanban-card.vue
View File

@ -121,7 +121,7 @@ function openTaskDetail() {
router.push({
name: 'task.detail',
params: {id: props.task.id},
state: {backdropView: router.currentRoute.value.fullPath},
state: {backdropRoutePath: router.currentRoute.value.fullPath},
})
}

2
src/components/tasks/partials/singleTaskInList.vue
View File

@ -225,7 +225,7 @@ const taskDetailRoute = computed(() => ({
name: 'task.detail',
params: {id: task.value.id},
// TODO: re-enable opening task detail in modal
// state: { backdropView: router.currentRoute.value.fullPath },
// state: { backdropRoutePath: router.currentRoute.value.fullPath },
}))

31
src/composables/useRouteWithModal.ts
View File

@ -2,8 +2,8 @@ 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
// 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
@ -23,11 +23,11 @@ export function useRouteWithModal() {
const router = useRouter()
const route = useRoute()
const backdropView = computed<RouteLocationRaw | undefined>(() => {
const historyStateBackdropRoutePath = computed<RouteLocationRaw | undefined>(() => {
// every time the fullPath changes we check the history state
// this happens also initially
return route.fullPath
? window.history.state?.backdropView
? window.history.state?.backdropRoutePath
: undefined
})
@ -38,13 +38,14 @@ export function useRouteWithModal() {
const baseRoute = shallowRef<RouteLocationNormalizedLoaded>()
watch(
[backdropView, routerIsReady],
[routerIsReady, historyStateBackdropRoutePath],
async () => {
if (routerIsReady.value === false || !route.fullPath) {
// wait until we can work with routes
return
}
if (backdropView.value === undefined) {
if (historyStateBackdropRoutePath.value === undefined) {
if (route.meta?.showAsModal !== true) {
baseRoute.value = route
return
@ -58,34 +59,34 @@ export function useRouteWithModal() {
// 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)
baseRoute.value = await resolveAndLoadRoute(historyStateBackdropRoutePath.value)
},
{immediate: true},
)
const backdropRoute = computed(() => route.fullPath !== baseRoute.value?.fullPath ? baseRoute.value : undefined)
const currentModal = shallowRef<VNode>()
const modalRoute = shallowRef<VNode>()
watch(
[backdropRoute, baseRoute, route],
[backdropRoute, route],
() => {
if (routerIsReady.value === false || !route.fullPath || !backdropRoute.value) {
currentModal.value = undefined
modalRoute.value = undefined
return
}
const props = getRouteProps(route)
props.backdropView = backdropRoute.value
props.backdropRoutePath = backdropRoute.value.fullPath
props.onClose = closeModal
const component = route.matched[0]?.components?.default
if (!component) {
currentModal.value = undefined
modalRoute.value = undefined
return
}
currentModal.value = h(component, props)
modalRoute.value = h(component, props)
},
{immediate: true},
)
@ -105,8 +106,8 @@ export function useRouteWithModal() {
}
return {
routeWithModal: baseRoute,
currentModal,
baseRoute,
modalRoute,
closeModal,
}
}

2
src/views/Home.vue
View File

@ -21,7 +21,7 @@
<template v-if="defaultNamespaceId > 0">
<p class="mt-4">{{ $t('home.list.newText') }}</p>
<x-button
:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId }, state: { backdropView: $route.fullPath } }"
:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId }, state: { backdropRoutePath: $route.fullPath } }"
:shadow="false"
class="ml-2"
>

4
src/views/labels/ListLabels.vue
View File

@ -3,7 +3,7 @@
<x-button
:to="{
name:'labels.create',
state: { backdropView: $route.fullPath }
state: { backdropRoutePath: $route.fullPath }
}"
class="is-pulled-right"
icon="plus"
@ -20,7 +20,7 @@
{{ $t('label.newCTA') }}
<router-link :to="{
name:'labels.create',
state: { backdropView: $route.fullPath }
state: { backdropRoutePath: $route.fullPath }
}">{{ $t('label.create.title') }}.</router-link>
</p>
</div>

2
src/views/list/ListTable.vue
View File

@ -282,7 +282,7 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
{
name: 'task.detail',
params: {id},
// state: { backdropView: router.currentRoute.value.fullPath },
// state: { backdropRoutePath: router.currentRoute.value.fullPath },
},
])),
))

2
src/views/list/settings/edit.vue
View File

@ -5,7 +5,7 @@
:primary-label="$t('misc.save')"
@primary="save"
:tertiary="$t('misc.delete')"
@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId }, state: {backdropView: $route.fullPath} })"
@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId }, state: {backdropRoutePath: $route.fullPath} })"
#default="{onClose}"
>
<div class="field">

12
src/views/namespaces/ListNamespaces.vue
View File

@ -6,10 +6,10 @@
</fancycheckbox>
<div class="action-buttons">
<x-button :to="{name: 'filters.create', state: {backdropView: $route.fullPath}}" icon="filter">
<x-button :to="{name: 'filters.create', state: {backdropRoutePath: $route.fullPath}}" icon="filter">
{{ $t('filters.create.title') }}
</x-button>
<x-button :to="{name: 'namespace.create', state: {backdropView: $route.fullPath}}" icon="plus" v-cy="'new-namespace'">
<x-button :to="{name: 'namespace.create', state: {backdropRoutePath: $route.fullPath}}" icon="plus" v-cy="'new-namespace'">
{{ $t('namespace.create.title') }}
</x-button>
</div>
@ -17,7 +17,7 @@
<p v-if="namespaces.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
{{ $t('namespace.noneAvailable') }}
<BaseButton :to="{name: 'namespace.create', state: {backdropView: $route.fullPath}}">
<BaseButton :to="{name: 'namespace.create', state: {backdropRoutePath: $route.fullPath}}">
{{ $t('namespace.create.title') }}.
</BaseButton>
</p>
@ -25,7 +25,7 @@
<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
<x-button
v-if="n.id > 0 && n.lists.length > 0"
:to="{name: 'list.create', params: {namespaceId: n.id}, state: { backdropView: $route.fullPath }}"
:to="{name: 'list.create', params: {namespaceId: n.id}, state: { backdropRoutePath: $route.fullPath }}"
class="is-pulled-right"
variant="secondary"
icon="plus"
@ -34,7 +34,7 @@
</x-button>
<x-button
v-if="n.isArchived"
:to="{name: 'namespace.settings.archive', params: {id: n.id}, state: { backdropView: $route.fullPath } }"
:to="{name: 'namespace.settings.archive', params: {id: n.id}, state: { backdropRoutePath: $route.fullPath } }"
class="is-pulled-right mr-4"
variant="secondary"
icon="archive"
@ -51,7 +51,7 @@
<p v-if="n.lists.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
{{ $t('namespace.noLists') }}
<BaseButton :to="{name: 'list.create', params: {namespaceId: n.id}, state: { backdropView: $route.fullPath }}">
<BaseButton :to="{name: 'list.create', params: {namespaceId: n.id}, state: { backdropRoutePath: $route.fullPath }}">
{{ $t('namespace.createList') }}
</BaseButton>
</p>

2
src/views/namespaces/settings/edit.vue
View File

@ -5,7 +5,7 @@
:primary-label="$t('misc.save')"
@primary="save"
:tertiary="$t('misc.delete')"
@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id }, state: { backdropView: $route.fullPath } })"
@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id }, state: { backdropRoutePath: $route.fullPath } })"
#default="{onClose}"
>
<form @submit.prevent="save(onClose)">

4
src/views/tasks/TaskDetailView.vue
View File

@ -507,7 +507,7 @@ const props = defineProps({
type: Number as PropType<ITask['id']>,
required: true,
},
backdropView: {
backdropRoutePath: {
type: String as PropType<RouteLocation['fullPath']>,
},
})
@ -580,7 +580,7 @@ const color = computed(() => {
const hasAttachments = computed(() => attachmentStore.attachments.length > 0)
const isModal = computed(() => Boolean(props.backdropView))
const isModal = computed(() => Boolean(props.backdropRoutePath))
function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
return uploadFile(taskId.value, file, onSuccess)

4
src/views/teams/ListTeams.vue
View File

@ -3,7 +3,7 @@
<x-button
:to="{
name:'teams.create',
state: { backdropView: $route.fullPath },
state: { backdropRoutePath: $route.fullPath },
}"
class="is-pulled-right"
icon="plus"
@ -23,7 +23,7 @@
{{ $t('team.noTeams') }}
<router-link :to="{
name: 'teams.create',
state: { backdropView: $route.fullPath },
state: { backdropRoutePath: $route.fullPath },
}">
{{ $t('team.create.title') }}.
</router-link>