117 lines
4.4 KiB
TypeScript
117 lines
4.4 KiB
TypeScript
"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()}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|