use MutationObserver on <finder-file-select>

Author: jrief

client/browser/FinderFileSelect.tsx

@@ -1,16 +1,15 @@
 import React, {useEffect, useRef, useState} from 'react';
 import FileSelectDialog from './FileSelectDialog';
-import {useMutationObserver} from '../common/MutationObserver';
 
 
 export default function FinderFileSelect(props) {
 	const shadowRoot = props.container;
 	const baseUrl = props['base-url'];
 	const styleUrl = props['style-url'];
-	const [selectedFile, setSelectedFile] = useState(props['selected-file']);
 	const selectRef = useRef(null);
 	const slotRef = useRef(null);
 	const dialogRef = useRef(null);
+	const [selectedFile, setSelectedFile] = useState({});
 	const csrfToken = getCSRFToken();
 
 	useEffect(() => {
@@ -20,6 +19,15 @@ export default function FinderFileSelect(props) {
 		link.media = 'all';
 		link.rel = 'stylesheet';
 		shadowRoot.insertBefore(link, shadowRoot.firstChild);
+		const observer = new MutationObserver(attributesChanged);
+		const inputElement = slotRef.current.assignedElements()[0];
+		if (inputElement instanceof HTMLInputElement) {
+			setSelectedFile(JSON.parse(inputElement.getAttribute('data-selected_file')));
+			observer.observe(inputElement, {attributes: true});
+		}
+		return () => {
+			observer.disconnect();
+		};
 	}, []);
 
 	useEffect(() => {
@@ -44,6 +52,21 @@ export default function FinderFileSelect(props) {
 		}
 	}, []);
 
+	async function attributesChanged(mutationList) {
+		for (const mutation of mutationList) {
+			if (mutation.type === 'attributes' && mutation.attributeName === 'data-file_id') {
+				const fileId = mutation.target.dataset.file_id;
+				const response = await fetch(`${baseUrl}${fileId}/fetch`);
+				if (response.ok) {
+					setSelectedFile(await response.json());
+				} else {
+					console.error(`Failed to fetch file info for ID ${fileId}:`, response.statusText);
+				}
+
+			}
+		}
+	}
+
 	function getCSRFToken() {
 		const csrfToken = shadowRoot.host.closest('form')?.querySelector('input[name="csrfmiddlewaretoken"]')?.value;
 		if (csrfToken)

client/common/MutationObserver.ts

@@ -6,7 +6,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 	window.customElements.define(
 		'finder-file-select',
 		r2wc(FinderFileSelect, {
-			props: {'base-url': 'string', 'selected-file': 'json', 'style-url': 'string', realm: 'string'},
+			props: {'base-url': 'string', 'style-url': 'string', realm: 'string'},
 			shadow: 'open',
 		}),
 	);

client/finder-select.ts

@@ -11,7 +11,7 @@
         BrowserView.as_view(action='structure'),
     ),
     path(
-        '<uuid:folder_id>/fetch',
+        '<uuid:inode_id>/fetch',
         BrowserView.as_view(action='fetch'),
     ),
     path(

finder/browser/urls.py

@@ -6,6 +6,7 @@
 from django.utils.html import strip_spaces_between_tags
 from django.utils.safestring import mark_safe
 from django.views import View
+from django.views.decorators.http import last_modified
 
 from finder.lookups import annotate_unified_queryset, lookup_by_label, sort_by_attribute
 from finder.models.file import FileModel
@@ -100,24 +101,26 @@ def structure(self, request, slug):
             **self.list(request, request.session['finder.last_folder']),
         }
 
-    def fetch(self, request, folder_id):
+    def fetch(self, request, inode_id):
         """
         Open the given folder and fetch children data for the folder.
         """
-        folder = FolderModel.objects.get(id=folder_id)
-        folder_id = str(folder_id)
-        request.session.setdefault('finder.open_folders', [])
-        if folder_id not in request.session['finder.open_folders']:
-            request.session['finder.open_folders'].append(folder_id)
-            request.session.modified = True
-
-        return {
-            'id': folder_id,
-            'name': folder.name,
-            'children': self._get_children(request.session['finder.open_folders'], folder),
-            'is_open': True,
-            'has_subfolders': folder.subfolders.exists(),
-        }
+        inode = FileModel.objects.get_inode(id=inode_id)
+        inode_id = str(inode_id)
+        if inode.is_folder:
+            request.session.setdefault('finder.open_folders', [])
+            if inode_id not in request.session['finder.open_folders']:
+                request.session['finder.open_folders'].append(inode_id)
+                request.session.modified = True
+            return {
+                'id': inode_id,
+                'name': inode.name,
+                'children': self._get_children(request.session['finder.open_folders'], inode),
+                'is_open': True,
+                'has_subfolders': inode.subfolders.exists(),
+            }
+        else:
+            return inode.as_dict
 
     def open(self, request, folder_id):
         """

finder/browser/views.py

@@ -25,20 +25,20 @@ def get_context(self, name, value, attrs):
         css_classes = attrs.get('class', '').split()
         css_classes.append('finder-file-field')
         attrs['class'] = ' '.join(css_classes)
-        context = super().get_context(name, value, attrs)
-        context.update(
-            base_url=reverse('finder-api:base-url'),
-            realm='admin',
-            style_url=static('finder/css/finder-browser.css'),
-        )
         if isinstance(value, str):
             # file reference has not been stored using a `finder.models.fields.FinderFileField`
             try:
                 value = FileModel.objects.get_inode(id=uuid.UUID(value), is_folder=False)
             except (ValueError, FileModel.DoesNotExist):
                 pass
         if isinstance(value, AbstractFileModel):
-            context['selected_file'] = json.dumps(value.as_dict, cls=DjangoJSONEncoder)
+            attrs['data-selected_file'] = json.dumps(value.as_dict, cls=DjangoJSONEncoder)
+        context = super().get_context(name, value, attrs)
+        context.update(
+            base_url=reverse('finder-api:base-url'),
+            realm='admin',
+            style_url=static('finder/css/finder-browser.css'),
+        )
         return context
 
     def format_value(self, value):

finder/forms/widgets.py

@@ -1 +1 @@
-<finder-file-select base-url="{{ base_url }}" style-url="{{ style_url }}" realm="{{ realm }}" selected-file="{{ selected_file }}">{% include "django/forms/widgets/input.html" %}</finder-file-select>
+<finder-file-select base-url="{{ base_url }}" style-url="{{ style_url }}" realm="{{ realm }}">{% include "django/forms/widgets/input.html" %}</finder-file-select>