@onehat/ui 0.3.375 → 0.3.379

package/package.json

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

package/src/Components/Hoc/withFilters.js

@@ -542,12 +542,8 @@ export default function withFilters(WrappedComponent) {
 								newSlots = _.clone(modalSlots),
 								i = searchAllText ? ixPlusOne : ix; // compensate for 'q' filter's possible presence
 
-							if (newFilters[i]?.value) {
-								newFilters[i].value = value;
-							} else {
-								newFilters[i] = getFormattedFilter(value);
-							}
-							newSlots[ix] = value;
+							newFilters[i] = getFormattedFilter(value);
+							newSlots[i] = value;
 							
 							setModalFilters(newFilters);
 							setModalSlots(newSlots);

package/src/Components/Report/Report.js

@@ -10,21 +10,19 @@ import {
 	UI_MODE_WEB,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
+import {
+	REPORT_TYPES__EXCEL,
+	REPORT_TYPES__PDF,
+} from '../../Constants/ReportTypes.js';
 import Form from '../Form/Form.js';
 import withComponent from '../Hoc/withComponent.js';
 import testProps from '../../Functions/testProps.js';
 import ChartLine from '../Icons/ChartLine.js';
 import Pdf from '../Icons/Pdf.js';
 import Excel from '../Icons/Excel.js';
-import UiGlobals from '../../UiGlobals.js';
-import downloadInBackground from '../../Functions/downloadInBackground.js';
-import downloadWithFetch from '../../Functions/downloadWithFetch.js';
+import getReport from '../../Functions/getReport.js';
 import _ from 'lodash';
 
-const
-	PDF = 'PDF',
-	EXCEL = 'PhpOffice';
-
 function Report(props) {
 	if (CURRENT_MODE !== UI_MODE_WEB) {
 		return <Text>Reports are web only!</Text>;
@@ -40,30 +38,7 @@ function Report(props) {
 			showReportHeaders = true,
 			h = '300px',
 		} = props,
-		url = UiGlobals.baseURL + 'Reports/getReport',
-		buttons = [],
-		getReport = (reportType, data) => {
-			const params = {
-					report_id: reportId,
-					outputFileType: reportType,
-					showReportHeaders,
-					// download_token, // not sure this is needed
-					...data,
-				};
-
-			if (reportType === EXCEL) {
-				downloadInBackground(url, params);
-			} else {
-				const options = {
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify(params),
-				};
-				downloadWithFetch(url, options);
-			}
-		};
+		buttons = [];
 
 	const propsIcon = props._icon || {};
 	propsIcon.size = 60;
@@ -86,7 +61,12 @@ function Report(props) {
 			key: 'excelBtn',
 			text: 'Download Excel',
 			leftIcon: <Icon as={Excel} size="md" color="#fff" />,
-			onPress: (data) => getReport(EXCEL, data),
+			onPress: (data) => getReport({
+				reportId,
+				data,
+				reportType: REPORT_TYPES__EXCEL,
+				showReportHeaders,
+			}),
 			ml: 1,
 		});
 	}
@@ -96,7 +76,12 @@ function Report(props) {
 			key: 'pdfBtn',
 			text: 'Download PDF',
 			leftIcon: <Icon as={Pdf} size="md" color="#fff" />,
-			onPress: (data) => getReport(PDF, data),
+			onPress: (data) => getReport({
+				reportId,
+				data,
+				reportType: REPORT_TYPES__PDF,
+				showReportHeaders,
+			}),
 			ml: 1,
 		});
 	}

package/src/Components/Tree/Tree.js

@@ -50,6 +50,7 @@ import Input from '../Form/Field/Input.js';
 import Xmark from '../Icons/Xmark.js';
 import Dot from '../Icons/Dot.js';
 import Collapse from '../Icons/Collapse.js';
+import Expand from '../Icons/Expand.js';
 import FolderClosed from '../Icons/FolderClosed.js';
 import FolderOpen from '../Icons/FolderOpen.js';
 import MagnifyingGlass from '../Icons/MagnifyingGlass.js';
