@m4l/components 0.0.46 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs.js +1 -1
- package/dist/components/CommonActions/components/ActionCancel/index.d.ts +3 -0
- package/dist/components/CommonActions/components/ActionCancel/index.js +15 -0
- package/dist/components/CommonActions/components/ActionFormCancel/index.d.ts +3 -0
- package/dist/components/CommonActions/components/ActionFormCancel/index.js +62 -0
- package/dist/components/CommonActions/components/ActionFormCancel/types.d.ts +6 -0
- package/dist/components/CommonActions/components/ActionFormIntro/index.d.ts +3 -0
- package/dist/components/CommonActions/components/ActionFormIntro/index.js +35 -0
- package/dist/components/CommonActions/components/ActionIntro/index.d.ts +3 -0
- package/dist/components/CommonActions/components/ActionIntro/index.js +16 -0
- package/dist/components/CommonActions/components/Actions/index.d.ts +3 -0
- package/dist/components/CommonActions/components/Actions/index.js +857 -0
- package/dist/components/CommonActions/components/Actions/styles.d.ts +2 -0
- package/dist/components/CommonActions/components/Actions/types.d.ts +4 -0
- package/dist/components/{FormActions → CommonActions}/dictionary.d.ts +1 -1
- package/dist/components/CommonActions/index.d.ts +6 -0
- package/dist/components/DataGrid/index.js +8 -648
- package/dist/components/DynamicFilter/components/fieldstypes/DateTimeFilter/index.d.ts +2 -1
- package/dist/components/DynamicFilter/components/fieldstypes/factory.d.ts +2 -1
- package/dist/components/DynamicFilter/index.js +23 -23
- package/dist/components/Icon/index.js +14 -12
- package/dist/components/ModalDialog/components/Header/types.d.ts +2 -2
- package/dist/components/ModalDialog/index.js +20 -20
- package/dist/components/ModalDialog/types.d.ts +2 -2
- package/dist/components/ObjectLogs/index.js +0 -3
- package/dist/components/SplitLayout/index.js +0 -1
- package/dist/components/formatters/DateFormatter/index.js +10 -8
- package/dist/components/hook-form/FormProvider/index.js +8 -124
- package/dist/components/hook-form/FormProvider/types.d.ts +0 -2
- package/dist/components/hook-form/RHFTextField/index.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/mui_extended/Button/index.d.ts +3 -0
- package/dist/components/mui_extended/Button/styles.d.ts +12 -0
- package/dist/components/mui_extended/Button/types.d.ts +2 -0
- package/dist/components/mui_extended/IconButton/index.d.ts +0 -1
- package/dist/components/mui_extended/IconButton/index.js +23 -16
- package/dist/components/mui_extended/Pager/index.js +1 -66
- package/dist/contexts/ModalContext/components/ContentConfirm/types.d.ts +3 -3
- package/dist/contexts/ModalContext/index.js +12 -9
- package/dist/contexts/ModalContext/types.d.ts +5 -6
- package/dist/index.js +8 -5
- package/dist/react-lazy-load-image-component.js +197 -173
- package/dist/utils/index.d.ts +3 -3
- package/dist/utils/types.d.ts +1 -0
- package/dist/vendor.js +55 -34
- package/package.json +4 -5
- package/dist/components/FormActions/index.d.ts +0 -3
- package/dist/components/FormActions/index.js +0 -51
- package/dist/components/FormActions/styles.d.ts +0 -2
- package/dist/components/FormActions/types.d.ts +0 -7
- package/dist/components/hook-form/FormProvider/components/FormActions/index.d.ts +0 -3
- package/dist/components/hook-form/FormProvider/components/FormActions/skeleton.d.ts +0 -2
- package/dist/components/hook-form/FormProvider/components/FormActions/styles.d.ts +0 -3
- package/dist/components/hook-form/FormProvider/components/FormActions/types.d.ts +0 -4
- package/dist/components/mui_extended/MenuActions/index.js +0 -111
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import { S as ScrollBar } from "../ScrollBar/index.js";
|
|
2
2
|
import { styled, alpha } from "@mui/material/styles";
|
|
3
3
|
import require$$0, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
|
|
4
|
-
import { useModuleDictionary, useEnvironment, voidFunction,
|
|
4
|
+
import { useModuleDictionary, useHostTools, useEnvironment, voidFunction, useFlagsPresent } from "@m4l/core";
|
|
5
5
|
import * as Yup from "yup";
|
|
6
6
|
import { useFormContext, useWatch } from "react-hook-form";
|
|
7
7
|
import { F as FormProvider } from "../hook-form/FormProvider/index.js";
|
|
8
|
-
import "react-router-dom";
|
|
9
|
-
import "@mui/lab";
|
|
10
|
-
import { styled as styled$1, Skeleton, MenuItem, Popper, Button } from "@mui/material";
|
|
11
|
-
import "../../contexts/ModalContext/index.js";
|
|
12
8
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
13
9
|
import { R as RHFAutocomplete } from "../../vendor.js";
|
|
10
|
+
import { styled as styled$1, Skeleton, MenuItem, useTheme, Popper, Button } from "@mui/material";
|
|
14
11
|
import "../hook-form/RHFAutocompleteAsync/index.js";
|
|
15
12
|
import "../hook-form/RHFCheckbox/index.js";
|
|
16
13
|
import { R as RHFDateTime } from "../hook-form/RHFDateTime.js";
|
|
@@ -20,11 +17,10 @@ import "../../lodash.js";
|
|
|
20
17
|
import "../../react-lazy-load-image-component.js";
|
|
21
18
|
import "../Image/index.js";
|
|
22
19
|
import "../hook-form/RHFUpload.js";
|
|
23
|
-
import { format } from "date-fns";
|
|
24
20
|
import { I as IconButton } from "../mui_extended/IconButton/index.js";
|
|
25
21
|
import { I as Icon } from "../Icon/index.js";
|
|
26
22
|
import "../../simplebar.js";
|
|
27
|
-
import { L as LabelMemuItem } from "../
|
|
23
|
+
import { L as LabelMemuItem } from "../CommonActions/components/Actions/index.js";
|
|
28
24
|
import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
|
|
29
25
|
import { useResponsiveDesktop } from "@m4l/graphics";
|
|
30
26
|
const WrapperApplyedFilters = styled("div")(({
|
|
@@ -370,7 +366,7 @@ const verifyDateTime = (filter) => {
|
|
|
370
366
|
}
|
|
371
367
|
return true;
|
|
372
368
|
};
|
|
373
|
-
const getDefaultDateTimeFilter = (field, fixed, getLabel) => {
|
|
369
|
+
const getDefaultDateTimeFilter = (field, fixed, getLabel, hostTools) => {
|
|
374
370
|
const defaultStartDate = new Date();
|
|
375
371
|
const defaultEndDate = new Date();
|
|
376
372
|
let dfop1 = field.defaultOperand1;
|
|
@@ -408,7 +404,7 @@ const getDefaultDateTimeFilter = (field, fixed, getLabel) => {
|
|
|
408
404
|
}
|
|
409
405
|
defaultFilter.o1 = defaultStartDate.toISOString();
|
|
410
406
|
defaultFilter.o2 = defaultEndDate.toISOString();
|
|
411
|
-
defaultFilter.labelOperands = `${
|
|
407
|
+
defaultFilter.labelOperands = `${hostTools.formatDate(defaultStartDate, "yyyy-MM-dd HH:mm:ss")} - ${hostTools.formatDate(defaultEndDate, "yyyy-MM-dd HH:mm:ss")}`;
|
|
412
408
|
defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
|
|
413
409
|
return defaultFilter;
|
|
414
410
|
};
|
|
@@ -421,6 +417,9 @@ function DateTimeFilter() {
|
|
|
421
417
|
const {
|
|
422
418
|
getLabel
|
|
423
419
|
} = useModuleDictionary();
|
|
420
|
+
const {
|
|
421
|
+
formatDate
|
|
422
|
+
} = useHostTools();
|
|
424
423
|
const {
|
|
425
424
|
dfnsFormat: {
|
|
426
425
|
datetime_format
|
|
@@ -460,10 +459,10 @@ function DateTimeFilter() {
|
|
|
460
459
|
};
|
|
461
460
|
if (data.valueOperator.id === "b") {
|
|
462
461
|
newFilter.o2 = data.valueOperand2.toISOString();
|
|
463
|
-
newFilter.labelOperands = `${
|
|
462
|
+
newFilter.labelOperands = `${formatDate(data.valueOperand1, datetime_format)} - ${formatDate(data.valueOperand2, datetime_format)}`;
|
|
464
463
|
} else {
|
|
465
464
|
newFilter.o2 = newFilter.o2 ? newFilter.o2 : newFilter.o1;
|
|
466
|
-
newFilter.labelOperands =
|
|
465
|
+
newFilter.labelOperands = formatDate(data.valueOperand1, datetime_format);
|
|
467
466
|
}
|
|
468
467
|
return newFilter;
|
|
469
468
|
}, []);
|
|
@@ -671,9 +670,9 @@ const strategiesDefaultFilterValues = {
|
|
|
671
670
|
throw new Error("Type no defined");
|
|
672
671
|
}
|
|
673
672
|
};
|
|
674
|
-
const getDefaultFilterValues = (field, fixed, getLabel) => {
|
|
673
|
+
const getDefaultFilterValues = (field, fixed, getLabel, hostTools) => {
|
|
675
674
|
const transformer = strategiesDefaultFilterValues[field.type] ?? strategiesDefaultFilterValues.__default__;
|
|
676
|
-
return transformer(field, fixed, getLabel);
|
|
675
|
+
return transformer(field, fixed, getLabel, hostTools);
|
|
677
676
|
};
|
|
678
677
|
const strategiesEditFilterComponent = {
|
|
679
678
|
string: StringFilter,
|
|
@@ -751,7 +750,7 @@ const formatToRawFilter = (applyedFilter) => {
|
|
|
751
750
|
o2: af.o2
|
|
752
751
|
}));
|
|
753
752
|
};
|
|
754
|
-
const getInitialFilters = (fields, filters, getFieldByName, getLabel) => {
|
|
753
|
+
const getInitialFilters = (fields, filters, getFieldByName, getLabel, hostTools) => {
|
|
755
754
|
const newFilters = [];
|
|
756
755
|
const fixedFields = [];
|
|
757
756
|
for (let index = 0; index < filters.length; index++) {
|
|
@@ -801,7 +800,7 @@ const getInitialFilters = (fields, filters, getFieldByName, getLabel) => {
|
|
|
801
800
|
const field = fields[index];
|
|
802
801
|
if (field.presence === "initialized" || field.presence === "fixed") {
|
|
803
802
|
if (!filters.find((f) => f.n === field.name)) {
|
|
804
|
-
const newFilter = getDefaultFilterValues(field, field.presence === "fixed", getLabel);
|
|
803
|
+
const newFilter = getDefaultFilterValues(field, field.presence === "fixed", getLabel, hostTools);
|
|
805
804
|
newFilter.id = newFilters.length + 1;
|
|
806
805
|
newFilters.push(newFilter);
|
|
807
806
|
}
|
|
@@ -834,6 +833,7 @@ function BaseProvider(props) {
|
|
|
834
833
|
host_static_assets,
|
|
835
834
|
environment_assets
|
|
836
835
|
} = useEnvironment();
|
|
836
|
+
const hostTools = useHostTools();
|
|
837
837
|
const all_fields = useMemo(() => {
|
|
838
838
|
return {
|
|
839
839
|
...ALL_FIELDS,
|
|
@@ -855,7 +855,7 @@ function BaseProvider(props) {
|
|
|
855
855
|
const getLabelOperator = useCallback((operator) => {
|
|
856
856
|
return getLabel(`dynamic_filter.operator_${operator}`);
|
|
857
857
|
}, [getLabel]);
|
|
858
|
-
const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabel));
|
|
858
|
+
const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabel, hostTools));
|
|
859
859
|
const availableFields = useMemo(() => {
|
|
860
860
|
const newFields = [];
|
|
861
861
|
for (let index = 0; index < fields.length; index++) {
|
|
@@ -885,7 +885,7 @@ function BaseProvider(props) {
|
|
|
885
885
|
autoClose: 1e4
|
|
886
886
|
});
|
|
887
887
|
}
|
|
888
|
-
}, [isValid, applyedFilters]);
|
|
888
|
+
}, [isValid, applyedFilters, onChangeFilter]);
|
|
889
889
|
useEffect(() => {
|
|
890
890
|
const NoValid = applyedFilters.findIndex((f) => !f.isSetted) > -1;
|
|
891
891
|
if (NoValid) {
|
|
@@ -962,7 +962,7 @@ function BaseProvider(props) {
|
|
|
962
962
|
const showPopupForAddFilter = useCallback((anchorEl, field) => {
|
|
963
963
|
setPopupData({
|
|
964
964
|
popupAnchorEl: anchorEl,
|
|
965
|
-
filter: getDefaultFilterValues(field, false, getLabel),
|
|
965
|
+
filter: getDefaultFilterValues(field, false, getLabel, hostTools),
|
|
966
966
|
field
|
|
967
967
|
});
|
|
968
968
|
setInEdition(true);
|
|
@@ -1133,7 +1133,7 @@ function ApplyedFilter(props) {
|
|
|
1133
1133
|
children: labelOperands
|
|
1134
1134
|
})]
|
|
1135
1135
|
}), !fixed && /* @__PURE__ */ jsx(IconButton, {
|
|
1136
|
-
src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/
|
|
1136
|
+
src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close_filter.svg`,
|
|
1137
1137
|
onClick: onDelete
|
|
1138
1138
|
})]
|
|
1139
1139
|
});
|
|
@@ -1470,6 +1470,7 @@ const PopupEditFilter = () => {
|
|
|
1470
1470
|
getLabelOperator,
|
|
1471
1471
|
fnTransformFormValuesIntoRawValues
|
|
1472
1472
|
} = useBase();
|
|
1473
|
+
const theme = useTheme();
|
|
1473
1474
|
const {
|
|
1474
1475
|
getLabel
|
|
1475
1476
|
} = useModuleDictionary();
|
|
@@ -1506,7 +1507,7 @@ const PopupEditFilter = () => {
|
|
|
1506
1507
|
open: Boolean(popupAnchorEl),
|
|
1507
1508
|
anchorEl: popupAnchorEl,
|
|
1508
1509
|
sx: {
|
|
1509
|
-
boxShadow:
|
|
1510
|
+
boxShadow: theme.customShadows.dropdown,
|
|
1510
1511
|
borderRadius: 1
|
|
1511
1512
|
},
|
|
1512
1513
|
children: /* @__PURE__ */ jsx(Fragment, {
|
|
@@ -1514,7 +1515,6 @@ const PopupEditFilter = () => {
|
|
|
1514
1515
|
onSubmit,
|
|
1515
1516
|
values,
|
|
1516
1517
|
validationSchema: popupValidationSchema,
|
|
1517
|
-
urlCancel: -1,
|
|
1518
1518
|
children: /* @__PURE__ */ jsxs(WrapperPopupEditFilter, {
|
|
1519
1519
|
children: [/* @__PURE__ */ jsxs(HeaderContainer, {
|
|
1520
1520
|
children: [field?.urlIcon && /* @__PURE__ */ jsx(Icon, {
|
|
@@ -1529,12 +1529,12 @@ const PopupEditFilter = () => {
|
|
|
1529
1529
|
variant: "outlined",
|
|
1530
1530
|
color: "inherit",
|
|
1531
1531
|
onClick: onClose,
|
|
1532
|
-
children: `
|
|
1532
|
+
children: getLabel(`dyamic_filter.cancel`)
|
|
1533
1533
|
}), /* @__PURE__ */ jsx(Button, {
|
|
1534
1534
|
variant: "contained",
|
|
1535
1535
|
color: "primary",
|
|
1536
1536
|
type: "submit",
|
|
1537
|
-
children: `
|
|
1537
|
+
children: getLabel(`dyamic_filter.intro`)
|
|
1538
1538
|
})]
|
|
1539
1539
|
})]
|
|
1540
1540
|
})
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { styled, useTheme } from "@mui/material";
|
|
2
|
-
import { useState, useEffect } from "react";
|
|
2
|
+
import { useState, useMemo, useEffect } from "react";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
const MaskIcon = styled("div", {
|
|
5
5
|
shouldForwardProp: (props) => props !== "src" && props !== "width" && props !== "height" && props !== "bgColor"
|
|
6
6
|
})((props) => ({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
maskPosition: "center",
|
|
7
|
+
maskPosition: "center!important",
|
|
8
|
+
maskRepeat: "no-repeat!important",
|
|
10
9
|
width: props.width === void 0 ? "20px" : props.width,
|
|
11
10
|
height: props.height === void 0 ? "20px" : props.height,
|
|
12
|
-
backgroundColor: props.bgColor
|
|
11
|
+
backgroundColor: props.bgColor,
|
|
12
|
+
mask: `url('data:image/svg+xml;base64,${props.src}')`
|
|
13
13
|
}));
|
|
14
14
|
const WrapperPlaceHolder = styled("div", {
|
|
15
15
|
shouldForwardProp: (props) => props !== "widht" && props !== "height"
|
|
@@ -29,7 +29,7 @@ function Icon(props) {
|
|
|
29
29
|
} = props;
|
|
30
30
|
const [resource, setResource] = useState(void 0);
|
|
31
31
|
const theme = useTheme();
|
|
32
|
-
const
|
|
32
|
+
const finalBgColor = useMemo(() => {
|
|
33
33
|
if (bgColor === "active") {
|
|
34
34
|
return theme.palette.action.active;
|
|
35
35
|
}
|
|
@@ -49,23 +49,25 @@ function Icon(props) {
|
|
|
49
49
|
return theme.palette.action.disabled;
|
|
50
50
|
}
|
|
51
51
|
return bgColor;
|
|
52
|
-
};
|
|
52
|
+
}, [bgColor]);
|
|
53
53
|
useEffect(() => {
|
|
54
54
|
let mounted = true;
|
|
55
|
-
if (resource)
|
|
56
|
-
return;
|
|
57
55
|
(async function networkOperation() {
|
|
58
56
|
await fetch(src).then((response) => {
|
|
57
|
+
return response.text() || "";
|
|
58
|
+
}).then((xml) => {
|
|
59
|
+
xml = xml.match(/(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g)?.toString() || "";
|
|
59
60
|
if (mounted) {
|
|
60
|
-
setResource(
|
|
61
|
+
setResource(window.btoa(xml));
|
|
61
62
|
}
|
|
62
63
|
}).catch((_err) => {
|
|
64
|
+
console.log("error icon");
|
|
63
65
|
});
|
|
64
66
|
})();
|
|
65
67
|
return function clenUp() {
|
|
66
68
|
mounted = false;
|
|
67
69
|
};
|
|
68
|
-
}, []);
|
|
70
|
+
}, [src]);
|
|
69
71
|
const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
|
|
70
72
|
return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
|
|
71
73
|
id: "IconReact",
|
|
@@ -75,7 +77,7 @@ function Icon(props) {
|
|
|
75
77
|
src: resource,
|
|
76
78
|
width,
|
|
77
79
|
height,
|
|
78
|
-
bgColor:
|
|
80
|
+
bgColor: finalBgColor
|
|
79
81
|
}) : /* @__PURE__ */ jsx("img", {
|
|
80
82
|
src: placeHolder,
|
|
81
83
|
alt: "icon_svg"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { VariantColor } from '../../../../utils/types';
|
|
3
3
|
export interface HeaderProps {
|
|
4
|
-
variant?:
|
|
4
|
+
variant?: VariantColor;
|
|
5
5
|
title: string;
|
|
6
6
|
iconComponent?: ReactNode;
|
|
7
7
|
withClose?: boolean;
|
|
@@ -2,13 +2,13 @@ import { Dialog, IconButton, Paper } from "@mui/material";
|
|
|
2
2
|
import { D as Draggable } from "../../react-draggable.js";
|
|
3
3
|
import { u as useModal } from "../../hooks/useModal/index.js";
|
|
4
4
|
import { styled } from "@mui/material/styles";
|
|
5
|
-
import {
|
|
5
|
+
import { g as getThemeVariantColor } from "../../vendor.js";
|
|
6
6
|
import { R as Resizeable } from "../Resizeable/index.js";
|
|
7
7
|
import { useResponsiveDesktop } from "@m4l/graphics";
|
|
8
8
|
import { useEnvironment } from "@m4l/core";
|
|
9
9
|
import { I as Icon } from "../Icon/index.js";
|
|
10
10
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
11
|
-
import {
|
|
11
|
+
import { b as Actions, g as getStandardActionsDictionary } from "../CommonActions/components/Actions/index.js";
|
|
12
12
|
const WrapperDialog = styled(Dialog)(() => ({}));
|
|
13
13
|
const Container = styled("div")(({ theme }) => ({
|
|
14
14
|
display: "flex",
|
|
@@ -128,8 +128,7 @@ const ModalDialog = () => {
|
|
|
128
128
|
title,
|
|
129
129
|
closeModal,
|
|
130
130
|
iconComponent,
|
|
131
|
-
|
|
132
|
-
actionComponents,
|
|
131
|
+
actions,
|
|
133
132
|
variant
|
|
134
133
|
} = useModal();
|
|
135
134
|
const isDesktop = useResponsiveDesktop();
|
|
@@ -138,21 +137,22 @@ const ModalDialog = () => {
|
|
|
138
137
|
};
|
|
139
138
|
const contentComnponent = /* @__PURE__ */ jsxs(Container, {
|
|
140
139
|
id: "Container",
|
|
141
|
-
children: [
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
140
|
+
children: [
|
|
141
|
+
/* @__PURE__ */ jsx(Header, {
|
|
142
|
+
variant,
|
|
143
|
+
title,
|
|
144
|
+
iconComponent,
|
|
145
|
+
withClose,
|
|
146
|
+
onCloseModal
|
|
147
|
+
}),
|
|
148
|
+
/* @__PURE__ */ jsx(Content, {
|
|
149
|
+
id: "Content",
|
|
150
|
+
children: typeof contentComponent === "function" ? contentComponent() : contentComponent
|
|
151
|
+
}),
|
|
152
|
+
actions && /* @__PURE__ */ jsx(Actions, {
|
|
153
|
+
children: actions
|
|
154
|
+
})
|
|
155
|
+
]
|
|
156
156
|
});
|
|
157
157
|
return /* @__PURE__ */ jsxs(WrapperDialog, {
|
|
158
158
|
open,
|
|
@@ -172,7 +172,7 @@ const ModalDialog = () => {
|
|
|
172
172
|
});
|
|
173
173
|
};
|
|
174
174
|
function getModalDialogComponentsDictionary() {
|
|
175
|
-
return ["modal_dialog"].concat(
|
|
175
|
+
return ["modal_dialog"].concat(getStandardActionsDictionary());
|
|
176
176
|
}
|
|
177
177
|
const defaultModalDialogDictionary = {
|
|
178
178
|
modal_dialog: {}
|
|
@@ -186,7 +186,6 @@ function ObjectLogs(props) {
|
|
|
186
186
|
queryParams
|
|
187
187
|
});
|
|
188
188
|
useEffect(() => {
|
|
189
|
-
console.log("useEffect ObjectLogs", object_id);
|
|
190
189
|
clearRows();
|
|
191
190
|
setQueryParams((oldParms) => ({
|
|
192
191
|
...oldParms,
|
|
@@ -194,14 +193,12 @@ function ObjectLogs(props) {
|
|
|
194
193
|
}));
|
|
195
194
|
}, [object_id]);
|
|
196
195
|
const onChangeFilter = (_initFilters, rawFilters) => {
|
|
197
|
-
console.log("onChangeFilter*", object_id);
|
|
198
196
|
setQueryParams((oldParms) => ({
|
|
199
197
|
...oldParms,
|
|
200
198
|
f: rawFilters
|
|
201
199
|
}));
|
|
202
200
|
Refresh();
|
|
203
201
|
};
|
|
204
|
-
console.log("Render ObjectLogs", object_id, queryParams);
|
|
205
202
|
return /* @__PURE__ */ jsxs(Container$1, {
|
|
206
203
|
children: [/* @__PURE__ */ jsx(Actions, {
|
|
207
204
|
id: "objectLogsActions",
|
|
@@ -1,29 +1,31 @@
|
|
|
1
|
-
import { useEnvironment } from "@m4l/core";
|
|
2
|
-
import { format } from "date-fns";
|
|
1
|
+
import { useEnvironment, useHostTools } from "@m4l/core";
|
|
3
2
|
import require$$0 from "react";
|
|
4
3
|
import { jsx } from "react/jsx-runtime";
|
|
5
4
|
function DateFormatter(props) {
|
|
6
5
|
const {
|
|
7
6
|
presentationType,
|
|
8
7
|
value,
|
|
9
|
-
format
|
|
8
|
+
format,
|
|
10
9
|
Component = require$$0.Fragment
|
|
11
10
|
} = props;
|
|
12
11
|
const {
|
|
13
12
|
dfnsFormat
|
|
14
13
|
} = useEnvironment();
|
|
15
|
-
|
|
14
|
+
const {
|
|
15
|
+
formatDate
|
|
16
|
+
} = useHostTools();
|
|
17
|
+
let finalFormat = format || dfnsFormat.datetime_format;
|
|
16
18
|
let result;
|
|
17
19
|
let resultDate;
|
|
18
20
|
switch (presentationType) {
|
|
19
21
|
case "datetime":
|
|
20
|
-
finalFormat = format
|
|
22
|
+
finalFormat = format || dfnsFormat.datetime_format;
|
|
21
23
|
break;
|
|
22
24
|
case "date":
|
|
23
|
-
finalFormat = format
|
|
25
|
+
finalFormat = format || dfnsFormat.date_format;
|
|
24
26
|
break;
|
|
25
27
|
case "time":
|
|
26
|
-
finalFormat = format
|
|
28
|
+
finalFormat = format || dfnsFormat.time_format;
|
|
27
29
|
break;
|
|
28
30
|
}
|
|
29
31
|
try {
|
|
@@ -32,7 +34,7 @@ function DateFormatter(props) {
|
|
|
32
34
|
} else {
|
|
33
35
|
resultDate = value;
|
|
34
36
|
}
|
|
35
|
-
result =
|
|
37
|
+
result = formatDate(resultDate, finalFormat);
|
|
36
38
|
} catch (e) {
|
|
37
39
|
result = "err_typing";
|
|
38
40
|
}
|
|
@@ -1,133 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { useForm, FormProvider as FormProvider$1 } from "react-hook-form";
|
|
3
3
|
import { o } from "../../../node_modules.js";
|
|
4
4
|
import { styled } from "@mui/material/styles";
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
import { LoadingButton } from "@mui/lab";
|
|
8
|
-
import { Skeleton, Button } from "@mui/material";
|
|
9
|
-
import { u as useModal } from "../../../hooks/useModal/index.js";
|
|
10
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
11
|
-
const WrapperFormProvider = styled("form")(({
|
|
12
|
-
theme
|
|
13
|
-
}) => ({
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
const WrapperFormProvider = styled("form")(() => ({
|
|
14
7
|
display: "flex",
|
|
15
8
|
flexDirection: "column",
|
|
16
9
|
width: "100%",
|
|
17
|
-
overflow: "scroll"
|
|
18
|
-
marginBottom: theme.spacing(1)
|
|
10
|
+
overflow: "scroll"
|
|
19
11
|
}));
|
|
20
|
-
const WrapperFormActions = styled("div")(({
|
|
21
|
-
theme
|
|
22
|
-
}) => ({
|
|
23
|
-
paddingTop: theme.spacing(3),
|
|
24
|
-
marginRight: theme.spacing(1.5),
|
|
25
|
-
display: "flex",
|
|
26
|
-
flexDirection: "row",
|
|
27
|
-
justifyContent: "flex-end",
|
|
28
|
-
"& > button": {
|
|
29
|
-
marginLeft: "10px"
|
|
30
|
-
},
|
|
31
|
-
"& .MuiLoadingButton-root ": {
|
|
32
|
-
minWidth: "80px"
|
|
33
|
-
}
|
|
34
|
-
}));
|
|
35
|
-
const WrapperSKTFormActions = styled("div")(({
|
|
36
|
-
theme
|
|
37
|
-
}) => ({
|
|
38
|
-
display: "grid",
|
|
39
|
-
gridTemplateColumns: "auto auto",
|
|
40
|
-
margin: "0px",
|
|
41
|
-
gridGap: `${theme.spacing(3)}`,
|
|
42
|
-
justifyContent: "flex-end",
|
|
43
|
-
paddingTop: `${theme.spacing(3)}`,
|
|
44
|
-
borderTop: `1px solid ${theme.palette.divider}`,
|
|
45
|
-
[theme.breakpoints.up("sm")]: {
|
|
46
|
-
margin: `0 ${theme.spacing(4.5)}`
|
|
47
|
-
}
|
|
48
|
-
}));
|
|
49
|
-
function SKTFormActions() {
|
|
50
|
-
return /* @__PURE__ */ jsxs(WrapperSKTFormActions, {
|
|
51
|
-
children: [/* @__PURE__ */ jsx(Skeleton, {
|
|
52
|
-
variant: "text",
|
|
53
|
-
width: 57,
|
|
54
|
-
height: 30
|
|
55
|
-
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
56
|
-
variant: "text",
|
|
57
|
-
width: 57,
|
|
58
|
-
height: 30
|
|
59
|
-
})]
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
function FormActions(props) {
|
|
63
|
-
const {
|
|
64
|
-
withIntro,
|
|
65
|
-
urlCancel
|
|
66
|
-
} = props;
|
|
67
|
-
const navigate = useNavigate();
|
|
68
|
-
const {
|
|
69
|
-
getLabel
|
|
70
|
-
} = useModuleDictionary();
|
|
71
|
-
const isSkeleton = !useFlagsPresent(["dictionary_loaded", "form_loaded"]);
|
|
72
|
-
const {
|
|
73
|
-
openModalConfirm
|
|
74
|
-
} = useModal();
|
|
75
|
-
const {
|
|
76
|
-
control
|
|
77
|
-
} = useFormContext();
|
|
78
|
-
const {
|
|
79
|
-
isDirty,
|
|
80
|
-
isSubmitting
|
|
81
|
-
} = useFormState({
|
|
82
|
-
control
|
|
83
|
-
});
|
|
84
|
-
const onConfirmCancel = useCallback(() => {
|
|
85
|
-
if (typeof urlCancel === "number") {
|
|
86
|
-
navigate(urlCancel);
|
|
87
|
-
}
|
|
88
|
-
if (urlCancel && typeof urlCancel === "undefined") {
|
|
89
|
-
navigate(urlCancel, {
|
|
90
|
-
replace: false
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
}, [navigate, urlCancel]);
|
|
94
|
-
const onClickCancel = useCallback(() => {
|
|
95
|
-
if (isDirty) {
|
|
96
|
-
openModalConfirm({
|
|
97
|
-
variant: "warning",
|
|
98
|
-
title: getLabel("form_provider.confirm_quit_title"),
|
|
99
|
-
msg: getLabel("form_provider.confirm_quit_msg"),
|
|
100
|
-
onClickIntro: onConfirmCancel
|
|
101
|
-
});
|
|
102
|
-
} else {
|
|
103
|
-
onConfirmCancel();
|
|
104
|
-
}
|
|
105
|
-
}, [getLabel, isDirty, onConfirmCancel, openModalConfirm]);
|
|
106
|
-
if (isSkeleton) {
|
|
107
|
-
return /* @__PURE__ */ jsx(SKTFormActions, {});
|
|
108
|
-
}
|
|
109
|
-
return /* @__PURE__ */ jsxs(WrapperFormActions, {
|
|
110
|
-
children: [urlCancel && /* @__PURE__ */ jsx(Button, {
|
|
111
|
-
variant: "outlined",
|
|
112
|
-
color: "inherit",
|
|
113
|
-
onClick: onClickCancel,
|
|
114
|
-
children: getLabel("actions.action_cancel")
|
|
115
|
-
}), withIntro && /* @__PURE__ */ jsx(LoadingButton, {
|
|
116
|
-
variant: "contained",
|
|
117
|
-
type: "submit",
|
|
118
|
-
loading: isSubmitting,
|
|
119
|
-
children: getLabel("actions.action_accept")
|
|
120
|
-
})]
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
12
|
function FormProvider(props) {
|
|
124
13
|
const {
|
|
125
14
|
children,
|
|
126
15
|
onSubmit,
|
|
127
16
|
values,
|
|
128
|
-
validationSchema
|
|
129
|
-
withIntro,
|
|
130
|
-
urlCancel = -1
|
|
17
|
+
validationSchema
|
|
131
18
|
} = props;
|
|
132
19
|
const methods = useForm({
|
|
133
20
|
resolver: o(validationSchema),
|
|
@@ -148,13 +35,10 @@ function FormProvider(props) {
|
|
|
148
35
|
}, [methods, values]);
|
|
149
36
|
return /* @__PURE__ */ jsx(FormProvider$1, {
|
|
150
37
|
...methods,
|
|
151
|
-
children: /* @__PURE__ */
|
|
38
|
+
children: /* @__PURE__ */ jsx(WrapperFormProvider, {
|
|
152
39
|
id: "formProvider",
|
|
153
40
|
onSubmit: methods.handleSubmit(onSubmit),
|
|
154
|
-
children
|
|
155
|
-
withIntro,
|
|
156
|
-
urlCancel
|
|
157
|
-
})]
|
|
41
|
+
children
|
|
158
42
|
})
|
|
159
43
|
});
|
|
160
44
|
}
|