feat(navigation): persist project open state in navigation

With this change, the project's collapsed open/closed state in the navigation survives a browser reload. Previously, all state would be lost after reloading.

Resolves vikunja/vikunja#2067
This commit is contained in:
kolaente 2024-02-12 22:22:55 +01:00
parent 0b61885e89
commit d7d3ffeebd
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 14 additions and 2 deletions

View File

@ -84,9 +84,10 @@
</template>
<script setup lang="ts">
import {computed, ref} from 'vue'
import {computed} from 'vue'
import {useProjectStore} from '@/stores/projects'
import {useBaseStore} from '@/stores/base'
import {useStorage} from '@vueuse/core'
import type {IProject} from '@/modelTypes/IProject'
@ -112,7 +113,18 @@ const projectStore = useProjectStore()
const baseStore = useBaseStore()
const currentProject = computed(() => baseStore.currentProject)
const childProjectsOpen = ref(true)
// Persist open state across browser reloads. Using a seperate ref for the state
// allows us to use only one entry in local storage instead of one for every project id.
type openState = { [key: number]: boolean }
const childProjectsOpenState = useStorage<openState>('navigation-child-projects-open', {})
const childProjectsOpen = computed({
get() {
return childProjectsOpenState.value[project.id] ?? true
},
set(open) {
childProjectsOpenState.value[project.id] = open
},
})
const childProjects = computed(() => {
return projectStore.getChildProjects(project.id)