@onehat/ui 0.4.78 → 0.4.80

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.78",
+	"version": "0.4.80",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Grid/Grid.js

@@ -1212,11 +1212,19 @@ function GridComponent(props) {
 				} else {
 					// Conform the calculated localColumnsConfig to the saved config.
 					// This should allow us to continue using non-serializable configurations after a refresh
-					const reconstructedLocalColumnsConfig = savedLocalColumnsConfig.map((savedConfig) => { // foreach saved column, in the order it was saved...
-						const columnConfig = localColumnsConfig.find(localConfig => localConfig.id === savedConfig.id); // find the corresponding column in localColumnsConfig
-						_.assign(columnConfig, savedConfig);
-						return columnConfig;
-					});
+					const reconstructedLocalColumnsConfig = savedLocalColumnsConfig
+						.map((savedConfig) => {
+							const columnConfig = localColumnsConfig.find(localConfig => localConfig.id === savedConfig.id);
+							if (!columnConfig) {
+								console.warn(`Column with id '${savedConfig.id}' not found in current config, skipping`);
+								return null; // Return null for missing columns
+							}
+							_.assign(columnConfig, savedConfig);
+							return columnConfig;
+						})
+						.filter(Boolean); // Remove null entries
+
+
 					localColumnsConfig = reconstructedLocalColumnsConfig;
 				}
 			}
