@onehat/ui 0.3.308 → 0.3.310

package/package.json

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

package/src/Components/Form/Form.js

@@ -26,7 +26,7 @@ import UiGlobals from '../../UiGlobals.js';
 import withAlert from '../Hoc/withAlert.js';
 import withComponent from '../Hoc/withComponent.js';
 import withEditor from '../Hoc/withEditor.js';
-import withPdfButton from '../Hoc/withPdfButton.js';
+import withPdfButtons from '../Hoc/withPdfButtons.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
@@ -1123,6 +1123,6 @@ function getNullFieldValues(initialValues, Repository) {
 	return ret;
 }
 
-export const FormEditor = withComponent(withAlert(withEditor(withPdfButton(Form))));
+export const FormEditor = withComponent(withAlert(withEditor(withPdfButtons(Form))));
 
-export default withComponent(withAlert(withPdfButton(Form)));
+export default withComponent(withAlert(withPdfButtons(Form)));

package/src/Components/Hoc/withModal.js

@@ -35,6 +35,7 @@ export default function withModal(WrappedComponent) {
 			[h, setHeight] = useState(250),
 			[w, setWidth] = useState(400),
 			[onOk, setOnOk] = useState(),
+			[okBtnLabel, setOkBtnLabel] = useState('OK'),
 			[onYes, setOnYes] = useState(),
 			[onNo, setOnNo] = useState(),
 			[customButtons, setCustomButtons] = useState(),
@@ -53,6 +54,7 @@ export default function withModal(WrappedComponent) {
 					canClose = true,
 					includeCancel = false,
 					onOk,
+					okBtnLabel,
 					onYes,
 					onNo,
 					customButtons,
@@ -81,6 +83,9 @@ export default function withModal(WrappedComponent) {
 				if (onOk) {
 					setOnOk(() => onOk);
 				}
+				if (okBtnLabel) {
+					setOkBtnLabel(okBtnLabel);
+				}
 				if (onYes) {
 					setOnYes(() => onYes);
 				}
@@ -132,7 +137,7 @@ export default function withModal(WrappedComponent) {
 								key="okBtn"
 								ref={autoFocusRef}
 								onPress={onOk}
-							>OK</Button>);
+							>{okBtnLabel}</Button>);
 			}
 			if (onYes) {
 				buttons.push(<Button

package/src/Components/Hoc/{withPdfButton.js → withPdfButtons.js}

@@ -1,24 +1,25 @@
-import { useState, } from 'react';
 import {
 	Column,
-	Button,
-	Modal,
+	Icon,
+	Row,
+	Text,
 } from 'native-base';
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import Inflector from 'inflector-js';
 import qs from 'qs';
-import FormPanel from '../Panel/FormPanel.js';
+import Form from '../Form/Form.js';
 import inArray from '../../Functions/inArray.js';
 import Pdf from '../Icons/Pdf.js';
-import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
+import TriangleExclamation from '../Icons/TriangleExclamation.js';
+import withModal from './withModal.js';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
-export default function withPdfButton(WrappedComponent) {
-	return (props) => {
+export default function withPdfButtons(WrappedComponent) {
+	return withModal((props) => {
 
-		if (!props.showViewPdfBtn) {
+		if (!props.showPdfBtns) {
 			// bypass everything.
 			// If we don't do this, we get an infinite recursion with Form
 			// because this HOC wraps Form and uses Form itself.
@@ -33,6 +34,9 @@ export default function withPdfButton(WrappedComponent) {
 				ancillaryItems = [],
 				columnDefaults = {},
 
+				// withComponent
+				self,
+
 				// withData
 				Repository,
 				model,
@@ -40,9 +44,15 @@ export default function withPdfButton(WrappedComponent) {
 				// withSelection
 				selection,
 
+				// withAlert
+				alert,
+				showInfo,
+
+				// withModal
+				showModal,
+				hideModal,
+
 			} = props,
-			[isModalShown, setIsModalShown] = useState(false),
-			[width, height] = useAdjustedWindowSize(510, 800), // 510 so it's over the stack threshold
 			propertyNames = [],
 			buildModalItems = () => {
 				const modalItems = _.map(_.cloneDeep(items), (item, ix) => buildNextLayer(item, ix, columnDefaults)); // clone, as we don't want to alter the item by reference
@@ -108,7 +118,6 @@ export default function withPdfButton(WrappedComponent) {
 					return item;
 				}
 
-
 				if (item.isHiddenInViewMode || type === 'Button') {
 					return null;
 				}
@@ -138,6 +147,7 @@ export default function withPdfButton(WrappedComponent) {
 					if (!item) {
 						return;
 					}
+
 					let {
 							name,
 							items,
@@ -154,46 +164,42 @@ export default function withPdfButton(WrappedComponent) {
 				_.each(modalItems, walkTree);
 				return startingValues;
 			},
-			getPdf = (data) => {
-				data.id = selection[0].id;
-
+			onChooseFields = (userWantsToEmail = false) => {
 				const
-					url = UiGlobals.baseURL + model + '/viewModelPdf?',
-					queryString = qs.stringify(data);
+					modalItems = buildModalItems(),
+					startingValues = getStartingValues(modalItems),
+					validator = buildValidator();
 
-				window.open(url + queryString, '_blank');
-			};
+				showModal({
+					title: 'PDF Fields to Show',
+					message: 'Please select which fields to show in the PDF. (1)',
+					includeCancel: true,
+					onOk: () => {
+						hideModal();
 
-		const button = {
-			key: 'viewPdfBtn',
-			text: 'View PDF',
-			icon: Pdf,
-			isDisabled: selection.length !== 1,
-			handler: () => {
-				setIsModalShown(true);
-			},
-		};
-		if (!_.find(additionalEditButtons, btn => button.key === btn.key)) { 
-			additionalEditButtons.push(button);
-		}
-		if (!_.find(additionalViewButtons, btn => button.key === btn.key)) { 
-			additionalViewButtons.push(button);
-		}
-	
-		let modal = null;
-		if (isModalShown) {
-			const
-				modalItems = buildModalItems(),
-				startingValues = getStartingValues(modalItems),
-				validator = buildValidator();
-			modal = <Modal
-						isOpen={true}
-						onClose={() => setIsModalShown(false)}
-					>
-						<Column bg="#fff" w={width} h={height}>
-							<FormPanel
-								title="PDF Fields to Show"
-								instructions="Please select which parts to show in the PDF."
+						const
+							form = self.children.ModalForm,
+							data = form.formGetValues();
+
+						if (userWantsToEmail) {
+							onChooseEmailAddress(data);
+						} else {
+							getPdf(data);
+						}
+					},
+					okBtnLabel: userWantsToEmail ? 'Choose Email' : 'Get PDF',
+					w: 530, // 510 so it's over the stack threshold
+					h: 800,
+					body: <Column w="100%">
+							<Row px={10}>
+								<Column w="40px" mr={5} justifyContent="flex-start">
+									<Icon as={TriangleExclamation} size={10} color="#000" />
+								</Column>
+								<Text flex={1}>Please select which fields to show in the PDF. (2)</Text>
+							</Row>
+							<Form
+								parent={self}
+								reference="ModalForm"
 								editorType={EDITOR_TYPE__PLAIN}
 								flex={1}
 								Repository={Repository}
@@ -201,26 +207,124 @@ export default function withPdfButton(WrappedComponent) {
 								startingValues={startingValues}
 								validator={validator}
 								checkIsEditingDisabled={false}
-								onClose={(e) => {
-									setIsModalShown(false);
+								disableFooter={true}
+								columnDefaults={{
+									labelWidth: '100%',
 								}}
-								onSubmit={(data, e) => {
-									getPdf(data);
-									setIsModalShown(false);
+							/>
+						</Column>,
+				});
+			},
+			onChooseEmailAddress = (data) => {
+				showModal({
+					title: 'Email To',
+					message: 'Please enter an email address to send the PDF to. (1)',
+					includeCancel: true,
+					onOk: () => {
+						hideModal();
+
+						const
+							fv = self.children.ModalForm.formGetValues(),
+							email = fv.email;
+
+						sendEmail({
+							...data,
+							email,
+						});
+					},
+					okBtnLabel: 'Email PDF',
+					w: 510, // 510 so it's over the stack threshold
+					h: 300,
+					body: <Column w="100%">
+							<Row>
+								<Column w="40px" mr={5} justifyContent="flex-start">
+									<Icon as={TriangleExclamation} size={10} color="#000" />
+								</Column>
+								<Text flex={1}>Please enter an email address to send the PDF to. (2)</Text>
+							</Row>
+							<Form
+								parent={self}
+								reference="ModalForm"
+								editorType={EDITOR_TYPE__PLAIN}
+								disableFooter={true}
+								columnDefaults={{
+									labelWidth: '100%',
 								}}
-								submitBtnLabel="View PDF"
-								useAdditionalEditButtons={false}
+								items={[
+									{
+										name: 'email',
+										label: 'Email Address',
+										type: 'Input',
+										required: true,
+									},
+								]}
+								validator={yup.object({
+									email: yup.string().email().required(),
+								})}
 							/>
-						</Column>
-					</Modal>;
-		}
-		return <>
-				<WrappedComponent
+						</Column>,
+				});
+			},
+			getPdf = (data) => {
+				data.id = selection[0].id;
+
+				const
+					url = UiGlobals.baseURL + model + '/viewModelPdf?',
+					queryString = qs.stringify(data);
+
+				window.open(url + queryString, '_blank');
+			},
+			sendEmail = async (data) => {
+
+				data.id = selection[0].id;
+				
+				const result = await Repository._send('POST', model + '/emailModelPdf', data);
+
+				const {
+					root,
+					success,
+					total,
+					message
+				} = Repository._processServerResponse(result);
+
+				if (!success) {
+					alert('Email could not be sent.');
+					return;
+				}
+
+				showInfo('Email sent successfully.');
+
+			};
+
+		const buttons = [
+			{
+				key: 'emailPdfBtn',
+				text: 'Email PDF',
+				icon: Pdf,
+				isDisabled: selection.length !== 1,
+				handler: () => onChooseFields(true),
+			},
+			{
+				key: 'viewPdfBtn',
+				text: 'View PDF',
+				icon: Pdf,
+				isDisabled: selection.length !== 1,
+				handler: () => onChooseFields(),
+			},
+		];
+		_.each(buttons, (button) => {
+			if (!_.find(additionalEditButtons, btn => button.key === btn.key)) { 
+				additionalEditButtons.push(button);
+			}
+			if (!_.find(additionalViewButtons, btn => button.key === btn.key)) { 
+				additionalViewButtons.push(button);
+			}
+		});
+	
+		return <WrappedComponent
 					{...props}
 					additionalEditButtons={additionalEditButtons}
 					additionalViewButtons={additionalViewButtons}
-				/>
-				{modal}
-			</>;
-	};
+				/>;
+	});
 }

package/src/Functions/Cypress/dom_functions.js

@@ -7,8 +7,8 @@
  * e.g. ['parent', 'child'] will be converted to '[data-testid="parent"] [data-testid="child"]'
  * @return Cypress chainer
  */
-export function getDomNode(selectors) {
-	return cy.get(getTestIdSelectors(selectors, true));
+export function getDomNode(selectors, options = {}) {
+	return cy.get(getTestIdSelectors(selectors, true), options);
 }
 
 /**
@@ -18,8 +18,8 @@ export function getDomNode(selectors) {
  * e.g. ['parent', 'child'] will be converted to '[data-testid="parent"] [data-testid="child"]'
  * @return Cypress chainer
  */
-export function getDomNodes(selectors) {
-	return cy.get(getTestIdSelectors(selectors));
+export function getDomNodes(selectors, options = {}) {
+	return cy.get(getTestIdSelectors(selectors), options);
 }
 
 /**

package/src/Functions/Cypress/form_functions.js

@@ -128,12 +128,15 @@ export function setComboValue(selectors, value) {
 	getDomNode([...selectors, 'input']).then((field) => {
 		cy.get(field).clear({ force: true });
 		if (value) {
+			cy.intercept('GET', '**/get**').as('getWaiter'); // set up waiter
 			cy.get(field)
 				.type(value, { delay: 40, force: true }) // slow it down a bit, so React has time to re-render
-				.wait(1000) // allow time to load dropdown
-
+				.wait('@getWaiter'); // allow dropdown to load
+				
+			cy.get(field)
+				.wait(1500) // render
 				.type('{downarrow}')
-				.wait(250) // allow time for selection
+				.wait(1000) // allow time for selection
 
 				.type('{enter}')
 				.wait(250); // allow time to register enter key
@@ -166,12 +169,15 @@ export function setTagValue(selectors, value) {
 		if (!_.isEmpty(values)) {
 			_.each(values, (value) => {
 				const id = value.id;
+				cy.intercept('GET', '**/get**').as('getWaiter'); // set up waiter
 				cy.get(field)
 					.type('id:' + id, { delay: 40, force: true }) // slow it down a bit, so React has time to re-render
-					.wait(1000) // allow time to load dropdown
-	
+					.wait('@getWaiter'); // allow dropdown to load
+					
+				cy.get(field)
+					.wait(1500) // render
 					.type('{downarrow}')
-					.wait(250); // allow time for selection
+					.wait(1000); // allow time for selection
 			});
 
 			// press trigger to hide dropdown