@onehat/ui 0.4.77 → 0.4.78

package/src/PlatformImports/Web/Attachments.js

@@ -7,22 +7,44 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
-import Button from '../../Components/Buttons/Button';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,
 	UI_MODE_NATIVE,
 } from '../../Constants/UiModes.js';
+import {
+	HORIZONTAL,
+} from '../../Constants/Directions.js';
+import {
+	SELECTION_MODE_MULTI,
+} from '../../Constants/Selection.js';
 import UiGlobals from '../../UiGlobals.js';
 import {
 	FILE_MODE_IMAGE,
 	FILE_MODE_FILE,
 } from '../../Constants/File.js';
+import clsx from 'clsx';
+import oneHatData from '@onehat/data';
+import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import { Avatar, Dropzone, FileMosaic, FileCard, FileInputButton, } from "@files-ui/react";
+import TreePanel from '../../Components/Panel/TreePanel.js';
+import AttachmentsGridEditor from '../../Components/Grid/AttachmentsGridEditor.js';
+import Form from '../../Components/Form/Form.js';
+import {
+	EDITOR_TYPE__PLAIN,
+} from '../../Constants/Editor.js';
+import {
+	ATTACHMENTS_VIEW_MODES__ICON,
+	ATTACHMENTS_VIEW_MODES__LIST,
+} from '../../Constants/Attachments.js';
 import inArray from '../../Functions/inArray.js';
+import { withDragSource } from '../../Components/Hoc/withDnd.js';
+import Button from '../../Components/Buttons/Button';
 import IconButton from '../../Components/Buttons/IconButton.js';
 import Xmark from '../../Components/Icons/Xmark.js';
 import Eye from '../../Components/Icons/Eye.js';
+import Images from '../../Components/Icons/Images.js';
+import List from '../../Components/Icons/List.js';
 import ChevronLeft from '../../Components/Icons/ChevronLeft.js';
 import ChevronRight from '../../Components/Icons/ChevronRight.js';
 import withAlert from '../../Components/Hoc/withAlert.js';
@@ -32,6 +54,13 @@ import CenterBox from '../../Components/Layout/CenterBox.js';
 import downloadInBackground from '../../Functions/downloadInBackground.js';
 import downloadWithFetch from '../../Functions/downloadWithFetch.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
+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 Edit from '../../Components/Icons/Edit.js';
+import delay from '../../Functions/delay.js';
 import _ from 'lodash';
 
 const
@@ -48,21 +77,98 @@ function FileCardCustom(props) {
 			onSee,
 			downloadUrl,
 			uploadStatus,
+			// Drag props
+			isDragSource = false,
+			dragSourceType = 'Attachments',
+			dragSourceItem = {},
+			item, // The actual attachment entity
 		} = props,
 		isDownloading = uploadStatus && inArray(uploadStatus, ['preparing', 'uploading', 'success']),
 		isPdf = mimetype === 'application/pdf';
 
-	return <Pressable
+	let cardContent = <Pressable
 				onPress={() => {
 					downloadInBackground(downloadUrl);
 				}}
-				className="px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700"
+				className="Pressable px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700"
 			>
 				{isDownloading && <Spinner className="mr-2" />}
-				{onSee && isPdf && <IconButton mr={1} icon={Eye} onPress={() => onSee(null, id)} />}
+				{onSee && isPdf && <IconButton className="mr-1" icon={Eye} onPress={() => onSee(id)} />}
 				<Text>{filename}</Text>
-				{onDelete && <IconButton ml={1} icon={Xmark} onPress={() => onDelete(id)} />}
+				{onDelete && <IconButton className="ml-1" icon={Xmark} onPress={() => onDelete(id)} />}
 			</Pressable>;
