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, "video": false,
"retries": { "retries": {
"runMode": 2 "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 historyState = computed(() => route.fullPath && window.history.state)
const routeWithModal = computed(() => { const routeWithModal = computed(() => {
if (historyState.value.backgroundView) { if (historyState.value.backdropView) {
return router.resolve(historyState.value.backgroundView) return router.resolve(historyState.value.backdropView)
} else { } else {
return route return route
} }
@ -65,7 +65,7 @@ function useRouteWithModal() {
const currentModal = shallowRef(null) const currentModal = shallowRef(null)
watchEffect(() => { watchEffect(() => {
currentModal.value = historyState.value.backgroundView currentModal.value = historyState.value.backdropView
? route.matched[0]?.components.default ? route.matched[0]?.components.default
: null : null
}) })

View File

@ -107,7 +107,7 @@ export default {
return { return {
name: 'task.detail', name: 'task.detail',
params: { id: this.taskEditTask.id }, 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({ this.$router.push({
name: 'task.detail', name: 'task.detail',
params: { id: this.task.id }, 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 { return {
name: 'task.detail', name: 'task.detail',
params: { id: this.task.id }, 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 loading = computed(() => taskCollectionService.value.loading)
const totalPages = computed(() => taskCollectionService.value.totalPages) 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 currentPage = ref(0)
const loadedList = ref(null) const loadedList = ref(null)
const searchTerm = ref('') const searchTerm = ref('')

View File

@ -282,7 +282,7 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
{ {
name: 'task.detail', name: 'task.detail',
params: { id }, 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) const loadedList = await listService.value.get(list)
await store.dispatch(CURRENT_LIST, loadedList) await store.dispatch(CURRENT_LIST, loadedList)
} finally { } finally {
loadedListId.value = listId loadedListId.value = listId.value
} }
} }
</script> </script>