vikunja/frontend/src/views/project/ProjectView.vue

75 lines
1.6 KiB
Vue

<script setup lang="ts">
import {computed, watch} from 'vue'
import {useProjectStore} from '@/stores/projects'
import {useRoute, useRouter} from 'vue-router'
import ProjectList from '@/components/project/views/ProjectList.vue'
import ProjectGantt from '@/components/project/views/ProjectGantt.vue'
import ProjectTable from '@/components/project/views/ProjectTable.vue'
import ProjectKanban from '@/components/project/views/ProjectKanban.vue'
const {
projectId,
viewId,
} = defineProps<{
projectId: number,
viewId: number,
}>()
const router = useRouter()
const projectStore = useProjectStore()
const currentView = computed(() => {
const project = projectStore.projects[projectId]
return project?.views.find(v => v.id === viewId)
})
watch(
() => viewId,
() => {
if (viewId === 0) {
// Ideally, we would do that in the router redirect, but we the projects (and therefore, the views)
// are not always loaded then.
const viewId = projectStore.projects[projectId].views[0].id
router.replace({
name: 'project.view',
params: {
projectId,
viewId,
},
})
}
},
{immediate: true},
)
const route = useRoute()
</script>
<template>
<ProjectList
v-if="currentView?.viewKind === 'list'"
:project-id="projectId"
:viewId
/>
<ProjectGantt
v-if="currentView?.viewKind === 'gantt'"
:route
:viewId
/>
<ProjectTable
v-if="currentView?.viewKind === 'table'"
:project-id="projectId"
:viewId
/>
<ProjectKanban
v-if="currentView?.viewKind === 'kanban'"
:project-id="projectId"
:viewId
/>
</template>
<style scoped lang="scss">
</style>