+
+	// Wrap with drag source if needed
+	if (isDragSource) {
+		const DragSourceFileCard = withDragSource(({ children, ...dragProps }) => children);
+		return <DragSourceFileCard
+					isDragSource={isDragSource}
+					dragSourceType={dragSourceType}
+					dragSourceItem={dragSourceItem}
+				>
+					{cardContent}
+				</DragSourceFileCard>;
+	}
+
+	return cardContent;
+}
+
+function DraggableFileMosaic(props) {
+	const {
+			isDragSource = false,
+			dragSourceType = 'Attachments',
+			dragSourceItem = {},
+			onDragStart,
+			onDragEnd,
+			...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} />;
+	}
+
+	// Create a completely separate draggable container
+	const DragSourceContainer = withDragSource(({ dragSourceRef, ...dragProps }) => {
+		console.log('DragSourceContainer render with props:', dragProps);
+		return (
+			<div 
+				ref={dragSourceRef}
+				style={{ 
+					display: 'inline-block',
+					cursor: 'grab'
+				}}
+			>
+				<FileMosaic 
+					{...fileMosaicProps} 
+					// Disable any built-in drag functionality of FileMosaic
+					draggable={false}
+				/>
+			</div>
+		);
+	});
+	
+	// Add drag handlers to the dragSourceItem
+	const enhancedDragSourceItem = {
+		...dragSourceItem,
+		onDragStart: () => {
+			if (dragSourceItem.onDragStart) {
+				dragSourceItem.onDragStart();
+			}
+			if (onDragStart) {
+				onDragStart();
+			}
+		}
+	};
+	
+	return <DragSourceContainer
+				isDragSource={true}
+				dragSourceType={dragSourceType}
+				dragSourceItem={enhancedDragSourceItem}
+				onDragEnd={onDragEnd}
+			/>;
 }
 
 
