add sorting and filtering options to Django-Filer

Author: jrief

client/browser/FinderFileSelect.tsx

@@ -27,9 +27,19 @@ export default function FinderFileSelect(props) {
 				closeDialog();
 			}
 		};
+		const preventDefault = (event) => {
+			event.preventDefault();
+		}
 		window.addEventListener('keydown', handleEscape);
+
+		// prevent browser from loading a drag-and-dropped file
+		window.addEventListener('dragover', preventDefault, false);
+		window.addEventListener('drop', preventDefault, false);
+
 		return () => {
 			window.removeEventListener('keydown', handleEscape);
+			window.removeEventListener('dragover', preventDefault);
+			window.removeEventListener('drop', preventDefault);
 		}
 	}, []);
 

client/browser/Menu.tsx

@@ -1,6 +1,7 @@
 import React, {useRef} from 'react';
 import DropDownMenu from '../finder/DropDownMenu';
 import {useSearchRealm} from '../finder/Storage';
+import {SortingOptionsItem, FilterByLabel} from '../finder/MenuBar';
 import SearchIcon from '../icons/search.svg';
 import UploadIcon from '../icons/upload.svg';
 
@@ -80,6 +81,7 @@ export default function Menu(props) {
 						</DropDownMenu>
 					</div>
 				</li>
+				<SortingOptionsItem/>
 				<li onClick={openUploader} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Upload file")}>
 					<UploadIcon/>
 				</li>

client/finder/DropDownMenu.tsx

@@ -11,12 +11,13 @@ export default function DropDownMenu(props) {
 				ref.current.setAttribute('aria-expanded', 'false');
 			}
 		};
-		window.addEventListener('click', closeSubmenu);
-		return () => window.removeEventListener('click', closeSubmenu);
+		const rootNode = ref.current.getRootNode();
+		rootNode.addEventListener('click', closeSubmenu);
+		return () => rootNode.removeEventListener('click', closeSubmenu);
 	}, []);
 
 	function toggleSubmenu() {
-		ref.current.setAttribute('aria-expanded', ref.current.ariaExpanded === 'true' ? 'false': 'true');
+		ref.current.setAttribute('aria-expanded', ref.current.ariaExpanded === 'true' ? 'false' : 'true');
 	}
 
 	return (

client/finder/FolderAdmin.tsx

@@ -131,6 +131,12 @@ export function FolderAdmin() {
 		deselectAll();
 	}
 
+	function refreshColumns() {
+		Object.entries(columnRefs as React.MutableRefObject<any>).forEach(([folderId, columnRef]) => {
+			columnRef.current?.fetchInodes();
+		});
+	}
+
 	function computeBoundingBox(inodes) {
 		let zoom = 1;
 		if (inodes.length === 0) {
@@ -366,6 +372,7 @@ export function FolderAdmin() {
 			layout={layout}
 			setLayout={setLayout}
 			deselectAll={deselectAll}
+			refreshColumns={refreshColumns}
 			clipboard={clipboard}
 			setClipboard={setClipboard}
 			clearClipboard={clearClipboard}

client/finder/MenuBar.tsx

@@ -35,7 +35,8 @@ const useSorting = () => useCookie('django-finder-sorting', '');
 const useFilter = () => useCookie('django-finder-filter', []);
 
 
-function SortingOptionsItem(props: any) {
+export function SortingOptionsItem(props: any) {
+	const {refreshColumns} = props;
 	const [sorting, setSorting] = useSorting();
 
 	function isActive(value) {
@@ -45,9 +46,7 @@ function SortingOptionsItem(props: any) {
 	function changeSorting(value) {
 		if (value !== sorting) {
 			setSorting(value);
-			Object.entries(props.columnRefs as React.MutableRefObject<any>).forEach(([folderId, columnRef]) => {
-				columnRef.current?.fetchInodes();
-			});
+			refreshColumns();
 		}
 	}
 
@@ -83,8 +82,8 @@ function SortingOptionsItem(props: any) {
 }
 
 
-function FilterByLabel(props: any) {
-	const {columnRefs, labels} = props;
+export function FilterByLabel(props: any) {
+	const {labels, refreshFilesList} = props;
 	const [filter, setFilter] = useFilter();
 
 	function changeFilter(value) {
@@ -95,9 +94,7 @@ function FilterByLabel(props: any) {
 		} else {
 			setFilter([...filter, value]);
 		}
-		Object.entries(columnRefs as React.MutableRefObject<any>).forEach(([folderId, columnRef]) => {
-			columnRef.current?.fetchInodes();
-		});
+		refreshFilesList();
 	}
 
 	return (
@@ -224,6 +221,7 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 		layout,
 		setLayout,
 		deselectAll,
+		refreshColumns,
 		clipboard,
 		setClipboard,
 		clearClipboard,
@@ -437,8 +435,8 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 					data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Columns view")}>
 					<ColumnsIcon/></li>
 				<li style={{marginLeft: 'auto'}}></li>
-				{settings.labels && <FilterByLabel columnRefs={columnRefs} labels={settings.labels}/>}
-				<SortingOptionsItem columnRefs={columnRefs}/>
+				{settings.labels && <FilterByLabel refreshFilesList={refreshColumns} labels={settings.labels}/>}
+				<SortingOptionsItem refreshColumns={refreshColumns} />
 				<li style={{marginRight: 'auto'}}></li>
 				<li className={numSelectedInodes ? null : "disabled"} onClick={cutInodes}
 					data-tooltip-id="django-finder-tooltip"

client/scss/finder-browser.scss

@@ -87,6 +87,10 @@ dialog {
 			padding-bottom: 0.5rem;
 			margin: 0.25rem 1rem;
 			@include menubar;
+
+			.search-field {
+				margin-left: -14px;
+			}
 		}
 
 		> .browser-body {