feat: implement modals with vue router 4 #816

Merged
konrad merged 62 commits from dpschen/frontend:feature/vue3-modals-with-router-4 into main 2022-02-05 16:49:04 +00:00
8 changed files with 10 additions and 14 deletions
Showing only changes of commit 2db820d926 - Show all commits

View File

@ -7,9 +7,5 @@
"video": false,
"retries": {
"runMode": 2
},
"testFiles": [
"list/list.spec.js",
"**/*.spec.js"
]
}
}

View File

@ -54,8 +54,8 @@ function useRouteWithModal() {
const historyState = computed(() => route.fullPath && window.history.state)
const routeWithModal = computed(() => {
if (historyState.value.backgroundView) {
return router.resolve(historyState.value.backgroundView)
if (historyState.value.backdropView) {
return router.resolve(historyState.value.backdropView)
} else {
return route
}
@ -65,7 +65,7 @@ function useRouteWithModal() {
const currentModal = shallowRef(null)
watchEffect(() => {
currentModal.value = historyState.value.backgroundView
currentModal.value = historyState.value.backdropView
? route.matched[0]?.components.default
: null
})

View File

@ -107,7 +107,7 @@ export default {
return {
name: 'task.detail',
params: { id: this.taskEditTask.id },
state: { backgroundView: this.$router.currentRoute.value.fullPath },
state: { backdropView: this.$router.currentRoute.value.fullPath },
dpschen marked this conversation as resolved Outdated

I'm not sure about the naming of this because there's views with a background. Maybe that can get confusing?

I'm not sure about the naming of this because there's views with a background. Maybe that can get confusing?

That's true. Do you have a suggestion?

Maybe something like backdropView in the sense of https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

That's true. Do you have a suggestion? Maybe something like backdropView in the sense of https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

I like that idea.

I like that idea.

Done

Done
}
},
},

View File

@ -116,7 +116,7 @@ export default {
this.$router.push({
name: 'task.detail',
params: { id: this.task.id },
state: { backgroundView: this.$router.currentRoute.value.fullPath },
state: { backdropView: this.$router.currentRoute.value.fullPath },
})
},
},

View File

@ -167,7 +167,7 @@ export default {
return {
name: 'task.detail',
params: { id: this.task.id },
state: { backgroundView: this.$router.currentRoute.value.fullPath },
state: { backdropView: this.$router.currentRoute.value.fullPath },
}
},
},

View File

@ -21,7 +21,7 @@ export function useTaskList(initTasks) {
const loading = computed(() => taskCollectionService.value.loading)
const totalPages = computed(() => taskCollectionService.value.totalPages)
const tasks = ref([])
const tasks = ref([])
dpschen marked this conversation as resolved Outdated

Please indent.

Please indent.

Done

Done
const currentPage = ref(0)
const loadedList = ref(null)
const searchTerm = ref('')

View File

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

View File

@ -124,7 +124,7 @@ async function loadList(listIdToLoad) {
const loadedList = await listService.value.get(list)
await store.dispatch(CURRENT_LIST, loadedList)
} finally {
loadedListId.value = listId
loadedListId.value = listId.value
}
}
</script>