@@ -80,6 +186,10 @@ function AttachmentsElement(props) {
 			_dropZone = {},
 			_fileMosaic = {},
 			useFileMosaic = true,
+			usesDirectories = false,
+			isDirectoriesByModel = true, // if false, directories are by modelid
+			AttachmentDirectories,
+			initialViewMode = ATTACHMENTS_VIEW_MODES__ICON,
 			accept, // 'image/*'
 			maxFiles = null,
 			disabled = false,
@@ -105,6 +215,7 @@ function AttachmentsElement(props) {
 
 			// withAlert
 			showModal,
+			hideModal,
 			updateModalBody,
 			alert,
 			confirm,
@@ -114,10 +225,32 @@ function AttachmentsElement(props) {
 		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].repository?.name : selectorSelected?.repository?.name,
 		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity[selectorSelectedField]) : selectorSelected?.[selectorSelectedField],
 		modelid = useRef(modelidCalc),
+		id = props.id || (model && modelid.current ? `attachments-${model}-${modelid.current}` : 'attachments'),
 		forceUpdate = useForceUpdate(),
 		[isReady, setIsReady] = useState(false),
 		[isUploading, setIsUploading] = useState(false),
+		[isLoading, setIsLoading] = useState(false),
+		[isDirectoriesLoading, setIsDirectoriesLoading] = useState(false),
+		[viewMode, setViewModeRaw] = useState(initialViewMode),
+		setViewMode = (newViewMode) => {
+			setViewModeRaw(newViewMode);
+			if (id) {
+				setSaved(id + '-viewMode', newViewMode);
+			}
+		},
 		[showAll, setShowAll] = useState(false),
+		[isDragging, setIsDragging] = useState(false),
+		treeSelectionRaw = useRef([]),
+		setTreeSelection = (selection) => {
+			treeSelectionRaw.current = selection;
+			forceUpdate();
+		},
+		getTreeSelection = () => {
+			return treeSelectionRaw.current;
+		},
+		treeSelection = getTreeSelection(),
+
+		// icon view only
 		setFilesRaw = useRef([]),
 		setFiles = (files) => {
 			setFilesRaw.current = files;
@@ -152,14 +285,66 @@ function AttachmentsElement(props) {
 		clearFiles = () => {
 			setFiles([]);
 		},
+		onFileDelete = (id) => {
+			const
+				files = getFiles(),
+				file = _.find(files, { id });
+			if (confirmBeforeDelete) {
+				confirm('Are you sure you want to delete the file "' + file.name + '"?', () => doDelete(id));
+			} else {
+				doDelete(id);
+			}
+		},
 		toggleShowAll = () => {
 			setShowAll(!showAll);
 		},
+		doDelete = (id) => {
+			const
+				files = getFiles(),
+				file = Repository.getById(id);
+			if (file) {
+				// if the file exists in the repository, delete it there
+				Repository.deleteById(id);
+				Repository.save();
+
+			} else {
+				// simply remove it from the files array
+				const newFiles = [];
+				_.each(files, (file) => {
+					if (file.id !== id) {
+						newFiles.push(file);
+					}
+				});
+				setFiles(newFiles);
+			}
+			if (onDelete) {
+				onDelete(id);
+			}
+		},
+		onDownload = (id, url) => {
+			if (isPwa) {
+				// This doesn't work because iOS doesn't allow you to open another window within a PWA.
+				// downloadWithFetch(url);
+				
+				alert('Files cannot be downloaded and viewed within an iOS PWA. Please use the Safari browser instead.');
+			} else {
+				downloadInBackground(url);
+			}
+		},
+
+		// dropzone
 		onDropzoneChange = async (files) => {
 			if (!files.length) {
 				alert('No files accepted. Perhaps they were too large or the wrong file type?');
 				return;
 			}
+			if (usesDirectories) {
+				const treeSelection = getTreeSelection();
+				if (!treeSelection[0] || !treeSelection[0].id) {
+					alert('Please select a directory to upload the files to.');
+					return;
+				}
+			}
 			setFiles(files);
 			_.each(files, (file) => {
 				file.extraUploadData = {
@@ -167,6 +352,9 @@ function AttachmentsElement(props) {
 					modelid: modelid.current,
 					...extraUploadData,
 				};
+				if (usesDirectories) {
+					file.extraUploadData.attachment_directory_id = treeSelection[0].id;
+				}
 			});
 			if (onAfterDropzoneChange) {
 				const isChanged = await onAfterDropzoneChange(files);
@@ -207,82 +395,79 @@ function AttachmentsElement(props) {
 				}
 			}
 		},
-		onFileDelete = (id) => {
+
+		// Lightbox
+		findFile = (id) => {
+			const files = getFiles();
+			if (useFileMosaic) {
+				return _.find(files, (file) => file.id === id);
+			}
+			return _.find(files, { id });
+		},
+		findPrevFile = (id) => {
 			const
 				files = getFiles(),
-				file = _.find(files, { id });
-			if (confirmBeforeDelete) {
-				confirm('Are you sure you want to delete the file "' + file.name + '"?', () => doDelete(id));
-			} else {
-				doDelete(id);
+				currentFile = findFile(id),
+				currentIx = _.findIndex(files, currentFile);
+			if (currentIx > 0) {
+				return files[currentIx - 1];
 			}
-		},
-		onDownload = (id, url) => {
-			if (isPwa) {
-				// This doesn't work because iOS doesn't allow you to open another window within a PWA.
-				// downloadWithFetch(url);
-				
-				alert('Files cannot be downloaded and viewed within an iOS PWA. Please use the Safari browser instead.');
-			} else {
-				downloadInBackground(url);
+			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 = (url, id) => {
-			const files = getFiles();
-			// This method was abstracted out so showModal/onPrev/onNext can all use it.
-			// url comes from FileMosaic, which passes in imageUrl,
-			// whereas FileCardCustom passes in id.
-
-			function findFile(url, id) {
-				if (id) {
-					return _.find(files, { id });
-				}
-				return _.find(files, (file) => file.imageUrl === url);
-			}
-			function findPrevFile(url, id) {
-				const
-					currentFile = findFile(url, id),
-					currentIx = _.findIndex(files, currentFile);
-				if (currentIx > 0) {
-					return files[currentIx - 1];
+		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;
 				}
-				return null;
-			}
-			function findNextFile(url, id) {
-				const
-					currentFile = findFile(url, id),
-					currentIx = _.findIndex(files, currentFile);
-				if (currentIx < files.length - 1) {
-					return files[currentIx + 1];
+				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';
 				}
-				return null;
-			}
-
-			const
-				prevFile = findPrevFile(url, id),
-				isPrevDisabled = !prevFile,
-				nextFile = findNextFile(url, id),
-				isNextDisabled = !nextFile,
-				onPrev = () => {
-					const { imageUrl, id } = prevFile;
-					updateModalBody(buildModalBody(imageUrl, id));
-				},
-				onNext = () => {
-					const { imageUrl, id } = nextFile;
-					updateModalBody(buildModalBody(imageUrl, id));
-				};
-
-			let isPdf = false,
-				body = null;
-
-			if (id) {
-				const file = _.find(files, { id });
-				url = file.imageUrl;
-				isPdf = true;
-			} else if (url?.match(/\.pdf$/)) {
-				isPdf = true;
 			}
-
 			if (isPdf) {
 				body = <iframe
 							src={url}
@@ -311,42 +496,116 @@ function AttachmentsElement(props) {
 						/>
 					</HStack>;
 		},
-		onViewLightbox = (url, id) => {
-			if (!url && !id) {
+		onViewLightbox = (id) => {
+			if (!id) {
 				alert('Cannot view lightbox until image is uploaded.');
 				return;
 			}
 			showModal({
 				title: 'Lightbox',
-				body: buildModalBody(url, id),
+				body: buildModalBody(id),
 				canClose: true,
 				includeCancel: true,
 				w: 1920,
 				h: 1080,
 			});
 		},
-		doDelete = (id) => {
-			const 
-				files = getFiles(),
-				file = Repository.getById(id);
-			if (file) {
-				// if the file exists in the repository, delete it there
-				Repository.deleteById(id);
-				Repository.save();
 
-			} else {
-				// simply remove it from the files array
-				const newFiles = [];
-				_.each(files, (file) => {
-					if (file.id !== id) {
-						newFiles.push(file);
-					}
-				});
-				setFiles(newFiles);
-			}
-			if (onDelete) {
-				onDelete(id);
-			}
+		// AttachmentDirectories
+		onCreateDirectory = () => {
+			const treeSelection = getTreeSelection();
+			showModal({
+				title: 'New Directory',
+				w: 400,
+				h: 200,
+				canClose: true,
+				includeReset: false,
+				includeCancel: false,
+				body: <Form
+							editorType={EDITOR_TYPE__PLAIN}
+							items={[
+								{
+									type: 'Input',
+									name: 'directoryName',
+									placeholder: 'New Directory Name',
+								}
+							]}
+							additionalFooterButtons={[
+								{
+									text: 'Cancel',
+									onPress: hideModal,
+									skipSubmit: true,
+									variant: 'outline',
+								}
+							]}
+							validator={yup.object({
+								directoryName: yup.string().required(),
+							})}
+							onSave={async (values)=> {
+								const { directoryName } = values;
+								await AttachmentDirectories.add({
+									name: directoryName,
+									model: selectorSelected.repository.name,
+									modelid: selectorSelected[selectorSelectedField],
+									parentId: treeSelection?.[0]?.id || null,
+								});
+								hideModal();
+							}}
+						/>,
+			});
+		},
+		onDeleteDirectory = async () => {
+			const attachmentDirectory = getTreeSelection()[0];
+			await attachmentDirectory.delete();
+			self.children.tree.buildAndSetTreeNodeData();
+		},
+		onRenameDirectory = () => {
+			const attachmentDirectory = getTreeSelection()[0];
+			showModal({
+				title: 'Rename Directory',
+				w: 400,
+				h: 200,
+				canClose: true,
+				includeReset: false,
+				includeCancel: false,
+				body: <Form
+							editorType={EDITOR_TYPE__PLAIN}
+							items={[
+								{
+									type: 'Input',
+									name: 'directoryName',
+									placeholder: 'New Directory Name',
+								}
+							]}
+							additionalFooterButtons={[
+								{
+									text: 'Cancel',
+									onPress: hideModal,
+									skipSubmit: true,
+									variant: 'outline',
+								}
+							]}
+							startingValues={{
+								directoryName: attachmentDirectory.attachment_directories__name,
+							}}
+							validator={yup.object({
+								directoryName: yup.string().required(),
+							})}
+							onSave={async (values)=> {
+								const {
+									directoryName,
+								} = values;
+								attachmentDirectory.attachment_directories__name = directoryName;
+								await delay(500);
+								await attachmentDirectory.save();
+								await delay(500);
+								self.children.tree.buildAndSetTreeNodeData();
+								hideModal();
+
+			
+							}}
+						/>,
+			});
 		};
 
 	if (!_.isEqual(modelidCalc, modelid.current)) {
@@ -359,62 +618,125 @@ function AttachmentsElement(props) {
 			return () => {};
 		}
 
-		(async () => {
+		const
+			setTrue = () => setIsLoading(true),
+			setFalse = () => setIsLoading(false),
+			setDirectoriesTrue = () => setIsDirectoriesLoading(true),
+			setDirectoriesFalse = () => setIsDirectoriesLoading(false);
 
-			if (!_.isArray(modelid.current)) {
+		Repository.on('beforeLoad', setTrue);
+		Repository.on('load', setFalse);
+		Repository.on('load', buildFiles);
+		if (usesDirectories) {
+			AttachmentDirectories.on('beforeLoad', setDirectoriesTrue);
+			AttachmentDirectories.on('loadRootNodes', setDirectoriesFalse);
+		}
 
-				// Load Repository
-				const filters = [
-					{
-						name: 'model',
-						value: model,
-					},
-					{
-						name: 'modelid',
-						value: modelid.current,
+		(async () => {
+
+			if (modelid.current && !_.isArray(modelid.current)) {
+				const
+					currentConditions = Repository.getBaseParamConditions() || {},
+					newConditions = {
+						'conditions[Attachments.model]': model,
+						'conditions[Attachments.modelid]': modelid.current,
 					},
-				];
+					currentPageSize = Repository.pageSize,
+					newPageSize = showAll ? expandedMax : collapsedMax;
+				
+				// figure out conditions
 				if (accept) {
-					let name,
+					let name = 'mimetype IN',
 						mimetypes;
 					if (_.isString(accept)) {
 						if (accept.match(/,/)) {
-							name = 'mimetype IN';
 							mimetypes = accept.split(',');
 						} else {
 							name = 'mimetype LIKE';
 							mimetypes = accept.replace('*', '%');
 						}
 					} else if (_.isArray(accept)) {
-						name = 'mimetype IN';
 						mimetypes = accept;
 					}
-					filters.push({
-						name,
-						value: mimetypes,
-					});
+					newConditions['conditions[Attachments.' + name + ']'] = mimetypes;
+				}
+				if (usesDirectories) {
+					const treeSelection = getTreeSelection();
+					newConditions['conditions[Attachments.attachment_directory_id]'] = treeSelection[0]?.id || null;
+				}
+				let doReload = false;
+				if (!_.isEqual(currentConditions, newConditions)) {
+					Repository.setBaseParams(newConditions);
+					doReload = true;
+				}
+
+				// figure out pageSize
+				if (!_.isEqual(currentPageSize, newPageSize)) {
+					Repository.setPageSize(newPageSize);
+					doReload = true;
+				}
+				if (doReload) {
+					await Repository.load();
+				}
+				if (usesDirectories) {
+					const
+						wasAlreadyLoaded = AttachmentDirectories.areRootNodesLoaded,
+						currentConditions = AttachmentDirectories.getBaseParamConditions() || {},
+						newConditions = {
+							'conditions[AttachmentDirectories.model]': selectorSelected.repository.name,
+							'conditions[AttachmentDirectories.modelid]': selectorSelected[selectorSelectedField],
+						};
+					let doReload = false;
+					if (!_.isEqual(currentConditions, newConditions)) {
+						AttachmentDirectories.setBaseParams(newConditions);
+						doReload = true;
+					}
+					if (doReload) {
+						// setTreeSelection([]); // clear it; otherwise we get stale nodes after reloading AttachmentDirectories
+						await AttachmentDirectories.reload();
+						if (wasAlreadyLoaded) {
+							const rootNodes = AttachmentDirectories.getRootNodes();
+							if (rootNodes) {
+								self.children.tree.setSelection(rootNodes);
+							}
+						}
+					}
 				}
-				Repository.filter(filters);
-				Repository.setPageSize(showAll ? expandedMax : collapsedMax);
-				await Repository.load();
 
 				buildFiles();
 			} else {
+				Repository.clear();
+				if (usesDirectories) {
+					AttachmentDirectories.clear();
+				}
 				clearFiles();
 			}
 
 
+			// Load saved view mode preference before setting ready
+			if (id && !isReady) {
+				const savedViewMode = await getSaved(id + '-viewMode');
+				if (!_.isNil(savedViewMode)) {
+					setViewModeRaw(savedViewMode);
+				}
+			}
+
 			if (!isReady) {
 				setIsReady(true);
 			}
 			
 		})();
 
-		Repository.on('load', buildFiles);
 		return () => {
+			Repository.off('beforeLoad', setTrue);
+			Repository.off('load', setFalse);
 			Repository.off('load', buildFiles);
+			if (usesDirectories) {
+				AttachmentDirectories.off('beforeLoad', setDirectoriesTrue);
+				AttachmentDirectories.off('loadRootNodes', setDirectoriesFalse);
+			}
 		};
-	}, [model, modelid.current, showAll]);
+	}, [model, modelid.current, showAll, getTreeSelection()]);
 
 	if (!isReady) {
 		return null;
@@ -429,45 +751,97 @@ function AttachmentsElement(props) {
 	if (canCrud) {
 		_fileMosaic.onDelete = onFileDelete;
 	}
-	let className = `
-		AttachmentsElement
-		w-full
-		h-full
-		p-1
-		rounded-[5px]
-	`;
-	if (props.className) {
-		className += ' ' + props.className;
-	}
 	const files = getFiles();
-	let content = <VStack className={className}>
-						<HStack className="AttachmentsElement-HStack flex-wrap">
-							{files.length === 0 && <Text className="text-grey-600 italic">No files</Text>}
+	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
+							className={clsx(
+								'AttachmentsElement-HStack',
+								'h-full',
+								'flex-1',
+								'flex-wrap',
+								files.length === 0 ? [
+									// So the 'No files' text is centered
+									'justify-center',
+									'items-center',
+								] : null,
+							)}
+						>
+							{files.length === 0 && <Text className="text-grey-600 italic">No files {usesDirectories ? 'in this directory' : ''}</Text>}
 							{files.map((file) => {
-								let seeProps = {};
+								let eyeProps = {};
 								if (file.type && (file.type.match(/^image\//) || file.type === 'application/pdf')) {
-									seeProps = {
+									eyeProps = {
 										onSee: onViewLightbox,
 									};
 								}
+
+								// 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 &&
-												<FileMosaic
+												<DraggableFileMosaic
 													{...file}
 													backgroundBlurImage={false}
 													onDownload={onDownload}
 													{..._fileMosaic}
-													{...seeProps}
+													{...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}
-													{...seeProps}
+													{...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>;
 							})}
@@ -488,13 +862,138 @@ function AttachmentsElement(props) {
 								variant="outline"
 							/>}
 					</VStack>;
+	} else if (viewMode === ATTACHMENTS_VIEW_MODES__LIST) {
+		content = <AttachmentsGridEditor
+						Repository={Repository}
+						selectionMode={SELECTION_MODE_MULTI}
+						showSelectHandle={false}
+						disableAdd={true}
+						disableEdit={true}
+						disableView={true}
+						disableCopy={true}
+						disableDuplicate={true}
+						disableDelete={!canCrud}
+						className="flex-1 h-full" // Ensure it takes up full space
+						onDragStart={() => {
+							setTimeout(() => setIsDragging(true), 50); // Delay to avoid interfering with drag initialization
+						}}
+						onDragEnd={() => {
+							setIsDragging(false);
+						}}
+						columnsConfig={[
+							{
+								id: 'view',
+								header: 'View',
+								w: 70,
+								isSortable: false,
+								isEditable: false,
+								isReorderable: false,
+								isResizable: false,
+								isHidable: false,
+								renderer: (item) => {
+									return <IconButton
+												className="w-[70px]"
+												icon={Eye}
+												_icon={{
+													size: 'xl',
+												}}
+												onPress={() => onViewLightbox(item.id)}
+												tooltip="View"
+											/>;
+								},
+							},
+							{
+								"id": "attachments__filename",
+								"header": "Filename",
+								"fieldName": "attachments__filename",
+								"isSortable": true,
+								"isEditable": true,
+								"isReorderable": true,
+								"isResizable": true,
+								"w": 150
+							},
+							{
+								"id": "attachments__size_formatted",
+								"header": "Size Formatted",
+								"fieldName": "attachments__size_formatted",
+								"isSortable": false,
+								"isEditable": false,
+								"isReorderable": true,
+								"isResizable": true,
+								"w": 200
+							},
+						]}
+						areRowsDragSource={canCrud}
+						rowDragSourceType="Attachments"
+						getCustomDragProxy={(item, selection) => {
+							let selectionCount = selection?.length || 1,
+								displayText = item.attachments__filename || 'Selected TreeNode';
+							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">{displayText}</Text>
+										{selectionCount > 1 && 
+											<Text className="text-sm text-gray-600">(+{selectionCount -1} more item{selectionCount > 2 ? 's' : ''})</Text>
+										}
+									</VStack>;
+						}}
+
+					/>;
+	}
+
+	// switches for icon/list view
+	content = <VStack
+				className={clsx(
+					'w-full',
+					'h-full',
+				)}
+			>
+				<HStack
+					className={clsx(
+						'h-[30px]',
+						'w-full',
+						'gap-1',
+						'p-1',
+						'justify-start',
+						'items-center',
+						'bg-primary-500',
+					)}
+				>
+					<IconButton
+						onPress={() => setViewMode(ATTACHMENTS_VIEW_MODES__ICON)}
+						icon={Images}
+						className={clsx(
+							viewMode === ATTACHMENTS_VIEW_MODES__ICON ? 'bg-gray-400' : null,
+							'w-[25px]',
+							'h-[25px]',
+							'px-[2px]',
+							'py-[2px]',
+						)}
+						tooltip="Icon View"
+					/>
+					<IconButton
+						onPress={() => setViewMode(ATTACHMENTS_VIEW_MODES__LIST)}
+						icon={List}
+						className={clsx(
+							viewMode === ATTACHMENTS_VIEW_MODES__LIST ? 'bg-gray-400' : null,
+							'w-[25px]',
+							'h-[25px]',
+							'px-[2px]',
+							'py-[2px]',
+						)}
+						tooltip="List View"
+					/>
+				</HStack>
+
+				{content}
+
+			</VStack>;
 	
+	// Always wrap content in dropzone when canCrud is true, but conditionally disable functionality
 	if (canCrud) {
 		content = <Dropzone
 						value={files}
-						onChange={onDropzoneChange}
-						accept={accept}
-						maxFiles={maxFiles}
+						onChange={isDragging ? () => {} : onDropzoneChange} // Disable onChange when dragging
+						accept={isDragging ? undefined : accept} // Remove accept types when dragging
+						maxFiles={isDragging ? 0 : maxFiles} // Set to 0 when dragging to prevent drops
 						maxFileSize={styles.ATTACHMENTS_MAX_FILESIZE}
 						autoClean={true}
 						uploadConfig={{
@@ -504,32 +1003,171 @@ function AttachmentsElement(props) {
 							autoUpload,
 						}}
 						headerConfig={{
+							className: '!hidden',
 							deleteFiles: false,
 						}}
+						className="attachments-dropzone flex-1 h-full" // Add flex classes to ensure full height
 						onUploadStart={onUploadStart}
 						onUploadFinish={onUploadFinish}
 						background={styles.ATTACHMENTS_BG}
 						color={styles.ATTACHMENTS_COLOR}
 						minHeight={150}
 						footer={false}
-						clickable={clickable}
+						clickable={viewMode === ATTACHMENTS_VIEW_MODES__ICON && !isDragging ? clickable : false} // Disable clickable when dragging
 						{..._dropZone}
 					>
 						{content}
 					</Dropzone>;
+	}
+
+	// directories
+	if (usesDirectories) {
+		content = <HStack className="h-full w-full">
+						<TreePanel
+							_panel={{
+								title: 'Directories',
+								isScrollable: true,
+								isCollapsible: false,
+								isCollapsed: false,
+								collapseDirection: HORIZONTAL,
+								disableTitleChange: true,
+								className: clsx(
+									'TreePanel-Panel',
+									'h-full',
+									'w-1/3',
+								),
+							}}
+							_tree={{
+								reference: 'tree',
+								parent: self,
+								Repository: AttachmentDirectories,
+								autoSelectRootNode: true,
+								allowToggleSelection: false,
+								allowDeselectAll: false,
+								forceSelectionOnCollapse: true,
+								showSelectHandle: canCrud,
+								useFilters: false,
+								showHeaderToolbar: false,
+								canNodesMoveInternally: canCrud,
+								hideReloadBtn: true,
+								className: clsx(
+									'TreePanel-Tree',
+									'h-full',
+									'w-full',
+									'min-w-0', // override the Tree's min-w setting
+									'flex-none',
+									isDirectoriesLoading ? [
+										'border-t-4',
+										'border-t-[#f00]',
+									] : null,
+								),
+								areNodesDropTarget: canCrud,
+								dropTargetAccept: 'Attachments',
+								canNodeAcceptDrop: (targetNode, draggedItem) => {
+									// disallow drop onto its parent
+									if (draggedItem.item.attachments__attachment_directory_id === targetNode.id) {
+										return false;
+									}
+									return true;
+								},
+								onNodeDrop: async (targetNode, droppedItem) => {
+
+									let selectedNodes = [];
+									if (droppedItem.getSelection) {
+										selectedNodes = droppedItem.getSelection();
+									}
+									if (_.isEmpty(selectedNodes)) {
+										selectedNodes = [droppedItem.item];
+									}
+									
+									// set the attachment_directory_id of the draggedItems to the targetNode.id
+									for (let i = 0; i < selectedNodes.length; i++) {
+										const node = selectedNodes[i];
+										node.attachments__attachment_directory_id = targetNode.id;
+										await node.save();
+									}
+
+									// refresh the repository from the dragged node
+									await selectedNodes[0].repository.reload();
+								},
+								getCustomDragProxy: (item, selection) => {
+									let selectionCount = selection?.length || 1,
+										displayText = item.displayValue || 'Selected TreeNode';
+									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">{displayText}</Text>
+												{selectionCount > 1 && 
+													<Text className="text-sm text-gray-600">(+{selectionCount -1} more item{selectionCount > 2 ? 's' : ''})</Text>
+												}
+											</VStack>;
+								},
+								getNodeIcon: (node) => {
+									return Folder;
+								},
+								onChangeSelection: (selection) => {
+									setTreeSelection(selection);
+								},
+								additionalToolbarButtons: canCrud ? [
+									{
+										key: 'Plus',
+										text: 'New Directory',
+										handler: onCreateDirectory,
+										icon: Plus,
+										isDisabled: !treeSelection.length, // disabled if no selection
+									},
+									{
+										key: 'Edit',
+										text: 'Rename Directory',
+										handler: onRenameDirectory,
+										icon: Edit,
+										isDisabled: !treeSelection.length, // disabled if no selection
+									},
+									{
+										key: 'Minus',
+										text: 'Delete Directory',
+										handler: onDeleteDirectory,
+										icon: Minus,
+										isDisabled: !treeSelection.length || !treeSelection[0].parentId, // disabled if selection is root or none
+									},
+								] : [],
+							}}
+						/>
 
+						<Box className="w-2/3">
+							{content}
+						</Box>
+
+					</HStack>;
+	}
+
+	let className = clsx(
+		'AttachmentsElement',
+		'testx',
+		'w-full',
+		'h-[400px]',
+		'border-2',
+		'rounded-[5px]',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
 	}
-	return content;
+	return <Box className={className}>{content}</Box>;
 }
 
 function withAdditionalProps(WrappedComponent) {
 	return (props) => {
+		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!
+		
 		return <WrappedComponent
 					model="Attachments"
 					uniqueRepository={true}
+					reference="attachments"
 					{...props}
+					AttachmentDirectories={AttachmentDirectories}
 				/>;
 	};
 }
 
-export default withComponent(withAdditionalProps(withAlert(withData(AttachmentsElement))));
+export default withAdditionalProps(withComponent(withAlert(withData(AttachmentsElement))));