@acvl/frontend-components 0.0.24 → 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 +175 -135
- 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 -1
- package/dist/esm/index.js +175 -135
- 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 -1
- package/dist/index.d.ts +20 -5
- 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,16 +25810,16 @@ 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
25819
|
const setErrors = (form, error) => {
|
|
25792
|
-
if (
|
|
25820
|
+
if ("invalid_params" in error.data) {
|
|
25793
25821
|
Object.values(error.data.invalid_params).forEach((entry) => {
|
|
25794
|
-
form.setError(entry.name, { message: entry.reason.join(
|
|
25822
|
+
form.setError(entry.name, { message: entry.reason.join(", ") });
|
|
25795
25823
|
});
|
|
25796
25824
|
}
|
|
25797
25825
|
};
|
|
@@ -25934,14 +25962,14 @@ const FileBox = (props) => {
|
|
|
25934
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, {}) }) })) })] }));
|
|
25935
25963
|
};
|
|
25936
25964
|
|
|
25937
|
-
const VisuallyHiddenInput = material.styled(
|
|
25938
|
-
clipPath:
|
|
25965
|
+
const VisuallyHiddenInput = material.styled("input")({
|
|
25966
|
+
clipPath: "inset(50%)",
|
|
25939
25967
|
height: 1,
|
|
25940
|
-
overflow:
|
|
25941
|
-
position:
|
|
25968
|
+
overflow: "hidden",
|
|
25969
|
+
position: "absolute",
|
|
25942
25970
|
bottom: 0,
|
|
25943
25971
|
left: 0,
|
|
25944
|
-
whiteSpace:
|
|
25972
|
+
whiteSpace: "nowrap",
|
|
25945
25973
|
width: 1,
|
|
25946
25974
|
});
|
|
25947
25975
|
const FileUploadBox = (props) => {
|
|
@@ -25952,68 +25980,76 @@ const FileUploadBox = (props) => {
|
|
|
25952
25980
|
const [removerCSV, { isLoading: removerLoading }] = api.useRemoverCSVMutation();
|
|
25953
25981
|
const Dropzone = ({ onChange, value }) => {
|
|
25954
25982
|
const onDrop = React.useCallback((acceptedFiles) => {
|
|
25955
|
-
acceptedFiles.map(file => {
|
|
25956
|
-
const data = formDataForm({ });
|
|
25957
|
-
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()
|
|
25958
25991
|
.then((response) => {
|
|
25959
|
-
onChange(
|
|
25992
|
+
onChange("archivo" in response ? response.archivo : acceptedFiles[0]);
|
|
25960
25993
|
setFile(acceptedFiles[0]);
|
|
25961
25994
|
props.setValid(true);
|
|
25962
25995
|
})
|
|
25963
25996
|
.catch((e) => {
|
|
25964
|
-
const columnas_inv = lodash.get(e.data,
|
|
25997
|
+
const columnas_inv = lodash.get(e.data, "columnas_invalidas");
|
|
25965
25998
|
if (columnas_inv)
|
|
25966
|
-
notifications.show(columnas_inv, { severity:
|
|
25999
|
+
notifications.show(columnas_inv, { severity: "error" });
|
|
25967
26000
|
props.setValid(false);
|
|
25968
26001
|
});
|
|
25969
26002
|
});
|
|
25970
26003
|
}, []);
|
|
25971
26004
|
const onDropRejected = React.useCallback(() => {
|
|
25972
|
-
notifications.show(
|
|
26005
|
+
notifications.show("Tipo de archivo inválido. Solo se aceptan CSVs.", {
|
|
26006
|
+
severity: "error",
|
|
26007
|
+
});
|
|
25973
26008
|
}, []);
|
|
25974
|
-
const { getRootProps, getInputProps, isDragActive
|
|
26009
|
+
const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone({
|
|
25975
26010
|
onDrop,
|
|
25976
26011
|
onDropRejected,
|
|
25977
26012
|
accept: {
|
|
25978
|
-
|
|
25979
|
-
|
|
26013
|
+
"text/csv": [".csv"],
|
|
26014
|
+
"application/vnd.ms-excel": [".csv"],
|
|
25980
26015
|
},
|
|
25981
26016
|
maxFiles: 1,
|
|
25982
26017
|
multiple: false,
|
|
25983
26018
|
});
|
|
25984
26019
|
const handleRemove = () => {
|
|
25985
|
-
if (typeof value ==
|
|
26020
|
+
if (typeof value == "number") {
|
|
25986
26021
|
removerCSV({ id: value });
|
|
25987
26022
|
}
|
|
25988
26023
|
onChange(null);
|
|
25989
26024
|
setFile(null);
|
|
25990
26025
|
};
|
|
25991
|
-
return (jsxRuntime.jsx(Box, { width: 1, children: jsxRuntime.jsxs(material.Stack, { spacing: 2, children: [
|
|
25992
|
-
|
|
25993
|
-
|
|
25994
|
-
|
|
25995
|
-
|
|
25996
|
-
|
|
25997
|
-
|
|
25998
|
-
|
|
25999
|
-
|
|
26000
|
-
|
|
26001
|
-
|
|
26002
|
-
|
|
26003
|
-
|
|
26004
|
-
})] }) }));
|
|
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
|
+
})] }) }));
|
|
26005
26039
|
};
|
|
26006
26040
|
return (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value } }) => {
|
|
26007
|
-
return
|
|
26041
|
+
return jsxRuntime.jsx(Dropzone, { onChange: onChange, value: value });
|
|
26008
26042
|
} }));
|
|
26009
26043
|
};
|
|
26010
26044
|
|
|
26011
26045
|
const schema = zod.z.object({
|
|
26012
|
-
archivo: zod.z.any()
|
|
26046
|
+
archivo: zod.z.any(),
|
|
26013
26047
|
});
|
|
26014
26048
|
const CSVUpload = (props) => {
|
|
26015
26049
|
const api = useAPI();
|
|
26016
26050
|
const notifications = core.useNotifications();
|
|
26051
|
+
const { pathname } = reactRouterDom.useLocation();
|
|
26052
|
+
const endpoint = props.data?.endpoint || pathname;
|
|
26017
26053
|
const [valid, setValid] = React.useState(false);
|
|
26018
26054
|
const defaultValues = {
|
|
26019
26055
|
archivo: null,
|
|
@@ -26022,29 +26058,30 @@ const CSVUpload = (props) => {
|
|
|
26022
26058
|
resolver: zod$1.zodResolver(schema),
|
|
26023
26059
|
defaultValues: defaultValues,
|
|
26024
26060
|
});
|
|
26025
|
-
const archivo = form.watch(
|
|
26061
|
+
const archivo = form.watch("archivo");
|
|
26026
26062
|
const [subirCSV, { isLoading }] = api.useSubirCSVMutation();
|
|
26027
26063
|
const handleClose = () => {
|
|
26028
26064
|
props.drawerToggle();
|
|
26029
26065
|
form.reset();
|
|
26030
26066
|
};
|
|
26031
|
-
const tag = React.useMemo(() =>
|
|
26067
|
+
const tag = React.useMemo(() => endpoint.split("/").at(-1), [endpoint]);
|
|
26032
26068
|
const onSubmitHandler = (submitData) => {
|
|
26033
|
-
const data = formDataForm(submitData);
|
|
26034
|
-
subirCSV({ endpoint
|
|
26069
|
+
const data = formDataForm({ submitData });
|
|
26070
|
+
subirCSV({ endpoint, tagType: tag, data, custom: props.data?.custom })
|
|
26071
|
+
.unwrap()
|
|
26035
26072
|
.then((response) => {
|
|
26036
26073
|
if (props.postAction)
|
|
26037
26074
|
props.postAction(response);
|
|
26038
26075
|
handleClose();
|
|
26039
|
-
notifications.show(
|
|
26076
|
+
notifications.show("Archivo subido exitosamente!", { severity: "success" });
|
|
26040
26077
|
})
|
|
26041
26078
|
.catch(() => {
|
|
26042
|
-
notifications.show(
|
|
26079
|
+
notifications.show("Error!", { severity: "error" });
|
|
26043
26080
|
});
|
|
26044
26081
|
};
|
|
26045
26082
|
const onError = (errors) => {
|
|
26046
26083
|
console.log(errors);
|
|
26047
|
-
notifications.show(`Error en: ${Object.keys(errors).join(
|
|
26084
|
+
notifications.show(`Error en: ${Object.keys(errors).join(", ")}!`, { severity: "error" });
|
|
26048
26085
|
};
|
|
26049
26086
|
const handleDownload = () => {
|
|
26050
26087
|
const link = document.createElement("a");
|
|
@@ -26052,7 +26089,7 @@ const CSVUpload = (props) => {
|
|
|
26052
26089
|
link.href = `/plantillas/plantilla_${tag}.xlsx`;
|
|
26053
26090
|
link.click();
|
|
26054
26091
|
};
|
|
26055
|
-
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: {
|
|
26056
26093
|
button: (jsxRuntime.jsx(SaveCancelButton, { slotProps: {
|
|
26057
26094
|
saveBtn: {
|
|
26058
26095
|
loading: isLoading,
|
|
@@ -26060,11 +26097,11 @@ const CSVUpload = (props) => {
|
|
|
26060
26097
|
},
|
|
26061
26098
|
cancelBtn: {
|
|
26062
26099
|
onClick: handleClose,
|
|
26063
|
-
}
|
|
26064
|
-
} }))
|
|
26065
|
-
}, children: [jsxRuntime.jsxs(material.Box, { px: 2, py: 3, bgcolor: colors.grey[50], borderRadius:
|
|
26066
|
-
minWidth: 120
|
|
26067
|
-
}, 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 }) })] }));
|
|
26068
26105
|
};
|
|
26069
26106
|
|
|
26070
26107
|
const mergeSettings = (baseSettings, mergingSettings) => {
|
|
@@ -26688,7 +26725,6 @@ const StyledMenu = material.styled((props) => (jsxRuntime.jsx(material.Menu, { e
|
|
|
26688
26725
|
}));
|
|
26689
26726
|
|
|
26690
26727
|
const CreateButtonWithMenuOptions = (props) => {
|
|
26691
|
-
// const permission = useHasPermission_v2(`${props.permission}.add`);
|
|
26692
26728
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
26693
26729
|
const open = Boolean(anchorEl);
|
|
26694
26730
|
const handleClick = () => {
|
|
@@ -26704,7 +26740,8 @@ const CreateButtonWithMenuOptions = (props) => {
|
|
|
26704
26740
|
const handleToggleClose = () => {
|
|
26705
26741
|
setCSV({ open: false });
|
|
26706
26742
|
};
|
|
26707
|
-
|
|
26743
|
+
if (!props.permission)
|
|
26744
|
+
return null;
|
|
26708
26745
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CreateButtonBase, { open: open, handleClick: handleClick }), jsxRuntime.jsxs(StyledMenu, { id: 'create-menu', MenuListProps: {
|
|
26709
26746
|
'aria-labelledby': 'create-menu-button',
|
|
26710
26747
|
}, anchorEl: anchorEl, open: open, onClose: handleClose, children: [props.csv_upload?.enable && ([
|
|
@@ -27124,37 +27161,33 @@ const FiltersButton = (props) => {
|
|
|
27124
27161
|
};
|
|
27125
27162
|
|
|
27126
27163
|
const ExportCSV = (props) => {
|
|
27127
|
-
|
|
27128
|
-
|
|
27129
|
-
|
|
27130
|
-
|
|
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();
|
|
27131
27169
|
const handleClick = () => {
|
|
27132
27170
|
const extraItems = { variant: props.slots?.variant };
|
|
27133
27171
|
if (props.rowSelectionModel.ids.size > 0)
|
|
27134
27172
|
extraItems[`${props.slots?.column_key || 'id'}__in`] = Array.from(props.rowSelectionModel.ids).join(',');
|
|
27135
|
-
|
|
27136
|
-
|
|
27137
|
-
|
|
27138
|
-
|
|
27139
|
-
|
|
27140
|
-
|
|
27141
|
-
|
|
27142
|
-
|
|
27143
|
-
|
|
27144
|
-
|
|
27145
|
-
|
|
27146
|
-
|
|
27147
|
-
|
|
27148
|
-
|
|
27149
|
-
|
|
27150
|
-
|
|
27151
|
-
// })
|
|
27152
|
-
// .catch((error) => {
|
|
27153
|
-
// console.log(error)
|
|
27154
|
-
// notifications.show('Error al descargar CSV.', {severity: 'error'});
|
|
27155
|
-
// })
|
|
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
|
+
});
|
|
27156
27189
|
};
|
|
27157
|
-
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'));
|
|
27158
27191
|
};
|
|
27159
27192
|
|
|
27160
27193
|
const ExportButton = (props) => {
|
|
@@ -27174,11 +27207,10 @@ const ExportButton = (props) => {
|
|
|
27174
27207
|
handleClick: () => setExportMenuOpen(false),
|
|
27175
27208
|
filterModel: props.filterModel,
|
|
27176
27209
|
sortModel: props.sortModel,
|
|
27210
|
+
rowSelectionModel: props.rowSelectionModel,
|
|
27177
27211
|
csvExport: {
|
|
27178
|
-
rowSelectionModel: props.rowSelectionModel,
|
|
27179
27212
|
...csvExport,
|
|
27180
27213
|
},
|
|
27181
|
-
endpoint: props.csvProps?.endpoint,
|
|
27182
27214
|
...remainingProps,
|
|
27183
27215
|
}));
|
|
27184
27216
|
})] })] }));
|
|
@@ -27580,14 +27612,20 @@ const Base = (props) => {
|
|
|
27580
27612
|
setFilterModel: setFilterModel,
|
|
27581
27613
|
}));
|
|
27582
27614
|
// ========================= || PAGINADO || ========================= //
|
|
27583
|
-
const [paginationModel, setPaginationModel] = React.useState({
|
|
27615
|
+
const [paginationModel, setPaginationModel] = React.useState({
|
|
27616
|
+
page: 0,
|
|
27617
|
+
pageSize: 50,
|
|
27618
|
+
});
|
|
27584
27619
|
// ========================= || ORDENADO || ========================= //
|
|
27585
27620
|
const [sortModel, setSortModel] = React.useState([]);
|
|
27586
27621
|
// ========================= || FILTRADO || ========================= //
|
|
27587
|
-
const [filterModel, setFilterModel] = React.useState({
|
|
27622
|
+
const [filterModel, setFilterModel] = React.useState({
|
|
27623
|
+
items: {},
|
|
27624
|
+
quickFilterValues: "",
|
|
27625
|
+
});
|
|
27588
27626
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27589
27627
|
const setQuickSearchValue = React.useCallback(lodash.debounce((quickSearch) => {
|
|
27590
|
-
setFilterModel(prevState => ({ ...prevState, quickFilterValues: quickSearch }));
|
|
27628
|
+
setFilterModel((prevState) => ({ ...prevState, quickFilterValues: quickSearch }));
|
|
27591
27629
|
}, 500), []);
|
|
27592
27630
|
// ========================= || COLUMNAS || ========================= //
|
|
27593
27631
|
const getTogglableColumns = (columns) => {
|
|
@@ -27595,7 +27633,7 @@ const Base = (props) => {
|
|
|
27595
27633
|
return [];
|
|
27596
27634
|
return columns
|
|
27597
27635
|
.filter((column) => {
|
|
27598
|
-
return ![
|
|
27636
|
+
return !["__check__", "actions"].includes(column.field);
|
|
27599
27637
|
})
|
|
27600
27638
|
.map((column) => column.field);
|
|
27601
27639
|
};
|
|
@@ -27607,7 +27645,7 @@ const Base = (props) => {
|
|
|
27607
27645
|
// ========================= || LAZY QUERY || ========================= //
|
|
27608
27646
|
const [query, { data, isLoading, isFetching, isError, isUninitialized }] = props.api.data.query(props.api.data.options || {});
|
|
27609
27647
|
// ========================= || INITIAL STATE || ========================= //
|
|
27610
|
-
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]);
|
|
27611
27649
|
const internalFilterRef = React.useRef(filterModel);
|
|
27612
27650
|
const filterRef = props.slotProps?.filtersRef || internalFilterRef;
|
|
27613
27651
|
React.useEffect(() => {
|
|
@@ -27617,28 +27655,30 @@ const Base = (props) => {
|
|
|
27617
27655
|
const saveSnapshot = React.useCallback(() => {
|
|
27618
27656
|
if (apiRef?.current?.exportState && localStorage && !props.slotProps?.dontSaveState) {
|
|
27619
27657
|
const currentState = apiRef.current.exportState();
|
|
27620
|
-
lodash.set(currentState,
|
|
27658
|
+
lodash.set(currentState, "filters.filterModel", filterRef.current);
|
|
27621
27659
|
setWithExpiry(localStoreName, currentState, 86400000);
|
|
27622
27660
|
}
|
|
27623
27661
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27624
27662
|
}, [apiRef, props.pathname]);
|
|
27625
27663
|
React.useLayoutEffect(() => {
|
|
27626
27664
|
const stateFromLocalStorage = getWithExpiry(localStoreName);
|
|
27627
|
-
const init = stateFromLocalStorage
|
|
27628
|
-
|
|
27629
|
-
|
|
27630
|
-
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);
|
|
27631
27671
|
setPaginationModel(pagination);
|
|
27632
27672
|
setSortModel(sorting);
|
|
27633
27673
|
setFilterModel(filters);
|
|
27634
|
-
setColumnVisibilityModel(lodash.get(init,
|
|
27674
|
+
setColumnVisibilityModel(lodash.get(init, "columns.columnVisibilityModel", columnVisibilityModel));
|
|
27635
27675
|
// handle refresh and navigating away/refreshing
|
|
27636
|
-
window.addEventListener(
|
|
27676
|
+
window.addEventListener("beforeunload", saveSnapshot);
|
|
27637
27677
|
// console.log(getQueryArgs(pagination, sorting, filters, props.api.data.args))
|
|
27638
27678
|
query(getQueryArgs(pagination, sorting, filters, props.api.data.args));
|
|
27639
27679
|
return () => {
|
|
27640
27680
|
// in case of an SPA remove the event-listener
|
|
27641
|
-
window.removeEventListener(
|
|
27681
|
+
window.removeEventListener("beforeunload", saveSnapshot);
|
|
27642
27682
|
saveSnapshot();
|
|
27643
27683
|
};
|
|
27644
27684
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -27657,8 +27697,8 @@ const Base = (props) => {
|
|
|
27657
27697
|
};
|
|
27658
27698
|
// ========================= || SELECCIÓN || ========================= //
|
|
27659
27699
|
const [rowSelectionModel, setRowSelectionModel] = React.useState({
|
|
27660
|
-
type:
|
|
27661
|
-
ids: new Set()
|
|
27700
|
+
type: "include",
|
|
27701
|
+
ids: new Set(),
|
|
27662
27702
|
});
|
|
27663
27703
|
const handleRowSelectionModelChange = (newSelection) => {
|
|
27664
27704
|
setRowSelectionModel(newSelection);
|
|
@@ -27676,13 +27716,13 @@ const Base = (props) => {
|
|
|
27676
27716
|
const handleRowClick = ({ id }, event) => {
|
|
27677
27717
|
const link_to = `${props.slotProps?.navigation != undefined ? props.slotProps?.navigation : props.pathname}/${id}`;
|
|
27678
27718
|
if (event.ctrlKey) {
|
|
27679
|
-
const newTab = document.createElement(
|
|
27719
|
+
const newTab = document.createElement("a");
|
|
27680
27720
|
newTab.href = link_to;
|
|
27681
|
-
newTab.target =
|
|
27721
|
+
newTab.target = "_blank";
|
|
27682
27722
|
newTab.click();
|
|
27683
27723
|
}
|
|
27684
27724
|
else {
|
|
27685
|
-
navigate(`${props.slotProps?.navigation ? props.slotProps?.navigation : props.pathname}/${id}`);
|
|
27725
|
+
navigate(`${props.slotProps?.navigation || props.slotProps?.navigation === "" ? props.slotProps?.navigation : props.pathname}/${id}`);
|
|
27686
27726
|
}
|
|
27687
27727
|
};
|
|
27688
27728
|
const handleRowEditStop = (params, event) => {
|
|
@@ -27701,13 +27741,13 @@ const Base = (props) => {
|
|
|
27701
27741
|
},
|
|
27702
27742
|
slotProps: {
|
|
27703
27743
|
baseCheckbox: {
|
|
27704
|
-
size:
|
|
27744
|
+
size: "small",
|
|
27705
27745
|
},
|
|
27706
27746
|
toolbar: {
|
|
27707
27747
|
filters: {
|
|
27708
27748
|
filterModel: filterModel,
|
|
27709
27749
|
setFilterModel: setFilterModel,
|
|
27710
|
-
setQuickSearchValue: setQuickSearchValue
|
|
27750
|
+
setQuickSearchValue: setQuickSearchValue,
|
|
27711
27751
|
},
|
|
27712
27752
|
protectFilters: props.api.data.protectFilters,
|
|
27713
27753
|
columnsFilter: props.slotProps?.columnsFilter,
|
|
@@ -27718,27 +27758,27 @@ const Base = (props) => {
|
|
|
27718
27758
|
buttons: {
|
|
27719
27759
|
refresh: {
|
|
27720
27760
|
refetch: handleRefetch,
|
|
27721
|
-
}
|
|
27722
|
-
}
|
|
27761
|
+
},
|
|
27762
|
+
},
|
|
27723
27763
|
},
|
|
27724
27764
|
columnsManagement: {
|
|
27725
27765
|
getTogglableColumns: getTogglableColumns,
|
|
27726
27766
|
},
|
|
27727
27767
|
},
|
|
27728
27768
|
}, props.dataGridProps);
|
|
27729
|
-
const renderDataGrid = ({ dataGridProps: renderDataGridProps }) => {
|
|
27769
|
+
const renderDataGrid = ({ dataGridProps: renderDataGridProps, }) => {
|
|
27730
27770
|
// console.log(dataGridProps)
|
|
27731
27771
|
return (jsxRuntime.jsx(material.Box, { width: 1, minHeight: 300, height: 1,
|
|
27732
27772
|
// maxHeight={'calc(100% - 30px)'}
|
|
27733
|
-
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) {
|
|
27734
27774
|
return x;
|
|
27735
27775
|
}),
|
|
27736
27776
|
// paginado //
|
|
27737
|
-
pagination: true, paginationMode:
|
|
27777
|
+
pagination: true, paginationMode: "server", paginationModel: paginationModel, onPaginationModelChange: setPaginationModel, pageSizeOptions: [50, 100, { value: -1, label: "Todos" }],
|
|
27738
27778
|
// ordenado
|
|
27739
|
-
sortingMode:
|
|
27779
|
+
sortingMode: "server", sortModel: sortModel, onSortModelChange: setSortModel,
|
|
27740
27780
|
// filtrado
|
|
27741
|
-
filterMode:
|
|
27781
|
+
filterMode: "server",
|
|
27742
27782
|
// onFilterModelChange={handleFilterChange}
|
|
27743
27783
|
disableColumnFilter: true, showToolbar: true,
|
|
27744
27784
|
// selection
|
|
@@ -27756,13 +27796,13 @@ const Base = (props) => {
|
|
|
27756
27796
|
// row count
|
|
27757
27797
|
rowCount: rowCount,
|
|
27758
27798
|
// settings
|
|
27759
|
-
density:
|
|
27799
|
+
density: "compact",
|
|
27760
27800
|
// striping
|
|
27761
|
-
getRowClassName: (params) => params.indexRelativeToCurrentPage % 2 === 0 ?
|
|
27762
|
-
columnHeaderSortIconLabel:
|
|
27763
|
-
columnMenuSortAsc:
|
|
27764
|
-
columnMenuSortDesc:
|
|
27765
|
-
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ú",
|
|
27766
27806
|
}, ...renderDataGridProps }) }) }));
|
|
27767
27807
|
};
|
|
27768
27808
|
// ========================= || RETURN || ========================= //
|
|
@@ -27776,7 +27816,7 @@ const Base = (props) => {
|
|
|
27776
27816
|
pathname: props.pathname,
|
|
27777
27817
|
navigation: props.slotProps?.navigation,
|
|
27778
27818
|
...renderProps,
|
|
27779
|
-
...props.api.create
|
|
27819
|
+
...props.api.create,
|
|
27780
27820
|
};
|
|
27781
27821
|
renderFunction = CreateGridWrapper;
|
|
27782
27822
|
}
|
|
@@ -27787,7 +27827,7 @@ const Base = (props) => {
|
|
|
27787
27827
|
renderFunctionProps: renderProps,
|
|
27788
27828
|
dataGridProps: dataGridProps,
|
|
27789
27829
|
baseGridRef: apiRef,
|
|
27790
|
-
...props.api.edit
|
|
27830
|
+
...props.api.edit,
|
|
27791
27831
|
};
|
|
27792
27832
|
renderFunction = EditGridWrapper;
|
|
27793
27833
|
}
|
|
@@ -27797,7 +27837,7 @@ const Base = (props) => {
|
|
|
27797
27837
|
renderFunction: renderFunction,
|
|
27798
27838
|
renderFunctionProps: renderProps,
|
|
27799
27839
|
dataGridProps: dataGridProps,
|
|
27800
|
-
...props.api.delete
|
|
27840
|
+
...props.api.delete,
|
|
27801
27841
|
});
|
|
27802
27842
|
}
|
|
27803
27843
|
return renderFunction(renderProps);
|
|
@@ -28701,7 +28741,7 @@ exports.DeleteButton = DeleteButton;
|
|
|
28701
28741
|
exports.DeleteConfirmationDialog = DeleteConfirmationDialog;
|
|
28702
28742
|
exports.DetailPage = DetailPage;
|
|
28703
28743
|
exports.EditButton = EditButton;
|
|
28704
|
-
exports.
|
|
28744
|
+
exports.ExportCSV = ExportCSV;
|
|
28705
28745
|
exports.HistorialDrawer = HistorialDrawer;
|
|
28706
28746
|
exports.ListPage = ListPage;
|
|
28707
28747
|
exports.Loadable = Loadable;
|