From 01d8ded4b21fa7e4e68b971b2b34189ec0e7ddb0 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 21 Apr 2020 09:52:47 -0400
Subject: [PATCH] Fix deeply nested folder event and overflow (#445)

* Fix deeply nested folder event and overflow

* Fix code smell
---
 src/components/v-list/v-list-group.vue        |  2 +-
 .../navigation/navigation-folder.vue          | 10 +++++--
 .../components/navigation/navigation.vue      | 28 ++++++++++++++-----
 src/modules/files/compositions/use-folders.ts | 28 ++++++++++---------
 4 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/components/v-list/v-list-group.vue b/src/components/v-list/v-list-group.vue
index 809a40ba63..fd30a3c7b5 100644
--- a/src/components/v-list/v-list-group.vue
+++ b/src/components/v-list/v-list-group.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="v-list-group">
 		<v-list-item :active="active" class="activator" :to="to" @click="onClick">
-			<slot name="activator" />
+			<slot name="activator" :active="groupActive" />
 
 			<v-list-item-icon class="activator-icon" :class="{ active: groupActive }">
 				<v-icon name="chevron_left" @click.stop.prevent="toggle" />
diff --git a/src/modules/files/components/navigation/navigation-folder.vue b/src/modules/files/components/navigation/navigation-folder.vue
index 582a63c7bf..8108cc1b10 100644
--- a/src/modules/files/components/navigation/navigation-folder.vue
+++ b/src/modules/files/components/navigation/navigation-folder.vue
@@ -1,13 +1,13 @@
 <template>
 	<v-list-item
 		v-if="folder.children === undefined"
-		@click="$emit('click', folder.id)"
+		@click="clickHandler(folder.id)"
 		:active="currentFolder === folder.id"
 	>
 		<v-list-item-icon><v-icon name="folder" /></v-list-item-icon>
 		<v-list-item-content>{{ folder.name }}</v-list-item-content>
 	</v-list-item>
-	<v-list-group v-else @click="$emit('click', folder.id)" :active="currentFolder === folder.id">
+	<v-list-group v-else @click="clickHandler(folder.id)" :active="currentFolder === folder.id">
 		<template #activator="{ active }">
 			<v-list-item-icon>
 				<v-icon :name="active ? 'folder_open' : 'folder'" />
@@ -19,7 +19,7 @@
 			:key="childFolder.id"
 			:folder="childFolder"
 			:current-folder="currentFolder"
-			@click="$emit('click', childFolder.id)"
+			:click-handler="clickHandler"
 		/>
 	</v-list-group>
 </template>
@@ -39,6 +39,10 @@ export default defineComponent({
 			type: Number,
 			default: null,
 		},
+		clickHandler: {
+			type: Function,
+			default: () => undefined,
+		},
 	},
 });
 </script>
diff --git a/src/modules/files/components/navigation/navigation.vue b/src/modules/files/components/navigation/navigation.vue
index a83a1da0f4..7f6d800b16 100644
--- a/src/modules/files/components/navigation/navigation.vue
+++ b/src/modules/files/components/navigation/navigation.vue
@@ -13,13 +13,16 @@
 			</v-list-item>
 		</template>
 
-		<navigation-folder
-			@click="$emit('filter', $event)"
-			v-for="folder in folders"
-			:key="folder.id"
-			:folder="folder"
-			:current-folder="currentFolder"
-		/>
+		<div class="folders">
+			<navigation-folder
+				@click="$emit('filter', $event)"
+				v-for="folder in folders"
+				:key="folder.id"
+				:folder="folder"
+				:current-folder="currentFolder"
+				:click-handler="(id) => $emit('filter', id)"
+			/>
+		</div>
 	</v-list>
 </template>
 
@@ -52,4 +55,15 @@ export default defineComponent({
 ::v-deep .v-skeleton-loader {
 	--v-skeleton-loader-background-color: var(--background-normal-alt);
 }
+
+.folders {
+	width: 100%;
+	overflow-x: hidden;
+
+	::v-deep .v-list-item-content {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+}
 </style>
diff --git a/src/modules/files/compositions/use-folders.ts b/src/modules/files/compositions/use-folders.ts
index bba7833353..d0b1eb4cc8 100644
--- a/src/modules/files/compositions/use-folders.ts
+++ b/src/modules/files/compositions/use-folders.ts
@@ -58,18 +58,20 @@ export default function useFolders() {
 
 export function nestFolders(rawFolders: FolderRaw[]) {
 	return rawFolders
-		.map((folderRaw) => {
-			const folder: FolderRaw & Folder = { ...folderRaw };
-
-			const children = rawFolders.filter(
-				(childFolder) => childFolder.parent_folder === folderRaw.id
-			);
-
-			if (children.length > 0) {
-				folder.children = children;
-			}
-
-			return folder;
-		})
+		.map((rawFolder) => nestChildren(rawFolder, rawFolders))
 		.filter((folder) => folder.parent_folder === null);
 }
+
+export function nestChildren(rawFolder: FolderRaw, rawFolders: FolderRaw[]) {
+	const folder: FolderRaw & Folder = { ...rawFolder };
+
+	const children = rawFolders
+		.filter((childFolder) => childFolder.parent_folder === rawFolder.id)
+		.map((childRawFolder) => nestChildren(childRawFolder, rawFolders));
+
+	if (children.length > 0) {
+		folder.children = children;
+	}
+
+	return folder;
+}