allow to list files recursively

Author: jrief

client/browser/FileSelectDialog.tsx

@@ -133,19 +133,36 @@ export default function FileSelectDialog(props) {
 				last_folder: folderId,
 				files: [],
 				offset: null,
+				recursive: false,
 				search_query: '',
 			});
 			fetchFiles();
 			return newStructure;
 		});
 	};
 
+	async function toggleRecursive(folderId: string) {
+		setStructure(prevStructure => {
+			const newStructure = Object.assign(structure, {
+				...prevStructure,
+				last_folder: folderId,
+				files: [],
+				offset: null,
+				recursive: prevStructure.recursive ? false : true,
+				search_query: '',
+			});
+			fetchFiles();
+			return newStructure;
+		});
+	}
+
 	const setSearchQuery = (query) => {
 		setStructure(prevStructure => {
 			const newStructure = Object.assign(structure, {
 				...prevStructure,
 				files: [],
 				offset: null,
+				recursive: false,
 				search_query: query,
 			});
 			fetchFiles();
@@ -180,6 +197,9 @@ export default function FileSelectDialog(props) {
 	async function fetchFiles() {
 		const fetchUrl = (() => {
 			const params = new URLSearchParams();
+			if (structure.recursive) {
+				params.set('recursive', '');
+			}
 			if (structure.offset !== null) {
 				params.set('offset', String(structure.offset));
 			}
@@ -203,7 +223,6 @@ export default function FileSelectDialog(props) {
 	}
 
 	function refreshStructure() {
-		console.log('refreshStructure');
 		setStructure({...structure});
 	}
 

client/browser/FolderStructure.tsx

@@ -8,28 +8,28 @@ import RootIcon from '../icons/root.svg';
 
 
 function FolderEntry(props) {
-	const {folder, toggleOpen, setCurrentFolder, isCurrent} = props;
+	const {folder, toggleOpen, setCurrentFolder, openRecursive, isCurrent, isListed} = props;
 
 	if (folder.is_root) {
-		return (<span onClick={() => setCurrentFolder(folder.id)}><RootIcon/></span>);
+		return (<i onClick={() => setCurrentFolder(folder.id)}><RootIcon/></i>);
 	}
 
-	return (<>
-		<i onClick={toggleOpen}>{
-			folder.has_subfolders ? folder.is_open ? <ArrowDownIcon/> : <ArrowRightIcon/> : <EmptyIcon/>
-		}</i>
-		{isCurrent ?
-		<strong><FolderOpenIcon/>{folder.name}</strong> :
-		<span onClick={() => setCurrentFolder(folder.id)} role="button">
-			<FolderIcon/>{folder.name}
-		</span>
+	return (<>{
+		folder.has_subfolders ? <i onClick={toggleOpen}>{
+			folder.is_open ? <ArrowDownIcon/> : <ArrowRightIcon/>
+		}</i> : <i><EmptyIcon/></i>}
+		<i onClick={openRecursive} role="button">{isListed || isCurrent ? <FolderOpenIcon/> : <FolderIcon/>}</i>
+		{isCurrent
+			? <strong>{folder.name}</strong>
+			: <span onClick={() => setCurrentFolder(folder.id)} role="button">{folder.name}</span>
 		}
 	</>);
 }
 
 
 export default function FolderStructure(props) {
-	const {baseUrl, folder, lastFolderId, setCurrentFolder, refreshStructure} = props;
+	const {baseUrl, folder, lastFolderId, setCurrentFolder, toggleRecursive, refreshStructure} = props;
+	const isListed = props.isListed === false ? lastFolderId === folder.id : props.isListed;
 
 	async function fetchChildren() {
 		const response = await fetch(`${baseUrl}${folder.id}/fetch`);
@@ -44,28 +44,47 @@ export default function FolderStructure(props) {
 	}
 
 	async function toggleOpen() {
-		folder.is_open = !folder.is_open;
 		if (folder.is_open) {
+			folder.is_open = false;
+			await fetch(`${baseUrl}${folder.id}/close`);
+		} else {
+			folder.is_open = true;
 			if (folder.children === null) {
 				await fetchChildren();
 			} else {
 				await fetch(`${baseUrl}${folder.id}/open`);
 			}
-		} else {
-			await fetch(`${baseUrl}${folder.id}/close`);
 		}
 		refreshStructure();
 	}
 
+	async function openRecursive() {
+		if (lastFolderId === folder.id) {
+			if (folder.is_open === false) {
+				folder.is_open = true;
+				if (folder.children === null) {
+					await fetchChildren();
+				} else {
+					await fetch(`${baseUrl}${folder.id}/open`);
+				}
+			}
+			toggleRecursive(folder.id);
+		} else {
+			setCurrentFolder(folder.id);
+		}
+	}
+
 	return folder ? (
 		<li>
 			<FolderEntry
 				folder={folder}
 				toggleOpen={toggleOpen}
 				setCurrentFolder={setCurrentFolder}
+				openRecursive={openRecursive}
 				isCurrent={lastFolderId === folder.id}
+				isListed={isListed}
 			/>
-			{folder.is_open && (
+			{folder.is_open && folder.children && (
 			<ul>
 			{folder.children.map(child => (
 				<FolderStructure
@@ -74,7 +93,9 @@ export default function FolderStructure(props) {
 					folder={child}
 					lastFolderId={lastFolderId}
 					setCurrentFolder={setCurrentFolder}
+					toggleRecursive={toggleRecursive}
 					refreshStructure={refreshStructure}
+					isListed={isListed}
 				/>
 			))}
 			</ul>)}

finder/browser/views.py

@@ -139,8 +139,17 @@ def list(self, request, folder_id):
         """
         request.session['finder.last_folder'] = str(folder_id)
         offset = int(request.GET.get('offset', 0))
+        recursive = 'recursive' in request.GET
         lookup = lookup_by_label(request)
-        unified_queryset = FileModel.objects.filter_unified(parent_id=folder_id, is_folder=False, **lookup)
+        if recursive:
+            descendants = FolderModel.objects.get(id=folder_id).descendants
+            if isinstance(descendants, QuerySet):
+                parent_ids = Subquery(descendants.values('id'))
+            else:
+                parent_ids = [descendant.id for descendant in descendants]
+            unified_queryset = FileModel.objects.filter_unified(parent_id__in=parent_ids, is_folder=False, **lookup)
+        else:
+            unified_queryset = FileModel.objects.filter_unified(parent_id=folder_id, is_folder=False, **lookup)
         next_offset = offset + self.limit
         if next_offset >= unified_queryset.count():
             next_offset = None
@@ -149,6 +158,7 @@ def list(self, request, folder_id):
         return {
             'files': list(unified_queryset[offset:offset + self.limit]),
             'offset': next_offset,
+            'recursive': recursive,
             'search_query': '',
         }