@dexteel/mesf-core 4.21.0 → 4.22.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "4.21.0"
+  ".": "4.22.1"
 }

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# Changelog
+
+## [4.22.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.22.0...@dexteel/mesf-core-v4.22.1) (2025-01-03)
+
+
+### Bug Fixes
+
+* **ShiftNavigatorV2:** fix date picker ([03caca9](https://github.com/dexteel/mesf-core-frontend/commit/03caca9657ab6e7a0d63c98f93e8f6a49c547e9d))
+* **ShiftNavigatorV2:** minor style change in period selector ([ff847a1](https://github.com/dexteel/mesf-core-frontend/commit/ff847a138d35e03ece52fe018fb49887432b80d1))
+
+## [4.22.0] - 2024-12-30
+
+
+
+# Changelog
+
+## [4.22.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.21.0...@dexteel/mesf-core-v4.22.0) (2024-12-30)
+
+
+### Features
+
+* **ShiftNavigatorV2:** Add configurable properties to enhance component flexibility ([e1d7f45](https://github.com/dexteel/mesf-core-frontend/commit/e1d7f45442aab9c3b9c8ef94fa2ad806eaaef40c))
+
+## [4.21.0] - 2024-12-19
+
+
+
 # Changelog
 
 ## [4.21.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.20.6...@dexteel/mesf-core-v4.21.0) (2024-12-19)

package/dist/context/axiosInstance.d.ts

@@ -1,3 +1,2 @@
-import axios from "axios";
 export declare function renewToken(): Promise<any[]>;
-export declare const axiosInstance: axios.AxiosInstance;
+export declare const axiosInstance: import("axios").AxiosInstance;

package/dist/controls/shift-navigator-v2/component/shift-period-navigator.control.d.ts

@@ -1,8 +1,15 @@
 import React from "react";
 import { SearchShiftsParameters } from "../models/SearchShiftsParameters";
+interface PeriodOption {
+    value: string;
+    label: string;
+}
 type Props = {
     value: SearchShiftsParameters | null;
     onChange: (value: any) => void;
+    showShiftAndCrews?: boolean;
+    dateFormat?: string;
+    periodOptions?: PeriodOption[];
 };
-export declare const ShiftPeriodNavigatorControl: ({ value, onChange }: Props) => React.JSX.Element;
+export declare const ShiftPeriodNavigatorControl: ({ value, onChange, showShiftAndCrews, dateFormat, periodOptions, }: Props) => React.JSX.Element;
 export {};

package/dist/index.esm.js

@@ -54,7 +54,7 @@ import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import Code from '@material-ui/icons/Code';
 import TreeItem from '@material-ui/lab/TreeItem';
 import TreeView from '@material-ui/lab/TreeView';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from '@react-spring/web';
 import { DataGrid, GridOverlay } from '@material-ui/data-grid';
 import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { findIana } from 'windows-iana';
@@ -8238,15 +8238,23 @@ var useStyles$5 = makeStyles(function (theme) {
             _c)
     });
 });
+var DEFAULT_PERIOD_OPTIONS = [
+    { value: "Shift", label: "Shift" },
+    { value: "Day", label: "Day" },
+    { value: "4Days", label: "4 Days" },
+    { value: "Week", label: "Week" },
+    { value: "Month", label: "Month" },
+];
 var moment = getMomentTz();
 var ShiftPeriodNavigatorControl = function (_a) {
-    var value = _a.value, onChange = _a.onChange;
+    var _b;
+    var value = _a.value, onChange = _a.onChange, _c = _a.showShiftAndCrews, showShiftAndCrews = _c === void 0 ? true : _c, _d = _a.dateFormat, dateFormat = _d === void 0 ? "MM/DD/YYYY HH:mm a" : _d, _e = _a.periodOptions, periodOptions = _e === void 0 ? DEFAULT_PERIOD_OPTIONS : _e;
     var classes = useStyles$5();
-    var _b = useState("Shift"), period = _b[0], setPeriod = _b[1];
-    var _c = useState(false), loadingShiftPeriodList = _c[0], setLoadingShiftPeriodList = _c[1];
-    var _d = useState(""); _d[0]; var setError = _d[1];
-    var _e = useState([]), shiftPeriodList = _e[0], setShiftPeriodList = _e[1];
-    var _f = useState(false), isActionInProgress = _f[0], setIsActionInProgress = _f[1];
+    var _f = useState(((_b = periodOptions[0]) === null || _b === void 0 ? void 0 : _b.value) || "Day"), period = _f[0], setPeriod = _f[1];
+    var _g = useState(false), loadingShiftPeriodList = _g[0], setLoadingShiftPeriodList = _g[1];
+    var _h = useState(""); _h[0]; var setError = _h[1];
+    var _j = useState([]), shiftPeriodList = _j[0], setShiftPeriodList = _j[1];
+    var _k = useState(false), isActionInProgress = _k[0], setIsActionInProgress = _k[1];
     var handleArrowNavigation = function (direction) { return __awaiter(void 0, void 0, void 0, function () {
         var error_1;
         return __generator(this, function (_a) {
@@ -8377,7 +8385,7 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 case 0:
                     newPeriod = e.target.value;
                     setPeriod(newPeriod);
-                    return [4 /*yield*/, searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.End) ? moment(endShift.End).toDate() : null, false)];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.Start) ? moment(endShift.Start).toDate() : null, false)];
                 case 1:
                     _a.sent();
                     return [2 /*return*/];
@@ -8394,36 +8402,36 @@ var ShiftPeriodNavigatorControl = function (_a) {
     }, []);
     var startShift = shiftPeriodList[0];
     var endShift = shiftPeriodList[1];
+    var renderShiftCrewInfo = function (shift) {
+        if (!showShiftAndCrews || !shift)
+            return null;
+        return (React__default.createElement("span", { style: {
+                paddingRight: 5,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                fontSize: 15,
+                fontWeight: "bold"
+            } },
+            shift.Shift,
+            " - ",
+            shift.Crew));
+    };
     return (React__default.createElement("div", { className: classes.container },
         React__default.createElement("div", { className: classes.gridItem },
             React__default.createElement(IconButton$1, { size: "small", color: "primary", disabled: loadingShiftPeriodList, onClick: function () { return handleArrowNavigation("prev"); } },
                 React__default.createElement(ChevronLeft, null))),
         React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.datePickerWrapper) },
-            React__default.createElement(DatePicker$1, { label: "Start", format: "MM/DD/YYYY HH:mm a", value: moment((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
+            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: { height: "50px", paddingTop: "2px" } }) }))); },
                     openPickerIcon: function () { return (React__default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
                             width: "100%"
                         } },
