fix: popup centrado con estilo Confirm (botones sin iconos, titulo 'Personalizar')
- Dialog centrado (no bottom-sheet) con ThemeProvider - Botones Cancelar/Guardar en texto plano (sin iconos), mismo patrón que Confirm.tsx - Recibe valores actuales por props para no depender de store global - Titulo dice 'Personalizar' solamente - Cierre se hace con icono X en el title bar
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Grid2, IconButton, Dialog, DialogContent, DialogTitle, Box, Divider } from "@mui/material";
|
||||
import { Grid2, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import SaveIcon from "@mui/icons-material/Save";
|
||||
import turnosXpressTheme from "@core/app/theme/turnosXpress";
|
||||
import Button from "@mui/material/Button";
|
||||
import { ThemeProvider } from "@emotion/react";
|
||||
import { PopoverPicker } from "@components/ColorPicker/ColorPicker";
|
||||
import ImagePicker from "@components/ImagePicker/ImagePicker";
|
||||
import { useAlert } from "@core/Store/Alert.Store";
|
||||
@@ -15,32 +17,33 @@ interface HeaderEditPopupProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
companyId: string;
|
||||
headerColor: string;
|
||||
headerFontColor: string;
|
||||
headerFontShadowColor: string;
|
||||
headerImage: string;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
export default function HeaderEditPopup(props: HeaderEditPopupProps) {
|
||||
const { open, onClose, companyId, onSaved } = props;
|
||||
const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved } = props;
|
||||
const alert = useAlert();
|
||||
const SessionInfo = useSessionStore();
|
||||
const organizationHeader = useOrganizationHeaderStore();
|
||||
|
||||
const [headerImage, setHeaderImage] = useState("");
|
||||
const [headerColor, setHeaderColor] = useState("");
|
||||
const [headerFontColor, setHeaderFontColor] = useState("");
|
||||
const [headerFontShadowColor, setHeaderFontShadowColor] = useState("");
|
||||
const [headerColorState, setHeaderColorState] = useState("");
|
||||
const [headerFontColorState, setHeaderFontColorState] = useState("");
|
||||
const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Load current values from store when opening
|
||||
// Sync local state when values change externally
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
// Get current values from the organization header store
|
||||
const current = useOrganizationHeaderStore.getState();
|
||||
setHeaderColor(current.headerColor || "");
|
||||
setHeaderFontColor(current.headerFontColor || "");
|
||||
setHeaderFontShadowColor(current.headerFontShadowColor || "");
|
||||
setHeaderImage("");
|
||||
}, [open]);
|
||||
if (open) {
|
||||
setHeaderColorState(headerColor || "");
|
||||
setHeaderFontColorState(headerFontColor || "");
|
||||
setHeaderFontShadowColorState(headerFontShadowColor || "");
|
||||
setLoading(false);
|
||||
}
|
||||
}, [open, headerColor, headerFontColor, headerFontShadowColor]);
|
||||
|
||||
const handleSaveColors = async () => {
|
||||
setLoading(true);
|
||||
@@ -48,18 +51,17 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
|
||||
try {
|
||||
const updData: UpdateCompanyParams = {
|
||||
id: companyId,
|
||||
headerColor: headerColor,
|
||||
headerFontColor: headerFontColor,
|
||||
headerFontShadowColor: headerFontShadowColor,
|
||||
headerColor: headerColorState,
|
||||
headerFontColor: headerFontColorState,
|
||||
headerFontShadowColor: headerFontShadowColorState,
|
||||
sessionUser: SessionInfo.userId,
|
||||
};
|
||||
|
||||
await updateOrganizationsById(updData);
|
||||
|
||||
// Update the header store so colors apply immediately
|
||||
organizationHeader.setHeaderColor(headerColor);
|
||||
organizationHeader.setHeaderFontColor(headerFontColor);
|
||||
organizationHeader.setHeaderFontShadowColor(headerFontShadowColor);
|
||||
organizationHeader.setHeaderColor(headerColorState);
|
||||
organizationHeader.setHeaderFontColor(headerFontColorState);
|
||||
organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
|
||||
|
||||
alert.showSuccess("Colores actualizados");
|
||||
} catch (error) {
|
||||
@@ -70,7 +72,7 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
@@ -82,111 +84,99 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
|
||||
formData.append("sessionUser", SessionInfo.userId);
|
||||
formData.append("file", file);
|
||||
|
||||
await uploadHeaderImage(formData);
|
||||
alert.showSuccess("Imagen actualizada");
|
||||
onSaved();
|
||||
uploadHeaderImage(formData).then(() => {
|
||||
alert.showSuccess("Imagen actualizada");
|
||||
onSaved();
|
||||
}).catch((error) => {
|
||||
const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
|
||||
alert.showError(formatted || "Error al guardar la imagen");
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
} catch (error) {
|
||||
const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
|
||||
alert.showError(formatted || "Error al guardar la imagen");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: "16px 16px 0 0",
|
||||
borderTop: "none",
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
maxHeight: "85vh",
|
||||
overflow: "auto",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogTitle sx={{ m: 0, p: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<span style={{ fontWeight: "bold" }}>Personalizar header</span>
|
||||
<IconButton onClick={onClose} sx={{ color: (theme) => theme.palette.grey[500] }}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<ThemeProvider theme={turnosXpressTheme}>
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
Personalizar
|
||||
<IconButton onClick={onClose} size="small">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent dividers sx={{ p: 3 }}>
|
||||
{/* Colores */}
|
||||
<Box mb={3}>
|
||||
<Box fontWeight="bold" mb={1.5}>Colores</Box>
|
||||
<Grid2 container spacing={2}>
|
||||
<DialogContent dividers sx={{ p: 3 }}>
|
||||
{/* Colores */}
|
||||
<Grid2 container spacing={1} mb={3}>
|
||||
<Grid2 size={4}>
|
||||
<PopoverPicker
|
||||
placeholder="Fondo"
|
||||
color={headerColor}
|
||||
color={headerColorState}
|
||||
onChange={(color: string) => {
|
||||
setHeaderColor(color);
|
||||
setHeaderColorState(color);
|
||||
}}
|
||||
/>
|
||||
</Grid2>
|
||||
<Grid2 size={4}>
|
||||
<PopoverPicker
|
||||
placeholder="Fuente"
|
||||
color={headerFontColor}
|
||||
color={headerFontColorState}
|
||||
onChange={(color: string) => {
|
||||
setHeaderFontColor(color);
|
||||
setHeaderFontColorState(color);
|
||||
}}
|
||||
/>
|
||||
</Grid2>
|
||||
<Grid2 size={4}>
|
||||
<PopoverPicker
|
||||
placeholder="Sombra"
|
||||
color={headerFontShadowColor}
|
||||
color={headerFontShadowColorState}
|
||||
onChange={(color: string) => {
|
||||
setHeaderFontShadowColor(color);
|
||||
setHeaderFontShadowColorState(color);
|
||||
}}
|
||||
/>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ my: 2 }} />
|
||||
|
||||
{/* Imagen */}
|
||||
<Box mb={3}>
|
||||
<Box fontWeight="bold" mb={1.5}>Imagen de cabecera</Box>
|
||||
{/* Imagen */}
|
||||
<ImagePicker
|
||||
src={headerImage}
|
||||
alt="Cabecera"
|
||||
style={{ width: "100%", height: "120px", borderRadius: "8px" }}
|
||||
style={{ width: "100%", height: 120, borderRadius: 8 }}
|
||||
readOnly={false}
|
||||
onChange={handleSaveImage}
|
||||
onChange={handleImageChange}
|
||||
imageSizeSrc="/org-header-size.webp"
|
||||
mbLimit={5}
|
||||
/>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
<Divider sx={{ my: 2 }} />
|
||||
|
||||
{/* Botón guardar */}
|
||||
<Box display="flex" justifyContent="flex-end" gap={2}>
|
||||
<IconButton color="inherit" onClick={onClose} disabled={loading}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="primary"
|
||||
<DialogActions sx={{ px: 3, pb: 2 }}>
|
||||
<Button onClick={onClose}>Cancelar</Button>
|
||||
<Button
|
||||
onClick={handleSaveColors}
|
||||
autoFocus
|
||||
color="success"
|
||||
variant="contained"
|
||||
disabled={loading}
|
||||
sx={{ fontWeight: "bold" }}
|
||||
>
|
||||
<SaveIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
Guardar
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -591,11 +591,15 @@ export default function OrganizationPublicProfile() {
|
||||
return (
|
||||
<>
|
||||
<HeaderConfProvider />
|
||||
{isOrgAdmin && oid && (
|
||||
{isOrgAdmin && oid && orgData && (
|
||||
<HeaderEditPopup
|
||||
open={showEditPopup}
|
||||
onClose={() => setShowEditPopup(false)}
|
||||
companyId={oid}
|
||||
headerColor={orgData.headerColor}
|
||||
headerFontColor={orgData.headerFontColor}
|
||||
headerFontShadowColor={orgData.headerFontShadowColor}
|
||||
headerImage={orgData.headerFile}
|
||||
onSaved={() => {
|
||||
setShowEditPopup(false);
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user