@onehat/ui 0.3.333 → 0.3.335

package/src/Components/Tree/Tree.js

@@ -13,6 +13,9 @@ import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
 } from '../../Constants/Selection.js';
+import {
+	EDIT,
+} from '../../Constants/Commands.js';
 import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
@@ -31,8 +34,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';
@@ -55,6 +59,7 @@ import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
 import NoRecordsFound from '../Grid/NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import Loading from '../Messages/Loading.js';
+import Unauthorized from '../Messages/Unauthorized.js';
 import _ from 'lodash';
 
 const DEPTH_INDENT_PX = 25;
@@ -105,6 +110,7 @@ function TreeComponent(props) {
 			reload = null, // Whenever this value changes after initial render, the tree will reload from scratch
 			parentIdIx,
 			initialSelection,
+			canRecordBeEdited,
 			onTreeLoad,
 
 			// withComponent
@@ -134,6 +140,9 @@ function TreeComponent(props) {
 			idIx,
 			displayIx,
 
+			// withPermissions
+			canUser,
+
 			// withSelection
 			selection,
 			setSelection,
@@ -863,6 +872,12 @@ function TreeComponent(props) {
 										onNodeClick(item, e); // so reselect it
 									}
 									if (onEdit) {
+										if (canUser && !canUser(EDIT)) { // permissions
+											return;
+										}
+										if (canRecordBeEdited && !canRecordBeEdited(selection)) { // record can be edited
+											return;
+										}
 										onEdit();
 									}
 									break;
@@ -1176,6 +1191,10 @@ function TreeComponent(props) {
 		}
 	}, [selectorId, selectorSelected]);
 
+	if (canUser && !canUser('view')) {
+		return <Unauthorized />;
+	}
+
 	if (setWithEditListeners) {
 		setWithEditListeners({ // Update withEdit's listeners on every render
 			onBeforeAdd,
@@ -1320,15 +1339,17 @@ export const Tree = withComponent(
 						withAlert(
 							withEvents(
 								withData(
-									// withMultiSelection(
-										withSelection(
-											withFilters(
-												withContextMenu(
-													TreeComponent
+									withPermissions(
+										// withMultiSelection(
+											withSelection(
+												withFilters(
+													withContextMenu(
+														TreeComponent
+													)
 												)
 											)
-										)
-									// )
+										// )
+									)
 								)
 							)
 						)
@@ -1338,20 +1359,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 +1384,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/Components/Viewer/Viewer.js

@@ -6,6 +6,9 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import {
+	EDIT,
+} from '../../Constants/Commands.js';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
@@ -33,7 +36,7 @@ function Viewer(props) {
 			columnDefaults = {}, // defaults for each Column defined in items (above)
 			record,
 			additionalViewButtons,
-			verifyCanEdit,
+			canRecordBeEdited,
 
 			// withComponent
 			self,
@@ -41,6 +44,10 @@ function Viewer(props) {
 			// withData
 			Repository,
 
+			// withPermissions
+			canUser,
+			showPermissionsError,
+
 			// withEditor
 			editorType,
 			onEditMode,
@@ -246,7 +253,7 @@ function Viewer(props) {
 	}
 
 	let canEdit = true;
-	if (verifyCanEdit && !verifyCanEdit([record])) {
+	if (canRecordBeEdited && !canRecordBeEdited([record])) {
 		canEdit = false;
 	}
 
@@ -259,13 +266,14 @@ function Viewer(props) {
 								<Row flex={1} alignItems="center">
 									<Text fontSize={20} ml={2} color="trueGray.500">View Mode</Text>
 								</Row>
-								<Button
-									{...testProps('toEditBtn')}
-									key="editBtn"
-									onPress={onEditMode}
-									leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
-									color="#fff"
-								>To Edit</Button>
+								{(!canUser || canUser(EDIT)) &&
+									<Button
+										{...testProps('toEditBtn')}
+										key="editBtn"
+										onPress={onEditMode}
+										leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
+										color="#fff"
+									>To Edit</Button>}
 							</Toolbar>}
 						{!_.isEmpty(additionalButtons) && 
 							<Toolbar justifyContent="flex-end" flexWrap="wrap">

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/Functions/chunkArray.js

@@ -0,0 +1,7 @@
+export default function chunkArray(array, chunkSize) {
+	const result = [];
+	for (let i = 0; i < array.length; i += chunkSize) {
+		result.push(array.slice(i, i + chunkSize));
+	}
+	return result;
+}

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',
-]);