@dexteel/mesf-core 4.18.1 → 4.19.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "4.18.1"
+  ".": "4.19.0"
 }

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# Changelog
+
+## [4.19.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.18.1...@dexteel/mesf-core-v4.19.0) (2024-08-12)
+
+
+### Features
+
+* **TreePickerControlV2:** Implement TreePickerControl with value-OnSelect paradigm. ([8f488a3](https://github.com/dexteel/mesf-core-frontend/commit/8f488a3be4ec8e7edcc8f6b0e8fd11610fd57513))
+
+## [4.18.1] - 2024-08-01
+
+
+
 # Changelog
 
 ## [4.18.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.18.0...@dexteel/mesf-core-v4.18.1) (2024-08-01)

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

@@ -0,0 +1,11 @@
+import React from "react";
+type TreePickerControlProps = {
+    onSelect: (value: number, 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;
+    showClearButton?: boolean;
+    [key: string]: any;
+};
+export declare const TreePickerControl: (props: TreePickerControlProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { TreeNode } from "./dialogFilter";
+type TreePickerControlProps = {
+    onSelect: (value: number, 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;
+    showClearButton?: boolean;
+    dataSource: TreeNode;
+    [key: string]: any;
+};
+export declare const TreePickerControlV2: (props: TreePickerControlProps) => React.JSX.Element;
+export {};

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

@@ -1,5 +1,5 @@
 import React from "react";
-interface TreeNode {
+export interface TreeNode {
     id: number;
     name: string;
     isCode: boolean;

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

@@ -1,12 +1,4 @@
 import React, { Component } from "react";
-type TreePickerControlProps = {
-    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;
 export declare class SimpleTextControl extends Component<any> {
     render(): React.JSX.Element;
 }
@@ -45,4 +37,5 @@ export declare function SimpleSelectorControl({ title, dataSource, selectedValue
 export declare const MultipleSelectorControl: (props: any) => React.JSX.Element;
 export declare const CheckBoxControl: (props: any) => React.JSX.Element;
 export declare const UploadFileControl: (props: any) => React.JSX.Element;
-export {};
+export * from "./TreePickerControl";
+export * from "./TreePickerControlV2";

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid, Button, withStyles as withStyles$1, alpha, makeStyles, Dialog as Dialog$1, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, MenuItem, Select, Card, CardContent, CardActions, Snackbar, CircularProgress, Paper, InputLabel, FormHelperText, DialogContentText, FormControlLabel, Badge, useTheme, FormControl, Input, Chip, Tooltip, IconButton as IconButton$1, ListItemIcon, MenuList, Divider, Box, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid, Button, withStyles as withStyles$1, alpha, makeStyles, Dialog as Dialog$1, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Select, Card, CardContent, CardActions, Snackbar, CircularProgress, Paper, InputLabel, FormHelperText, DialogContentText, FormControlLabel, Badge, useTheme, FormControl, Input, Chip, Tooltip, ListItemIcon, MenuList, Divider, Box, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
 import { get, isNil as isNil$1, isEmpty, values, 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';
@@ -32,7 +32,7 @@ import InsertChartIcon from '@material-ui/icons/InsertChart';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { Line } from 'react-chartjs-2';
-import { LocalizationProvider } from '@mui/x-date-pickers';
+import { ClearIcon, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import moment$3 from 'moment-timezone';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
@@ -446,11 +446,6 @@ var ModalTreeFilterControl = function (props) {
         }
         return branches;
     };
-    var handleEntering = function () {
-        if (treeRef.current != null) {
-            treeRef.current.focus();
-        }
-    };
     var handleCancel = function () {
         onClose();
         if (onHide)
@@ -562,7 +557,7 @@ var ModalTreeFilterControl = function (props) {
                 }, onClick: handleCheckboxClick }))), className: "delay-item-node", id: nodes.id.toString(), "data-isbranch": !nodes.isCode }, Array.isArray(nodes.children)
         ? nodes.children.map(function (node) { return renderTree(node); })
         : null)); };
-    return (React__default.createElement(Dialog$1, __assign({ onClose: onHide ? function () { return onHide(false); } : function () { return null; }, "aria-label": title, maxWidth: "sm", TransitionProps: { onEntering: handleEntering }, "aria-labelledby": "confirmation-dialog-title", open: open }, other, { onKeyDown: handleKeyDown }),
+    return (React__default.createElement(Dialog$1, __assign({ onClose: onHide ? function () { return onHide(false); } : function () { return null; }, "aria-label": title, maxWidth: "sm", disableAutoFocus: true, disableEnforceFocus: true, disableRestoreFocus: true, "aria-labelledby": "confirmation-dialog-title", open: open }, other, { onKeyDown: handleKeyDown }),
         React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, title),
         isLoading ? (React__default.createElement("div", { style: {
                 width: 600,
@@ -572,13 +567,13 @@ var ModalTreeFilterControl = function (props) {
                 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(TreeView, { autoFocus: false, 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: handleCancel, color: "primary" }, "Cancel"),
             React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "OK"))));
 };
 
-var useStyles$u = makeStyles(function (theme) { return ({
+var useStyles$v = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper,
@@ -594,9 +589,9 @@ var useStyles$u = makeStyles(function (theme) { return ({
     }
 }); });
 var TreePickerControl = function (props) {
-    var classes = useStyles$u();
-    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 classes = useStyles$v();
+    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, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading"]);
+    var _f = useState(false), open = _f[0], setOpen = _f[1];
     var handleClickListItem = function (e) {
         e.stopPropagation();
         setOpen(true);
@@ -641,20 +636,106 @@ 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 },
+        !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, InputProps: {
+                        endAdornment: (React__default.createElement(InputAdornment, { position: "end", style: {
+                                cursor: "pointer"
+                            } },
+                            showClearButton && value ? (React__default.createElement(IconButton$1, { "aria-label": "clear input", onClick: function (e) {
+                                    console.log("onClear -> onSelect");
+                                    e.stopPropagation();
+                                    onSelect(0, "", "");
+                                }, style: {
+                                    cursor: "pointer",
+                                    zIndex: 100
+                                }, edge: "end" },
+                                React__default.createElement(ClearIcon, null))) : null,
+                            React__default.createElement(AccountTreeIcon, { style: {
+                                    cursor: "pointer"
+                                } })))
+                    } })),
+            React__default.createElement("div", { style: {
+                    position: "absolute",
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: 999,
+                    cursor: "pointer"
+                }, 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 useStyles$u = makeStyles(function (theme) { return ({
+    root: {
+        width: "100%",
+        backgroundColor: theme.palette.background.paper,
+        "& .MuiInputBase-input": {
+            color: "black",
+            cursor: "pointer",
+            paddingRight: 45
         }
-    }, []);
+    },
+    paper: {
+        width: "100%",
+        maxHeight: 600
+    }
+}); });
+function findNameById(node, id) {
+    if (node.id === id) {
+        return node.name;
+    }
+    if (node.children) {
+        for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            var result = findNameById(child, id);
+            if (result !== null) {
+                return result;
+            }
+        }
+    }
+    return null;
+}
+var TreePickerControlV2 = function (props) {
+    var classes = useStyles$u();
+    var value = props.value, onSelect = props.onSelect; props.styleLabel; var dataSource = props.dataSource; props.getOptionName; var _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading"]);
+    var _f = useState(false), open = _f[0], setOpen = _f[1];
+    var handleClickListItem = function (event) {
+        event.stopPropagation();
+        setOpen(true);
+    };
+    var handleClose = function (newValue, newDescription, findNode) {
+        setOpen(false);
+        if (newValue) {
+            if (onSelect !== undefined) {
+                onSelect(newValue, newDescription, findNode);
+            }
+        }
+    };
+    var description = useMemo(function () { return findNameById(dataSource, value) || ""; }, [dataSource, value]);
     return (React__default.createElement(Grid, { container: true, className: classes.root },
         !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(TextField, { id: "treePickerTextField", label: inputTitle || "", variant: "outlined", value: description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true, InputProps: {
+                        endAdornment: (React__default.createElement(InputAdornment, { position: "end", style: {
+                                cursor: "pointer"
+                            } },
+                            showClearButton && value ? (React__default.createElement(IconButton$1, { "aria-label": "clear input", onClick: function (e) {
+                                    e.stopPropagation();
+                                    onSelect(0, "", "");
+                                }, style: {
+                                    cursor: "pointer",
+                                    zIndex: 100
+                                }, edge: "end" },
+                                React__default.createElement(ClearIcon, null))) : null,
+                            React__default.createElement(AccountTreeIcon, { style: {
+                                    cursor: "pointer"
+                                } })))
                     } })),
             React__default.createElement("div", { style: {
                     position: "absolute",
@@ -668,7 +749,8 @@ var TreePickerControl = function (props) {
             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);
     function SimpleTextControl() {
@@ -12296,5 +12378,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, ShiftDayNavigatorControl, ShiftNavigatorProvider, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useContextMenuMESF, useShiftNavigator, useShiftNavigatorManager, useStyles$1 as useStyles, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, ShiftDayNavigatorControl, ShiftNavigatorProvider, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useContextMenuMESF, useShiftNavigator, useShiftNavigatorManager, useStyles$1 as useStyles, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map