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,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()}
+                />
+            )}
+        </>
+    );
+}