feat: agregar funcionalidad de edición de cabecera y colores en OrganizationHeaderEdit

2026-09-14 15:53:08 -03:00
parent 546b66c972
commit 421a8b5582
7 changed files with 337 additions and 5 deletions
@@ -0,0 +1,187 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Grid2, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+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";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { useOrganizationHeaderStore } from "@core/Store/OrganizationHeader.Store";
+import { updateOrganizationColors, uploadHeaderImage } from "@services/Header.Edit.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+
+interface HeaderEditPopupProps {
+    open: boolean;
+    onClose: () => void;
+    companyId: string;
+    headerColor: string;
+    headerFontColor: string;
+    headerFontShadowColor: string;
+    headerImage: string;
+    onSaved: () => void;
+    onRefresh?: () => void;
+}
+
+export default function HeaderEditPopup(props: HeaderEditPopupProps) {
+    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved, onRefresh } = props;
+    const alert = useAlert();
+    const SessionInfo = useSessionStore();
+    const organizationHeader = useOrganizationHeaderStore();
+
+    const [headerColorState, setHeaderColorState] = useState("");
+    const [headerFontColorState, setHeaderFontColorState] = useState("");
+    const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    // Sync local state when values change externally
+    useEffect(() => {
+        if (open) {
+            setHeaderColorState(headerColor || "");
+            setHeaderFontColorState(headerFontColor || "");
+            setHeaderFontShadowColorState(headerFontShadowColor || "");
+            setLoading(false);
+        }
+    }, [open, headerColor, headerFontColor, headerFontShadowColor]);
+
+    const handleSaveColors = async () => {
+        setLoading(true);
+
+        try {
+            const updData: UpdateCompanyParams = {
+                id: companyId,
+                headerColor: headerColorState,
+                headerFontColor: headerFontColorState,
+                headerFontShadowColor: headerFontShadowColorState,
+                sessionUser: SessionInfo.userId,
+            };
+
+            await updateOrganizationColors(updData);
+
+            organizationHeader.setHeaderColor(headerColorState);
+            organizationHeader.setHeaderFontColor(headerFontColorState);
+            organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
+
+            alert.showSuccess("Colores actualizados");
+            onSaved();
+            onRefresh?.();
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar los colores";
+            alert.showError(formatted || "Error al guardar los colores");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setLoading(true);
+
+        try {
+            const formData = new FormData();
+            formData.append("companyId", companyId);
+            formData.append("sessionUser", SessionInfo.userId);
+            formData.append("file", file);
+
+            uploadHeaderImage(formData).then(() => {
+                alert.showSuccess("Imagen actualizada");
+                onSaved();
+                onRefresh?.();
+            }).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");
+            setLoading(false);
+        }
+    };
+
+    return (
+        <ThemeProvider theme={turnosXpressTheme}>
+            <Dialog
+                open={open}
+                onClose={onClose}
+                maxWidth="sm"
+                fullWidth
+                PaperProps={{
+                    sx: {
+                        borderRadius: 2,
+                        height: 500,
+                    },
+                }}
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    Personalizar
+                    <IconButton onClick={onClose} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+
+                <DialogContent dividers sx={{ p: 3 }}>
+                    {/* Colores */}
+                    <Grid2 container spacing={1} mb={3}>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fondo"
+                                color={headerColorState}
+                                onChange={(color: string) => {
+                                    setHeaderColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fuente"
+                                color={headerFontColorState}
+                                onChange={(color: string) => {
+                                    setHeaderFontColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Sombra"
+                                color={headerFontShadowColorState}
+                                onChange={(color: string) => {
+                                    setHeaderFontShadowColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                    </Grid2>
+
+                    {/* Imagen */}
+                    <ImagePicker
+                        src={headerImage}
+                        alt="Cabecera"
+                        style={{ width: "100%", height: 120, borderRadius: 8 }}
+                        readOnly={false}
+                        onChange={handleImageChange}
+                        imageSizeSrc="/org-header-size.webp"
+                        mbLimit={5}
+                    />
+                </DialogContent>
+
+                <DialogActions sx={{ px: 3, pb: 2 }}>
+                    <Button onClick={onClose}>Cancelar</Button>
+                    <Button
+                        onClick={handleSaveColors}
+                        autoFocus
+                        color="success"
+                        variant="contained"
+                        disabled={loading}
+                    >
+                        Guardar
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </ThemeProvider>
+    );
+}