95 lines
2.8 KiB
Svelte
95 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { useQuery, useConvexClient } from 'convex-svelte';
|
|
import { api } from '@sgse-app/backend/convex/_generated/api';
|
|
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
|
|
|
const client = useConvexClient();
|
|
|
|
// Reactive queries
|
|
const setoresQuery = useQuery(api.setores.list, {});
|
|
const configQuery = useQuery(api.config.getComprasSetor, {});
|
|
|
|
const setores = $derived(setoresQuery.data || []);
|
|
const config = $derived(configQuery.data);
|
|
const loading = $derived(setoresQuery.isLoading || configQuery.isLoading);
|
|
|
|
// Initialize selected setor from config - using boxed $state to avoid reactivity warning
|
|
let selectedSetorId = $state('');
|
|
|
|
// Update selectedSetorId when config changes
|
|
$effect(() => {
|
|
if (config?.comprasSetorId && !selectedSetorId) {
|
|
selectedSetorId = config.comprasSetorId;
|
|
}
|
|
});
|
|
|
|
let saving = $state(false);
|
|
let error: string | null = $state(null);
|
|
let success: string | null = $state(null);
|
|
|
|
async function saveConfig() {
|
|
saving = true;
|
|
error = null;
|
|
success = null;
|
|
try {
|
|
await client.mutation(api.config.updateComprasSetor, {
|
|
setorId: selectedSetorId as Id<'setores'>
|
|
});
|
|
success = 'Configuração salva com sucesso!';
|
|
} catch (e) {
|
|
error = (e as Error).message;
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="container mx-auto p-6">
|
|
<h1 class="mb-6 text-2xl font-bold">Configurações Gerais</h1>
|
|
|
|
{#if loading}
|
|
<p>Carregando...</p>
|
|
{:else}
|
|
<div class="max-w-md rounded-lg bg-white p-6 shadow-md">
|
|
<h2 class="mb-4 text-xl font-semibold">Setor de Compras</h2>
|
|
<p class="mb-4 text-sm text-gray-600">
|
|
Selecione o setor responsável por receber e aprovar pedidos de compra.
|
|
</p>
|
|
|
|
{#if error}
|
|
<div class="mb-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700">
|
|
{error}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if success}
|
|
<div class="mb-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700">
|
|
{success}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="mb-4">
|
|
<label for="setor" class="mb-1 block text-sm font-medium text-gray-700"> Setor </label>
|
|
<select
|
|
id="setor"
|
|
bind:value={selectedSetorId}
|
|
class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
>
|
|
<option value="">Selecione um setor...</option>
|
|
{#each setores as setor (setor._id)}
|
|
<option value={setor._id}>{setor.nome} ({setor.sigla})</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
onclick={saveConfig}
|
|
disabled={saving || !selectedSetorId}
|
|
class="w-full rounded-md bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{saving ? 'Salvando...' : 'Salvar Configuração'}
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|