@@ -354,16 +355,17 @@ function TreeComponent(props) {
 
 			buildRowToDatumMap();
 		},
-		onCollapseAll = (setNewTreeNodeData = true) => {
-			// Go through whole tree and collapse all nodes
+		onCollapseAll = () => {
 			const newTreeNodeData = _.clone(getTreeNodeData());
 			collapseNodes(newTreeNodeData);
-
-			if (setNewTreeNodeData) {
+			setTreeNodeData(newTreeNodeData);
+		},
+		onExpandAll = () => {
+			confirm('Are you sure you want to expand the whole tree? This may take a while.', async () => {
+				const newTreeNodeData = _.clone(getTreeNodeData());
+				await expandNodes(newTreeNodeData);
 				setTreeNodeData(newTreeNodeData);
-			}
-			buildRowToDatumMap();
-			return newTreeNodeData;
+			});
 		},
 		onSearchTree = async (q) => {
 			let found = [];
@@ -655,6 +657,10 @@ function TreeComponent(props) {
 			
 			try {
 
+				if (depth === 'all') {
+					depth = 9999;
+				}
+
 				const children = await datum.item.loadChildren(depth);
 				datum.children = buildTreeNodeData(children);
 				datum.isExpanded = true;
@@ -685,6 +691,25 @@ function TreeComponent(props) {
 				}
 			});
 		},
+		expandNodes = async (nodes) => {
+			await expandNodesRecursive(nodes);
+			buildRowToDatumMap();
+		},
+		expandNodesRecursive = async (nodes) => {
+			// TODO: instead of doing everything sequentially,
+			// load the tree in parallel, using aync functions
+			// Every time a node loads, it should update the tree.
+			
+			for (const node of nodes) {
+				if (node.item.hasChildren && !node.item.areChildrenLoaded) {
+					await loadChildren(node, 'all');
+				}
+				node.isExpanded = true;
+				if (!_.isEmpty(node.children)) {
+					await expandNodesRecursive(node.children);
+				}
+			}
+		},
 		expandPath = async (cPath, highlight = true) => {
 			// First, close the whole tree.
 			let newTreeNodeData = _.clone(getTreeNodeData());
@@ -789,12 +814,19 @@ function TreeComponent(props) {
 						isDisabled: !treeSearchValue.length,
 					},
 					{
-						key: 'collapseBtn',
+						key: 'collapseAllBtn',
 						text: 'Collapse whole tree',
 						handler: onCollapseAll,
 						icon: Collapse,
 						isDisabled: false,
 					},
+					{
+						key: 'expandAllBtn',
+						text: 'Expand whole tree',
+						handler: onExpandAll,
+						icon: Expand,
+						isDisabled: false,
+					},
 				];
 			if (canNodesReorder) {
 				buttons.push({

package/src/Constants/ReportTypes.js

@@ -0,0 +1,2 @@
+export const REPORT_TYPES__EXCEL = 'PhpOffice';
+export const REPORT_TYPES__PDF = 'PDF';

package/src/Functions/getReport.js

@@ -0,0 +1,42 @@
+import {
+	REPORT_TYPES__EXCEL,
+	REPORT_TYPES__PDF,
+} from '../Constants/ReportTypes.js';
+import downloadInBackground from './downloadInBackground.js';
+import downloadWithFetch from './downloadWithFetch.js';
+import UiGlobals from '../UiGlobals.js';
+
+export default function getReport(args) {
+	const {
+			reportId,
+			data = {},
+			reportType = REPORT_TYPES__EXCEL,
+			showReportHeaders = true,
+		} = args;
+
+	if (!reportId) {
+		throw Error('downloadReport: report_id is required');
+	}
+
+	const
+		url = UiGlobals.baseURL + 'Reports/getReport',
+		params = {
+			report_id: reportId,
+			outputFileType: reportType,
+			showReportHeaders,
+			...data,
+		};
+
+	if (reportType === REPORT_TYPES__EXCEL) {
+		downloadInBackground(url, params);
+	} else {
+		const options = {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify(params),
+		};
+		downloadWithFetch(url, options);
+	}
+};