@acvl/frontend-components 0.0.23 → 0.0.25
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/cjs/index.js +180 -150
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/src/components/v1/buttons/CreateButton/CreateButtonWithMenuOptions.d.ts +2 -2
- package/dist/cjs/types/src/components/v1/datagrids/Base/index.d.ts +1 -1
- package/dist/cjs/types/src/components/v1/datagrids/custom_slots/CustomToolbar/slots/ExportButton/ExportCSV.d.ts +1 -1
- package/dist/cjs/types/src/components/v1/datagrids/custom_slots/index.d.ts +1 -0
- package/dist/cjs/types/src/components/v1/datagrids/index.d.ts +1 -0
- package/dist/cjs/types/src/components/v1/layout/pages/DetailPage/types.d.ts +1 -0
- package/dist/cjs/types/src/components/v1/layout/pages/index.d.ts +1 -0
- package/dist/esm/index.js +180 -151
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/src/components/v1/buttons/CreateButton/CreateButtonWithMenuOptions.d.ts +2 -2
- package/dist/esm/types/src/components/v1/datagrids/Base/index.d.ts +1 -1
- package/dist/esm/types/src/components/v1/datagrids/custom_slots/CustomToolbar/slots/ExportButton/ExportCSV.d.ts +1 -1
- package/dist/esm/types/src/components/v1/datagrids/custom_slots/index.d.ts +1 -0
- package/dist/esm/types/src/components/v1/datagrids/index.d.ts +1 -0
- package/dist/esm/types/src/components/v1/layout/pages/DetailPage/types.d.ts +1 -0
- package/dist/esm/types/src/components/v1/layout/pages/index.d.ts +1 -0
- package/dist/index.d.ts +31 -15
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -25664,9 +25664,9 @@ dayjs.locale(es);
|
|
|
25664
25664
|
dayjs.extend(duration);
|
|
25665
25665
|
|
|
25666
25666
|
// ==============================|| JSON ||============================== //
|
|
25667
|
-
const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, data, props, formType }) => {
|
|
25667
|
+
const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, data, props, formType, }) => {
|
|
25668
25668
|
const ignore = get(props, `${base_key}.ignore`, false);
|
|
25669
|
-
if (ignore || [
|
|
25669
|
+
if (ignore || ["obj_permissions", "has_history"].includes(base_key))
|
|
25670
25670
|
return;
|
|
25671
25671
|
const altered_key = lodash.invoke(props, `${base_key}.alter_key`, base_key);
|
|
25672
25672
|
const key = altered_key || base_key;
|
|
@@ -25684,7 +25684,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
|
|
|
25684
25684
|
case "string":
|
|
25685
25685
|
if (lodash.invoke(props, `${base_key}.extra_validation`, object))
|
|
25686
25686
|
return;
|
|
25687
|
-
setValue(response, key, isEmpty(object) ?
|
|
25687
|
+
setValue(response, key, isEmpty(object) ? "" : object);
|
|
25688
25688
|
break;
|
|
25689
25689
|
case "number":
|
|
25690
25690
|
setValue(response, key, object);
|
|
@@ -25694,28 +25694,37 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
|
|
|
25694
25694
|
break;
|
|
25695
25695
|
case "object":
|
|
25696
25696
|
if (isNull(object) || isEmpty(object)) {
|
|
25697
|
-
if (includes(key,
|
|
25698
|
-
setValue(response, key,
|
|
25697
|
+
if (includes(key, "after") || includes(key, "before"))
|
|
25698
|
+
setValue(response, key, "");
|
|
25699
25699
|
else
|
|
25700
25700
|
setValue(response, key, object);
|
|
25701
25701
|
}
|
|
25702
|
+
else if (object instanceof File) {
|
|
25703
|
+
setValue(response, key, object);
|
|
25704
|
+
}
|
|
25702
25705
|
else if (object instanceof dayjs) {
|
|
25703
|
-
setValue(response, key, object.format(get(props, `${key}.format`,
|
|
25706
|
+
setValue(response, key, object.format(get(props, `${key}.format`, "YYYY-MM-DD")));
|
|
25704
25707
|
}
|
|
25705
|
-
else if (
|
|
25708
|
+
else if ("label" in object && "value" in object) {
|
|
25706
25709
|
if (useLabel)
|
|
25707
|
-
setValue(response, key, object[
|
|
25710
|
+
setValue(response, key, object["label"]);
|
|
25708
25711
|
else
|
|
25709
|
-
setValue(response, key, object[
|
|
25712
|
+
setValue(response, key, object["value"]);
|
|
25710
25713
|
}
|
|
25711
|
-
else if (Array.isArray(object)) {
|
|
25712
|
-
|
|
25713
|
-
|
|
25714
|
+
else if (Array.isArray(object)) {
|
|
25715
|
+
// it is an array
|
|
25716
|
+
if (object.length &&
|
|
25717
|
+
typeof object[0] == "object" &&
|
|
25718
|
+
!Array.isArray(object[0]) &&
|
|
25719
|
+
"value" in object[0] &&
|
|
25720
|
+
object[0]["value"] == "all") {
|
|
25721
|
+
// for data grid filters
|
|
25722
|
+
setValue(response, key, "");
|
|
25714
25723
|
}
|
|
25715
25724
|
else {
|
|
25716
25725
|
forEach(object, (arrayItem, idx) => {
|
|
25717
|
-
if (typeof arrayItem ==
|
|
25718
|
-
if (
|
|
25726
|
+
if (typeof arrayItem == "object") {
|
|
25727
|
+
if ("label" in arrayItem) {
|
|
25719
25728
|
setValue(response, `${key}.${idx}`, function (item) {
|
|
25720
25729
|
if (useLabel)
|
|
25721
25730
|
return item.label;
|
|
@@ -25723,7 +25732,16 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
|
|
|
25723
25732
|
return item.value;
|
|
25724
25733
|
});
|
|
25725
25734
|
}
|
|
25726
|
-
typeSwitch({
|
|
25735
|
+
typeSwitch({
|
|
25736
|
+
base_object: arrayItem,
|
|
25737
|
+
base_key: `${key}.${idx}`,
|
|
25738
|
+
response: response,
|
|
25739
|
+
useLabel: useLabel,
|
|
25740
|
+
data: data,
|
|
25741
|
+
submitData: submitData,
|
|
25742
|
+
props: props,
|
|
25743
|
+
formType: formType,
|
|
25744
|
+
});
|
|
25727
25745
|
}
|
|
25728
25746
|
else {
|
|
25729
25747
|
const keyArray = get(response, key);
|
|
@@ -25740,9 +25758,19 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
|
|
|
25740
25758
|
}
|
|
25741
25759
|
else {
|
|
25742
25760
|
forEach(object, (value, key2) => {
|
|
25743
|
-
if (!includes([
|
|
25761
|
+
if (!includes(["id", "transporte.tarifa.cargos_adicionales"], key) &&
|
|
25762
|
+
isEqual(get(data, `${key}.${key2}`), value))
|
|
25744
25763
|
return;
|
|
25745
|
-
typeSwitch({
|
|
25764
|
+
typeSwitch({
|
|
25765
|
+
base_object: value,
|
|
25766
|
+
base_key: `${key}.${key2}`,
|
|
25767
|
+
response: response,
|
|
25768
|
+
useLabel: useLabel,
|
|
25769
|
+
data: data,
|
|
25770
|
+
submitData: submitData,
|
|
25771
|
+
props: props,
|
|
25772
|
+
formType: formType,
|
|
25773
|
+
});
|
|
25746
25774
|
});
|
|
25747
25775
|
}
|
|
25748
25776
|
break;
|
|
@@ -25754,7 +25782,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
|
|
|
25754
25782
|
const jsonForm = ({ submitData, data, useLabel, props }) => {
|
|
25755
25783
|
const response = {};
|
|
25756
25784
|
forEach(submitData, function (value, key) {
|
|
25757
|
-
if (key !=
|
|
25785
|
+
if (key != "id" && isEqual(get(data, key), value))
|
|
25758
25786
|
return;
|
|
25759
25787
|
typeSwitch({
|
|
25760
25788
|
base_object: value,
|
|
@@ -25764,7 +25792,7 @@ const jsonForm = ({ submitData, data, useLabel, props }) => {
|
|
|
25764
25792
|
data: data,
|
|
25765
25793
|
props: props,
|
|
25766
25794
|
submitData: submitData,
|
|
25767
|
-
formType:
|
|
25795
|
+
formType: "json",
|
|
25768
25796
|
});
|
|
25769
25797
|
});
|
|
25770
25798
|
return response;
|
|
@@ -25772,7 +25800,7 @@ const jsonForm = ({ submitData, data, useLabel, props }) => {
|
|
|
25772
25800
|
const formDataForm = ({ submitData, data, useLabel, props }) => {
|
|
25773
25801
|
const formData = new FormData();
|
|
25774
25802
|
forEach(submitData, function (value, key) {
|
|
25775
|
-
if (key !=
|
|
25803
|
+
if (key != "id" && isEqual(get(data, key), value))
|
|
25776
25804
|
return;
|
|
25777
25805
|
typeSwitch({
|
|
25778
25806
|
base_object: value,
|
|
@@ -25782,26 +25810,18 @@ const formDataForm = ({ submitData, data, useLabel, props }) => {
|
|
|
25782
25810
|
data: data,
|
|
25783
25811
|
props: props,
|
|
25784
25812
|
submitData: submitData,
|
|
25785
|
-
formType:
|
|
25813
|
+
formType: "formData",
|
|
25786
25814
|
});
|
|
25787
25815
|
});
|
|
25788
25816
|
return formData;
|
|
25789
25817
|
};
|
|
25790
25818
|
// ==============================|| ERRORS ||============================== //
|
|
25791
|
-
const
|
|
25792
|
-
if (
|
|
25793
|
-
Object.
|
|
25794
|
-
|
|
25819
|
+
const setErrors = (form, error) => {
|
|
25820
|
+
if ("invalid_params" in error.data) {
|
|
25821
|
+
Object.values(error.data.invalid_params).forEach((entry) => {
|
|
25822
|
+
form.setError(entry.name, { message: entry.reason.join(", ") });
|
|
25795
25823
|
});
|
|
25796
25824
|
}
|
|
25797
|
-
else {
|
|
25798
|
-
form.setError(key, { message: errorObj });
|
|
25799
|
-
}
|
|
25800
|
-
};
|
|
25801
|
-
const setErrors = (form, error) => {
|
|
25802
|
-
Object.keys(error.data).forEach(x => {
|
|
25803
|
-
errorLoop(form, error.data[x], x);
|
|
25804
|
-
});
|
|
25805
25825
|
};
|
|
25806
25826
|
|
|
25807
25827
|
const valueLabel = zod.object({
|
|
@@ -25942,14 +25962,14 @@ const FileBox = (props) => {
|
|
|
25942
25962
|
return (jsxRuntime.jsxs(material.Box, { bgcolor: colors.grey[200], borderRadius: '12px', p: 2, display: 'flex', children: [jsxRuntime.jsx(material.Box, { flexGrow: 0.8, display: 'flex', justifyContent: 'left', alignItems: 'center', children: jsxRuntime.jsx(material.Typography, { fontWeight: 'bold', children: props.file.name.split('.')[0] }) }), jsxRuntime.jsx(material.Box, { flexGrow: 0.2, display: 'flex', justifyContent: 'right', alignItems: 'center', children: props.loadingRemove ? (jsxRuntime.jsx(material.CircularProgress, { size: '18px' })) : (jsxRuntime.jsx(material.Tooltip, { title: 'Remove', children: jsxRuntime.jsx(material.IconButton, { color: 'error', sx: { p: 0 }, onClick: props.handleRemove, children: jsxRuntime.jsx(DeleteIcon, {}) }) })) })] }));
|
|
25943
25963
|
};
|
|
25944
25964
|
|
|
25945
|
-
const VisuallyHiddenInput = material.styled(
|
|
25946
|
-
clipPath:
|
|
25965
|
+
const VisuallyHiddenInput = material.styled("input")({
|
|
25966
|
+
clipPath: "inset(50%)",
|
|
25947
25967
|
height: 1,
|
|
25948
|
-
overflow:
|
|
25949
|
-
position:
|
|
25968
|
+
overflow: "hidden",
|
|
25969
|
+
position: "absolute",
|
|
25950
25970
|
bottom: 0,
|
|
25951
25971
|
left: 0,
|
|
25952
|
-
whiteSpace:
|
|
25972
|
+
whiteSpace: "nowrap",
|
|
25953
25973
|
width: 1,
|
|
25954
25974
|
});
|
|
25955
25975
|
const FileUploadBox = (props) => {
|
|
@@ -25960,68 +25980,76 @@ const FileUploadBox = (props) => {
|
|
|
25960
25980
|
const [removerCSV, { isLoading: removerLoading }] = api.useRemoverCSVMutation();
|
|
25961
25981
|
const Dropzone = ({ onChange, value }) => {
|
|
25962
25982
|
const onDrop = React.useCallback((acceptedFiles) => {
|
|
25963
|
-
acceptedFiles.map(file => {
|
|
25964
|
-
const data = formDataForm({ });
|
|
25965
|
-
validarCSV({
|
|
25983
|
+
acceptedFiles.map((file) => {
|
|
25984
|
+
const data = formDataForm({ submitData: { archivo: file } });
|
|
25985
|
+
validarCSV({
|
|
25986
|
+
endpoint: props.csvProps.endpoint || "",
|
|
25987
|
+
data: data,
|
|
25988
|
+
custom: props.csvProps.custom,
|
|
25989
|
+
})
|
|
25990
|
+
.unwrap()
|
|
25966
25991
|
.then((response) => {
|
|
25967
|
-
onChange(
|
|
25992
|
+
onChange("archivo" in response ? response.archivo : acceptedFiles[0]);
|
|
25968
25993
|
setFile(acceptedFiles[0]);
|
|
25969
25994
|
props.setValid(true);
|
|
25970
25995
|
})
|
|
25971
25996
|
.catch((e) => {
|
|
25972
|
-
const columnas_inv = lodash.get(e.data,
|
|
25997
|
+
const columnas_inv = lodash.get(e.data, "columnas_invalidas");
|
|
25973
25998
|
if (columnas_inv)
|
|
25974
|
-
notifications.show(columnas_inv, { severity:
|
|
25999
|
+
notifications.show(columnas_inv, { severity: "error" });
|
|
25975
26000
|
props.setValid(false);
|
|
25976
26001
|
});
|
|
25977
26002
|
});
|
|
25978
26003
|
}, []);
|
|
25979
26004
|
const onDropRejected = React.useCallback(() => {
|
|
25980
|
-
notifications.show(
|
|
26005
|
+
notifications.show("Tipo de archivo inválido. Solo se aceptan CSVs.", {
|
|
26006
|
+
severity: "error",
|
|
26007
|
+
});
|
|
25981
26008
|
}, []);
|
|
25982
|
-
const { getRootProps, getInputProps, isDragActive
|
|
26009
|
+
const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone({
|
|
25983
26010
|
onDrop,
|
|
25984
26011
|
onDropRejected,
|
|
25985
26012
|
accept: {
|
|
25986
|
-
|
|
25987
|
-
|
|
26013
|
+
"text/csv": [".csv"],
|
|
26014
|
+
"application/vnd.ms-excel": [".csv"],
|
|
25988
26015
|
},
|
|
25989
26016
|
maxFiles: 1,
|
|
25990
26017
|
multiple: false,
|
|
25991
26018
|
});
|
|
25992
26019
|
const handleRemove = () => {
|
|
25993
|
-
if (typeof value ==
|
|
26020
|
+
if (typeof value == "number") {
|
|
25994
26021
|
removerCSV({ id: value });
|
|
25995
26022
|
}
|
|
25996
26023
|
onChange(null);
|
|
25997
26024
|
setFile(null);
|
|
25998
26025
|
};
|
|
25999
|
-
return (jsxRuntime.jsx(Box, { width: 1, children: jsxRuntime.jsxs(material.Stack, { spacing: 2, children: [
|
|
26000
|
-
|
|
26001
|
-
|
|
26002
|
-
|
|
26003
|
-
|
|
26004
|
-
|
|
26005
|
-
|
|
26006
|
-
|
|
26007
|
-
|
|
26008
|
-
|
|
26009
|
-
|
|
26010
|
-
|
|
26011
|
-
|
|
26012
|
-
})] }) }));
|
|
26026
|
+
return (jsxRuntime.jsx(Box, { width: 1, children: jsxRuntime.jsxs(material.Stack, { spacing: 2, children: [!file && !isLoading && (jsxRuntime.jsxs(Box, { component: "div", width: 1, display: "flex", justifyContent: "center", alignItems: "center", border: "1.5px dashed", borderRadius: "12px", py: 4, px: 2, borderColor: colors.grey[800], bgcolor: colors.grey[50], ...getRootProps(), children: [jsxRuntime.jsx(VisuallyHiddenInput, { id: "file-upload", type: "file", ...getInputProps() }), jsxRuntime.jsx(FileUploadIcon, { sx: {
|
|
26027
|
+
color: colors.grey[800],
|
|
26028
|
+
pr: 1,
|
|
26029
|
+
} }), jsxRuntime.jsx(Typography, { variant: "body2", sx: { color: colors.grey[800] }, children: isDragActive
|
|
26030
|
+
? "Soltar archivo aquí."
|
|
26031
|
+
: "Arrastra un archivo aquí o haz clic para seleccionar uno." })] })), isLoading && (jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(material.LinearProgress, { sx: { height: 5 } }) })), file && (jsxRuntime.jsx(FileBox, { file: file, handleRemove: handleRemove, loadingRemove: removerLoading })), error &&
|
|
26032
|
+
"data" in error &&
|
|
26033
|
+
Object.keys(error.data).map((row) => {
|
|
26034
|
+
if (typeof error.data[row] == "object") {
|
|
26035
|
+
return jsxRuntime.jsx(RowErrors, { row: row, data: error.data }, row);
|
|
26036
|
+
}
|
|
26037
|
+
return null;
|
|
26038
|
+
})] }) }));
|
|
26013
26039
|
};
|
|
26014
26040
|
return (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value } }) => {
|
|
26015
|
-
return
|
|
26041
|
+
return jsxRuntime.jsx(Dropzone, { onChange: onChange, value: value });
|
|
26016
26042
|
} }));
|
|
26017
26043
|
};
|
|
26018
26044
|
|
|
26019
26045
|
const schema = zod.z.object({
|
|
26020
|
-
archivo: zod.z.any()
|
|
26046
|
+
archivo: zod.z.any(),
|
|
26021
26047
|
});
|
|
26022
26048
|
const CSVUpload = (props) => {
|
|
26023
26049
|
const api = useAPI();
|
|
26024
26050
|
const notifications = core.useNotifications();
|
|
26051
|
+
const { pathname } = reactRouterDom.useLocation();
|
|
26052
|
+
const endpoint = props.data?.endpoint || pathname;
|
|
26025
26053
|
const [valid, setValid] = React.useState(false);
|
|
26026
26054
|
const defaultValues = {
|
|
26027
26055
|
archivo: null,
|
|
@@ -26030,29 +26058,30 @@ const CSVUpload = (props) => {
|
|
|
26030
26058
|
resolver: zod$1.zodResolver(schema),
|
|
26031
26059
|
defaultValues: defaultValues,
|
|
26032
26060
|
});
|
|
26033
|
-
const archivo = form.watch(
|
|
26061
|
+
const archivo = form.watch("archivo");
|
|
26034
26062
|
const [subirCSV, { isLoading }] = api.useSubirCSVMutation();
|
|
26035
26063
|
const handleClose = () => {
|
|
26036
26064
|
props.drawerToggle();
|
|
26037
26065
|
form.reset();
|
|
26038
26066
|
};
|
|
26039
|
-
const tag = React.useMemo(() =>
|
|
26067
|
+
const tag = React.useMemo(() => endpoint.split("/").at(-1), [endpoint]);
|
|
26040
26068
|
const onSubmitHandler = (submitData) => {
|
|
26041
|
-
const data = formDataForm(submitData);
|
|
26042
|
-
subirCSV({ endpoint
|
|
26069
|
+
const data = formDataForm({ submitData });
|
|
26070
|
+
subirCSV({ endpoint, tagType: tag, data, custom: props.data?.custom })
|
|
26071
|
+
.unwrap()
|
|
26043
26072
|
.then((response) => {
|
|
26044
26073
|
if (props.postAction)
|
|
26045
26074
|
props.postAction(response);
|
|
26046
26075
|
handleClose();
|
|
26047
|
-
notifications.show(
|
|
26076
|
+
notifications.show("Archivo subido exitosamente!", { severity: "success" });
|
|
26048
26077
|
})
|
|
26049
26078
|
.catch(() => {
|
|
26050
|
-
notifications.show(
|
|
26079
|
+
notifications.show("Error!", { severity: "error" });
|
|
26051
26080
|
});
|
|
26052
26081
|
};
|
|
26053
26082
|
const onError = (errors) => {
|
|
26054
26083
|
console.log(errors);
|
|
26055
|
-
notifications.show(`Error en: ${Object.keys(errors).join(
|
|
26084
|
+
notifications.show(`Error en: ${Object.keys(errors).join(", ")}!`, { severity: "error" });
|
|
26056
26085
|
};
|
|
26057
26086
|
const handleDownload = () => {
|
|
26058
26087
|
const link = document.createElement("a");
|
|
@@ -26060,7 +26089,7 @@ const CSVUpload = (props) => {
|
|
|
26060
26089
|
link.href = `/plantillas/plantilla_${tag}.xlsx`;
|
|
26061
26090
|
link.click();
|
|
26062
26091
|
};
|
|
26063
|
-
return (jsxRuntime.jsxs(MainDrawer, { open: props.open, drawerToggle: handleClose, title: props.data?.title ||
|
|
26092
|
+
return (jsxRuntime.jsxs(MainDrawer, { open: props.open, drawerToggle: handleClose, title: props.data?.title || "CSV", slots: {
|
|
26064
26093
|
button: (jsxRuntime.jsx(SaveCancelButton, { slotProps: {
|
|
26065
26094
|
saveBtn: {
|
|
26066
26095
|
loading: isLoading,
|
|
@@ -26068,11 +26097,11 @@ const CSVUpload = (props) => {
|
|
|
26068
26097
|
},
|
|
26069
26098
|
cancelBtn: {
|
|
26070
26099
|
onClick: handleClose,
|
|
26071
|
-
}
|
|
26072
|
-
} }))
|
|
26073
|
-
}, children: [jsxRuntime.jsxs(material.Box, { px: 2, py: 3, bgcolor: colors.grey[50], borderRadius:
|
|
26074
|
-
minWidth: 120
|
|
26075
|
-
}, children: "Descargar" })] })] }), jsxRuntime.jsx(material.Box, { id:
|
|
26100
|
+
},
|
|
26101
|
+
} })),
|
|
26102
|
+
}, children: [jsxRuntime.jsxs(material.Box, { px: 2, py: 3, bgcolor: colors.grey[50], borderRadius: "12px", children: [jsxRuntime.jsx(material.Typography, { fontWeight: "bold", children: "Archivo de Muestra" }), jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 2, children: [jsxRuntime.jsx(material.Typography, { variant: "body2", children: "Puede descargar el ejemplo adjunto y utilizarlo como punto de partida para su propio archivo." }), jsxRuntime.jsx(material.Button, { variant: "contained", startIcon: jsxRuntime.jsx(DownloadIcon, {}), onClick: handleDownload, sx: {
|
|
26103
|
+
minWidth: 120,
|
|
26104
|
+
}, children: "Descargar" })] })] }), jsxRuntime.jsx(material.Box, { id: "formulario", component: "form", width: 1, autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler, onError), children: jsxRuntime.jsx(FileUploadBox, { name: "archivo", control: form.control, setValid: setValid, csvProps: props.data }) })] }));
|
|
26076
26105
|
};
|
|
26077
26106
|
|
|
26078
26107
|
const mergeSettings = (baseSettings, mergingSettings) => {
|
|
@@ -26696,7 +26725,6 @@ const StyledMenu = material.styled((props) => (jsxRuntime.jsx(material.Menu, { e
|
|
|
26696
26725
|
}));
|
|
26697
26726
|
|
|
26698
26727
|
const CreateButtonWithMenuOptions = (props) => {
|
|
26699
|
-
// const permission = useHasPermission_v2(`${props.permission}.add`);
|
|
26700
26728
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
26701
26729
|
const open = Boolean(anchorEl);
|
|
26702
26730
|
const handleClick = () => {
|
|
@@ -26712,7 +26740,8 @@ const CreateButtonWithMenuOptions = (props) => {
|
|
|
26712
26740
|
const handleToggleClose = () => {
|
|
26713
26741
|
setCSV({ open: false });
|
|
26714
26742
|
};
|
|
26715
|
-
|
|
26743
|
+
if (!props.permission)
|
|
26744
|
+
return null;
|
|
26716
26745
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CreateButtonBase, { open: open, handleClick: handleClick }), jsxRuntime.jsxs(StyledMenu, { id: 'create-menu', MenuListProps: {
|
|
26717
26746
|
'aria-labelledby': 'create-menu-button',
|
|
26718
26747
|
}, anchorEl: anchorEl, open: open, onClose: handleClose, children: [props.csv_upload?.enable && ([
|
|
@@ -27132,37 +27161,33 @@ const FiltersButton = (props) => {
|
|
|
27132
27161
|
};
|
|
27133
27162
|
|
|
27134
27163
|
const ExportCSV = (props) => {
|
|
27135
|
-
|
|
27136
|
-
|
|
27137
|
-
|
|
27138
|
-
|
|
27164
|
+
const { pathname } = reactRouterDom.useLocation();
|
|
27165
|
+
const endpoint = props.slots?.endpoint || pathname;
|
|
27166
|
+
const notifications = core.useNotifications();
|
|
27167
|
+
const api = useAPI();
|
|
27168
|
+
const [descargarCSV, { isLoading }] = api.useLazyDescargarCSVQuery();
|
|
27139
27169
|
const handleClick = () => {
|
|
27140
27170
|
const extraItems = { variant: props.slots?.variant };
|
|
27141
27171
|
if (props.rowSelectionModel.ids.size > 0)
|
|
27142
27172
|
extraItems[`${props.slots?.column_key || 'id'}__in`] = Array.from(props.rowSelectionModel.ids).join(',');
|
|
27143
|
-
|
|
27144
|
-
|
|
27145
|
-
|
|
27146
|
-
|
|
27147
|
-
|
|
27148
|
-
|
|
27149
|
-
|
|
27150
|
-
|
|
27151
|
-
|
|
27152
|
-
|
|
27153
|
-
|
|
27154
|
-
|
|
27155
|
-
|
|
27156
|
-
|
|
27157
|
-
|
|
27158
|
-
|
|
27159
|
-
// })
|
|
27160
|
-
// .catch((error) => {
|
|
27161
|
-
// console.log(error)
|
|
27162
|
-
// notifications.show('Error al descargar CSV.', {severity: 'error'});
|
|
27163
|
-
// })
|
|
27173
|
+
const filters = lodash.merge({}, lodash.omit(props.filterModel, lodash.map(props.ignore?.filters, function (filter) { return `items.${filter}`; }) || []), { items: extraItems });
|
|
27174
|
+
descargarCSV({
|
|
27175
|
+
endpoint: endpoint, filterModel: filters, sortModel: props.sortModel, ignoreSort: props.ignore?.sort,
|
|
27176
|
+
}).unwrap()
|
|
27177
|
+
.then((response) => {
|
|
27178
|
+
const file = document.createElement("a");
|
|
27179
|
+
file.href = response.file;
|
|
27180
|
+
file.download = response.filename;
|
|
27181
|
+
file.click();
|
|
27182
|
+
notifications.show('CSV descargado!', { severity: 'success' });
|
|
27183
|
+
props.handleClick();
|
|
27184
|
+
})
|
|
27185
|
+
.catch((error) => {
|
|
27186
|
+
console.log(error);
|
|
27187
|
+
notifications.show('Error al descargar CSV.', { severity: 'error' });
|
|
27188
|
+
});
|
|
27164
27189
|
};
|
|
27165
|
-
return (jsxRuntime.jsx(MenuItemWithLoading, { handleClick: handleClick, isLoading:
|
|
27190
|
+
return (jsxRuntime.jsx(MenuItemWithLoading, { handleClick: handleClick, isLoading: isLoading, disabled: props.disabledWithoutSelection && !props.rowSelectionModel.ids.size, children: props.slots?.title || 'Descargar como CSV' }, 'export-dg-csv'));
|
|
27166
27191
|
};
|
|
27167
27192
|
|
|
27168
27193
|
const ExportButton = (props) => {
|
|
@@ -27182,11 +27207,10 @@ const ExportButton = (props) => {
|
|
|
27182
27207
|
handleClick: () => setExportMenuOpen(false),
|
|
27183
27208
|
filterModel: props.filterModel,
|
|
27184
27209
|
sortModel: props.sortModel,
|
|
27210
|
+
rowSelectionModel: props.rowSelectionModel,
|
|
27185
27211
|
csvExport: {
|
|
27186
|
-
rowSelectionModel: props.rowSelectionModel,
|
|
27187
27212
|
...csvExport,
|
|
27188
27213
|
},
|
|
27189
|
-
endpoint: props.csvProps?.endpoint,
|
|
27190
27214
|
...remainingProps,
|
|
27191
27215
|
}));
|
|
27192
27216
|
})] })] }));
|
|
@@ -27588,14 +27612,20 @@ const Base = (props) => {
|
|
|
27588
27612
|
setFilterModel: setFilterModel,
|
|
27589
27613
|
}));
|
|
27590
27614
|
// ========================= || PAGINADO || ========================= //
|
|
27591
|
-
const [paginationModel, setPaginationModel] = React.useState({
|
|
27615
|
+
const [paginationModel, setPaginationModel] = React.useState({
|
|
27616
|
+
page: 0,
|
|
27617
|
+
pageSize: 50,
|
|
27618
|
+
});
|
|
27592
27619
|
// ========================= || ORDENADO || ========================= //
|
|
27593
27620
|
const [sortModel, setSortModel] = React.useState([]);
|
|
27594
27621
|
// ========================= || FILTRADO || ========================= //
|
|
27595
|
-
const [filterModel, setFilterModel] = React.useState({
|
|
27622
|
+
const [filterModel, setFilterModel] = React.useState({
|
|
27623
|
+
items: {},
|
|
27624
|
+
quickFilterValues: "",
|
|
27625
|
+
});
|
|
27596
27626
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27597
27627
|
const setQuickSearchValue = React.useCallback(lodash.debounce((quickSearch) => {
|
|
27598
|
-
setFilterModel(prevState => ({ ...prevState, quickFilterValues: quickSearch }));
|
|
27628
|
+
setFilterModel((prevState) => ({ ...prevState, quickFilterValues: quickSearch }));
|
|
27599
27629
|
}, 500), []);
|
|
27600
27630
|
// ========================= || COLUMNAS || ========================= //
|
|
27601
27631
|
const getTogglableColumns = (columns) => {
|
|
@@ -27603,7 +27633,7 @@ const Base = (props) => {
|
|
|
27603
27633
|
return [];
|
|
27604
27634
|
return columns
|
|
27605
27635
|
.filter((column) => {
|
|
27606
|
-
return ![
|
|
27636
|
+
return !["__check__", "actions"].includes(column.field);
|
|
27607
27637
|
})
|
|
27608
27638
|
.map((column) => column.field);
|
|
27609
27639
|
};
|
|
@@ -27615,7 +27645,7 @@ const Base = (props) => {
|
|
|
27615
27645
|
// ========================= || LAZY QUERY || ========================= //
|
|
27616
27646
|
const [query, { data, isLoading, isFetching, isError, isUninitialized }] = props.api.data.query(props.api.data.options || {});
|
|
27617
27647
|
// ========================= || INITIAL STATE || ========================= //
|
|
27618
|
-
const localStoreName = React.useMemo(() => `${props.pathname}${props.slotProps?.tab ? `_${props.slotProps?.tab}` :
|
|
27648
|
+
const localStoreName = React.useMemo(() => `${props.pathname}${props.slotProps?.tab ? `_${props.slotProps?.tab}` : ""}_DG`, [props.pathname, props.slotProps?.tab]);
|
|
27619
27649
|
const internalFilterRef = React.useRef(filterModel);
|
|
27620
27650
|
const filterRef = props.slotProps?.filtersRef || internalFilterRef;
|
|
27621
27651
|
React.useEffect(() => {
|
|
@@ -27625,28 +27655,30 @@ const Base = (props) => {
|
|
|
27625
27655
|
const saveSnapshot = React.useCallback(() => {
|
|
27626
27656
|
if (apiRef?.current?.exportState && localStorage && !props.slotProps?.dontSaveState) {
|
|
27627
27657
|
const currentState = apiRef.current.exportState();
|
|
27628
|
-
lodash.set(currentState,
|
|
27658
|
+
lodash.set(currentState, "filters.filterModel", filterRef.current);
|
|
27629
27659
|
setWithExpiry(localStoreName, currentState, 86400000);
|
|
27630
27660
|
}
|
|
27631
27661
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27632
27662
|
}, [apiRef, props.pathname]);
|
|
27633
27663
|
React.useLayoutEffect(() => {
|
|
27634
27664
|
const stateFromLocalStorage = getWithExpiry(localStoreName);
|
|
27635
|
-
const init = stateFromLocalStorage
|
|
27636
|
-
|
|
27637
|
-
|
|
27638
|
-
const
|
|
27665
|
+
const init = stateFromLocalStorage
|
|
27666
|
+
? stateFromLocalStorage
|
|
27667
|
+
: lodash.get(props, "dataGridProps.initialState", {});
|
|
27668
|
+
const pagination = lodash.get(init, "pagination.paginationModel", paginationModel);
|
|
27669
|
+
const sorting = lodash.get(init, "sorting.sortModel", sortModel);
|
|
27670
|
+
const filters = lodash.get(init, "filters.filterModel", filterModel);
|
|
27639
27671
|
setPaginationModel(pagination);
|
|
27640
27672
|
setSortModel(sorting);
|
|
27641
27673
|
setFilterModel(filters);
|
|
27642
|
-
setColumnVisibilityModel(lodash.get(init,
|
|
27674
|
+
setColumnVisibilityModel(lodash.get(init, "columns.columnVisibilityModel", columnVisibilityModel));
|
|
27643
27675
|
// handle refresh and navigating away/refreshing
|
|
27644
|
-
window.addEventListener(
|
|
27676
|
+
window.addEventListener("beforeunload", saveSnapshot);
|
|
27645
27677
|
// console.log(getQueryArgs(pagination, sorting, filters, props.api.data.args))
|
|
27646
27678
|
query(getQueryArgs(pagination, sorting, filters, props.api.data.args));
|
|
27647
27679
|
return () => {
|
|
27648
27680
|
// in case of an SPA remove the event-listener
|
|
27649
|
-
window.removeEventListener(
|
|
27681
|
+
window.removeEventListener("beforeunload", saveSnapshot);
|
|
27650
27682
|
saveSnapshot();
|
|
27651
27683
|
};
|
|
27652
27684
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -27665,8 +27697,8 @@ const Base = (props) => {
|
|
|
27665
27697
|
};
|
|
27666
27698
|
// ========================= || SELECCIÓN || ========================= //
|
|
27667
27699
|
const [rowSelectionModel, setRowSelectionModel] = React.useState({
|
|
27668
|
-
type:
|
|
27669
|
-
ids: new Set()
|
|
27700
|
+
type: "include",
|
|
27701
|
+
ids: new Set(),
|
|
27670
27702
|
});
|
|
27671
27703
|
const handleRowSelectionModelChange = (newSelection) => {
|
|
27672
27704
|
setRowSelectionModel(newSelection);
|
|
@@ -27684,13 +27716,13 @@ const Base = (props) => {
|
|
|
27684
27716
|
const handleRowClick = ({ id }, event) => {
|
|
27685
27717
|
const link_to = `${props.slotProps?.navigation != undefined ? props.slotProps?.navigation : props.pathname}/${id}`;
|
|
27686
27718
|
if (event.ctrlKey) {
|
|
27687
|
-
const newTab = document.createElement(
|
|
27719
|
+
const newTab = document.createElement("a");
|
|
27688
27720
|
newTab.href = link_to;
|
|
27689
|
-
newTab.target =
|
|
27721
|
+
newTab.target = "_blank";
|
|
27690
27722
|
newTab.click();
|
|
27691
27723
|
}
|
|
27692
27724
|
else {
|
|
27693
|
-
navigate(`${props.slotProps?.navigation ? props.slotProps?.navigation : props.pathname}/${id}`);
|
|
27725
|
+
navigate(`${props.slotProps?.navigation || props.slotProps?.navigation === "" ? props.slotProps?.navigation : props.pathname}/${id}`);
|
|
27694
27726
|
}
|
|
27695
27727
|
};
|
|
27696
27728
|
const handleRowEditStop = (params, event) => {
|
|
@@ -27709,13 +27741,13 @@ const Base = (props) => {
|
|
|
27709
27741
|
},
|
|
27710
27742
|
slotProps: {
|
|
27711
27743
|
baseCheckbox: {
|
|
27712
|
-
size:
|
|
27744
|
+
size: "small",
|
|
27713
27745
|
},
|
|
27714
27746
|
toolbar: {
|
|
27715
27747
|
filters: {
|
|
27716
27748
|
filterModel: filterModel,
|
|
27717
27749
|
setFilterModel: setFilterModel,
|
|
27718
|
-
setQuickSearchValue: setQuickSearchValue
|
|
27750
|
+
setQuickSearchValue: setQuickSearchValue,
|
|
27719
27751
|
},
|
|
27720
27752
|
protectFilters: props.api.data.protectFilters,
|
|
27721
27753
|
columnsFilter: props.slotProps?.columnsFilter,
|
|
@@ -27726,27 +27758,27 @@ const Base = (props) => {
|
|
|
27726
27758
|
buttons: {
|
|
27727
27759
|
refresh: {
|
|
27728
27760
|
refetch: handleRefetch,
|
|
27729
|
-
}
|
|
27730
|
-
}
|
|
27761
|
+
},
|
|
27762
|
+
},
|
|
27731
27763
|
},
|
|
27732
27764
|
columnsManagement: {
|
|
27733
27765
|
getTogglableColumns: getTogglableColumns,
|
|
27734
27766
|
},
|
|
27735
27767
|
},
|
|
27736
27768
|
}, props.dataGridProps);
|
|
27737
|
-
const renderDataGrid = ({ dataGridProps: renderDataGridProps }) => {
|
|
27769
|
+
const renderDataGrid = ({ dataGridProps: renderDataGridProps, }) => {
|
|
27738
27770
|
// console.log(dataGridProps)
|
|
27739
27771
|
return (jsxRuntime.jsx(material.Box, { width: 1, minHeight: 300, height: 1,
|
|
27740
27772
|
// maxHeight={'calc(100% - 30px)'}
|
|
27741
|
-
display:
|
|
27773
|
+
display: "flex", flexDirection: "column", pb: 0, children: jsxRuntime.jsx(material.NoSsr, { children: jsxRuntime.jsx(xDataGrid.DataGrid, { apiRef: apiRef, rows: data?.results || [], loading: lodash.some(lodash.get(renderDataGridProps, "loadingParams", []), function (x) {
|
|
27742
27774
|
return x;
|
|
27743
27775
|
}),
|
|
27744
27776
|
// paginado //
|
|
27745
|
-
pagination: true, paginationMode:
|
|
27777
|
+
pagination: true, paginationMode: "server", paginationModel: paginationModel, onPaginationModelChange: setPaginationModel, pageSizeOptions: [50, 100, { value: -1, label: "Todos" }],
|
|
27746
27778
|
// ordenado
|
|
27747
|
-
sortingMode:
|
|
27779
|
+
sortingMode: "server", sortModel: sortModel, onSortModelChange: setSortModel,
|
|
27748
27780
|
// filtrado
|
|
27749
|
-
filterMode:
|
|
27781
|
+
filterMode: "server",
|
|
27750
27782
|
// onFilterModelChange={handleFilterChange}
|
|
27751
27783
|
disableColumnFilter: true, showToolbar: true,
|
|
27752
27784
|
// selection
|
|
@@ -27764,13 +27796,13 @@ const Base = (props) => {
|
|
|
27764
27796
|
// row count
|
|
27765
27797
|
rowCount: rowCount,
|
|
27766
27798
|
// settings
|
|
27767
|
-
density:
|
|
27799
|
+
density: "compact",
|
|
27768
27800
|
// striping
|
|
27769
|
-
getRowClassName: (params) => params.indexRelativeToCurrentPage % 2 === 0 ?
|
|
27770
|
-
columnHeaderSortIconLabel:
|
|
27771
|
-
columnMenuSortAsc:
|
|
27772
|
-
columnMenuSortDesc:
|
|
27773
|
-
columnMenuLabel:
|
|
27801
|
+
getRowClassName: (params) => params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd", localeText: {
|
|
27802
|
+
columnHeaderSortIconLabel: "Ordenar",
|
|
27803
|
+
columnMenuSortAsc: "Ordenar de menor a mayor",
|
|
27804
|
+
columnMenuSortDesc: "Ordenar de mayor a menor",
|
|
27805
|
+
columnMenuLabel: "Menú",
|
|
27774
27806
|
}, ...renderDataGridProps }) }) }));
|
|
27775
27807
|
};
|
|
27776
27808
|
// ========================= || RETURN || ========================= //
|
|
@@ -27784,7 +27816,7 @@ const Base = (props) => {
|
|
|
27784
27816
|
pathname: props.pathname,
|
|
27785
27817
|
navigation: props.slotProps?.navigation,
|
|
27786
27818
|
...renderProps,
|
|
27787
|
-
...props.api.create
|
|
27819
|
+
...props.api.create,
|
|
27788
27820
|
};
|
|
27789
27821
|
renderFunction = CreateGridWrapper;
|
|
27790
27822
|
}
|
|
@@ -27795,7 +27827,7 @@ const Base = (props) => {
|
|
|
27795
27827
|
renderFunctionProps: renderProps,
|
|
27796
27828
|
dataGridProps: dataGridProps,
|
|
27797
27829
|
baseGridRef: apiRef,
|
|
27798
|
-
...props.api.edit
|
|
27830
|
+
...props.api.edit,
|
|
27799
27831
|
};
|
|
27800
27832
|
renderFunction = EditGridWrapper;
|
|
27801
27833
|
}
|
|
@@ -27805,7 +27837,7 @@ const Base = (props) => {
|
|
|
27805
27837
|
renderFunction: renderFunction,
|
|
27806
27838
|
renderFunctionProps: renderProps,
|
|
27807
27839
|
dataGridProps: dataGridProps,
|
|
27808
|
-
...props.api.delete
|
|
27840
|
+
...props.api.delete,
|
|
27809
27841
|
});
|
|
27810
27842
|
}
|
|
27811
27843
|
return renderFunction(renderProps);
|
|
@@ -28329,15 +28361,12 @@ function DetailPage(props) {
|
|
|
28329
28361
|
else {
|
|
28330
28362
|
console.log(error);
|
|
28331
28363
|
setErrors(form, error);
|
|
28332
|
-
notifications.show((
|
|
28333
|
-
error.data.
|
|
28364
|
+
notifications.show((error.data.detail ?
|
|
28365
|
+
error.data.detail.join(', ') :
|
|
28334
28366
|
`Error ${props.pageType == 'edit' ? 'actualizando' : 'creando'} ${props.object.name}!`), { severity: 'error' });
|
|
28335
28367
|
}
|
|
28336
28368
|
});
|
|
28337
28369
|
};
|
|
28338
|
-
const onError = (errors) => {
|
|
28339
|
-
console.log(errors);
|
|
28340
|
-
};
|
|
28341
28370
|
// ==============================|| RENDER SECTIONS ||============================== //
|
|
28342
28371
|
const renderContent = () => {
|
|
28343
28372
|
let displayed_sections = -1;
|
|
@@ -28393,7 +28422,7 @@ function DetailPage(props) {
|
|
|
28393
28422
|
}
|
|
28394
28423
|
};
|
|
28395
28424
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContentLayout, { button: renderButton(), badge: props.pageType == 'detail' && badgeInfo &&
|
|
28396
|
-
jsxRuntime.jsx(StatusBadge, { title: badgeInfo['label'], severity: badgeInfo['value'] }), children: jsxRuntime.jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: jsxRuntime.jsx(material.Box, { id: 'formulario', component: 'form', autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler
|
|
28425
|
+
jsxRuntime.jsx(StatusBadge, { title: badgeInfo['label'], severity: badgeInfo['value'] }), children: jsxRuntime.jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: jsxRuntime.jsx(material.Box, { id: 'formulario', component: 'form', autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler), width: '100%', position: 'relative', children: renderContent() }) }) }) }), renderPostAction()] }));
|
|
28397
28426
|
}
|
|
28398
28427
|
|
|
28399
28428
|
const ListPage = (props) => {
|
|
@@ -28712,6 +28741,7 @@ exports.DeleteButton = DeleteButton;
|
|
|
28712
28741
|
exports.DeleteConfirmationDialog = DeleteConfirmationDialog;
|
|
28713
28742
|
exports.DetailPage = DetailPage;
|
|
28714
28743
|
exports.EditButton = EditButton;
|
|
28744
|
+
exports.ExportCSV = ExportCSV;
|
|
28715
28745
|
exports.HistorialDrawer = HistorialDrawer;
|
|
28716
28746
|
exports.ListPage = ListPage;
|
|
28717
28747
|
exports.Loadable = Loadable;
|