In FileSelectDialog, allow to filter by label

Author: jrief

client/browser/FileSelectDialog.tsx

@@ -68,7 +68,7 @@ const FilesList = memo((props: any) => {
 
 export default function FileSelectDialog(props) {
 	const {realm, baseUrl, csrfToken, selectFile} = props;
-	const [structure, setStructure] = useState({root_folder: null, last_folder: null, files: null});
+	const [structure, setStructure] = useState({root_folder: null, last_folder: null, files: null, labels: []});
 	const [uploadedFile, setUploadedFile] = useState(null);
 	const ref = useRef(null);
 	const uploaderRef = useRef(null);
@@ -109,7 +109,12 @@ export default function FileSelectDialog(props) {
 			}
 			return `${baseUrl}${folderId}/list`;
 		})();
-		const newStructure = {root_folder: structure.root_folder, last_folder: folderId, files: null};
+		const newStructure = {
+			root_folder: structure.root_folder,
+			last_folder: folderId,
+			files: null,
+			labels: structure.labels,
+		};
 		const response = await fetch(fetchUrl);
 		if (response.ok) {
 			const body = await response.json();
@@ -135,12 +140,13 @@ export default function FileSelectDialog(props) {
 			<BrowserEditor
 				uploadedFile={uploadedFile}
 				mainContent={ref.current}
-				settings={{csrfToken, baseUrl, selectFile, labels: uploadedFile.labels}}
+				settings={{csrfToken, baseUrl, selectFile, labels: structure.labels}}
 			/> : <>
 			<MenuBar
 				lastFolderId={structure.last_folder}
 				fetchFiles={fetchFiles}
 				openUploader={() => uploaderRef.current.openUploader()}
+				labels={structure.labels}
 			/>
 			<div className="browser-body">
 				<nav className="folder-structure">

client/browser/MenuBar.tsx

@@ -7,7 +7,7 @@ import UploadIcon from '../icons/upload.svg';
 
 
 export default function MenuBar(props) {
-	const {lastFolderId, fetchFiles, openUploader} = props;
+	const {lastFolderId, fetchFiles, openUploader, labels} = props;
 	const searchRef = useRef(null);
 	const [searchRealm, setSearchRealm] = useSearchRealm('current');
 
@@ -74,8 +74,8 @@ export default function MenuBar(props) {
 					</DropDownMenu>
 				</div>
 			</li>
-			// TODO: <FilterByLabel />
-			<SortingOptionsItem refreshColumns={() => fetchFiles(lastFolderId)}/>
+			<SortingOptionsItem refreshFilesList={() => fetchFiles(lastFolderId)}/>
+			{labels && <FilterByLabel refreshFilesList={() => fetchFiles(lastFolderId)} labels={labels} />}
 			<li role="menuitem" onClick={openUploader} data-tooltip-id="django-finder-tooltip"
 				data-tooltip-content={gettext("Upload file")}>
 				<UploadIcon/>

client/finder/MenuBar.tsx

@@ -36,13 +36,13 @@ const useFilter = () => useCookie('django-finder-filter', []);
 
 
 export function SortingOptionsItem(props: any) {
-	const {refreshColumns} = props;
+	const {refreshFilesList} = props;
 	const [sorting, setSorting] = useSorting();
 
 	function changeSorting(value) {
 		if (value !== sorting) {
 			setSorting(value);
-			refreshColumns();
+			refreshFilesList();
 		}
 	}
 
@@ -450,7 +450,7 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 					role="menuitem" data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Columns view")}>
 					<ColumnsIcon/>
 				</li>
-				<SortingOptionsItem refreshColumns={refreshColumns} />
+				<SortingOptionsItem refreshFilesList={refreshColumns} />
 				{settings.labels && <FilterByLabel refreshFilesList={refreshColumns} labels={settings.labels} />}
 				<li aria-disabled={numSelectedInodes === 0} onClick={cutInodes}
 					role="menuitem" data-tooltip-id="django-finder-tooltip"

finder/api/views.py

@@ -77,6 +77,10 @@ def structure(self, request, realm):
                 'children': children,
                 'has_subfolders': is_open,
             },
+            'labels': [
+                {'value': id, 'label': name, 'color': color}
+                for id, name, color in Label.objects.values_list('id', 'name', 'color')
+            ],
             'last_folder': request.session['finder.last_folder'],
             **self.list(request, request.session['finder.last_folder']),
         }
@@ -179,11 +183,6 @@ def upload(self, request, folder_id):
             'file_info': file.as_dict,
             'form_html': mark_safe(strip_spaces_between_tags(form.as_div())),
         }
-        if Label.objects.exists():
-            response['labels'] = [
-                {'value': id, 'label': name, 'color': color}
-                for id, name, color in Label.objects.values_list('id', 'name', 'color')
-            ]
         return response
 
     def change(self, request, file_id):