@onehat/ui 0.4.62 → 0.4.64

package/package.json

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

package/src/Components/Form/Field/Tag/Tag.js

@@ -61,8 +61,8 @@ function TagComponent(props) {
 				await repository.waitUntilDoneLoading();
 			}
 			let record = repository.getById(id); // first try to get from entities in memory
-			if (!record && repository.getSingleEntityFromServer) {
-				record = await repository.getSingleEntityFromServer(id);
+			if (!record && repository.loadOneAdditionalEntity) {
+				record = await repository.loadOneAdditionalEntity(id);
 			}
 
 			if (!record) {

package/src/Components/Form/Form.js

@@ -83,6 +83,7 @@ function Form(props) {
 			editorType = EDITOR_TYPE__WINDOWED, // EDITOR_TYPE__INLINE | EDITOR_TYPE__WINDOWED | EDITOR_TYPE__SIDE | EDITOR_TYPE__SMART | EDITOR_TYPE__PLAIN
 			startingValues = {},
 			items = [], // Columns, FieldSets, Fields, etc to define the form
+			isItemsCustomLayout = false,
 			ancillaryItems = [], // additional items which are not controllable form elements, but should appear in the form
 			showAncillaryButtons = false,
 			columnDefaults = {}, // defaults for each Column defined in items (above)
@@ -1187,8 +1188,8 @@ function Form(props) {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
 			editor = <>
-						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD ? <HStack className="Form-formComponents-HStack p-4 gap-4 justify-center">{formComponents}</HStack> : null}
-						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
+						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD && !isItemsCustomLayout ? <HStack className="Form-formComponents-HStack p-4 gap-4 justify-center">{formComponents}</HStack> : null}
+						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD || isItemsCustomLayout ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
 						{formAncillaryComponents.length ? <VStack className="Form-AncillaryComponents m-2 pt-4 px-2">{formAncillaryComponents}</VStack> : null}
 					</>;
 

package/src/Components/Hoc/withEditor.js

@@ -29,6 +29,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				userCanEdit = true, // not permissions, but capability
 				userCanView = true,
 				canEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
+				canProceedWithCrud, // fn returns bool on if the CRUD operation can proceed
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = false,
@@ -153,6 +154,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(ADD);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 
 				const selection = getSelection();
 				let addValues = values;
@@ -252,6 +256,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(EDIT);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 				const selection = getSelection();
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
@@ -271,6 +278,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DELETE);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 				let cb = null;
 				if (_.isFunction(args)) {
 					cb = args;
@@ -368,6 +378,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(VIEW);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 				if (editorType === EDITOR_TYPE__INLINE) {
 					alert('Cannot view in inline editor.');
 					return; // inline editor doesn't have a view mode
@@ -395,6 +408,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DUPLICATE);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 
 				const selection = getSelection();
 				if (selection.length !== 1) {

package/src/Components/Hoc/withPresetButtons.js

@@ -8,6 +8,7 @@ import {
 	DUPLICATE,
 	PRINT,
 	UPLOAD_DOWNLOAD,
+	DOWNLOAD,
 } from '../../Constants/Commands.js';
 import Clipboard from '../Icons/Clipboard.js';
 import Duplicate from '../Icons/Duplicate.js';
@@ -17,6 +18,7 @@ import Trash from '../Icons/Trash.js';
 import Plus from '../Icons/Plus.js';
 import Print from '../Icons/Print.js';
 import UploadDownload from '../Icons/UploadDownload.js';
+import Download from '../Icons/Download.js';
 import inArray from '../../Functions/inArray.js';
 import UploadsDownloadsWindow from '../Window/UploadsDownloadsWindow.js';
 import _ from 'lodash';
@@ -33,6 +35,7 @@ const presetButtons = [
 	DUPLICATE,
 	// PRINT,
 	UPLOAD_DOWNLOAD,
+	DOWNLOAD,
 ];
 
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
@@ -48,6 +51,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				contextMenuItems = [],
 				additionalToolbarButtons = [],
 				useUploadDownload = false,
+				useDownload = false,
 				uploadHeaders,
 				uploadParams,
 				onUpload,
@@ -57,7 +61,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				canRecordBeEdited,
 				canRecordBeDeleted,
 				canRecordBeDuplicated,
-				canProceedWithCrud, // fn returns bool on if the CRUD operation can proceed
 				...propsToPass
 			} = props,
 			{
@@ -177,6 +180,13 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isDisabled = true;
 						}
 						break;
+					case DOWNLOAD:
+						if (!useDownload) {
+							isDisabled = true;
+						} else if (canUser && !(canUser(DOWNLOAD) || canUser(UPLOAD_DOWNLOAD))) { // check Permissions
+							isDisabled = true;
+						}
+						break;
 					default:
 				}
 				return isDisabled;
@@ -211,9 +221,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'addBtn';
 						text = 'Add';
 						handler = (parent, e) => {
-							if (canProceedWithCrud && !canProceedWithCrud()) {
-								return;
-							}
 							onAdd();
 						};
 						icon = Plus;
@@ -227,9 +234,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'editBtn';
 						text = 'Edit';
 						handler = (parent, e) => {
-							if (canProceedWithCrud && !canProceedWithCrud()) {
-								return;
-							}
 							onEdit();
 						};
 						icon = Edit;
@@ -247,9 +251,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						text = 'Delete';
 						handler = onDelete;
 						handler = (parent, e) => {
-							if (canProceedWithCrud && !canProceedWithCrud()) {
-								return;
-							}
 							onDelete();
 						};
 						icon = Trash;
@@ -297,9 +298,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'duplicateBtn';
 						text = 'Duplicate';
 						handler = (parent, e) => {
-							if (canProceedWithCrud && !canProceedWithCrud()) {
-								return;
-							}
 							onDuplicate();
 						};
 						icon = Duplicate;
@@ -323,6 +321,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						handler = (parent, e) => onUploadDownload();
 						icon = UploadDownload;
 						break;
+					case DOWNLOAD:
+						key = 'downloadBtn';
+						text = 'Download';
+						handler = (parent, e) => onDownload();
+						icon = Download;
+						break;
 					default:
 				}
 				return {
@@ -397,6 +401,20 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							/>,
 					onCancel: hideModal,
 				});
