@dexteel/mesf-core 4.13.5 → 4.14.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [4.14.0](https://github.com/dexteel/mesf-core-frontend/compare/v4.13.5...v4.14.0) (2024-07-02)
+
+
+### Features
+
+* **TreePickerControl:** Add ability to display asset/drawings relationship and enable the selection of multiple nodes ([1cec643](https://github.com/dexteel/mesf-core-frontend/commit/1cec643d17959cd776691c927738dbe2d8023b83))
+
 ### [4.13.5](https://github.com/dexteel/mesf-core-frontend/compare/v4.12.4...v4.13.5) (2024-05-24)
 
 ## [4.13.0](https://github.com/dexteel/mesf-core-frontend/compare/v4.12.4...v4.13.0) (2024-05-24)

package/dist/controls/filters/dialogFilter.d.ts

@@ -1,12 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
-declare const ModalTreeFilterControl: {
-    (props: any): React.JSX.Element;
-    propTypes: {
-        onClose: PropTypes.Validator<(...args: any[]) => any>;
-        open: PropTypes.Validator<boolean>;
-        title: PropTypes.Validator<string>;
-        data: PropTypes.Validator<object>;
-    };
-};
+declare const ModalTreeFilterControl: (props: any) => React.JSX.Element;
 export { ModalTreeFilterControl };

package/dist/controls/filters/filters.d.ts

@@ -1,6 +1,9 @@
 import React, { Component } from "react";
 type TreePickerControlProps = {
-    onSelect: (value: string, description: string, findNode: any, showPath?: boolean) => void;
+    onSelect: (value: string, description: string, findNode: any, showPath?: boolean, listAssetDrawings?: number[], multipleSelectNodes?: boolean, onHide?: (showAssetTree?: boolean) => void, showAssetTree?: boolean) => void;
+    isLoading?: boolean;
+    setListAssetDrawings?: Function;
+    onSuccess?: (success: boolean) => void;
     [key: string]: any;
 };
 export declare const TreePickerControl: (props: TreePickerControlProps) => React.JSX.Element;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Divider, IconButton as IconButton$1, Box, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { Typography, Checkbox, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Divider, IconButton as IconButton$1, Box, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
 import { values, get, isNil as isNil$1, isEmpty, round, isNaN, isNumber } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
@@ -276,6 +276,20 @@ BarChartControl.propTypes = {
     keys: PropTypes.array
 };
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css$2 = ".lds-ring {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 5px solid rgb(63,81,181);\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: rgb(63,81,181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+n(css$2,{});
+
+var LazyLoading = function () {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "lds-ring" },
+            React__default.createElement("div", null),
+            React__default.createElement("div", null),
+            React__default.createElement("div", null),
+            React__default.createElement("div", null))));
+};
+
 /**********************MATERIAL UI STYLES********************** */
 /*************************************************************** */
 function MinusSquare(props) {
@@ -313,13 +327,17 @@ var StyledTreeItem = withStyles(function (theme) { return ({
         marginLeft: 7,
         paddingLeft: 18,
         borderLeft: "1px dashed ".concat(alpha(theme.palette.text.primary, 0.4))
+    },
+    label: {
+        backgroundColor: function (props) {
+            return props.isChecked ? "lightblue !important" : "inherit";
+        }
     }
 }); })(function (props) { return (React__default.createElement(TreeItem, __assign({}, props, { TransitionComponent: TransitionComponent }))); });
 var useTreviewStyle = makeStyles(function (theme) { return ({
     root: {
         "min-height": 264,
-        flexGrow: 1,
-        maxWidth: 400
+        flexGrow: 1
     },
     treLabelIcon: {
         marginRight: theme.spacing(1)
@@ -336,13 +354,17 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
     treeLabelInactive: {
         textDecoration: "line-through",
         textDecorationColor: "red"
+    },
+    smallCheckbox: {
+        transform: 'scale(0.8)'
     }
 }); });
 var ModalTreeFilterControl = function (props) {
-    var onClose = props.onClose, valueProp = props.value, open = props.open, title = props.title, data = props.data, selectBranch = props.selectBranch, selectActive = props.selectActive, selectInternal = props.selectInternal, other = __rest(props, ["onClose", "value", "open", "title", "data", "selectBranch", "selectActive", "selectInternal"]);
+    var onClose = props.onClose, valueProp = props.value, open = props.open, title = props.title, data = props.data, selectBranch = props.selectBranch, selectActive = props.selectActive, selectInternal = props.selectInternal, multipleSelectNodes = props.multipleSelectNodes, onHide = props.onHide, listAssetDrawings = props.listAssetDrawings, setListAssetDrawings = props.setListAssetDrawings, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onClose", "value", "open", "title", "data", "selectBranch", "selectActive", "selectInternal", "multipleSelectNodes", "onHide", "listAssetDrawings", "setListAssetDrawings", "onSuccess", "isLoading"]);
     var _a = useState(valueProp), value = _a[0], setValue = _a[1];
     var _b = useState([]), expanded = _b[0], setExpanded = _b[1];
     var treeRef = useRef(null);
+    var _c = useState([]), selectedNodes = _c[0], setSelectedNodes = _c[1];
     useEffect(function () {
         if (!open) {
             setValue(valueProp);
@@ -359,6 +381,7 @@ var ModalTreeFilterControl = function (props) {
     };
     var handleCancel = function () {
         onClose();
+        onHide(false);
     };
     var handleOk = function () {
         var findNode = getNodeData(data, parseInt(value));
@@ -368,12 +391,16 @@ var ModalTreeFilterControl = function (props) {
         var internalFilter = (selectInternal && findNode.isInternal) || selectInternal !== true;
         var branchFilter = selectBranch && !findNode.isLeaf;
         if (findNode.isLeaf) {
-            if (activeFilter && internalFilter)
+            if (activeFilter && internalFilter) {
                 onClose(value, findNode.name, findNode);
+                onSuccess(true);
+            }
         }
         else {
-            if (branchFilter)
+            if (branchFilter) {
                 onClose(value, findNode.name, findNode);
+                onSuccess(true);
+            }
         }
     };
     var handleKeyDown = function (event) {
@@ -381,6 +408,9 @@ var ModalTreeFilterControl = function (props) {
             onClose();
         }
     };
+    var handleCheckboxClick = function (event) {
+        event.stopPropagation();
+    };
     var getNodeParent = function (node, id, chain) {
         if (chain === void 0) { chain = []; }
         if (!node || node.id === undefined) {
@@ -428,9 +458,32 @@ var ModalTreeFilterControl = function (props) {
         return null;
     };
     var classes = useTreviewStyle();
+    var handleCheckboxChange = function (node) {
+        if (node) {
+            var isSelected = selectedNodes.includes(node.id);
+            var updatedSelectedNodes = void 0;
+            if (isSelected) {
+                updatedSelectedNodes = selectedNodes.filter(function (id) { return id !== node.id; });
+            }
+            else {
+                updatedSelectedNodes = __spreadArray(__spreadArray([], selectedNodes, true), [node.id], false);
+            }
+            setSelectedNodes(updatedSelectedNodes);
+        }
+    };
+    useEffect(function () {
+        if ((selectedNodes === null || selectedNodes === void 0 ? void 0 : selectedNodes.length) >= 1 && setListAssetDrawings) {
+            setListAssetDrawings(selectedNodes);
+        }
+    }, [selectedNodes]);
+    useEffect(function () {
+        if ((listAssetDrawings === null || listAssetDrawings === void 0 ? void 0 : listAssetDrawings.length) >= 1) {
+            setSelectedNodes(listAssetDrawings);
+        }
+    }, [listAssetDrawings]);
     var renderTree = function (nodes) { return (
     /* @ts-ignore */
-    React__default.createElement(StyledTreeItem, { key: nodes.id, nodeId: nodes.id.toString(), label: React__default.createElement("div", { className: classes.treeLabelRoot },
+    React__default.createElement(StyledTreeItem, { isChecked: selectedNodes.includes(nodes.id), key: nodes.id, nodeId: nodes.id.toString(), label: React__default.createElement("div", { className: classes.treeLabelRoot },
             nodes.isCode === true && (React__default.createElement(Code, { className: classes.treeLabelIcon, htmlColor: "#1ABC9C" })),
             nodes.isCode === false && (React__default.createElement(FolderIcon, { className: classes.treeLabelIcon, htmlColor: "#F1C40F" })),
             React__default.createElement(Typography, { variant: "body2", className: [
@@ -439,22 +492,24 @@ var ModalTreeFilterControl = function (props) {
                 ].join(" ") },
                 React__default.createElement("span", null,
                     nodes.isCode && (React__default.createElement("i", { className: "fas fa-square mr-2", style: { color: nodes.delayCategoryColor || "#FFFFFF" } })),
-                    nodes.name))), className: "delay-item-node", id: nodes.id, "data-isbranch": !nodes.isCode }, Array.isArray(nodes.children)
+                    nodes.name)),
+            multipleSelectNodes &&
+                React__default.createElement(Checkbox, { className: classes.smallCheckbox, size: "small", color: "primary", checked: selectedNodes.includes(nodes.id), onChange: function () {
+                        handleCheckboxChange(nodes);
+                    }, onClick: handleCheckboxClick })), className: "delay-item-node", id: nodes.id, "data-isbranch": !nodes.isCode }, Array.isArray(nodes.children)
         ? nodes.children.map(function (node) { return renderTree(node); })
         : null)); };
-    return (React__default.createElement(Dialog, __assign({ onClose: function (event, reason) { return null; }, "aria-label": title, maxWidth: "xs", TransitionProps: { onEntering: handleEntering }, "aria-labelledby": "confirmation-dialog-title", open: open }, other, { onKeyDown: handleKeyDown }),
+    return (React__default.createElement(Dialog, __assign({ onClose: function (event, reason) { return onHide(false); }, "aria-label": title, maxWidth: "sm", TransitionProps: { onEntering: handleEntering }, "aria-labelledby": "confirmation-dialog-title", open: open }, other, { onKeyDown: handleKeyDown }),
         React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, title),
-        React__default.createElement(DialogContent$1, { dividers: true },
-            React__default.createElement(TreeView, { className: classes.root, defaultCollapseIcon: React__default.createElement(MinusSquare, null), defaultExpandIcon: React__default.createElement(PlusSquare, null), ref: treeRef, selected: value === undefined ? "" : value.toString(), expanded: expanded, onNodeSelect: handleChange, onNodeToggle: handleToogle }, data && data.id !== undefined && renderTree(data))),
+        isLoading
+            ?
+                React__default.createElement("div", { style: { width: 600, minHeight: 416, display: "flex", justifyContent: "center", alignItems: "center" } },
+                    React__default.createElement(LazyLoading, null))
+            : (React__default.createElement(DialogContent$1, { dividers: true },
+                React__default.createElement(TreeView, { className: classes.root, defaultCollapseIcon: React__default.createElement(MinusSquare, null), defaultExpandIcon: React__default.createElement(PlusSquare, null), ref: treeRef, selected: value === undefined ? "" : value.toString(), expanded: expanded, onNodeSelect: handleChange, onNodeToggle: handleToogle }, data && data.id !== undefined && renderTree(data)))),
         React__default.createElement(DialogActions$1, null,
             React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
             React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "Ok"))));
-};
-ModalTreeFilterControl.propTypes = {
-    onClose: PropTypes.func.isRequired,
-    open: PropTypes.bool.isRequired,
-    title: PropTypes.string.isRequired,
-    data: PropTypes.object.isRequired
 };
 
 var useStyles$t = makeStyles(function (theme) { return ({
@@ -469,14 +524,13 @@ var useStyles$t = makeStyles(function (theme) { return ({
     },
     paper: {
         width: "100%",
-        maxWidth: 600,
         maxHeight: 600
     }
 }); });
 var TreePickerControl = function (props) {
     var classes = useStyles$t();
-    var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath"]);
-    var _c = React__default.useState(false), open = _c[0], setOpen = _c[1];
+    var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, showAssetTree = props.showAssetTree, onHide = props.onHide, _d = props.listAssetDrawings, listAssetDrawings = _d === void 0 ? [] : _d, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading"]);
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
     var handleClickListItem = function (e) {
         e.stopPropagation();
         setOpen(true);
@@ -484,8 +538,9 @@ var TreePickerControl = function (props) {
     var handleClose = function (newValue, newDescription, findNode) {
         setOpen(false);
         if (newValue) {
-            if (onSelect !== undefined)
+            if (onSelect !== undefined) {
                 onSelect(newValue, newDescription, findNode);
+            }
         }
     };
     var formatDescription = function (description) {
@@ -518,27 +573,35 @@ var TreePickerControl = function (props) {
         }
     };
     var description = useMemo(function () { return formatDescription(props.description); }, [props.description]);
+    useEffect(function () {
+        if (showAssetTree) {
+            setOpen(showAssetTree);
+        }
+    }, []);
     return (React__default.createElement(Grid, { container: true, className: classes.root },
-        React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" }, title: props.description },
-            React__default.createElement(Grid, { item: true, style: { position: "relative", width: "100%" } },
-                React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle, variant: "outlined", value: description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true }),
-                React__default.createElement(AccountTreeIcon, { style: {
+        !showAssetTree ?
+            React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" }, title: props.description },
+                React__default.createElement(Grid, { item: true, style: { position: "relative", width: "100%" } },
+                    React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle, variant: "outlined", value: description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true }),
+                    React__default.createElement(AccountTreeIcon, { style: {
+                            position: "absolute",
+                            right: 15,
+                            top: 16,
+                            cursor: "pointer"
+                        } })),
+                React__default.createElement("div", { style: {
                         position: "absolute",
-                        right: 15,
-                        top: 16,
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
                         cursor: "pointer"
-                    } })),
-            React__default.createElement("div", { style: {
-                    position: "absolute",
-                    top: 0,
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    cursor: "pointer"
-                }, onClick: handleClickListItem })),
-        React__default.createElement(ModalTreeFilterControl, __assign({ classes: {
-                paper: classes.paper
-            }, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); } }, other))));
+                    }, onClick: handleClickListItem }))
+            : React__default.createElement("div", null),
+        React__default.createElement(Grid, { item: true, xs: 12, md: 12 },
+            React__default.createElement(ModalTreeFilterControl, __assign({ classes: {
+                    paper: classes.paper
+                }, onHide: onHide, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, isLoading: isLoading, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); }, multipleSelectNodes: multipleSelectNodes, listAssetDrawings: listAssetDrawings, setListAssetDrawings: listAssetDrawings, onSuccess: onSuccess }, other)))));
 };
 var SimpleTextControl = /** @class */ (function (_super) {
     __extends(SimpleTextControl, _super);
@@ -1052,20 +1115,6 @@ var Alert = function (props) {
     return React__default.createElement(Alert$2, __assign({ elevation: 6, variant: "filled" }, props));
 };
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css$2 = ".lds-ring {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 5px solid rgb(63,81,181);\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: rgb(63,81,181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
-n(css$2,{});
-
-var LazyLoading = function () {
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "lds-ring" },
-            React__default.createElement("div", null),
-            React__default.createElement("div", null),
-            React__default.createElement("div", null),
-            React__default.createElement("div", null))));
-};
-
 var useStyles$s = makeStyles$1(function (theme) { return ({
     buttons: {
         opacity: 0,