@onehat/ui 0.4.79 → 0.4.81

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.79",
+	"version": "0.4.81",
 	"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;
 				}
 			}

package/src/Components/Layout/AsyncOperation.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, } from 'react';
 import {
 	Box,
+	HStack,
 	ScrollView,
 	Text,
 	VStack,

package/src/PlatformImports/Web/Attachments.js

@@ -61,6 +61,7 @@ import Plus from '../../Components/Icons/Plus.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';
 
@@ -136,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} />;
@@ -145,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}
@@ -240,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),
@@ -272,8 +273,32 @@ function AttachmentsElement(props) {
 		getFiles = () => {
 			return setFilesRaw.current;
 		},
-		buildFiles = () => {
-			const files = _.map(Attachments.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
@@ -284,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(),
@@ -410,22 +454,41 @@ function AttachmentsElement(props) {
 		},
 
 		// Lightbox
-		buildModalBody = (id) => {
+		buildModalBody = async (item) => {
 			const
-				currentFile = Attachments.getById(id),
-				currentIx = Attachments.getIxById(id),
+				currentFile = item,
+				currentIx = Attachments.getIxById(item.id),
 				prevFile = Attachments.getByIx(currentIx - 1),
 				nextFile = Attachments.getByIx(currentIx + 1),
 				isPrevDisabled = !prevFile,
 				isNextDisabled = !nextFile,
-				onPrev = () => {
-					updateModalBody(buildModalBody(prevFile.id));
+				onPrev = async () => {
+					cleanupModalBlobUrls();
+					const modalBody = await buildModalBody(prevFile);
+					updateModalBody(modalBody);
 				},
-				onNext = () => {
-					updateModalBody(buildModalBody(nextFile.id));
+				onNext = async () => {
+					cleanupModalBlobUrls();
+					const modalBody = await buildModalBody(nextFile);
+					updateModalBody(modalBody);
 				},
-				url = currentFile.attachments__uri,
 				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
@@ -455,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,
 			});
 		},
 
@@ -692,7 +754,7 @@ function AttachmentsElement(props) {
 				}
 				if (usesDirectories) {
 					const
-						wasAlreadyLoaded = AttachmentDirectories.areRootNodesLoaded,
+						wasAlreadyLoaded = AttachmentDirectories.isLoaded,
 						currentConditions = AttachmentDirectories.getParamConditions() || {},
 						newConditions = {
 							'conditions[AttachmentDirectories.model]': selectorSelected.repository.name,
@@ -715,7 +777,7 @@ function AttachmentsElement(props) {
 					}
 				}
 
-				buildFiles();
+				await buildFiles();
 			} else {
 				Attachments.clear();
 				if (usesDirectories) {
@@ -747,6 +809,8 @@ function AttachmentsElement(props) {
 				AttachmentDirectories.off('beforeLoad', setDirectoriesTrue);
 				AttachmentDirectories.off('loadRootNodes', setDirectoriesFalse);
 			}
+			cleanupIconBlobUrls();
+			cleanupModalBlobUrls();
 		};
 	}, [model, modelid.current, showAll, getTreeSelection()]);
 
@@ -767,48 +831,52 @@ function AttachmentsElement(props) {
 	let content = null;
 	// icon or list view
 	if (viewMode === ATTACHMENTS_VIEW_MODES__ICON || isUploading) {
-		content = <VStack
-						className={clsx(
-							'AttachmentsElement-icon-VStack1',
-							'h-full',
-							'flex-1',
-							'border',
-							'p-1',
-							isLoading ? [
-								'border-t-4',
-								'border-t-[#f00]',
-							] : null,
-						)}
-					>
-						<HStack
+		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',
-								'gap-2',
-								'flex-wrap',
-								'items-start',
-								files.length === 0 ? [
-									// So the 'No files' text is centered
-									'justify-center',
-									'items-center',
-									'h-full',
+								'AttachmentsElement-icon-VStack1',
+								'h-full',
+								'flex-1',
+								'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(file.id);
-										},
-									};
-								}
+							<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
-									fileEntity = Attachments.getById(file.id),
-									dragSourceItem = {
+									// 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: () => {
@@ -820,63 +888,64 @@ function AttachmentsElement(props) {
 										}
 									};
 
-								return <Box
-											key={file.id}
-											className="BoxHERE 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>;
+									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={Attachments}
@@ -912,32 +981,32 @@ function AttachmentsElement(props) {
 												_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: '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",
@@ -1024,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