@onehat/ui 0.3.333 → 0.3.335

package/src/Components/Hoc/withEditor.js

@@ -2,11 +2,22 @@ import { useEffect, useState, useRef, } from 'react';
 import {
 	Button,
 } from 'native-base';
+import {
+	ADD,
+	EDIT,
+	DELETE,
+	VIEW,
+	COPY,
+	DUPLICATE,
+	PRINT,
+	UPLOAD_DOWNLOAD,
+} from '../../Constants/Commands.js';
 import {
 	EDITOR_MODE__VIEW,
 	EDITOR_MODE__ADD,
 	EDITOR_MODE__EDIT,
 	EDITOR_TYPE__SIDE,
+	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -20,7 +31,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,
@@ -56,6 +67,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				// withData
 				Repository,
 
+				// withPermissions
+				canUser,
+				showPermissionsError,
+
 				// withSelection
 				selection,
 				setSelection,
@@ -108,6 +123,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				return newEntityDisplayValueRef.current;
 			},
 			doAdd = async (e, values) => {
+				if (canUser && !canUser(ADD)) {
+					showPermissionsError(ADD);
+					return;
+				}
+
 				let addValues = values;
 
 				if (Repository?.isLoading) {
@@ -201,6 +221,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 			},
 			doEdit = async () => {
+				if (canUser && !canUser(EDIT)) {
+					showPermissionsError(EDIT);
+					return;
+				}
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}
@@ -215,6 +239,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 			},
 			doDelete = async (args) => {
+				if (canUser && !canUser(DELETE)) {
+					showPermissionsError(DELETE);
+					return;
+				}
 				let cb = null;
 				if (_.isFunction(args)) {
 					cb = args;
@@ -267,6 +295,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				deleteRecord(false, cb);
 			},
 			deleteRecord = async (moveSubtreeUp, cb) => {
+				if (canUser && !canUser(DELETE)) {
+					showPermissionsError(DELETE);
+					return;
+				}
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete(selection);
 					if (listenerResult === false) {
@@ -296,6 +328,17 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (!userCanView) {
 					return;
 				}
+				if (canUser && !canUser(VIEW)) {
+					showPermissionsError(VIEW);
+					return;
+				}
+				if (editorType === EDITOR_TYPE__INLINE) {
+					alert('Cannot view in inline editor.');
+					return; // inline editor doesn't have a view mode
+				}
+
+				// check permissions for view
+
 				if (selection.length !== 1) {
 					return;
 				}
@@ -311,6 +354,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (!userCanEdit || disableDuplicate) {
 					return;
 				}
+				if (canUser && !canUser(DUPLICATE)) {
+					showPermissionsError(DUPLICATE);
+					return;
+				}
+
+				// check permissions for duplicate
+
+
 				if (selection.length !== 1) {
 					return;
 				}
@@ -339,6 +390,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				doEdit();
 			},
 			doEditorSave = async (data, e) => {
+				let mode = editorMode === EDITOR_MODE__ADD ? ADD : EDIT;
+				if (canUser && !canUser(mode)) {
+					showPermissionsError(mode);
+					return;
+				}
+
 				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
 				const isSingle = selection.length === 1;
 				let useStaged = false;
@@ -395,7 +452,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 							await getListeners().onAfterAddSave(selection);
 						}
 						setIsAdding(false);
-						setEditorMode(EDITOR_MODE__EDIT);
+						if (!canUser || canUser(EDIT)) {
+							setEditorMode(EDITOR_MODE__EDIT);
+						} else {
+							setEditorMode(EDITOR_MODE__VIEW);
+						}
 					} else if (editorMode === EDITOR_MODE__EDIT) {
 						if (getListeners().onAfterEdit) {
 							await getListeners().onAfterEdit(selection);
@@ -440,6 +501,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(false);
 			},
 			doEditorDelete = async () => {
+				if (canUser && !canUser(DELETE)) {
+					showPermissionsError(DELETE);
+					return;
+				}
+
 				doDelete(() => {
 					setEditorMode(EDITOR_MODE__VIEW);
 					setIsEditorShown(false);
@@ -484,9 +550,19 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				return mode;
 			},
 			setEditMode = () => {
+				if (canUser && !canUser(EDIT)) {
+					showPermissionsError(EDIT);
+					return;
+				}
+
 				setEditorMode(EDITOR_MODE__EDIT);
 			},
 			setViewMode = () => {
+				if (canUser && !canUser(VIEW)) {
+					showPermissionsError(VIEW);
+					return;
+				}
+
 				function doIt() {
 					setEditorMode(EDITOR_MODE__VIEW);
 				}

package/src/Components/Hoc/withPdfButtons.js

@@ -4,6 +4,9 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import {
+	VIEW,
+} from '../../Constants/Commands.js';
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import Inflector from 'inflector-js';
 import qs from 'qs';
@@ -19,15 +22,21 @@ import _ from 'lodash';
 export default function withPdfButtons(WrappedComponent) {
 	return withModal((props) => {
 
+		let showButtons = true;
 		if (!props.showPdfBtns) {
+			showButtons = false;
+		}
+		if (props.canUser && !props.canUser(VIEW)) { // permissions
+			showButtons = false;
+		}
+		if (!showButtons) {
 			// bypass everything.
 			// If we don't do this, we get an infinite recursion with Form
 			// because this HOC wraps Form and uses Form itself.
 			return <WrappedComponent {...props} />;
 		}
 
-		const
-			{
+		const {
 				additionalEditButtons = [],
 				additionalViewButtons = [],
 				items = [],

package/src/Components/Hoc/withPermissions.js

@@ -0,0 +1,110 @@
+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, forceUsePermissions = false) {
+	return (props) => {
+
+		if (!props.usePermissions && !forceUsePermissions) {
+			return <WrappedComponent {...props} />;
+		}
+
+		const {
+				// withAlert
+				alert,
+
+				// 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);
+			},
+
+			showPermissionsError = (permission, modelForAlert = null) => {
+				if (!modelForAlert) {
+					modelForAlert = model; // use default model if none supplied
+				}
+				modelForAlert = Inflector.humanize(Inflector.underscore(modelForAlert)); // 'PmEvents' -> 'pm events'
+			
+				alert(`You are not authorized to ${permission} ${modelForAlert}.`);
+			},
+
+			/**
+			 * 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) => {
+
+				// deal with special cases that refer to other permissions
+				switch(permission) {
+					case PRINT:
+						permission = VIEW;
+						break;
+					case COPY:
+					case DUPLICATE: {
+						// user must have ADD _and_ EDIT permissions, so check both
+						const
+							hasAddPermission = canUser(ADD, modelToCheck),
+							hasEditPermission = canUser(EDIT, modelToCheck);
+						return hasAddPermission && hasEditPermission;
+					}
+					case UPLOAD_DOWNLOAD: {
+						// user must have VIEW, ADD, EDIT, and DELETE permissions, so check all of them
+						const
+							hasViewPermission = canUser(VIEW, modelToCheck),
+							hasAddPermission = canUser(ADD, modelToCheck),
+							hasEditPermission = canUser(EDIT, modelToCheck),
+							hasDeletePermission = canUser(DELETE, modelToCheck);
+						return hasViewPermission && hasAddPermission && hasEditPermission && hasDeletePermission;
+					}
+					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}
+					showPermissionsError={showPermissionsError}
+				/>;
+	};
+}

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) {
@@ -42,9 +52,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				additionalToolbarButtons = [],
 				useUploadDownload = false,
 				onChangeColumnsConfig,
-				verifyCanEdit,
-				verifyCanDelete,
-				verifyCanDuplicate,
+				canRecordBeEdited,
+				canRecordBeDeleted,
+				canRecordBeDuplicated,
 				...propsToPass
 			} = props,
 			{
@@ -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;
@@ -175,11 +204,11 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
-						if (verifyCanEdit && !verifyCanEdit(selection)) {
+						if (canRecordBeEdited && !canRecordBeEdited(selection)) {
 							isDisabled = true;
 						}
 						break;
-					case 'delete':
+					case DELETE:
 						key = 'deleteBtn';
 						text = 'Delete';
 						handler = onDelete;
@@ -190,7 +219,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
-						if (verifyCanDelete && !verifyCanDelete(selection)) {
+						if (canRecordBeDeleted && !canRecordBeDeleted(selection)) {
 							isDisabled = true;
 						}
 						if (isTree) {
@@ -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;
@@ -238,16 +267,16 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || selection.length > 1) {
 							isDisabled = true;
 						}
-						if (verifyCanDuplicate && !verifyCanDuplicate(selection)) {
+						if (canRecordBeDuplicated && !canRecordBeDuplicated(selection)) {
 							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/Messages/Unauthorized.js

@@ -0,0 +1,17 @@
+import {
+	Column,
+	Text,
+} from 'native-base';
+
+export default function Unauthorized(props) {
+	const 
+		{
+			text = 'Unauthorized.',
+		} = props;
+	return <Column justifyContent="center" alignItems="center" w="100%" flex={1}>
+				<Text
+					textAlign="center"
+					color="#f00"
+				>{text}</Text>
+			</Column>;
+}