@@ -1277,7 +1285,7 @@ function GridComponent(props) {
 		applySelectorSelected();
 		Repository.resumeEvents();
 
-		if (((Repository.isRemote && !Repository.isLoaded) || forceLoadOnRender) && !disableLoadOnRender) { // default remote repositories to load on render, optionally force or disable load on render
+		if (((Repository.isRemote && !Repository.isLoaded && !Repository.isLoading) || forceLoadOnRender) && !disableLoadOnRender) { // default remote repositories to load on render, optionally force or disable load on render
 			Repository.load();
 		}
 

package/src/Components/Hoc/withEditor.js

@@ -45,6 +45,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				editorType,
 				onAdd,
 				onChange, // any kind of crud change
+				onBeforeDelete,
 				onDelete,
 				onSave, // this could also be called 'onEdit'
 				onEditorClose,
@@ -289,7 +290,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}
+				if (onBeforeDelete) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await onBeforeDelete(selection);
+					if (listenerResult === false) {
+						return;
+					}
+				}
 				if (getListeners().onBeforeDelete) {
+					// This listener is set by child components using setWithEditListeners()
 					const listenerResult = await getListeners().onBeforeDelete();
 					if (listenerResult === false) {
 						return;
@@ -345,7 +354,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					return;
 				}
 				const selection = getSelection();
+				if (onBeforeDelete) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await onBeforeDelete(selection);
+					if (listenerResult === false) {
+						return;
+					}
+				}
 				if (getListeners().onBeforeDelete) {
+					// This listener is set by child components using setWithEditListeners()
 					const listenerResult = await getListeners().onBeforeDelete(selection);
 					if (listenerResult === false) {
 						return;

package/src/Components/Hoc/withModal.js

@@ -72,6 +72,10 @@ export default function withModal(WrappedComponent) {
 					throw new Error('withModal: body is required for showModal');
 				}
 
+				if (_.isFunction(body)) {
+					body = body();
+				}
+
 				setTitle(title);
 				setBody(body);
 				setCanClose(canClose);

package/src/Components/Tree/Tree.js

@@ -609,7 +609,7 @@ function TreeComponent(props) {
 			let nodes = [];
 			if (Repository) {
 				if (!Repository.isDestroyed) {
-					if (!Repository.areRootNodesLoaded) {
+					if (!Repository.isLoaded) {
 						nodes = await Repository.loadRootNodes(1);
 					} else {
 						nodes = Repository.getRootNodes();

package/src/PlatformImports/Web/Attachments.js

@@ -58,8 +58,10 @@ import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import Folder from '../../Components/Icons/Folder.js';
 import Plus from '../../Components/Icons/Plus.js';
-import Minus from '../../Components/Icons/Minus.js';
+import Trash from '../../Components/Icons/Trash.js';
 import Edit from '../../Components/Icons/Edit.js';
+import Rotate from '../../Components/Icons/Rotate.js';
+import Download from '../../Components/Icons/Download.js';
 import delay from '../../Functions/delay.js';
 import _ from 'lodash';
 
@@ -86,17 +88,29 @@ function FileCardCustom(props) {
 		isDownloading = uploadStatus && inArray(uploadStatus, ['preparing', 'uploading', 'success']),
 		isPdf = mimetype === 'application/pdf';
 
-	let cardContent = <Pressable
-				onPress={() => {
-					downloadInBackground(downloadUrl);
-				}}
-				className="Pressable px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700"
-			>
-				{isDownloading && <Spinner className="mr-2" />}
-				{onSee && isPdf && <IconButton className="mr-1" icon={Eye} onPress={() => onSee(id)} />}
-				<Text>{filename}</Text>
-				{onDelete && <IconButton className="ml-1" icon={Xmark} onPress={() => onDelete(id)} />}
-			</Pressable>;
+	let cardContent = 
+		<Pressable
+			onPress={() => {
+				downloadInBackground(downloadUrl);
+			}}
+			className="Pressable px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700"
+		>
+			{isDownloading &&
+				<Spinner className="mr-2" />}
+			{onSee && isPdf &&
+				<IconButton
+					className="mr-1"
+					icon={Eye}
+					onPress={() => onSee(id)}
+				/>}
+			<Text>{filename}</Text>
+			{onDelete &&
+				<IconButton
+					className="ml-1"
+					icon={Xmark}
+					onPress={() => onDelete(id)}
+				/>}
+		</Pressable>;
 
 	// Wrap with drag source if needed
 	if (isDragSource) {
@@ -123,8 +137,6 @@ function DraggableFileMosaic(props) {
 			...fileMosaicProps
 		} = props;
 
-	console.log('DraggableFileMosaic render:', { isDragSource, dragSourceType, hasItem: !!dragSourceItem.item });
-
 	// If not a drag source, just return the regular FileMosaic
 	if (!isDragSource) {
 		return <FileMosaic {...fileMosaicProps} />;
@@ -132,7 +144,6 @@ function DraggableFileMosaic(props) {
 
 	// Create a completely separate draggable container
 	const DragSourceContainer = withDragSource(({ dragSourceRef, ...dragProps }) => {
-		console.log('DragSourceContainer render with props:', dragProps);
 		return (
 			<div 
 				ref={dragSourceRef}
@@ -211,7 +222,7 @@ function AttachmentsElement(props) {
 			selectorSelectedField = 'id',
 
 			// withData
-			Repository,
+			Repository: Attachments,
 
 			// withAlert
 			showModal,
@@ -227,6 +238,9 @@ function AttachmentsElement(props) {
 		modelid = useRef(modelidCalc),
 		id = props.id || (model && modelid.current ? `attachments-${model}-${modelid.current}` : 'attachments'),
 		forceUpdate = useForceUpdate(),
+		iconBlobUrlsRef = useRef(new Set()), // to track created blob URLs for cleanup
+		modalBlobUrlsRef = useRef(new Set()), // For modal images
+		[areBlobUrlsReady, setAreBlobUrlsReady] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isUploading, setIsUploading] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
@@ -259,8 +273,32 @@ function AttachmentsElement(props) {
 		getFiles = () => {
 			return setFilesRaw.current;
 		},
-		buildFiles = () => {
-			const files = _.map(Repository.entities, (entity) => {
+		buildFiles = async () => {
+			setAreBlobUrlsReady(false);
+			cleanupIconBlobUrls();
+
+			// FilesUI doesn't allow headers to be passed with URLs,
+			// but these URLs require authentication.
+			// So we need to fetch the files ourselves, create blob URLs, 
+			// and pass those to FilesUI.
+			const files = await Promise.all(_.map(Attachments.entities, async (entity) => {
+				let imageUrl = entity.attachments__uri;
+				
+				// create authenticated blob URLs
+				try {
+					const response = await fetch(entity.attachments__uri, {
+						headers: Attachments.headers // Use your repository's headers
+					});
+					
+					if (response.ok) {
+						const blob = await response.blob();
+						imageUrl = URL.createObjectURL(blob);
+						iconBlobUrlsRef.current.add(imageUrl);
+					}
+				} catch (error) {
+					console.warn('Failed to fetch authenticated image:', error);
+				}
+
 				return {
 					id: entity.id, //	string | number	The identifier of the file
 					// file: null, //	File	The file object obtained from client drop or selection
@@ -271,20 +309,39 @@ function AttachmentsElement(props) {
 					// errors: null, //	string[]	The list of errors according to the validation criteria or the result of the given custom validation function.
 					// uploadStatus: null, //	UPLOADSTATUS	The current upload status. (e.g. "uploading").
 					// uploadMessage: null, //	string	A message that shows the result of the upload process.
-					imageUrl: entity.attachments__uri, //	string	A string representation or web url of the image that will be set to the "src" prop of an <img/> tag. If given, the component will use this image source instead of reading the image file.
+					imageUrl: imageUrl, //	string	A string representation or web url of the image that will be set to the "src" prop of an <img/> tag. If given, the component will use this image source instead of reading the image file.
 					downloadUrl: entity.attachments__uri, //	string	The url to be used to perform a GET request in order to download the file. If defined, the download icon will be shown.
 					// progress: null, //	number	The current percentage of upload progress. This value will have a higher priority over the upload progress value calculated inside the component.
 					// extraUploadData: null, //	Record<string, any>	The additional data that will be sent to the server when files are uploaded individually
 					// extraData: null, //	Object	Any kind of extra data that could be needed.
 					// serverResponse: null, //	ServerResponse	The upload response from server.
 					// xhr: null, //	XMLHttpRequest	A reference to the XHR object that allows the upload, progress and abort events.
+				
 				};
-			});
+			}));
 			setFiles(files);
+			setAreBlobUrlsReady(true);
 		},
 		clearFiles = () => {
+			cleanupIconBlobUrls();
 			setFiles([]);
 		},
+		cleanupIconBlobUrls = () => {
+			iconBlobUrlsRef.current.forEach((url) => {
+				if (url.startsWith('blob:')) {
+					URL.revokeObjectURL(url);
+				}
+			});
+			iconBlobUrlsRef.current.clear();
+		},
+		cleanupModalBlobUrls = () => {
+			modalBlobUrlsRef.current.forEach((url) => {
+				if (url.startsWith('blob:')) {
+					URL.revokeObjectURL(url);
+				}
+			});
+			modalBlobUrlsRef.current.clear();
+		},
 		onFileDelete = (id) => {
 			const
 				files = getFiles(),
@@ -301,11 +358,11 @@ function AttachmentsElement(props) {
 		doDelete = (id) => {
 			const
 				files = getFiles(),
-				file = Repository.getById(id);
+				file = Attachments.getById(id);
 			if (file) {
 				// if the file exists in the repository, delete it there
-				Repository.deleteById(id);
-				Repository.save();
+				Attachments.deleteById(id);
+				Attachments.save();
 
 			} else {
 				// simply remove it from the files array
@@ -388,7 +445,7 @@ function AttachmentsElement(props) {
 				});
 				if (!isError) {
 					setIsUploading(false);
-					Repository.reload();
+					Attachments.reload();
 					if (onUpload) {
 						onUpload(files);
 					}
@@ -397,77 +454,42 @@ function AttachmentsElement(props) {
 		},
 
 		// Lightbox
-		findFile = (id) => {
-			const files = getFiles();
-			if (useFileMosaic) {
-				return _.find(files, (file) => file.id === id);
-			}
-			return _.find(files, { id });
-		},
-		findPrevFile = (id) => {
+		buildModalBody = async (item) => {
 			const
-				files = getFiles(),
-				currentFile = findFile(id),
-				currentIx = _.findIndex(files, currentFile);
-			if (currentIx > 0) {
-				return files[currentIx - 1];
-			}
-			return null;
-		}
-		findNextFile = (url, id) => {
-			const
-				files = getFiles(),
-				currentFile = findFile(id),
-				currentIx = _.findIndex(files, currentFile);
-			if (currentIx < files.length - 1) {
-				return files[currentIx + 1];
-			}
-			return null;
-		},
-		buildModalBody = (id) => {
-			let isPdf = false,
-				url = null,
-				body = null,
-				isPrevDisabled = false,
-				isNextDisabled = false,
-				onPrev,
-				onNext;
-			switch(viewMode) {
-				case ATTACHMENTS_VIEW_MODES__ICON: {
-					const
-						currentFile = findFile(id),
-						prevFile = findPrevFile(id),
-						nextFile = findNextFile(id);
-					isPrevDisabled = !prevFile;
-					isNextDisabled = !nextFile;
-					onPrev = () => {
-						updateModalBody(buildModalBody(prevFile.id));
-					};
-					onNext = () => {
-						updateModalBody(buildModalBody(nextFile.id));
-					};
-					url = currentFile.imageUrl;
-					isPdf = url?.match(/\.pdf$/);
-					break;
-				}
-				case ATTACHMENTS_VIEW_MODES__LIST: {
-					const
-						currentFile = Repository.getById(id),
-						currentIx = Repository.getIxById(id),
-						prevFile = Repository.getByIx(currentIx - 1),
-						nextFile = Repository.getByIx(currentIx + 1);
-					isPrevDisabled = !prevFile;
-					isNextDisabled = !nextFile;
-					onPrev = () => {
-						updateModalBody(buildModalBody(prevFile.id));
-					};
-					onNext = () => {
-						updateModalBody(buildModalBody(nextFile.id));
-					};
-					url = currentFile.attachments__uri;
-					isPdf = currentFile.attachments__mimetype === 'application/pdf';
+				currentFile = item,
+				currentIx = Attachments.getIxById(item.id),
+				prevFile = Attachments.getByIx(currentIx - 1),
+				nextFile = Attachments.getByIx(currentIx + 1),
+				isPrevDisabled = !prevFile,
+				isNextDisabled = !nextFile,
+				onPrev = async () => {
+					cleanupModalBlobUrls();
+					const modalBody = await buildModalBody(prevFile);
+					updateModalBody(modalBody);
+				},
+				onNext = async () => {
+					cleanupModalBlobUrls();
+					const modalBody = await buildModalBody(nextFile);
+					updateModalBody(modalBody);
+				},
+				isPdf = currentFile.attachments__mimetype === 'application/pdf';
+				
+			let url = currentFile.attachments__uri;
+			try {
+				const response = await fetch(currentFile.attachments__uri, {
+					headers: Attachments.headers // Use your repository's headers
+				});
+				
+				if (response.ok) {
+					const blob = await response.blob();
+					url = URL.createObjectURL(blob);
+					modalBlobUrlsRef.current.add(url);
 				}
+			} catch (error) {
+				console.warn('Failed to fetch authenticated file for modal:', error);
 			}
+			
+			let body = null;
 			if (isPdf) {
 				body = <iframe
 							src={url}
@@ -496,18 +518,17 @@ function AttachmentsElement(props) {
 						/>
 					</HStack>;
 		},
-		onViewLightbox = (id) => {
-			if (!id) {
-				alert('Cannot view lightbox until image is uploaded.');
-				return;
-			}
+		onViewLightbox = async (item) => {
+			cleanupModalBlobUrls();
+			const modalBody = await buildModalBody(item);
 			showModal({
 				title: 'Lightbox',
-				body: buildModalBody(id),
+				body: modalBody,
 				canClose: true,
 				includeCancel: true,
 				w: 1920,
 				h: 1080,
+				onClose: cleanupModalBlobUrls,
 			});
 		},
 
@@ -555,9 +576,54 @@ function AttachmentsElement(props) {
 			});
 		},
 		onDeleteDirectory = async () => {
-			const attachmentDirectory = getTreeSelection()[0];
+
+			const
+				attachmentDirectory = getTreeSelection()[0],
+				isRoot = attachmentDirectory.isRoot;
+			if (isRoot) {
+				alert('Cannot delete the root directory.');
+				return;
+			}
+
+
+			// check if there are any attachments in this directory or its subdirectories
+			const
+				url = AttachmentDirectories.api.baseURL + 'AttachmentDirectories/hasAttachments',
+				data = {
+					attachment_directory_id: treeSelection[0].id,
+				},
+				result = await AttachmentDirectories._send('POST', url, data);
+			
+			const {
+				root,
+				success,
+				total,
+				message
+			} = AttachmentDirectories._processServerResponse(result);
+
+			if (!success) {
+				alert(message);
+				return;
+			}
+
+			if (root.hasAttachments) {
+				alert('Cannot delete a directory that contains attachments somewhere down its hierarchy. Please move or delete the attachments first.');
+				return;
+			}
+
+
+			// transfer selection to the parent node
+			const
+				parentNode = attachmentDirectory.getParent(),
+				newSelection = [parentNode];
+			setTreeSelection(newSelection);
+			self.children.tree.setSelection(newSelection);
+
+			
+			// now delete it
 			await attachmentDirectory.delete();
 			self.children.tree.buildAndSetTreeNodeData();
+			
 		},
 		onRenameDirectory = () => {
 			const attachmentDirectory = getTreeSelection()[0];
@@ -606,6 +672,14 @@ function AttachmentsElement(props) {
 							}}
 						/>,
 			});
+		},
+		onReloadDirectories = async () => {
+			await AttachmentDirectories.loadRootNodes(2);
+			const rootNodes = AttachmentDirectories.getRootNodes();
+			if (rootNodes) {
+				setTreeSelection(rootNodes);
+				self.children.tree.setSelection(rootNodes);
+			}
 		};
 
 	if (!_.isEqual(modelidCalc, modelid.current)) {
@@ -624,9 +698,9 @@ function AttachmentsElement(props) {
 			setDirectoriesTrue = () => setIsDirectoriesLoading(true),
 			setDirectoriesFalse = () => setIsDirectoriesLoading(false);
 
-		Repository.on('beforeLoad', setTrue);
-		Repository.on('load', setFalse);
-		Repository.on('load', buildFiles);
+		Attachments.on('beforeLoad', setTrue);
+		Attachments.on('load', setFalse);
+		Attachments.on('load', buildFiles);
 		if (usesDirectories) {
 			AttachmentDirectories.on('beforeLoad', setDirectoriesTrue);
 			AttachmentDirectories.on('loadRootNodes', setDirectoriesFalse);
@@ -636,12 +710,12 @@ function AttachmentsElement(props) {
 
 			if (modelid.current && !_.isArray(modelid.current)) {
 				const
-					currentConditions = Repository.getBaseParamConditions() || {},
+					currentConditions = Attachments.getParamConditions() || {},
 					newConditions = {
 						'conditions[Attachments.model]': model,
 						'conditions[Attachments.modelid]': modelid.current,
 					},
-					currentPageSize = Repository.pageSize,
+					currentPageSize = Attachments.pageSize,
 					newPageSize = showAll ? expandedMax : collapsedMax;
 				
 				// figure out conditions
@@ -666,34 +740,34 @@ function AttachmentsElement(props) {
 				}
 				let doReload = false;
 				if (!_.isEqual(currentConditions, newConditions)) {
-					Repository.setBaseParams(newConditions);
+					Attachments.setParams(newConditions);
 					doReload = true;
 				}
 
 				// figure out pageSize
 				if (!_.isEqual(currentPageSize, newPageSize)) {
-					Repository.setPageSize(newPageSize);
+					Attachments.setPageSize(newPageSize);
 					doReload = true;
 				}
 				if (doReload) {
-					await Repository.load();
+					await Attachments.load();
 				}
 				if (usesDirectories) {
 					const
-						wasAlreadyLoaded = AttachmentDirectories.areRootNodesLoaded,
-						currentConditions = AttachmentDirectories.getBaseParamConditions() || {},
+						wasAlreadyLoaded = AttachmentDirectories.isLoaded,
+						currentConditions = AttachmentDirectories.getParamConditions() || {},
 						newConditions = {
 							'conditions[AttachmentDirectories.model]': selectorSelected.repository.name,
 							'conditions[AttachmentDirectories.modelid]': selectorSelected[selectorSelectedField],
 						};
 					let doReload = false;
 					if (!_.isEqual(currentConditions, newConditions)) {
-						AttachmentDirectories.setBaseParams(newConditions);
+						AttachmentDirectories.setParams(newConditions);
 						doReload = true;
 					}
 					if (doReload) {
 						// setTreeSelection([]); // clear it; otherwise we get stale nodes after reloading AttachmentDirectories
-						await AttachmentDirectories.reload();
+						await AttachmentDirectories.loadRootNodes(2);
 						if (wasAlreadyLoaded) {
 							const rootNodes = AttachmentDirectories.getRootNodes();
 							if (rootNodes) {
@@ -703,9 +777,9 @@ function AttachmentsElement(props) {
 					}
 				}
 
-				buildFiles();
+				await buildFiles();
 			} else {
-				Repository.clear();
+				Attachments.clear();
 				if (usesDirectories) {
 					AttachmentDirectories.clear();
 				}
@@ -728,13 +802,15 @@ function AttachmentsElement(props) {
 		})();
 
 		return () => {
-			Repository.off('beforeLoad', setTrue);
-			Repository.off('load', setFalse);
-			Repository.off('load', buildFiles);
+			Attachments.off('beforeLoad', setTrue);
+			Attachments.off('load', setFalse);
+			Attachments.off('load', buildFiles);
 			if (usesDirectories) {
 				AttachmentDirectories.off('beforeLoad', setDirectoriesTrue);
 				AttachmentDirectories.off('loadRootNodes', setDirectoriesFalse);
 			}
+			cleanupIconBlobUrls();
+			cleanupModalBlobUrls();
 		};
 	}, [model, modelid.current, showAll, getTreeSelection()]);
 
@@ -754,117 +830,125 @@ function AttachmentsElement(props) {
 	const files = getFiles();
 	let content = null;
 	// icon or list view
-	if (viewMode === ATTACHMENTS_VIEW_MODES__ICON) {
-		content = <VStack
-						className={clsx(
-							'AttachmentsElement-icon-VStack1',
-							'h-full',
-							'flex-1',
-							'border',
-							'p-1',
-							isLoading ? [
-								'border-t-4',
-								'border-t-[#f00]',
-							] : null,
-						)}
-					>
-						<HStack
+	if (viewMode === ATTACHMENTS_VIEW_MODES__ICON || isUploading) {
+		if (isLoading || !areBlobUrlsReady) {
+			content = <VStack className="AttachmentsElement-icon-VStack1 h-full flex-1 border p-1 justify-center items-center">
+							<Spinner />
+						</VStack>;
+		} else {
+			content = <VStack
 							className={clsx(
-								'AttachmentsElement-HStack',
+								'AttachmentsElement-icon-VStack1',
 								'h-full',
 								'flex-1',
-								'flex-wrap',
-								files.length === 0 ? [
-									// So the 'No files' text is centered
-									'justify-center',
-									'items-center',
+								'border',
+								'p-1',
+								isLoading ? [
+									'border-t-4',
+									'border-t-[#f00]',
 								] : null,
 							)}
 						>
-							{files.length === 0 && <Text className="text-grey-600 italic">No files {usesDirectories ? 'in this directory' : ''}</Text>}
-							{files.map((file) => {
-								let eyeProps = {};
-								if (file.type && (file.type.match(/^image\//) || file.type === 'application/pdf')) {
-									eyeProps = {
-										onSee: onViewLightbox,
+							<HStack
+								className={clsx(
+									'AttachmentsElement-HStack',
+									'gap-2',
+									'flex-wrap',
+									'items-start',
+									files.length === 0 ? [
+										// So the 'No files' text is centered
+										'justify-center',
+										'items-center',
+										'h-full',
+									] : null,
+								)}
+							>
+								{files.length === 0 && <Text className="text-grey-600 italic">No files {usesDirectories ? 'in this directory' : ''}</Text>}
+								{files.map((file) => {
+									const fileEntity = Attachments.getById(file.id);
+									let eyeProps = {};
+									if (file.type && (file.type.match(/^image\//) || file.type === 'application/pdf')) {
+										eyeProps = {
+											onSee: () => {
+												onViewLightbox(fileEntity);
+											},
+										};
+									}
+
+									// Create drag source item for this file
+									const dragSourceItem = {
+										item: fileEntity, // Get the actual entity
+										sourceComponentRef: null, // Could be set to a ref if needed
+										getDragProxy: () => {
+											// Custom drag preview for file items
+											return <VStack className="bg-white border border-gray-300 rounded-lg p-3 shadow-lg max-w-[200px]">
+														<Text className="font-semibold text-gray-800">{file.name}</Text>
+														<Text className="text-sm text-gray-600">File</Text>
+													</VStack>;
+										}
 									};
-								}
 
-								// Create drag source item for this file
-								const fileEntity = Repository.getById(file.id);
-								console.log('Drag setup for file:', file.id, 'Entity:', fileEntity, 'canCrud:', canCrud, 'usesDirectories:', usesDirectories);
-								const dragSourceItem = {
-									item: fileEntity, // Get the actual entity
-									sourceComponentRef: null, // Could be set to a ref if needed
-									getDragProxy: () => {
-										// Custom drag preview for file items
-										return <VStack className="bg-white border border-gray-300 rounded-lg p-3 shadow-lg max-w-[200px]">
-													<Text className="font-semibold text-gray-800">{file.name}</Text>
-													<Text className="text-sm text-gray-600">File</Text>
-												</VStack>;
-									}
-								};
-
-								return <Box
-											key={file.id}
-											className="mr-2"
-										>
-											{useFileMosaic &&
-												<DraggableFileMosaic
-													{...file}
-													backgroundBlurImage={false}
-													onDownload={onDownload}
-													{..._fileMosaic}
-													{...eyeProps}
-													isDragSource={canCrud && usesDirectories}
-													dragSourceType="Attachments"
-													dragSourceItem={dragSourceItem}
-													onDragStart={() => {
-														setTimeout(() => setIsDragging(true), 50); // Delay to avoid interfering with drag initialization
-													}}
-													onDragEnd={() => {
-														setIsDragging(false);
-													}}
-												/>}
-											{!useFileMosaic &&
-												<FileCardCustom
-													{...file}
-													backgroundBlurImage={false}
-													{..._fileMosaic}
-													{...eyeProps}
-													isDragSource={canCrud && usesDirectories}
-													dragSourceType="Attachments"
-													dragSourceItem={dragSourceItem}
-													item={Repository.getById(file.id)}
-													onDragStart={() => {
-														setTimeout(() => setIsDragging(true), 50); // Delay to avoid interfering with drag initialization
-													}}
-													onDragEnd={() => {
-														setIsDragging(false);
-													}}
-												/>}
-										</Box>;
-							})}
-						</HStack>
-						{Repository.total <= collapsedMax ? null :
-							<Button
-								onPress={toggleShowAll}
-								className="AttachmentsElement-toggleShowAll mt-2"
-								text={'Show ' + (showAll ? ' Less' : ' All ' + Repository.total)}
-								_text={{
-									className: `
-										text-grey-600
-										italic
-										text-left
-										w-full
-									`,
-								}}
-								variant="outline"
-							/>}
-					</VStack>;
+									return <Box
+												key={file.id}
+												className="mr-2"
+											>
+												{useFileMosaic &&
+													<DraggableFileMosaic
+														{...file}
+														backgroundBlurImage={false}
+														onDownload={onDownload}
+														{..._fileMosaic}
+														{...eyeProps}
+														isDragSource={canCrud && usesDirectories}
+														dragSourceType="Attachments"
+														dragSourceItem={dragSourceItem}
+														onDragStart={() => {
+															setTimeout(() => setIsDragging(true), 50); // Delay to avoid interfering with drag initialization
+														}}
+														onDragEnd={() => {
+															setIsDragging(false);
+														}}
+													/>}
+												{!useFileMosaic &&
+													<FileCardCustom
+														{...file}
+														backgroundBlurImage={false}
+														{..._fileMosaic}
+														{...eyeProps}
+														isDragSource={canCrud && usesDirectories}
+														dragSourceType="Attachments"
+														dragSourceItem={dragSourceItem}
+														item={Attachments.getById(file.id)}
+														onDragStart={() => {
+															setTimeout(() => setIsDragging(true), 50); // Delay to avoid interfering with drag initialization
+														}}
+														onDragEnd={() => {
+															setIsDragging(false);
+														}}
+													/>}
+											</Box>;
+								})}
+							</HStack>
+							{Attachments.total <= collapsedMax ? null :
+								<Button
+									onPress={toggleShowAll}
+									className="AttachmentsElement-toggleShowAll mt-2"
+									text={'Show ' + (showAll ? ' Less' : ' All ' + Attachments.total)}
+									_text={{
+										className: `
+											text-grey-600
+											italic
+											text-left
+											w-full
+										`,
+									}}
+									variant="outline"
+								/>}
+						</VStack>;
+		}
 	} else if (viewMode === ATTACHMENTS_VIEW_MODES__LIST) {
 		content = <AttachmentsGridEditor
-						Repository={Repository}
+						Repository={Attachments}
 						selectionMode={SELECTION_MODE_MULTI}
 						showSelectHandle={false}
 						disableAdd={true}
@@ -884,7 +968,7 @@ function AttachmentsElement(props) {
 							{
 								id: 'view',
 								header: 'View',
-								w: 70,
+								w: 60,
 								isSortable: false,
 								isEditable: false,
 								isReorderable: false,
@@ -892,16 +976,37 @@ function AttachmentsElement(props) {
 								isHidable: false,
 								renderer: (item) => {
 									return <IconButton
-												className="w-[70px]"
+												className="w-[60px]"
 												icon={Eye}
 												_icon={{
 													size: 'xl',
 												}}
-												onPress={() => onViewLightbox(item.id)}
+												onPress={() => onViewLightbox(item)}
 												tooltip="View"
 											/>;
 								},
 							},
+							// {
+							// 	id: 'download',
+							// 	header: 'Get',
+							// 	w: 60,
+							// 	isSortable: false,
+							// 	isEditable: false,
+							// 	isReorderable: false,
+							// 	isResizable: false,
+							// 	isHidable: false,
+							// 	renderer: (item) => {
+							// 		return <IconButton
+							// 					className="w-[60px]"
+							// 					icon={Download}
+							// 					_icon={{
+							// 						size: 'xl',
+							// 					}}
+							// 					onPress={() => onDownload(item.id)}
+							// 					tooltip="Download"
+							// 				/>;
+							// 	},
+							// },
 							{
 								"id": "attachments__filename",
 								"header": "Filename",
@@ -910,7 +1015,7 @@ function AttachmentsElement(props) {
 								"isEditable": true,
 								"isReorderable": true,
 								"isResizable": true,
-								"w": 150
+								"w": 250
 							},
 							{
 								"id": "attachments__size_formatted",
@@ -920,7 +1025,7 @@ function AttachmentsElement(props) {
 								"isEditable": false,
 								"isReorderable": true,
 								"isResizable": true,
-								"w": 200
+								"w": 100
 							},
 						]}
 						areRowsDragSource={canCrud}
@@ -988,7 +1093,7 @@ function AttachmentsElement(props) {
 			</VStack>;
 	
 	// Always wrap content in dropzone when canCrud is true, but conditionally disable functionality
-	if (canCrud) {
+	if (canCrud && !isDragging) {
 		content = <Dropzone
 						value={files}
 						onChange={isDragging ? () => {} : onDropzoneChange} // Disable onChange when dragging
@@ -997,9 +1102,9 @@ function AttachmentsElement(props) {
 						maxFileSize={styles.ATTACHMENTS_MAX_FILESIZE}
 						autoClean={true}
 						uploadConfig={{
-							url: Repository.api.baseURL + Repository.name + '/uploadAttachment',
+							url: Attachments.api.baseURL + Attachments.schema.name + '/uploadAttachment',
 							method: 'POST',
-							headers: Repository.headers,
+							headers: Attachments.headers,
 							autoUpload,
 						}}
 						headerConfig={{
@@ -1122,12 +1227,18 @@ function AttachmentsElement(props) {
 										isDisabled: !treeSelection.length, // disabled if no selection
 									},
 									{
-										key: 'Minus',
+										key: 'Trash',
 										text: 'Delete Directory',
 										handler: onDeleteDirectory,
-										icon: Minus,
+										icon: Trash,
 										isDisabled: !treeSelection.length || !treeSelection[0].parentId, // disabled if selection is root or none
 									},
+									{
+										key: 'Reload',
+										text: 'Reload Directories',
+										handler: onReloadDirectories,
+										icon: Rotate,
+									},
 								] : [],
 							}}
 						/>
@@ -1158,13 +1269,27 @@ function withAdditionalProps(WrappedComponent) {
 		const {
 				usesDirectories = false,
 			} = props,
-			AttachmentDirectories = usesDirectories ? oneHatData.getRepository('AttachmentDirectories', true) : null; // put this here; otherwise a new unique repository will be created on every render!
+			[isReady, setIsReady] = useState(false),
+			[AttachmentDirectories] = useState(() => (usesDirectories ? oneHatData.getRepository('AttachmentDirectories', true) : null)), // lazy instantiator, so getRepository is called only once (it's unique, so otherwise, every time this renders, we'd get a new Repository!)
+			[Attachments] = useState(() => oneHatData.getRepository('Attachments', true)); // same
 		
+		useEffect(() => {
+			(async () => {
+				Attachments.setBaseParams(props.baseParams || {}); // have to add the baseParams here, because we're bypassing withData
+				if (!isReady) {
+					setIsReady(true);
+				}
+			})();
+		}, []);
+
+		if (!isReady) {
+			return null;
+		}
+
 		return <WrappedComponent
-					model="Attachments"
-					uniqueRepository={true}
 					reference="attachments"
 					{...props}
+					Repository={Attachments}
 					AttachmentDirectories={AttachmentDirectories}
 				/>;
 	};