horacio/turnosxpress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: popup centrado con estilo Confirm (botones sin iconos, titulo 'Personalizar')

Browse Source 
- 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:
Horacio Daniel Ros
2026-09-14 13:01:36 -03:00
parent 80d9f5d428
commit 06aac5b126
2 changed files with 83 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
txclient/src/app/landing/org/[oid]/HeaderEditPopup.tsx
+78 -88
View File
@@ -1,8 +1,10 @@
"use client"; "use client";
import { useState, useEffect } from "react"; 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 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 { PopoverPicker } from "@components/ColorPicker/ColorPicker";
import ImagePicker from "@components/ImagePicker/ImagePicker"; import ImagePicker from "@components/ImagePicker/ImagePicker";
import { useAlert } from "@core/Store/Alert.Store"; import { useAlert } from "@core/Store/Alert.Store";
@@ -15,32 +17,33 @@ interface HeaderEditPopupProps {
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
companyId: string; companyId: string;
headerColor: string;
headerFontColor: string;
headerFontShadowColor: string;
headerImage: string;
onSaved: () => void; onSaved: () => void;
} }
export default function HeaderEditPopup(props: HeaderEditPopupProps) { 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 alert = useAlert();
const SessionInfo = useSessionStore(); const SessionInfo = useSessionStore();
const organizationHeader = useOrganizationHeaderStore(); const organizationHeader = useOrganizationHeaderStore();
const [headerImage, setHeaderImage] = useState(""); const [headerColorState, setHeaderColorState] = useState("");
const [headerColor, setHeaderColor] = useState(""); const [headerFontColorState, setHeaderFontColorState] = useState("");
const [headerFontColor, setHeaderFontColor] = useState(""); const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState("");
const [headerFontShadowColor, setHeaderFontShadowColor] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
// Load current values from store when opening // Sync local state when values change externally
useEffect(() => { useEffect(() => {
if (!open) return; if (open) {
setHeaderColorState(headerColor || "");
// Get current values from the organization header store setHeaderFontColorState(headerFontColor || "");
const current = useOrganizationHeaderStore.getState(); setHeaderFontShadowColorState(headerFontShadowColor || "");
setHeaderColor(current.headerColor || ""); setLoading(false);
setHeaderFontColor(current.headerFontColor || ""); }
setHeaderFontShadowColor(current.headerFontShadowColor || ""); }, [open, headerColor, headerFontColor, headerFontShadowColor]);
setHeaderImage("");
}, [open]);
const handleSaveColors = async () => { const handleSaveColors = async () => {
setLoading(true); setLoading(true);
@@ -48,18 +51,17 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
try { try {
const updData: UpdateCompanyParams = { const updData: UpdateCompanyParams = {
id: companyId, id: companyId,
headerColor: headerColor, headerColor: headerColorState,
headerFontColor: headerFontColor, headerFontColor: headerFontColorState,
headerFontShadowColor: headerFontShadowColor, headerFontShadowColor: headerFontShadowColorState,
sessionUser: SessionInfo.userId, sessionUser: SessionInfo.userId,
}; };
await updateOrganizationsById(updData); await updateOrganizationsById(updData);
// Update the header store so colors apply immediately organizationHeader.setHeaderColor(headerColorState);
organizationHeader.setHeaderColor(headerColor); organizationHeader.setHeaderFontColor(headerFontColorState);
organizationHeader.setHeaderFontColor(headerFontColor); organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
organizationHeader.setHeaderFontShadowColor(headerFontShadowColor);
alert.showSuccess("Colores actualizados"); alert.showSuccess("Colores actualizados");
} catch (error) { } 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]; const file = e.target.files?.[0];
if (!file) return; if (!file) return;
@@ -82,111 +84,99 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
formData.append("sessionUser", SessionInfo.userId); formData.append("sessionUser", SessionInfo.userId);
formData.append("file", file); formData.append("file", file);
await uploadHeaderImage(formData); uploadHeaderImage(formData).then(() => {
alert.showSuccess("Imagen actualizada"); alert.showSuccess("Imagen actualizada");
onSaved(); 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) { } catch (error) {
const formatted = error instanceof Error ? error.message : "Error al guardar la imagen"; const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
alert.showError(formatted || "Error al guardar la imagen"); alert.showError(formatted || "Error al guardar la imagen");
} finally {
setLoading(false); setLoading(false);
} }
}; };
return ( return (
<Dialog <ThemeProvider theme={turnosXpressTheme}>
open={open} <Dialog
onClose={onClose} open={open}
maxWidth="sm" onClose={onClose}
fullWidth maxWidth="sm"
PaperProps={{ fullWidth
sx: { PaperProps={{
borderRadius: "16px 16px 0 0", sx: {
borderTop: "none", borderRadius: 2,
position: "absolute", },
bottom: 0, }}
left: 0, >
right: 0, <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
maxHeight: "85vh", Personalizar
overflow: "auto", <IconButton onClick={onClose} size="small">
}, <CloseIcon />
}} </IconButton>
> </DialogTitle>
<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>
<DialogContent dividers sx={{ p: 3 }}> <DialogContent dividers sx={{ p: 3 }}>
{/* Colores */} {/* Colores */}
<Box mb={3}> <Grid2 container spacing={1} mb={3}>
<Box fontWeight="bold" mb={1.5}>Colores</Box>
<Grid2 container spacing={2}>
<Grid2 size={4}> <Grid2 size={4}>
<PopoverPicker <PopoverPicker
placeholder="Fondo" placeholder="Fondo"
color={headerColor} color={headerColorState}
onChange={(color: string) => { onChange={(color: string) => {
setHeaderColor(color); setHeaderColorState(color);
}} }}
/> />
</Grid2> </Grid2>
<Grid2 size={4}> <Grid2 size={4}>
<PopoverPicker <PopoverPicker
placeholder="Fuente" placeholder="Fuente"
color={headerFontColor} color={headerFontColorState}
onChange={(color: string) => { onChange={(color: string) => {
setHeaderFontColor(color); setHeaderFontColorState(color);
}} }}
/> />
</Grid2> </Grid2>
<Grid2 size={4}> <Grid2 size={4}>
<PopoverPicker <PopoverPicker
placeholder="Sombra" placeholder="Sombra"
color={headerFontShadowColor} color={headerFontShadowColorState}
onChange={(color: string) => { onChange={(color: string) => {
setHeaderFontShadowColor(color); setHeaderFontShadowColorState(color);
}} }}
/> />
</Grid2> </Grid2>
</Grid2> </Grid2>
</Box>
<Divider sx={{ my: 2 }} /> {/* Imagen */}
{/* Imagen */}
<Box mb={3}>
<Box fontWeight="bold" mb={1.5}>Imagen de cabecera</Box>
<ImagePicker <ImagePicker
src={headerImage} src={headerImage}
alt="Cabecera" alt="Cabecera"
style={{ width: "100%", height: "120px", borderRadius: "8px" }} style={{ width: "100%", height: 120, borderRadius: 8 }}
readOnly={false} readOnly={false}
onChange={handleSaveImage} onChange={handleImageChange}
imageSizeSrc="/org-header-size.webp" imageSizeSrc="/org-header-size.webp"
mbLimit={5} mbLimit={5}
/> />
</Box> </DialogContent>
<Divider sx={{ my: 2 }} /> <DialogActions sx={{ px: 3, pb: 2 }}>
<Button onClick={onClose}>Cancelar</Button>
{/* Botón guardar */} <Button
<Box display="flex" justifyContent="flex-end" gap={2}>
<IconButton color="inherit" onClick={onClose} disabled={loading}>
<CloseIcon />
</IconButton>
<IconButton
color="primary"
onClick={handleSaveColors} onClick={handleSaveColors}
autoFocus
color="success"
variant="contained"
disabled={loading} disabled={loading}
sx={{ fontWeight: "bold" }}
> >
<SaveIcon /> Guardar
</IconButton> </Button>
</Box> </DialogActions>
</DialogContent> </Dialog>
</Dialog> </ThemeProvider>
); );
} }
txclient/src/app/landing/org/[oid]/page.tsx
+5 -1
View File
@@ -591,11 +591,15 @@ export default function OrganizationPublicProfile() {
return ( return (
<> <>
<HeaderConfProvider /> <HeaderConfProvider />
{isOrgAdmin && oid && ( {isOrgAdmin && oid && orgData && (
<HeaderEditPopup <HeaderEditPopup
open={showEditPopup} open={showEditPopup}
onClose={() => setShowEditPopup(false)} onClose={() => setShowEditPopup(false)}
companyId={oid} companyId={oid}
headerColor={orgData.headerColor}
headerFontColor={orgData.headerFontColor}
headerFontShadowColor={orgData.headerFontShadowColor}
headerImage={orgData.headerFile}
onSaved={() => { onSaved={() => {
setShowEditPopup(false); setShowEditPopup(false);
}} }}