Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Quiver Tab "Projects" selected although Tab "Workflow" is opened #65

Merged
merged 2 commits into from
Apr 10, 2024
Merged

Quiver Tab "Projects" selected although Tab "Workflow" is opened #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
181aa2b
fix: wrong tabmenu being highlighted
Feb 6, 2024
307e85b
refactor: use redirect to display workflows on initial navigation
Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/router/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ const router = createRouter({
path: '/',
name: 'home',
component: HomeView,
redirect: '/workflows',
children: [
{ path: 'projects', name: 'projects', component: Projects },
{ path: 'processors', name: 'processors', component: Processors },
{ path: 'workflows', alias: '/', name: 'workflows', component: Workflows },
{ path: 'workflows', name: 'workflows', component: Workflows },
],
},
]
Expand Down
19 changes: 13 additions & 6 deletions src/views/HomeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<script setup lang="ts">
import { ref } from "vue"
import { computed, ref } from "vue"
import { useI18n } from "vue-i18n"
import TabMenu from 'primevue/tabmenu'
import { useRouter } from "vue-router"
import { useRoute, useRouter } from "vue-router"

const { t } = useI18n()
const route = useRoute()
const router = useRouter()

const items = ref([
Expand All @@ -25,14 +26,20 @@ const items = ref([
}
])

function onTabChange({ index }) {
router.push(items.value[index].to)
}
const activeRouteIndex = computed({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also have to consider that the URL stays the same which shouldn't be the case. I think the solution should be to redirect the route to /workflows before loading the tabs. Then the tabs would pick up the right path automatically.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not really sure about the issue, could you please elaborate further?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you visit the app initially it stays on /. But in fact it is /workflows, so it should redirect the URL to /workflows. After that you should pass the index to the TabMenu. So the getter here becomes simpler. That way the tabs would always stay in sync with the URL.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I've updated it. Can you check it out?

get() {
return items.value.findIndex(({ to }) => to === route.path)
},
set(index) {
router.push(items.value[index].to)
}
})

</script>
<template>
<main>
<div class="container mx-auto">
<TabMenu :model="items" @tab-change="onTabChange" />
<TabMenu v-model:activeIndex="activeRouteIndex" :model="items" />
<div class="content-container pt-6">
<RouterView/>
</div>
Expand Down
Loading