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,19 @@
+import ApiRequest from "@services/Api.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+import { ApiVoidResult } from "@models/Api.VoidResult.type";
+
+export const updateOrganizationColors = async (data: UpdateCompanyParams): Promise<ApiVoidResult> => {
+    return ApiRequest.post<ApiVoidResult>("companies/update", data);
+};
+
+export const uploadHeaderImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("companies/upload-header", data);
+};
+
+export const uploadServiceImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("services/upload-image", data);
+};
+
+export const checkOrgAdmin = async (companyId: string, sessionUser: string): Promise<boolean> => {
+    return ApiRequest.post<boolean>("companies/check-admin", { companyId, sessionUser });
+};
@@ -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>
+    );
+}
@@ -0,0 +1,116 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import HeaderEditPopup from "./HeaderEditPopup";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { checkOrgAdmin } from "@services/Header.Edit.Service";
+
+interface OrganizationHeaderEditProps {
+    companyId: string;
+    headerColor?: string;
+    headerFontColor?: string;
+    headerFontShadowColor?: string;
+    headerImage?: string;
+}
+
+export default function OrganizationHeaderEdit({
+    companyId,
+    headerColor = "",
+    headerFontColor = "",
+    headerFontShadowColor = "",
+    headerImage = "",
+}: OrganizationHeaderEditProps) {
+    const router = useRouter();
+    const SessionInfo = useSessionStore();
+    const [isOrgAdmin, setIsOrgAdmin] = useState(false);
+    const [showEditPopup, setShowEditPopup] = useState(false);
+
+    useEffect(() => {
+        if (!SessionInfo.userId || !companyId) {
+            setIsOrgAdmin(false);
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+            return;
+        }
+
+        let cancelled = false;
+
+        checkOrgAdmin(companyId, SessionInfo.userId)
+            .then((isAdmin) => {
+                if (cancelled) return;
+                setIsOrgAdmin(isAdmin);
+
+                const wrapper = document.getElementById("header-wrapper");
+                if (!wrapper) return;
+
+                if (isAdmin) {
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+
+                    const btn = document.createElement("div");
+                    btn.id = "edit-header-btn";
+                    btn.innerHTML = `
+                        <button style="
+                            position: absolute;
+                            top: 12px;
+                            right: 12px;
+                            width: 40px;
+                            height: 40px;
+                            border-radius: 50%;
+                            background: rgba(0,0,0,0.45);
+                            color: white;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            z-index: 100;
+                            transition: background 0.2s;
+                        " onmouseover="this.style.background='rgba(0,0,0,0.7)'" onmouseout="this.style.background='rgba(0,0,0,0.45)'">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                        </button>
+                    `;
+                    btn.querySelector("button")!.addEventListener("click", () =>
+                        setShowEditPopup(true),
+                    );
+                    wrapper.appendChild(btn);
+                } else {
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+                }
+            })
+            .catch(() => {
+                if (cancelled) return;
+                setIsOrgAdmin(false);
+
+                const existingBtn = document.getElementById("edit-header-btn");
+                if (existingBtn) existingBtn.remove();
+            });
+
+        return () => {
+            cancelled = true;
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+        };
+    }, [SessionInfo.userId, companyId]);
+
+    return (
+        <>
+            {isOrgAdmin && (
+                <HeaderEditPopup
+                    open={showEditPopup}
+                    onClose={() => setShowEditPopup(false)}
+                    companyId={companyId}
+                    headerColor={headerColor}
+                    headerFontColor={headerFontColor}
+                    headerFontShadowColor={headerFontShadowColor}
+                    headerImage={headerImage}
+                    onSaved={() => {
+                        setShowEditPopup(false);
+                    }}
+                    onRefresh={() => router.refresh()}
+                />
+            )}
+        </>
+    );
+}
@@ -10,7 +10,7 @@ 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 { updateOrganizationsById, uploadHeaderImage } from "./Org.Service";
+import { updateOrganizationColors, uploadHeaderImage } from "@services/Header.Edit.Service";
 import { UpdateCompanyParams } from "@models/Company.model";

 interface HeaderEditPopupProps {
@@ -58,7 +58,7 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
                sessionUser: SessionInfo.userId,
            };

-            await updateOrganizationsById(updData);
+            await updateOrganizationColors(updData);

            organizationHeader.setHeaderColor(headerColorState);
            organizationHeader.setHeaderFontColor(headerFontColorState);
@@ -6,7 +6,7 @@ import { PublicServiceView } from "@models/Service.model";
 import { PublicOrganizationView } from "@models/Company.model";
 import ServiceImageEditPopup from "./ServiceImageEditPopup";
 import { useSessionStore } from "@core/Store/Sesion.Store";
-import { checkOrgAdmin } from "./Service.Service";
+import { checkOrgAdmin } from "@services/Header.Edit.Service";

 interface ServiceDetailCardProps {
    service: PublicServiceView;
@@ -7,7 +7,7 @@ import { ThemeProvider } from "@emotion/react";
 import ImagePicker from "@components/ImagePicker/ImagePicker";
 import { useAlert } from "@core/Store/Alert.Store";
 import { useSessionStore } from "@core/Store/Sesion.Store";
-import { uploadServiceImage } from "./Service.Service";
+import { uploadServiceImage } from "@services/Header.Edit.Service";

 interface ServiceImageEditPopupProps {
    open: boolean;
@@ -12,6 +12,7 @@ import EvangelizeBanner from "@components/EvangelizeBanner/EvangelizeBanner";
 import ReviewsCarousel from "@components/ReviewsCarousel/ReviewsCarousel";
 import { RatingTargetType } from "@core/Models/Ratings.model";
 import ServiceDetailCard from "./ServiceDetailCard";
+import OrganizationHeaderEdit from "@components/OrganizationHeaderEdit/OrganizationHeaderEdit";

 const GetServiceData = async (serviceId: string): Promise<PublicOrganizationServiceView> => {
    try {
@@ -56,7 +57,16 @@ export default async function OrganizationPublicProfile({ params }: Props) {
                    <ScrollToTop />
                    <HeaderConfProvider />
                    <div className="homeCentered">
-                        <OrganizationHeader organization={organizationService.organization} />
+                        <div id="header-wrapper" style={{ position: "relative" }}>
+                            <OrganizationHeader organization={organizationService.organization} />
+                        </div>
+                        <OrganizationHeaderEdit
+                            companyId={organizationService.organization.id}
+                            headerColor={organizationService.organization.headerColor}
+                            headerFontColor={organizationService.organization.headerFontColor}
+                            headerFontShadowColor={organizationService.organization.headerFontShadowColor}
+                            headerImage={organizationService.organization.headerFile}
+                        />
                        <div className={style.organizationContent}>
                            <div className={style.serviceSide}>
                                <div className={style.stickyWrapper}>