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

refactor: clean up Svelte components and improve code readability

Browse Source 
- Refactored multiple Svelte components to enhance code clarity and maintainability.
- Standardized formatting and indentation across various files for consistency.
- Improved error handling messages in the AprovarAusencias component for better user feedback.
- Updated class names in the UI components to align with the new design system.
- Removed unnecessary whitespace and comments to streamline the codebase.
This commit is contained in:
killer-cf
2025-11-08 10:11:40 -03:00
parent 28107b4050
commit 01138b3e1c
24 changed files with 4655 additions and 1927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte
View File

@@ -22,7 +22,11 @@
// Dados da solicitação
let anoSelecionado = $state(new Date().getFullYear());
let periodosFerias: Array<{ dataInicio: string; dataFim: string; dias: number }> = $state([]);
let periodosFerias: Array<{
dataInicio: string;
dataFim: string;
dias: number;
}> = $state([]);
let observacao = $state("");
let processando = $state(false);
@@ -31,7 +35,7 @@
useQuery(api.saldoFerias.obterSaldo, {
funcionarioId,
anoReferencia: anoSelecionado,
})
}),
);
const validacaoQuery = $derived(
@@ -44,14 +48,14 @@
dataFim: p.dataFim,
})),
})
: { data: null }
: { data: null },
);
// Derivados
const saldo = $derived(saldoQuery.data);
const validacao = $derived(validacaoQuery.data);
const totalDiasSelecionados = $derived(
periodosFerias.reduce((acc, p) => acc + p.dias, 0)
periodosFerias.reduce((acc, p) => acc + p.dias, 0),
);
// Anos disponíveis (últimos 3 anos + próximo ano)
@@ -61,9 +65,11 @@
});
// Configurações do calendário (baseado no saldo/regime)
const maxPeriodos = $derived(saldo?.regimeTrabalho?.includes("Servidor") ? 2 : 3);
const maxPeriodos = $derived(
saldo?.regimeTrabalho?.includes("Servidor") ? 2 : 3,
);
const minDiasPorPeriodo = $derived(
saldo?.regimeTrabalho?.includes("Servidor") ? 10 : 5
saldo?.regimeTrabalho?.includes("Servidor") ? 10 : 5,
);
// Funções
@@ -154,7 +160,9 @@
class:border-primary={passoAtual === i + 1}
class:bg-base-200={passoAtual < i + 1}
class:text-base-content={passoAtual < i + 1}
style:box-shadow={passoAtual === i + 1 ? "0 0 20px rgba(102, 126, 234, 0.5)" : "none"}
style:box-shadow={passoAtual === i + 1
? "0 0 20px rgba(102, 126, 234, 0.5)"
: "none"}
>
{#if passoAtual > i + 1}
<svg
@@ -191,13 +199,19 @@
<!-- Labels dos passos -->
<div class="flex justify-between mt-4 px-1">
<div class="text-center flex-1">
<p class="text-sm font-semibold" class:text-primary={passoAtual === 1}>Ano & Saldo</p>
<p class="text-sm font-semibold" class:text-primary={passoAtual === 1}>
Ano & Saldo
</p>
</div>
<div class="text-center flex-1">
<p class="text-sm font-semibold" class:text-primary={passoAtual === 2}>Períodos</p>
<p class="text-sm font-semibold" class:text-primary={passoAtual === 2}>
Períodos
</p>
</div>
<div class="text-center flex-1">
<p class="text-sm font-semibold" class:text-primary={passoAtual === 3}>Confirmação</p>
<p class="text-sm font-semibold" class:text-primary={passoAtual === 3}>
Confirmação
</p>
</div>
</div>
</div>
@@ -207,7 +221,9 @@
<!-- PASSO 1: Ano & Saldo -->
{#if passoAtual === 1}
<div class="passo-content animate-fadeIn">
<h2 class="text-3xl font-bold mb-6 text-center bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
<h2
class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
>
Escolha o Ano de Referência
</h2>
@@ -231,14 +247,16 @@
<div class="skeleton h-64 w-full rounded-2xl"></div>
{:else if saldo}
<div
class="card bg-gradient-to-br from-primary/10 to-secondary/10 shadow-2xl border-2 border-primary/20"
class="card bg-linear-to-br from-primary/10 to-secondary/10 shadow-2xl border-2 border-primary/20"
>
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
📊 Saldo de Férias {anoSelecionado}
</h3>
<div class="stats stats-vertical lg:stats-horizontal shadow-lg w-full">
<div
class="stats stats-vertical lg:stats-horizontal shadow-lg w-full"
>
<div class="stat">
<div class="stat-figure text-primary">
<svg
@@ -277,7 +295,9 @@
</svg>
</div>
<div class="stat-title">Disponível</div>
<div class="stat-value text-success">{saldo.diasDisponiveis}</div>
<div class="stat-value text-success">
{saldo.diasDisponiveis}
</div>
<div class="stat-desc">para usar</div>
</div>
@@ -321,7 +341,9 @@
<div>
<h4 class="font-bold">{saldo.regimeTrabalho}</h4>
<p class="text-sm">
Período aquisitivo: {new Date(saldo.dataInicio).toLocaleDateString("pt-BR")}
Período aquisitivo: {new Date(
saldo.dataInicio,
).toLocaleDateString("pt-BR")}
a {new Date(saldo.dataFim).toLocaleDateString("pt-BR")}
</p>
</div>
@@ -371,7 +393,9 @@
<!-- PASSO 2: Seleção de Períodos -->
{#if passoAtual === 2}
<div class="passo-content animate-fadeIn">
<h2 class="text-3xl font-bold mb-6 text-center bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
<h2
class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
>
Selecione os Períodos de Férias
</h2>
@@ -393,7 +417,8 @@
<div>
<p>
<strong>Saldo disponível:</strong>
{saldo?.diasDisponiveis || 0} dias | <strong>Selecionados:</strong>
{saldo?.diasDisponiveis || 0} dias |
<strong>Selecionados:</strong>
{totalDiasSelecionados} dias | <strong>Restante:</strong>
{(saldo?.diasDisponiveis || 0) - totalDiasSelecionados} dias
</p>
@@ -405,10 +430,10 @@
periodosExistentes={periodosFerias}
onPeriodoAdicionado={handlePeriodoAdicionado}
onPeriodoRemovido={handlePeriodoRemovido}
maxPeriodos={maxPeriodos}
minDiasPorPeriodo={minDiasPorPeriodo}
modoVisualizacao="month">
</CalendarioFerias>
{maxPeriodos}
{minDiasPorPeriodo}
modoVisualizacao="month"
></CalendarioFerias>
<!-- Validações -->
{#if validacao && periodosFerias.length > 0}
@@ -428,7 +453,9 @@
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>✅ Períodos válidos! Total: {validacao.totalDias} dias</span>
<span
>✅ Períodos válidos! Total: {validacao.totalDias} dias</span
>
</div>
{:else}
<div class="alert alert-error">
@@ -489,7 +516,9 @@
<!-- PASSO 3: Confirmação -->
{#if passoAtual === 3}
<div class="passo-content animate-fadeIn">
<h2 class="text-3xl font-bold mb-6 text-center bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
<h2
class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
>
Confirme sua Solicitação
</h2>
@@ -506,7 +535,9 @@
<div class="stat bg-base-200 rounded-lg">
<div class="stat-title">Total de Dias</div>
<div class="stat-value text-success">{totalDiasSelecionados}</div>
<div class="stat-value text-success">
{totalDiasSelecionados}
</div>
</div>
</div>
@@ -521,11 +552,14 @@
</div>
<div class="flex-1">
<p class="font-semibold">
{new Date(periodo.dataInicio).toLocaleDateString("pt-BR", {
day: "2-digit",
month: "long",
year: "numeric",
})}
{new Date(periodo.dataInicio).toLocaleDateString(
"pt-BR",
{
day: "2-digit",
month: "long",
year: "numeric",
},
)}
até
{new Date(periodo.dataFim).toLocaleDateString("pt-BR", {
day: "2-digit",
@@ -533,7 +567,9 @@
year: "numeric",
})}
</p>
<p class="text-sm text-base-content/70">{periodo.dias} dias corridos</p>
<p class="text-sm text-base-content/70">
{periodo.dias} dias corridos
</p>
</div>
</div>
{/each}
@@ -542,7 +578,9 @@
<!-- Campo de Observação -->
<div class="form-control mt-6">
<label for="observacao" class="label">
<span class="label-text font-semibold">Observações (opcional)</span>
<span class="label-text font-semibold"
>Observações (opcional)</span
>
</label>
<textarea
id="observacao"
@@ -561,7 +599,11 @@
<div class="flex justify-between mt-8">
<div>
{#if passoAtual > 1}
<button type="button" class="btn btn-outline btn-lg gap-2" onclick={passoAnterior}>
<button
type="button"
class="btn btn-outline btn-lg gap-2"
onclick={passoAnterior}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
@@ -685,4 +727,3 @@
}
}
</style>