-                        React__default.createElement("span", { style: {
-                                paddingRight: 5,
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                                fontSize: 15,
-                                fontWeight: "bold"
-                            } }, startShift === null || startShift === void 0 ? void 0 :
-                            startShift.Shift,
-                            " - ", startShift === null || startShift === void 0 ? void 0 :
-                            startShift.Crew),
+                        renderShiftCrewInfo(startShift),
                         React__default.createElement(IconButton$1, { style: { padding: "0px", flexShrink: 0 } },
                             React__default.createElement(CalendarIcon, null)))); }
                 } })),
@@ -8432,39 +8440,19 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 React__default.createElement(Select, { value: period, onChange: handleChangeScope, disabled: loadingShiftPeriodList, style: {
                         height: "50px",
                         width: "100%",
-                        paddingTop: 10
-                    } },
-                    React__default.createElement(MenuItem, { value: "Shift" }, "Shift"),
-                    React__default.createElement(MenuItem, { value: "Day" }, "Day"),
-                    React__default.createElement(MenuItem, { value: "4Days" }, "4 Days"),
-                    React__default.createElement(MenuItem, { value: "Week" }, "Week"),
-                    React__default.createElement(MenuItem, { value: "Month" }, "Month")))),
+                        paddingBottom: 0
+                    } }, 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: "MM/DD/YYYY HH:mm a", value: moment((endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
+            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: { height: "50px", paddingTop: "2px" } }) }))); },
                     openPickerIcon: function () { return (React__default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
                             width: "100%"
                         } },
-                        React__default.createElement("span", { style: {
-                                paddingRight: 5,
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                                fontSize: 15,
-                                fontWeight: "bold"
-                            } }, endShift === null || endShift === void 0 ? void 0 :
-                            endShift.Shift,
-                            " - ", endShift === null || endShift === void 0 ? void 0 :
-                            endShift.Crew),
+                        renderShiftCrewInfo(endShift),
                         React__default.createElement(IconButton$1, { style: { padding: "4px", flexShrink: 0 } },
                             React__default.createElement(CalendarIcon, null)))); }
                 } })),