@dexteel/mesf-core 4.25.2 → 4.26.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "4.25.2"
+  ".": "4.26.1"
 }

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# Changelog
+
+## [4.26.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.26.0...@dexteel/mesf-core-v4.26.1) (2025-03-06)
+
+
+### Bug Fixes
+
+* **Shift Period Navigator:** Use cssGrid instead of Flexbox to improve responsiveness ([f90e120](https://github.com/dexteel/mesf-core-frontend/commit/f90e120c140e15209c976963ae62aa56636fa789))
+* **Shift Period Navigator:** Use cssGrid instead of Flexbox to improve responsiveness ([b645194](https://github.com/dexteel/mesf-core-frontend/commit/b6451942fddeb3f25d4dc01bf48224a3c6ee5c22))
+
+## [4.26.0] - 2025-03-05
+
+
+
+# Changelog
+
+## [4.26.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.25.2...@dexteel/mesf-core-v4.26.0) (2025-03-05)
+
+
+### Features
+
+* **API Service:** Show method and params in URL ([13b3529](https://github.com/dexteel/mesf-core-frontend/commit/13b3529fa6fa82533c2ae4b34469c115422492e3))
+* **settings:** Add SearchBar as quick filter ([8660d62](https://github.com/dexteel/mesf-core-frontend/commit/8660d62fd51b60a3ecf901b167649e74a1905ac5))
+
+## [4.25.2] - 2025-02-11
+
+
+
 # Changelog
 
 ## [4.25.2](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.25.1...@dexteel/mesf-core-v4.25.2) (2025-02-11)

package/dist/index.esm.js

@@ -27,6 +27,7 @@ export * from '@microsoft/signalr';
 import { Alert as Alert$3, Autocomplete } from '@material-ui/lab';
 import { useForm, Controller } from 'react-hook-form';
 import 'ag-grid-community/styles/ag-theme-material.min.css';
+import SearchIcon from '@material-ui/icons/Search';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
 import axios from 'axios';
@@ -7556,7 +7557,7 @@ var MESApiService = /** @class */ (function () {
     MESApiService.prototype.callV2 = function (procedure, parameters, database) {
         if (database === void 0) { database = ""; }
         return __awaiter(this, void 0, void 0, function () {
-            var data, formattedParameters, response, err_1;
+            var data, formattedParameters, curatedMethod, response, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -7577,10 +7578,18 @@ var MESApiService = /** @class */ (function () {
                         Date.prototype.toJSON = function () {
                             return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
                         }; // eslint-disable-line
+                        curatedMethod = procedure.replace(/[\[\]]/g, "");
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, axiosInstance.post(this.config.API_PROCEDURE_URL + "/Execute", data)];
+                        return [4 /*yield*/, axiosInstance.post("/action/".concat(curatedMethod), data, {
+                                params: data.parameters.map(function (param) {
+                                    var _a;
+                                    return (_a = {},
+                                        _a[param.name.replace("@", "")] = param.value,
+                                        _a);
+                                })
+                            })];
                     case 2:
                         response = _a.sent();
                         return [2 /*return*/, { ok: true, data: response.data }];
@@ -8328,43 +8337,42 @@ var getShiftsRangeByParameters = function (period, Start, End, StartShiftId, End
     });
 };
 
-var useStyles$7 = makeStyles(function (theme) {
-    var _a, _b, _c;
-    return ({
-        container: {
-            display: "flex",
-            alignItems: "center",
-            width: "100%",
-            margin: 0,
-            padding: "8px 0",
-            gap: "8px",
-            flexWrap: "wrap"
+var useStyles$7 = makeStyles(function (theme) { return ({
+    container: {
+        display: "grid",
+        gridTemplateColumns: "auto minmax(100px, 1fr) 80px minmax(100px, 1fr) auto auto",
+        alignItems: "center",
+        width: "100%",
+        margin: 0,
+        padding: "8px 0",
+        gap: "8px"
+    },
+    gridItem: {
+        display: "flex",
+        alignItems: "center"
+    },
+    datePickerWrapper: {
+        minWidth: "100px",
+        fontSize: ".8rem!important",
+        margin: "0!important",
+        "& .MuiInputAdornment-root": {
+            margin: "0!important"
         },
-        gridItem: (_a = {
-                display: "flex",
-                alignItems: "center"
-            },
-            _a[theme.breakpoints.down("sm")] = {
-                width: "100%"
-            },
-            _a),
-        datePickerWrapper: (_b = {
-                flex: 1,
-                minWidth: "150px"
-            },
-            _b[theme.breakpoints.down("sm")] = {
-                minWidth: "100%"
-            },
-            _b),
-        selectWrapper: (_c = {
-                width: "120px"
-            },
-            _c[theme.breakpoints.down("sm")] = {
-                width: "100%"
-            },
-            _c)
-    });
-});
+        "& .MuiInputBase-input": {
+            fontSize: "1rem!important",
+            padding: "4px 8px !important"
+        }
+    },
+    selectWrapper: {
+        width: "80px",
+        "& .MuiInputBase-input": {
+            fontSize: "0.8rem !important",
+            padding: "4px 8px !important",
+            display: "inline-flex",
+            alignItems: "center"
+        }
+    }
+}); });
 var DEFAULT_PERIOD_OPTIONS = [
     { value: "Shift", label: "Shift" },
     { value: "Day", label: "Day" },
@@ -8552,7 +8560,7 @@ var ShiftPeriodNavigatorControl = function (_a) {
             React__default.createElement(DatePicker$1, { label: "Start", format: dateFormat, value: moment((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
                     return handleDateChange(value ? moment(value) : null, "start");
                 }, disabled: loadingShiftPeriodList, slots: {
-                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { height: "50px", paddingTop: "2px" } }) }))); },
+                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { paddingTop: "2px" } }) }))); },
                     openPickerIcon: function () { return (React__default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
@@ -8564,23 +8572,23 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 } })),
         React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.selectWrapper) },
             React__default.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true },
