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]"
-				/>
-				<ProjectsNavigation
-					v-if="!collapsedProjects[project.id]"
-					v-model="childProjects[project.id]"
-					:can-edit-order="true"
-				/>
-			</li>
+			<ProjectsNavigationItem
+				:project="project"
+				:is-loading="projectUpdating[project.id]"
+			/>
 		</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,49 +1,60 @@
 <template>
-	<section>
-		<BaseButton
-			v-if="canCollapse"
-			@click="emit('collapse')"
-			class="collapse-project-button"
-		>
-			<icon icon="chevron-down" :class="{ 'project-is-collapsed': isCollapsed }"/>
-		</BaseButton>
-		<span class="collapse-project-button-placeholder" v-else></span>
-		<BaseButton
-			:to="{ name: 'project.index', params: { projectId: project.id} }"
-			class="list-menu-link"
-			:class="{'router-link-exact-active': currentProject.id === project.id}"
-		>
+	<li
+		class="list-menu loader-container is-loading-small"
+		:class="{'is-loading': isLoading}"
+		:data-project-id="project.id"
+	>
+		<section>
+			<BaseButton
+				v-if="childProjects?.length > 0"
+				@click="childProjectsOpen = !childProjectsOpen"
+				class="collapse-project-button"
+			>
+				<icon icon="chevron-down" :class="{ 'project-is-collapsed': !childProjectsOpen }"/>
+			</BaseButton>
+			<span class="collapse-project-button-placeholder" v-else></span>
+			<BaseButton
+				:to="{ name: 'project.index', params: { projectId: project.id} }"
+				class="list-menu-link"
+				:class="{'router-link-exact-active': currentProject.id === project.id}"
+			>
 			<span class="icon menu-item-icon handle">
 				<icon icon="grip-lines"/>
 			</span>
-			<ColorBubble
-				v-if="project.hexColor !== ''"
-				:color="project.hexColor"
-				class="mr-1"
-			/>
-			<span class="list-menu-title">{{ getProjectTitle(project) }}</span>
-		</BaseButton>
-		<BaseButton
-			v-if="project.id > 0"
-			class="favorite"
-			:class="{'is-favorite': project.isFavorite}"
-			@click="projectStore.toggleProjectFavorite(project)"
-		>
-			<icon :icon="project.isFavorite ? 'star' : ['far', 'star']"/>
-		</BaseButton>
-		<ProjectSettingsDropdown class="menu-list-dropdown" :project="project" v-if="project.id > 0">
-			<template #trigger="{toggleOpen}">
-				<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
-					<icon icon="ellipsis-h" class="icon"/>
-				</BaseButton>
-			</template>
-		</ProjectSettingsDropdown>
-		<span class="list-setting-spacer" v-else></span>
-	</section>
+				<ColorBubble
+					v-if="project.hexColor !== ''"
+					:color="project.hexColor"
+					class="mr-1"
+				/>
+				<span class="list-menu-title">{{ getProjectTitle(project) }}</span>
+			</BaseButton>
+			<BaseButton
+				v-if="project.id > 0"
+				class="favorite"
+				:class="{'is-favorite': project.isFavorite}"
+				@click="projectStore.toggleProjectFavorite(project)"
+			>
+				<icon :icon="project.isFavorite ? 'star' : ['far', 'star']"/>
+			</BaseButton>
+			<ProjectSettingsDropdown class="menu-list-dropdown" :project="project" v-if="project.id > 0">
+				<template #trigger="{toggleOpen}">
+					<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
+						<icon icon="ellipsis-h" class="icon"/>
+					</BaseButton>
+				</template>
+			</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>