chore: move more logic to ProjectsNavigationItem.vue

src/components/home/ProjectsNavigation.vue

@@ -19,23 +19,10 @@
 		}"
 	>
 		<template #item="{element: project}">
-			<li
-				class="list-menu loader-container is-loading-small"
-				:class="{'is-loading': projectUpdating[project.id]}"
-				:data-project-id="project.id"
-			>
 			<ProjectsNavigationItem
 				:project="project"
-					:can-collapse="childProjects[project.id]?.length > 0"
-					:is-collapsed="collapsedProjects[project.id] || false"
-					@collapse="collapsedProjects[project.id] = !collapsedProjects[project.id]"
+				:is-loading="projectUpdating[project.id]"
 			/>
-				<ProjectsNavigation
-					v-if="!collapsedProjects[project.id]"
-					v-model="childProjects[project.id]"
-					:can-edit-order="true"
-				/>
-			</li>
 		</template>
 	</draggable>
 </template>
@@ -68,18 +55,11 @@ const projectStore = useProjectStore()
 
 // Vue draggable will modify the projects list as it changes their position which will not work on a prop.
 // Hence, we'll clone the prop and work on the clone.
-const collapsedProjects = ref<{ [id: IProject['id']]: boolean }>({})
 const availableProjects = ref<IProject[]>([])
-const childProjects = ref<{ [id: IProject['id']]: boolean }>({})
 watch(
 	() => props.modelValue,
 	projects => {
 		availableProjects.value = projects || []
-		projects?.forEach(p => {
-			collapsedProjects.value[p.id] = false
-			childProjects.value[p.id] = projectStore.getChildProjects(p.id)
-				.sort((a, b) => a.position - b.position)
-		})
 	},
 	{immediate: true},
 )

src/components/home/ProjectsNavigationItem.vue

@@ -1,11 +1,16 @@
 <template>
+	<li
+		class="list-menu loader-container is-loading-small"
+		:class="{'is-loading': isLoading}"
+		:data-project-id="project.id"
+	>
 		<section>
 			<BaseButton
-			v-if="canCollapse"
-			@click="emit('collapse')"
+				v-if="childProjects?.length > 0"
+				@click="childProjectsOpen = !childProjectsOpen"
 				class="collapse-project-button"
 			>
-			<icon icon="chevron-down" :class="{ 'project-is-collapsed': isCollapsed }"/>
+				<icon icon="chevron-down" :class="{ 'project-is-collapsed': !childProjectsOpen }"/>
 			</BaseButton>
 			<span class="collapse-project-button-placeholder" v-else></span>
 			<BaseButton
@@ -40,10 +45,16 @@
 			</ProjectSettingsDropdown>
 			<span class="list-setting-spacer" v-else></span>
 		</section>
+		<ProjectsNavigation
+			v-if="childProjectsOpen"
+			v-model="childProjects"
+			:can-edit-order="true"
+		/>
+	</li>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, watch, ref} from 'vue'
 import {useProjectStore} from '@/stores/projects'
 import {useBaseStore} from '@/stores/base'
 
@@ -53,18 +64,24 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import ProjectSettingsDropdown from '@/components/project/project-settings-dropdown.vue'
 import {getProjectTitle} from '@/helpers/getProjectTitle'
 import ColorBubble from '@/components/misc/colorBubble.vue'
+import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
 
-defineProps<{
+const props = defineProps<{
 	project: IProject,
-	isCollapsed: boolean,
-	canCollapse: boolean,
+	isLoading?: boolean,
 }>()
 
-const emit = defineEmits(['collapse'])
-
 const projectStore = useProjectStore()
 const baseStore = useBaseStore()
 const currentProject = computed(() => baseStore.currentProject)
+
+const childProjectsOpen = ref(true)
+
+const childProjects = computed(() => {
+	return projectStore.getChildProjects(props.project.id)
+		.sort((a, b) => a.position - b.position)
+})
+
 </script>
 
 <style lang="scss" scoped>