SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add setores display and loading state to perfil page, and implement click outside functionality for dropdown menus in funcionarios page

Browse Source
This commit is contained in:
deyvisonwanderley
2025-12-01 22:04:32 -03:00
parent 6e836e9eb5
commit c19c8c859e
2 changed files with 103 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
View File

@@ -79,6 +79,42 @@
openMenuId = openMenuId === id ? null : id;
}
function closeMenu() {
openMenuId = null;
}
// Fechar menu ao clicar fora
$effect(() => {
if (!openMenuId) return;
function handleClickOutside(event: MouseEvent) {
const target = event.target as HTMLElement;
// Verificar se o clique foi fora do dropdown (botão e menu)
const dropdown = target.closest('.dropdown');
if (!dropdown) {
openMenuId = null;
}
}
function handleEscape(event: KeyboardEvent) {
if (event.key === 'Escape') {
openMenuId = null;
}
}
// Adicionar listeners no próximo tick para não interferir com o clique que abriu o menu
const timeoutId = setTimeout(() => {
document.addEventListener('click', handleClickOutside);
document.addEventListener('keydown', handleEscape);
}, 10);
return () => {
clearTimeout(timeoutId);
document.removeEventListener('click', handleClickOutside);
document.removeEventListener('keydown', handleEscape);
};
});
async function openSetoresModal(funcionarioId: Id<'funcionarios'>, nome: string) {
funcionarioParaSetores = { _id: funcionarioId, nome };
setoresSelecionados = [];
@@ -382,30 +418,50 @@
class="dropdown-content menu bg-base-100 rounded-box border-base-300 z-20 w-52 border p-2 shadow-xl"
>
<li>
<a href={resolve(`/recursos-humanos/funcionarios/${f._id}`)} class="hover:bg-primary/10">
<a
href={resolve(`/recursos-humanos/funcionarios/${f._id}`)}
class="hover:bg-primary/10"
onclick={closeMenu}
>
Ver Detalhes
</a>
</li>
<li>
<a href={resolve(`/recursos-humanos/funcionarios/${f._id}/editar`)} class="hover:bg-primary/10">
<a
href={resolve(`/recursos-humanos/funcionarios/${f._id}/editar`)}
class="hover:bg-primary/10"
onclick={closeMenu}
>
Editar
</a>
</li>
<li>
<a href={resolve(`/recursos-humanos/funcionarios/${f._id}/documentos`)} class="hover:bg-primary/10">
<a
href={resolve(`/recursos-humanos/funcionarios/${f._id}/documentos`)}
class="hover:bg-primary/10"
onclick={closeMenu}
>
Ver Documentos
</a>
</li>
<li>
<button
onclick={() => openSetoresModal(f._id, f.nome)}
onclick={() => {
openSetoresModal(f._id, f.nome);
}}
class="hover:bg-primary/10"
>
Atribuir Setores
</button>
</li>
<li>
<button onclick={() => openPrintModal(f._id)} class="hover:bg-primary/10">
<button
onclick={() => {
openPrintModal(f._id);
closeMenu();
}}
class="hover:bg-primary/10"
>
Imprimir Ficha
</button>
</li>