332 lines
14 KiB
Svelte
332 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { useQuery, useConvexClient } from "convex-svelte";
|
|
import { api } from "@sgse-app/backend/convex/_generated/api";
|
|
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
|
|
import { goto } from "$app/navigation";
|
|
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
|
|
|
|
const client = useConvexClient();
|
|
|
|
// Buscar matriz de permissões
|
|
const matrizQuery = useQuery(api.menuPermissoes.obterMatrizPermissoes, {});
|
|
|
|
let salvando = $state(false);
|
|
let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(null);
|
|
|
|
async function atualizarPermissao(
|
|
roleId: Id<"roles">,
|
|
menuPath: string,
|
|
campo: "podeAcessar" | "podeConsultar" | "podeGravar",
|
|
valor: boolean
|
|
) {
|
|
try {
|
|
salvando = true;
|
|
|
|
// Se está marcando podeGravar, deve marcar podeConsultar e podeAcessar também
|
|
let podeAcessar = valor;
|
|
let podeConsultar = valor;
|
|
let podeGravar = campo === "podeGravar" ? valor : false;
|
|
|
|
if (campo === "podeConsultar") {
|
|
podeConsultar = valor;
|
|
podeGravar = false; // Desmarcar gravar se desmarcou consultar
|
|
}
|
|
|
|
if (campo === "podeAcessar") {
|
|
podeAcessar = valor;
|
|
if (!valor) {
|
|
podeConsultar = false;
|
|
podeGravar = false;
|
|
}
|
|
}
|
|
|
|
// Buscar a permissão atual para aplicar lógica correta
|
|
const roleData = matrizQuery.data?.find((r) => r.role._id === roleId);
|
|
const permissaoAtual = roleData?.permissoes.find((p) => p.menuPath === menuPath);
|
|
|
|
if (permissaoAtual) {
|
|
// Aplicar lógica de dependências
|
|
if (campo === "podeGravar" && valor) {
|
|
podeAcessar = true;
|
|
podeConsultar = true;
|
|
podeGravar = true;
|
|
} else if (campo === "podeConsultar" && valor) {
|
|
podeAcessar = true;
|
|
podeConsultar = true;
|
|
podeGravar = permissaoAtual.podeGravar;
|
|
} else if (campo === "podeAcessar" && !valor) {
|
|
podeAcessar = false;
|
|
podeConsultar = false;
|
|
podeGravar = false;
|
|
} else if (campo === "podeConsultar" && !valor) {
|
|
podeAcessar = permissaoAtual.podeAcessar;
|
|
podeConsultar = false;
|
|
podeGravar = false;
|
|
} else if (campo === "podeGravar" && !valor) {
|
|
podeAcessar = permissaoAtual.podeAcessar;
|
|
podeConsultar = permissaoAtual.podeConsultar;
|
|
podeGravar = false;
|
|
} else {
|
|
podeAcessar = permissaoAtual.podeAcessar;
|
|
podeConsultar = permissaoAtual.podeConsultar;
|
|
podeGravar = permissaoAtual.podeGravar;
|
|
}
|
|
}
|
|
|
|
await client.mutation(api.menuPermissoes.atualizarPermissao, {
|
|
roleId,
|
|
menuPath,
|
|
podeAcessar,
|
|
podeConsultar,
|
|
podeGravar,
|
|
});
|
|
|
|
mensagem = { tipo: "success", texto: "Permissão atualizada com sucesso!" };
|
|
setTimeout(() => {
|
|
mensagem = null;
|
|
}, 3000);
|
|
} catch (e: any) {
|
|
mensagem = { tipo: "error", texto: e.message || "Erro ao atualizar permissão" };
|
|
} finally {
|
|
salvando = false;
|
|
}
|
|
}
|
|
|
|
async function inicializarPermissoes(roleId: Id<"roles">) {
|
|
try {
|
|
salvando = true;
|
|
await client.mutation(api.menuPermissoes.inicializarPermissoesRole, { roleId });
|
|
mensagem = { tipo: "success", texto: "Permissões inicializadas!" };
|
|
setTimeout(() => {
|
|
mensagem = null;
|
|
}, 3000);
|
|
} catch (e: any) {
|
|
mensagem = { tipo: "error", texto: e.message || "Erro ao inicializar permissões" };
|
|
} finally {
|
|
salvando = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<ProtectedRoute allowedRoles={["admin", "ti"]} maxLevel={1}>
|
|
<!-- Breadcrumb -->
|
|
<div class="text-sm breadcrumbs mb-4">
|
|
<ul>
|
|
<li>
|
|
<a href="/" class="text-primary hover:text-primary-focus">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
|
|
</li>
|
|
<li class="font-semibold">Gerenciar Permissões</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<div class="p-3 bg-primary/10 rounded-xl">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h1 class="text-3xl font-bold text-base-content">Gerenciar Permissões de Acesso</h1>
|
|
<p class="text-base-content/60 mt-1">Configure as permissões de acesso aos menus do sistema por função</p>
|
|
</div>
|
|
<button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Voltar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alertas -->
|
|
{#if mensagem}
|
|
<div class="alert mb-6 shadow-lg" class:alert-success={mensagem.tipo === "success"} class:alert-error={mensagem.tipo === "error"}>
|
|
{#if mensagem.tipo === "success"}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{:else}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{/if}
|
|
<span class="font-semibold">{mensagem.texto}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Informações sobre o sistema de permissões -->
|
|
<div class="alert alert-info mb-6">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<div>
|
|
<h3 class="font-bold">Como funciona:</h3>
|
|
<ul class="text-sm mt-2 space-y-1">
|
|
<li>• <strong>Acessar:</strong> Permite visualizar o menu e entrar na página</li>
|
|
<li>• <strong>Consultar:</strong> Permite visualizar dados (requer "Acessar")</li>
|
|
<li>• <strong>Gravar:</strong> Permite criar, editar e excluir dados (requer "Consultar")</li>
|
|
<li>• <strong>Admin e TI:</strong> Têm acesso total automático a todos os recursos</li>
|
|
<li>• <strong>Dashboard e Solicitar Acesso:</strong> São públicos para todos os usuários</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Matriz de Permissões -->
|
|
{#if matrizQuery.isLoading}
|
|
<div class="flex justify-center items-center py-12">
|
|
<span class="loading loading-spinner loading-lg text-primary"></span>
|
|
</div>
|
|
{:else if matrizQuery.error}
|
|
<div class="alert alert-error">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>Erro ao carregar permissões: {matrizQuery.error.message}</span>
|
|
</div>
|
|
{:else if matrizQuery.data}
|
|
{#each matrizQuery.data as roleData}
|
|
<div class="card bg-base-100 shadow-xl mb-6">
|
|
<div class="card-body">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h2 class="card-title text-xl">
|
|
{roleData.role.nome}
|
|
<div class="badge badge-primary">Nível {roleData.role.nivel}</div>
|
|
{#if roleData.role.nivel <= 1}
|
|
<div class="badge badge-success">Acesso Total</div>
|
|
{/if}
|
|
</h2>
|
|
<p class="text-sm text-base-content/60 mt-1">{roleData.role.descricao}</p>
|
|
</div>
|
|
|
|
{#if roleData.role.nivel > 1}
|
|
<button
|
|
class="btn btn-sm btn-outline btn-primary"
|
|
onclick={() => inicializarPermissoes(roleData.role._id)}
|
|
disabled={salvando}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
Inicializar Permissões
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if roleData.role.nivel <= 1}
|
|
<div class="alert alert-success">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>Esta função possui acesso total ao sistema automaticamente.</span>
|
|
</div>
|
|
{:else}
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-zebra table-sm">
|
|
<thead class="bg-base-200">
|
|
<tr>
|
|
<th class="w-1/3">Menu</th>
|
|
<th class="text-center">
|
|
<div class="flex items-center justify-center gap-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
Acessar
|
|
</div>
|
|
</th>
|
|
<th class="text-center">
|
|
<div class="flex items-center justify-center gap-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
Consultar
|
|
</div>
|
|
</th>
|
|
<th class="text-center">
|
|
<div class="flex items-center justify-center gap-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
Gravar
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each roleData.permissoes as permissao}
|
|
<tr class="hover">
|
|
<td>
|
|
<div class="flex flex-col">
|
|
<span class="font-semibold">{permissao.menuNome}</span>
|
|
<span class="text-xs text-base-content/60">{permissao.menuPath}</span>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox checkbox-primary"
|
|
checked={permissao.podeAcessar}
|
|
disabled={salvando}
|
|
onchange={(e) =>
|
|
atualizarPermissao(
|
|
roleData.role._id,
|
|
permissao.menuPath,
|
|
"podeAcessar",
|
|
e.currentTarget.checked
|
|
)}
|
|
/>
|
|
</td>
|
|
<td class="text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox checkbox-info"
|
|
checked={permissao.podeConsultar}
|
|
disabled={salvando || !permissao.podeAcessar}
|
|
onchange={(e) =>
|
|
atualizarPermissao(
|
|
roleData.role._id,
|
|
permissao.menuPath,
|
|
"podeConsultar",
|
|
e.currentTarget.checked
|
|
)}
|
|
/>
|
|
</td>
|
|
<td class="text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox checkbox-success"
|
|
checked={permissao.podeGravar}
|
|
disabled={salvando || !permissao.podeConsultar}
|
|
onchange={(e) =>
|
|
atualizarPermissao(
|
|
roleData.role._id,
|
|
permissao.menuPath,
|
|
"podeGravar",
|
|
e.currentTarget.checked
|
|
)}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</ProtectedRoute>
|
|
|