+			},
+			onDownload = () => {
+				showModal({
+					body: <UploadsDownloadsWindow
+								reference="downloads"
+								onClose={hideModal}
+								isDownloadOnly={true}
+								Repository={Repository}
+								columnsConfig={props.columnsConfig}
+								downloadHeaders={downloadHeaders}
+								downloadParams={downloadParams}
+							/>,
+					onCancel: hideModal,
+				});
 			};
 			// onPrint = () => {
 			// 	debugger;

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -25,6 +25,7 @@ function UploadsDownloadsWindow(props) {
 			downloadHeaders,
 			uploadParams = {},
 			downloadParams = {},
+			isDownloadOnly = false,
 			onUpload,
 
 			// withComponent
@@ -124,6 +125,61 @@ function UploadsDownloadsWindow(props) {
 				}
 			}
 		};
+
+		const items = [
+			{
+				type: 'DisplayField',
+				text: 'Download an Excel file of the current grid contents.',
+			},
+			{
+				type: 'Button',
+				text: 'Download',
+				isEditable: false,
+				icon: Excel,
+				_icon: {
+					size: 'md',
+				},
+				onPress: () => onDownload(),
+				className: 'mb-5',
+			},
+		];
+		if (!isDownloadOnly) {
+			items.push({
+				type: 'DisplayField',
+				text: 'Upload an Excel file to the current grid.',
+			});
+			items.push({
+				type: 'File',
+				name: 'file',
+				onChangeValue: setImportFile,
+				accept: '.xlsx',
+			});
+			items.push({
+				type: 'Row',
+				className: 'mt-2',
+				items: [
+					{
+						type: 'Button',
+						text: 'Upload',
+						isEditable: false,
+						icon: Upload,
+						_icon: {
+							size: 'md',
+						},
+						isDisabled: !importFile,
+						onPress: onUploadLocal,
+					},
+					{
+						type: 'Button',
+						text: 'Get Template',
+						icon: Download,
+						isEditable: false,
+						onPress: onDownloadTemplate,
+					},
+
+				],
+			});
+		}
 	
 	return <Panel
 				{...props}
@@ -151,58 +207,7 @@ function UploadsDownloadsWindow(props) {
 							"type": "Column",
 							"flex": 1,
 							"defaults": {},
-							"items": [
-								{
-									type: 'DisplayField',
-									text: 'Download an Excel file of the current grid contents.',
-								},
-								{
-									type: 'Button',
-									text: 'Download',
-									isEditable: false,
-									icon: Excel,
-									_icon: {
-										size: 'md',
-									},
-									onPress: () => onDownload(),
-									className: 'mb-5',
-								},
-								{
-									type: 'DisplayField',
-									text: 'Upload an Excel file to the current grid.',
-								},
-								{
-									type: 'File',
-									name: 'file',
-									onChangeValue: setImportFile,
-									accept: '.xlsx',
-								},
-								{
-									type: 'Row',
-									className: 'mt-2',
-									items: [
-										{
-											type: 'Button',
-											text: 'Upload',
-											isEditable: false,
-											icon: Upload,
-											_icon: {
-												size: 'md',
-											},
-											isDisabled: !importFile,
-											onPress: onUploadLocal,
-										},
-										{
-											type: 'Button',
-											text: 'Get Template',
-											icon: Download,
-											isEditable: false,
-											onPress: onDownloadTemplate,
-										},
-
-									],
-								},
-							]
+							"items": items,
 						},
 					]}
 					// record={selection}

package/src/Constants/Commands.js

@@ -6,3 +6,4 @@ export const COPY = 'copy';
 export const DUPLICATE = 'duplicate';
 export const PRINT = 'print';
 export const UPLOAD_DOWNLOAD = 'uploadDownload';
+export const DOWNLOAD = 'download';