@onehat/ui 0.3.332 → 0.3.334

package/package.json

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

package/src/Components/Grid/ColumnSelectorWindow.js

@@ -79,9 +79,11 @@ export default function ColumnSelectorWindow(props) {
 								const
 									[ix, header] = datum,
 									columnConfig = localColumnsConfig.current[ix],
-									isHidden = columnConfig.isHidden;
+									isHidden = columnConfig.isHidden,
+									isHidable = columnConfig.isHidable;
 								return <CheckboxButton
 											isChecked={!isHidden}
+											isDisabled={!isHidable}
 											onPress={() => {
 												if (isHidden) {
 													onShowColumn(ix);

package/src/Components/Grid/Grid.js

@@ -14,9 +14,6 @@ import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
 } from '../../Constants/Selection.js';
-import {
-	v4 as uuid,
-} from 'uuid';
 import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
@@ -35,18 +32,19 @@ import withComponent from '../Hoc/withComponent.js';
 import withData from '../Hoc/withData.js';
 import { withDropTarget } from '../Hoc/withDnd.js';
 import withEvents from '../Hoc/withEvents.js';
-import withSideEditor from '../Hoc/withSideEditor.js';
 import withFilters from '../Hoc/withFilters.js';
+import withInlineEditor from '../Hoc/withInlineEditor.js';
+import withPermissions from '../Hoc/withPermissions.js';
 import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
+import withSideEditor from '../Hoc/withSideEditor.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
-import withInlineEditor from '../Hoc/withInlineEditor.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
-import nbToRgb from '../../Functions/nbToRgb.js';
 import testProps from '../../Functions/testProps.js';
+import nbToRgb from '../../Functions/nbToRgb.js';
 import Loading from '../Messages/Loading.js';
 import isSerializable from '../../Functions/isSerializable.js';
 import inArray from '../../Functions/inArray.js';
@@ -841,6 +839,7 @@ function GridComponent(props) {
 								isResizable: true,
 								isSortable: true,
 								isHidden: inArray(columnConfig.id, defaultHiddenColumns),
+								isHidable: true,
 								isOver: false,
 							},
 							config = _.assign({}, defaults, columnConfig);
@@ -1148,16 +1147,18 @@ export const Grid = withComponent(
 						withAlert(
 							withEvents(
 								withData(
-									withDropTarget(
-										withMultiSelection(
-											withSelection(
-												withFilters(
-													withPresetButtons(
-														withContextMenu(
-															GridComponent
-														)
-													),
-													true // isGrid
+									withPermissions(
+										withDropTarget(
+											withMultiSelection(
+												withSelection(
+													withFilters(
+														withPresetButtons(
+															withContextMenu(
+																GridComponent
+															)
+														),
+														true // isGrid
+													)
 												)
 											)
 										)
@@ -1171,17 +1172,19 @@ export const SideGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withDropTarget(
-													withMultiSelection(
-														withSelection(
-															withSideEditor(
-																withFilters(
-																	withPresetButtons(
-																		withContextMenu(
-																			GridComponent
-																		)
-																	),
-																	true // isGrid
+												withPermissions(
+													withDropTarget(
+														withMultiSelection(
+															withSelection(
+																withSideEditor(
+																	withFilters(
+																		withPresetButtons(
+																			withContextMenu(
+																				GridComponent
+																			)
+																		),
+																		true // isGrid
+																	)
 																)
 															)
 														)
@@ -1196,16 +1199,18 @@ export const WindowedGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withDropTarget(
-													withMultiSelection(
-														withSelection(
-															withWindowedEditor(
-																withFilters(
-																	withPresetButtons(
-																		withContextMenu(
-																			GridComponent
-																		),
-																		true // isGrid
+												withPermissions(
+													withDropTarget(
+														withMultiSelection(
+															withSelection(
+																withWindowedEditor(
+																	withFilters(
+																		withPresetButtons(
+																			withContextMenu(
+																				GridComponent
+																			),
+																			true // isGrid
+																		)
 																	)
 																)
 															)
@@ -1221,17 +1226,19 @@ export const InlineGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withDropTarget(
-													withMultiSelection(
-														withSelection(
-															withInlineEditor(
-																withFilters(
-																	withPresetButtons(
-																		withContextMenu(
-																			GridComponent
-																		)
-																	),
-																	true // isGrid
+												withPermissions(
+													withDropTarget(
+														withMultiSelection(
+															withSelection(
+																withInlineEditor(
+																	withFilters(
+																		withPresetButtons(
+																			withContextMenu(
+																				GridComponent
+																			)
+																		),
+																		true // isGrid
+																	)
 																)
 															)
 														)
@@ -1246,17 +1253,19 @@ export const InlineGridEditor = withComponent(
 // 									withAlert(
 // 										withEvents(
 // 											withData(
-// 												withDropTarget(
-// 													withMultiSelection(
-// 														withSelection(
-// 															withInlineSideEditor(
-// 																withFilters(
-// 																	withPresetButtons(
-// 																		withContextMenu(
-// 																			GridComponent
-// 																		)
-// 																	),
-// 																	true // isGrid
+// 												withPermissions(
+// 													withDropTarget(
+// 														withMultiSelection(
+// 															withSelection(
+// 																withInlineSideEditor(
+// 																	withFilters(
+// 																		withPresetButtons(
+// 																			withContextMenu(
+// 																				GridComponent
+// 																			)
+// 																		),
+// 																		true // isGrid
+// 																	)
 // 																)
 // 															)
 // 														)

package/src/Components/Grid/GridHeaderRow.js

@@ -296,8 +296,8 @@ export default function GridHeaderRow(props) {
 					let {
 							fieldName,
 							header = _.upperFirst(fieldName),
-							isReorderable,
-							isResizable,
+							isReorderable: configIsReorderable,
+							isResizable: configIsResizable,
 							isSortable,
 							w,
 							flex,
@@ -305,8 +305,8 @@ export default function GridHeaderRow(props) {
 							isHidden = false,
 						} = config,
 						isSorter = isSortable && canColumnsSort && sortField === fieldName,
-						isReorderable = canColumnsReorder && isReorderable,
-						isResizable = canColumnsResize && isResizable,
+						isReorderable = canColumnsReorder && configIsReorderable,
+						isResizable = canColumnsResize && configIsResizable,
 						propsToPass = {
 							borderRightWidth: 2,
 							borderRightColor: '#fff',

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -22,7 +22,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 		let [secondaryEditorMode, secondarySetEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
-				secondaryUserCanEdit = true,
+				secondaryUserCanEdit = true, // not permissions, but capability
 				secondaryUserCanView = true,
 				secondaryCanEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
 				secondaryDisableAdd = false,

package/src/Components/Hoc/withData.js

@@ -38,7 +38,6 @@ export default function withData(WrappedComponent) {
 				// withComponent
 				self,
 			} = props,
-			propsToPass = _.omit(props, ['model']), // passing 'model' would mess things up if withData gets called twice (e.g. withData(...withData(...)) ), as we'd be trying to recreate Repository twice
 			localIdIx = idIx || (fields && idField ? fields.indexOf(idField) : null),
 			localDisplayIx = displayIx || (fields && displayField ? fields?.indexOf(displayField) : null),
 			[LocalRepository, setLocalRepository] = useState(Repository || null), // simply pass on Repository if it's already supplied
@@ -106,11 +105,9 @@ export default function withData(WrappedComponent) {
 		}
 
 		return <WrappedComponent
-					{...propsToPass}
+					{...props}
 					disableWithData={false}
 					Repository={LocalRepository}
-					model={model}
-					data={data}
 					fields={fields}
 					idField={idField}
 					displayField={displayField}

package/src/Components/Hoc/withEditor.js

@@ -20,7 +20,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
-				userCanEdit = true,
+				userCanEdit = true, // not permissions, but capability
 				userCanView = true,
 				canEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
 				disableAdd = false,

package/src/Components/Hoc/withPermissions.js

@@ -0,0 +1,87 @@
+import Inflector from 'inflector-js';
+import inArray from '../../Functions/inArray.js';
+import {
+	ADD,
+	EDIT,
+	DELETE,
+	VIEW,
+	COPY,
+	DUPLICATE,
+	PRINT,
+	UPLOAD_DOWNLOAD,
+} from '../../Constants/Commands.js';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+
+export default function withPermissions(WrappedComponent) {
+	return (props) => {
+
+		if (!props.usePermissions) {
+			return <WrappedComponent {...props} />;
+		}
+
+		const {
+				// withData
+				Repository,
+			} = props,
+			model = Repository.schema.name,
+			checkPermission = (permission) => {
+				const
+					reduxState = UiGlobals.redux?.getState(),
+					permissions = reduxState?.app?.permissions;
+				if (!permissions) {
+					return false;
+				}
+				return inArray(permission, permissions);
+			},
+
+			/**
+			 * Check if user has permission to perform an action
+			 * 
+			 * Example usages:
+			 * canUser('view') // check if user can perform 'view' action on the default model
+			 * canUser('add', 'PmEvents') // check if user can perform 'add' action on a specific model
+			 * canUser('do_something_else) // check if user has a custom permission
+			 * 
+			 * @param {string} permission - The permission to check for.
+			 * @param {string} modelToCheck - The model to check for the permission on.
+			 * @returns {boolean} - Whether user has permission
+			 */
+			canUser = (permission, modelToCheck = null) => {
+
+				// in certain cases, shift permissions to standard CRUD operations
+				switch(permission) {
+					case COPY:
+					case DUPLICATE:
+						permission = ADD;
+						break;
+					case PRINT:
+						permission = VIEW;
+						break;
+					case UPLOAD_DOWNLOAD:
+						permission = EDIT;
+						break;
+					default:
+						// do nothing
+						break;
+				}
+
+				// standard CRUD permissions
+				if (inArray(permission, [VIEW, ADD, EDIT, DELETE])) {
+					if (!modelToCheck) {
+						modelToCheck = model; // use default model if none supplied
+					}
+					modelToCheck = Inflector.underscore(modelToCheck); // 'PmEvents' -> 'pm_events'
+					permission += '_' + modelToCheck; // e.g. 'view_pm_events'
+				}
+
+				return checkPermission(permission);
+			};
+
+		return <WrappedComponent
+					{...props}
+					canUser={canUser}
+				/>;
+	};
+}

package/src/Components/Hoc/withPresetButtons.js

@@ -2,6 +2,16 @@ import React, { useState, useEffect, } from 'react';
 import {
 	Modal,
 } from 'native-base';
+import {
+	ADD,
+	EDIT,
+	DELETE,
+	VIEW,
+	COPY,
+	DUPLICATE,
+	PRINT,
+	UPLOAD_DOWNLOAD,
+} from '../../constants/Commands.js';
 import Clipboard from '../Icons/Clipboard.js';
 import Duplicate from '../Icons/Duplicate.js';
 import Edit from '../Icons/Edit.js';
@@ -18,14 +28,14 @@ import _ from 'lodash';
 // and a toolbar button that match in text label, icon, and handler.
 
 const presetButtons = [
-	'view',
-	'add',
-	'edit',
-	'delete',
-	'duplicate',
-	'copy',
-	// 'print',
-	'uploadDownload',
+	ADD,
+	EDIT,
+	DELETE,
+	VIEW,
+	COPY,
+	DUPLICATE,
+	// PRINT,
+	UPLOAD_DOWNLOAD,
 ];
 
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
@@ -71,8 +81,11 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				// withData
 				Repository,
 
+				// withPermissions
+				canUser,
+
 				// withEditor
-				userCanEdit = true,
+				userCanEdit = true, // not permissions, but capability
 				userCanView = true,
 				onAdd,
 				onEdit,
@@ -101,44 +114,60 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			isTypeDisabledCompletely = (type) => {
 				let isDisabled = false;
 				switch(type) {
-					case 'add':
+					case ADD:
 						if (disableAdd || canEditorViewOnly) {
 							isDisabled = true;
+						} else if (canUser && !canUser(ADD)) { // check Permissions
+							isDisabled = true;
 						}
 						break;
-					case 'edit':
+					case EDIT:
 						if (disableEdit || canEditorViewOnly || isSideEditor) {
 							isDisabled = true;
+						} else if (canUser && !canUser(EDIT)) { // check Permissions
+							isDisabled = true;
 						}
 						break;
-					case 'delete':
+					case DELETE:
 						if (disableDelete || canEditorViewOnly) {
 							isDisabled = true;
+						} else if (canUser && !canUser(DELETE)) { // check Permissions
+							isDisabled = true;
 						}
 						break;
-					case 'view':
+					case VIEW:
 						if (disableView || isSideEditor) {
 							isDisabled = true;
+						} else if (canUser && !canUser(VIEW)) { // check Permissions
+							isDisabled = true;
 						}
 						break;
-					case 'copy':
+					case COPY:
 						if (disableCopy) {
 							isDisabled = true;
+						} else if (canUser && !canUser(COPY)) { // check Permissions
+							isDisabled = true;
 						}
 						break;
-					case 'duplicate':
+					case DUPLICATE:
 						if (disableDuplicate || canEditorViewOnly) {
 							isDisabled = true;
+						} else if (canUser && !canUser(DUPLICATE)) { // check Permissions
+							isDisabled = true;
 						}
 						break;
-					case 'print':
+					case PRINT:
 						if (disablePrint) {
 							isDisabled = true;
+						} else if (canUser && !canUser(PRINT)) { // check Permissions
+							isDisabled = true;
 						}
 						break;
-					case 'uploadDownload':
+					case UPLOAD_DOWNLOAD:
 						if (!useUploadDownload) {
 							isDisabled = true;
+						} else if (canUser && !canUser(UPLOAD_DOWNLOAD)) { // check Permissions
+							isDisabled = true;
 						}
 						break;
 					default:
@@ -152,7 +181,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					icon = null,
 					isDisabled = false;
 				switch(type) {
-					case 'add':
+					case ADD:
 						key = 'addBtn';
 						text = 'Add';
 						handler = onAdd;
@@ -164,7 +193,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isDisabled = true;
 						}
 						break;
-					case 'edit':
+					case EDIT:
 						key = 'editBtn';
 						text = 'Edit';
 						handler = onEdit;
@@ -179,7 +208,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isDisabled = true;
 						}
 						break;
-					case 'delete':
+					case DELETE:
 						key = 'deleteBtn';
 						text = 'Delete';
 						handler = onDelete;
@@ -200,7 +229,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							}
 						}
 						break;
-					case 'view':
+					case VIEW:
 						key = 'viewBtn';
 						text = 'View';
 						handler = onView;
@@ -213,7 +242,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isDisabled = true;
 						}
 						break;
-					case 'copy':
+					case COPY:
 						key = 'copyBtn';
 						text = 'Copy to Clipboard';
 						handler = onCopyToClipboard;
@@ -226,7 +255,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isDisabled = true;
 						}
 						break;
-					case 'duplicate':
+					case DUPLICATE:
 						key = 'duplicateBtn';
 						text = 'Duplicate';
 						handler = onDuplicate;
@@ -242,12 +271,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isDisabled = true;
 						}
 						break;
-					// case 'print':
+					// case PRINT:
 					// 	text = 'Print';
 					// 	handler = onPrint;
 					// 	icon = <Print />;
 					// 	break;
-					case 'uploadDownload':
+					case UPLOAD_DOWNLOAD:
 						key = 'uploadDownloadBtn';
 						text = 'Upload/Download';
 						handler = onUploadDownload;
@@ -274,8 +303,8 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					if (isTypeDisabledCompletely(type)) { // i.e. not just temporarily disabled because of selection
 						return;
 					}
-					if ((!userCanEdit && inArray(type, ['add', 'edit', 'delete', 'duplicate',])) ||
-						(!userCanView && type === 'view')) {
+					if ((!userCanEdit && inArray(type, [ADD, EDIT, DELETE, DUPLICATE,])) ||
+						(!userCanView && type === VIEW)) {
 						return;
 					}
 	

package/src/Components/Tree/Tree.js

@@ -31,8 +31,9 @@ import withData from '../Hoc/withData.js';
 import withEvents from '../Hoc/withEvents.js';
 import withSideEditor from '../Hoc/withSideEditor.js';
 import withFilters from '../Hoc/withFilters.js';
-import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
+import withPresetButtons from '../Hoc/withPresetButtons.js';
+import withPermissions from '../Hoc/withPermissions.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
@@ -1320,15 +1321,17 @@ export const Tree = withComponent(
 						withAlert(
 							withEvents(
 								withData(
-									// withMultiSelection(
-										withSelection(
-											withFilters(
-												withContextMenu(
-													TreeComponent
+									withPermissions(
+										// withMultiSelection(
+											withSelection(
+												withFilters(
+													withContextMenu(
+														TreeComponent
+													)
 												)
 											)
-										)
-									// )
+										// )
+									)
 								)
 							)
 						)
@@ -1338,20 +1341,22 @@ export const SideTreeEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												// withMultiSelection(
-													withSelection(
-														withSideEditor(
-															withFilters(
-																withPresetButtons(
-																	withContextMenu(
-																		TreeComponent
+												withPermissions(
+													// withMultiSelection(
+														withSelection(
+															withSideEditor(
+																withFilters(
+																	withPresetButtons(
+																		withContextMenu(
+																			TreeComponent
+																		)
 																	)
-																)
-															),
-															true // isTree
+																),
+																true // isTree
+															)
 														)
-													)
-												// )
+													// )
+												)
 											)
 										)
 									)
@@ -1361,20 +1366,22 @@ export const WindowedTreeEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												// withMultiSelection(
-													withSelection(
-														withWindowedEditor(
-															withFilters(
-																withPresetButtons(
-																	withContextMenu(
-																		TreeComponent
+												withPermissions(
+													// withMultiSelection(
+														withSelection(
+															withWindowedEditor(
+																withFilters(
+																	withPresetButtons(
+																		withContextMenu(
+																			TreeComponent
+																		)
 																	)
-																)
-															),
-															true // isTree
+																),
+																true // isTree
+															)
 														)
-													)
-												// )
+													// )
+												)
 											)
 										)
 									)

package/src/Constants/Commands.js

@@ -0,0 +1,8 @@
+export const ADD = 'add';
+export const EDIT = 'edit';
+export const DELETE = 'delete';
+export const VIEW = 'view';
+export const COPY = 'copy';
+export const DUPLICATE = 'duplicate';
+export const PRINT = 'print';
+export const UPLOAD_DOWNLOAD = 'uploadDownload';

package/src/Components/WaitModal.js

@@ -1,31 +0,0 @@
-import {
-	Modal,
-	Row,
-	Text,
-} from 'native-base';
-import withRedux from '../Data/hoc/withRedux';
-import Loading from './Loading';
-import _ from 'lodash';
-
-export function WaitModal(props) {
-	const {
-			textMessage = 'Please wait...',
-			waitStack,
-		} = props;
-
-	return <Modal {...props} _backdrop={{ bg: "#000" }}>
-				<Modal.Content maxWidth="400px">
-					<Modal.Body>
-						<Row justifyContent="center" alignItems="center">
-							<Loading minHeight="auto" h={5} w={5} mr={2} />
-							<Text color="#000">{textMessage}</Text>
-							{/* {!!waitStack ? <Text color="#000">{_.keys(waitStack).join(', ')}</Text> : null} */}
-						</Row>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal>;
-}
-
-export default withRedux(WaitModal, [
-	'waitStack',
-]);