refactor: enhance vacation request component and improve error handling
- Updated the SolicitarFerias component to improve the user interface and experience. - Added validation for overlapping vacation periods and ensured proper error messages are displayed. - Refactored the logic for adding and removing vacation periods, enhancing code readability and maintainability. - Improved the handling of form submission and error states for better user feedback.
This commit is contained in:
@@ -1,304 +1,353 @@
|
||||
<script lang="ts">
|
||||
import { useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
|
||||
interface Periodo {
|
||||
id: string;
|
||||
dataInicio: string;
|
||||
dataFim: string;
|
||||
diasCorridos: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
funcionarioId: string;
|
||||
onSucesso?: () => void;
|
||||
onCancelar?: () => void;
|
||||
}
|
||||
|
||||
let { funcionarioId, onSucesso, onCancelar }: Props = $props();
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
let anoReferencia = $state(new Date().getFullYear());
|
||||
let observacao = $state("");
|
||||
let periodos = $state<Periodo[]>([]);
|
||||
let processando = $state(false);
|
||||
let erro = $state("");
|
||||
|
||||
// Adicionar primeiro período ao carregar
|
||||
$effect(() => {
|
||||
if (periodos.length === 0) {
|
||||
adicionarPeriodo();
|
||||
}
|
||||
});
|
||||
|
||||
function adicionarPeriodo() {
|
||||
if (periodos.length >= 3) {
|
||||
erro = "Máximo de 3 períodos permitidos";
|
||||
return;
|
||||
}
|
||||
|
||||
periodos.push({
|
||||
id: crypto.randomUUID(),
|
||||
dataInicio: "",
|
||||
dataFim: "",
|
||||
diasCorridos: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function removerPeriodo(id: string) {
|
||||
periodos = periodos.filter(p => p.id !== id);
|
||||
}
|
||||
|
||||
function calcularDias(periodo: Periodo) {
|
||||
if (!periodo.dataInicio || !periodo.dataFim) {
|
||||
periodo.diasCorridos = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const inicio = new Date(periodo.dataInicio);
|
||||
const fim = new Date(periodo.dataFim);
|
||||
|
||||
if (fim < inicio) {
|
||||
erro = "Data final não pode ser anterior à data inicial";
|
||||
periodo.diasCorridos = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const diff = fim.getTime() - inicio.getTime();
|
||||
const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
|
||||
periodo.diasCorridos = dias;
|
||||
erro = "";
|
||||
}
|
||||
|
||||
function validarPeriodos(): boolean {
|
||||
if (periodos.length === 0) {
|
||||
erro = "Adicione pelo menos 1 período";
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const periodo of periodos) {
|
||||
if (!periodo.dataInicio || !periodo.dataFim) {
|
||||
erro = "Preencha as datas de todos os períodos";
|
||||
return false;
|
||||
}
|
||||
|
||||
if (periodo.diasCorridos <= 0) {
|
||||
erro = "Todos os períodos devem ter pelo menos 1 dia";
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Verificar sobreposição de períodos
|
||||
for (let i = 0; i < periodos.length; i++) {
|
||||
for (let j = i + 1; j < periodos.length; j++) {
|
||||
const p1Inicio = new Date(periodos[i].dataInicio);
|
||||
const p1Fim = new Date(periodos[i].dataFim);
|
||||
const p2Inicio = new Date(periodos[j].dataInicio);
|
||||
const p2Fim = new Date(periodos[j].dataFim);
|
||||
|
||||
if (
|
||||
(p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
|
||||
(p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
|
||||
(p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
|
||||
) {
|
||||
erro = "Os períodos não podem se sobrepor";
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
async function enviarSolicitacao() {
|
||||
if (!validarPeriodos()) return;
|
||||
|
||||
try {
|
||||
processando = true;
|
||||
erro = "";
|
||||
|
||||
await client.mutation(api.ferias.criarSolicitacao, {
|
||||
funcionarioId: funcionarioId as any,
|
||||
anoReferencia,
|
||||
periodos: periodos.map(p => ({
|
||||
dataInicio: p.dataInicio,
|
||||
dataFim: p.dataFim,
|
||||
diasCorridos: p.diasCorridos,
|
||||
})),
|
||||
observacao: observacao || undefined,
|
||||
});
|
||||
|
||||
if (onSucesso) onSucesso();
|
||||
} catch (e: any) {
|
||||
erro = e.message || "Erro ao enviar solicitação";
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
periodos.forEach(p => calcularDias(p));
|
||||
});
|
||||
import { useConvexClient } from 'convex-svelte';
|
||||
import { api } from '@sgse-app/backend/convex/_generated/api';
|
||||
|
||||
interface Periodo {
|
||||
id: string;
|
||||
dataInicio: string;
|
||||
dataFim: string;
|
||||
diasCorridos: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
funcionarioId: string;
|
||||
onSucesso?: () => void;
|
||||
onCancelar?: () => void;
|
||||
}
|
||||
|
||||
let { funcionarioId, onSucesso, onCancelar }: Props = $props();
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
let anoReferencia = $state(new Date().getFullYear());
|
||||
let observacao = $state('');
|
||||
let periodos = $state<Periodo[]>([]);
|
||||
let processando = $state(false);
|
||||
let erro = $state('');
|
||||
|
||||
// Adicionar primeiro período ao carregar
|
||||
$effect(() => {
|
||||
if (periodos.length === 0) {
|
||||
adicionarPeriodo();
|
||||
}
|
||||
});
|
||||
|
||||
function adicionarPeriodo() {
|
||||
if (periodos.length >= 3) {
|
||||
erro = 'Máximo de 3 períodos permitidos';
|
||||
return;
|
||||
}
|
||||
|
||||
periodos.push({
|
||||
id: crypto.randomUUID(),
|
||||
dataInicio: '',
|
||||
dataFim: '',
|
||||
diasCorridos: 0
|
||||
});
|
||||
}
|
||||
|
||||
function removerPeriodo(id: string) {
|
||||
periodos = periodos.filter((p) => p.id !== id);
|
||||
}
|
||||
|
||||
function calcularDias(periodo: Periodo) {
|
||||
if (!periodo.dataInicio || !periodo.dataFim) {
|
||||
periodo.diasCorridos = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const inicio = new Date(periodo.dataInicio);
|
||||
const fim = new Date(periodo.dataFim);
|
||||
|
||||
if (fim < inicio) {
|
||||
erro = 'Data final não pode ser anterior à data inicial';
|
||||
periodo.diasCorridos = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const diff = fim.getTime() - inicio.getTime();
|
||||
const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
|
||||
periodo.diasCorridos = dias;
|
||||
erro = '';
|
||||
}
|
||||
|
||||
function validarPeriodos(): boolean {
|
||||
if (periodos.length === 0) {
|
||||
erro = 'Adicione pelo menos 1 período';
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const periodo of periodos) {
|
||||
if (!periodo.dataInicio || !periodo.dataFim) {
|
||||
erro = 'Preencha as datas de todos os períodos';
|
||||
return false;
|
||||
}
|
||||
|
||||
if (periodo.diasCorridos <= 0) {
|
||||
erro = 'Todos os períodos devem ter pelo menos 1 dia';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Verificar sobreposição de períodos
|
||||
for (let i = 0; i < periodos.length; i++) {
|
||||
for (let j = i + 1; j < periodos.length; j++) {
|
||||
const p1Inicio = new Date(periodos[i].dataInicio);
|
||||
const p1Fim = new Date(periodos[i].dataFim);
|
||||
const p2Inicio = new Date(periodos[j].dataInicio);
|
||||
const p2Fim = new Date(periodos[j].dataFim);
|
||||
|
||||
if (
|
||||
(p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
|
||||
(p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
|
||||
(p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
|
||||
) {
|
||||
erro = 'Os períodos não podem se sobrepor';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
async function enviarSolicitacao() {
|
||||
if (!validarPeriodos()) return;
|
||||
|
||||
try {
|
||||
processando = true;
|
||||
erro = '';
|
||||
|
||||
await client.mutation(api.ferias.criarSolicitacao, {
|
||||
funcionarioId: funcionarioId as any,
|
||||
anoReferencia,
|
||||
periodos: periodos.map((p) => ({
|
||||
dataInicio: p.dataInicio,
|
||||
dataFim: p.dataFim,
|
||||
diasCorridos: p.diasCorridos
|
||||
})),
|
||||
observacao: observacao || undefined
|
||||
});
|
||||
|
||||
if (onSucesso) onSucesso();
|
||||
} catch (e: any) {
|
||||
erro = e.message || 'Erro ao enviar solicitação';
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
periodos.forEach((p) => calcularDias(p));
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Solicitar Férias
|
||||
</h2>
|
||||
|
||||
<!-- Ano de Referência -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="ano-referencia">
|
||||
<span class="label-text font-semibold">Ano de Referência</span>
|
||||
</label>
|
||||
<input
|
||||
id="ano-referencia"
|
||||
type="number"
|
||||
class="input input-bordered w-full max-w-xs"
|
||||
bind:value={anoReferencia}
|
||||
min={new Date().getFullYear()}
|
||||
max={new Date().getFullYear() + 2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Períodos -->
|
||||
<div class="mt-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="font-semibold text-lg">Períodos ({periodos.length}/3)</h3>
|
||||
{#if periodos.length < 3}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary gap-2"
|
||||
onclick={adicionarPeriodo}
|
||||
>
|
||||
<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="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Adicionar Período
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
{#each periodos as periodo, index}
|
||||
<div class="card bg-base-200 border border-base-300">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h4 class="font-medium">Período {index + 1}</h4>
|
||||
{#if periodos.length > 1}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-xs btn-error btn-square"
|
||||
aria-label="Remover período"
|
||||
onclick={() => removerPeriodo(periodo.id)}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for={`inicio-${periodo.id}`}>
|
||||
<span class="label-text">Data Início</span>
|
||||
</label>
|
||||
<input
|
||||
id={`inicio-${periodo.id}`}
|
||||
type="date"
|
||||
class="input input-bordered input-sm"
|
||||
bind:value={periodo.dataInicio}
|
||||
onchange={() => calcularDias(periodo)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for={`fim-${periodo.id}`}>
|
||||
<span class="label-text">Data Fim</span>
|
||||
</label>
|
||||
<input
|
||||
id={`fim-${periodo.id}`}
|
||||
type="date"
|
||||
class="input input-bordered input-sm"
|
||||
bind:value={periodo.dataFim}
|
||||
onchange={() => calcularDias(periodo)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for={`dias-${periodo.id}`}>
|
||||
<span class="label-text">Dias Corridos</span>
|
||||
</label>
|
||||
<div id={`dias-${periodo.id}`} class="flex items-center h-9 px-3 bg-base-300 rounded-lg" role="textbox" aria-readonly="true">
|
||||
<span class="font-bold text-lg">{periodo.diasCorridos}</span>
|
||||
<span class="ml-1 text-sm">dias</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Observações -->
|
||||
<div class="form-control mt-6">
|
||||
<label class="label" for="observacao">
|
||||
<span class="label-text font-semibold">Observações (opcional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="observacao"
|
||||
class="textarea textarea-bordered h-24"
|
||||
placeholder="Adicione observações sobre sua solicitação..."
|
||||
bind:value={observacao}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Erro -->
|
||||
{#if erro}
|
||||
<div class="alert alert-error mt-4">
|
||||
<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}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Ações -->
|
||||
<div class="card-actions justify-end mt-6">
|
||||
{#if onCancelar}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost"
|
||||
onclick={onCancelar}
|
||||
disabled={processando}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary gap-2"
|
||||
onclick={enviarSolicitacao}
|
||||
disabled={processando}
|
||||
>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Enviando...
|
||||
{:else}
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Enviar Solicitação
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4 text-2xl">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
Solicitar Férias
|
||||
</h2>
|
||||
|
||||
<!-- Ano de Referência -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="ano-referencia">
|
||||
<span class="label-text font-semibold">Ano de Referência</span>
|
||||
</label>
|
||||
<input
|
||||
id="ano-referencia"
|
||||
type="number"
|
||||
class="input input-bordered w-full max-w-xs"
|
||||
bind:value={anoReferencia}
|
||||
min={new Date().getFullYear()}
|
||||
max={new Date().getFullYear() + 2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Períodos -->
|
||||
<div class="mt-6">
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<h3 class="text-lg font-semibold">Períodos ({periodos.length}/3)</h3>
|
||||
{#if periodos.length < 3}
|
||||
<button type="button" class="btn btn-sm btn-primary gap-2" onclick={adicionarPeriodo}>
|
||||
<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="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Adicionar Período
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
{#each periodos as periodo, index}
|
||||
<div class="card bg-base-200 border-base-300 border">
|
||||
<div class="card-body p-4">
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<h4 class="font-medium">Período {index + 1}</h4>
|
||||
{#if periodos.length > 1}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-xs btn-error"
|
||||
aria-label="Remover período"
|
||||
onclick={() => removerPeriodo(periodo.id)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div class="form-control">
|
||||
<label class="label" for={`inicio-${periodo.id}`}>
|
||||
<span class="label-text">Data Início</span>
|
||||
</label>
|
||||
<input
|
||||
id={`inicio-${periodo.id}`}
|
||||
type="date"
|
||||
class="input input-bordered input-sm"
|
||||
bind:value={periodo.dataInicio}
|
||||
onchange={() => calcularDias(periodo)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for={`fim-${periodo.id}`}>
|
||||
<span class="label-text">Data Fim</span>
|
||||
</label>
|
||||
<input
|
||||
id={`fim-${periodo.id}`}
|
||||
type="date"
|
||||
class="input input-bordered input-sm"
|
||||
bind:value={periodo.dataFim}
|
||||
onchange={() => calcularDias(periodo)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for={`dias-${periodo.id}`}>
|
||||
<span class="label-text">Dias Corridos</span>
|
||||
</label>
|
||||
<div
|
||||
id={`dias-${periodo.id}`}
|
||||
class="bg-base-300 flex h-9 items-center rounded-lg px-3"
|
||||
role="textbox"
|
||||
aria-readonly="true"
|
||||
>
|
||||
<span class="text-lg font-bold">{periodo.diasCorridos}</span>
|
||||
<span class="ml-1 text-sm">dias</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Observações -->
|
||||
<div class="form-control mt-6">
|
||||
<label class="label" for="observacao">
|
||||
<span class="label-text font-semibold">Observações (opcional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="observacao"
|
||||
class="textarea textarea-bordered h-24"
|
||||
placeholder="Adicione observações sobre sua solicitação..."
|
||||
bind:value={observacao}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Erro -->
|
||||
{#if erro}
|
||||
<div class="alert alert-error mt-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
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}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Ações -->
|
||||
<div class="card-actions mt-6 justify-end">
|
||||
{#if onCancelar}
|
||||
<button type="button" class="btn btn-ghost" onclick={onCancelar} disabled={processando}>
|
||||
Cancelar
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary gap-2"
|
||||
onclick={enviarSolicitacao}
|
||||
disabled={processando}
|
||||
>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Enviando...
|
||||
{:else}
|
||||
<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="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Enviar Solicitação
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user