-                React__default.createElement(Select, { value: period, onChange: handleChangeScope, disabled: loadingShiftPeriodList, style: {
-                        height: "50px",
-                        width: "100%",
-                        paddingBottom: 0
+                React__default.createElement(InputLabel, { id: "period-select-label" }, "Period"),
+                React__default.createElement(Select, { value: period, onChange: handleChangeScope, disabled: loadingShiftPeriodList, label: "Period", labelId: "period-select-label", style: {
+                        width: "100%"
                     } }, periodOptions.map(function (option) { return (React__default.createElement(MenuItem, { key: option.value, value: option.value }, option.label)); })))),
         React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.datePickerWrapper) },
             React__default.createElement(DatePicker$1, { label: "End", format: dateFormat, value: moment((endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
                     return handleDateChange(value ? moment(value) : null, "end");
                 }, disabled: loadingShiftPeriodList, slots: {
-                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { height: "50px", paddingTop: "2px" } }) }))); },
+                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { paddingTop: "2px" } }) }))); },
                     openPickerIcon: function () { return (React__default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
+                            margin: "0 !important",
                             width: "100%"
                         } },
                         renderShiftCrewInfo(endShift),
-                        React__default.createElement(IconButton$1, { style: { padding: "4px", flexShrink: 0 } },
+                        React__default.createElement(IconButton$1, { style: { padding: "0px", flexShrink: 0 } },
                             React__default.createElement(CalendarIcon, null)))); }
                 } })),
         React__default.createElement("div", { className: classes.gridItem },
@@ -10460,24 +10468,26 @@ var EditSetting = function (_a) {
 };
 
 var TableSettings = function (_a) {
-    var getSettingsFromAPI = _a.getSettingsFromAPI; _a.isLoading; var rows = _a.rows;
+    var getSettingsFromAPI = _a.getSettingsFromAPI, isLoading = _a.isLoading, rows = _a.rows;
     var _b = useContextMenuMESF(), showContextMenu = _b.showContextMenu, registerConfig = _b.registerConfig;
-    var _c = useSettingsContext(); _c.state; var actions = _c.actions;
+    var _c = useSettingsContext(); _c.state; var setSettingSelected = _c.actions.setSettingSelected;
     var classes = useStyles$3();
-    var _d = useState(false), openModalNew = _d[0], setOpenModalNew = _d[1];
-    var _e = useState(false), openModalEditSetting = _e[0], setOpenModalEditSetting = _e[1];
-    var _f = useState(false), openModalDeleteSetting = _f[0], setOpenModalDeleteSetting = _f[1];
+    var _d = useState(null), gridApi = _d[0], setGridApi = _d[1];
+    var _e = useState(""), filterValue = _e[0], setFilterValue = _e[1];
+    var _f = useState(false), openModalNew = _f[0], setOpenModalNew = _f[1];
+    var _g = useState(false), openModalEditSetting = _g[0], setOpenModalEditSetting = _g[1];
+    var _h = useState(false), openModalDeleteSetting = _h[0], setOpenModalDeleteSetting = _h[1];
     var getMenuOptions = useSettingsOptionsFunctions({
-        setSettingId: actions.setSettingSelected,
+        setSettingId: setSettingSelected,
         setShowDeleteModal: setOpenModalDeleteSetting,
         setShowCreateModal: setOpenModalNew,
         setShowEditModal: setOpenModalEditSetting
     }).getMenuOptions;
-    var _g = useTableData({
+    var _j = useTableData({
         setOpenModalEditSetting: setOpenModalEditSetting,
         setOpenModalDeleteSetting: setOpenModalDeleteSetting,
         showContextMenu: showContextMenu
-    }), columnDefs = _g.columnDefs, defaultColDef = _g.defaultColDef;
+    }), columnDefs = _j.columnDefs, defaultColDef = _j.defaultColDef;
     var loadingOverlayComponent = useMemo(function () {
         return (React__default.createElement("div", { style: {
                 width: "100%",
@@ -10502,10 +10512,27 @@ var TableSettings = function (_a) {
             getOptions: getMenuOptions
         });
     }, []);
+    useEffect(function () {
+        if (isLoading) {
+            gridApi === null || gridApi === void 0 ? void 0 : gridApi.showLoadingOverlay();
+        }
+        else {
+            gridApi === null || gridApi === void 0 ? void 0 : gridApi.hideOverlay();
+        }
+    }, [isLoading, gridApi]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
             React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
                 React__default.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Settings")),
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: "10px 20px" } },
+                React__default.createElement(TextField, { fullWidth: true, label: "Search", variant: "outlined", size: "small", margin: "dense", value: filterValue, onChange: function (event) {
+                        setFilterValue(event.target.value);
+                        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setQuickFilter(event.target.value);
+                    }, InputProps: {
+                        startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
+                            React__default.createElement(IconButton$1, { edge: "start", type: "submit" },
+                                React__default.createElement(SearchIcon, null))))
+                    } })),
             React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
                 React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.relative },
                     React__default.createElement(CreateSetting, { show: openModalNew, onHide: function (shouldUpdate) {
@@ -10532,9 +10559,9 @@ var TableSettings = function (_a) {
                         } },
                         React__default.createElement("div", { style: { height: "100%", width: "100%" }, className: "ag-theme-alpine" },
                             React__default.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: loadingOverlayComponent, getContextMenuItems: function (e) { return getContextMenuItems(e); }, pagination: true, rowSelection: "single", onRowDoubleClicked: function (event) {
-                                    actions.setSettingSelected(event.data);
+                                    setSettingSelected(event.data);
                                     setOpenModalEditSetting(true);
-                                } }))),
+                                }, onGridReady: function (params) { return setGridApi(params.api); } }))),
                     React__default.createElement(Grid, { container: true, justifyContent: "flex-end" },
                         React__default.createElement(Grid, { item: true, md: 2, xs: 12, style: {
                                 display: "flex",