feat: add required field validation and error handling in file upload component

- Introduced a `required` prop in the `FileUpload` component to enforce mandatory file uploads.
- Enhanced error handling by implementing a modal for displaying error messages related to missing required fields and upload issues.
- Updated the `+page.svelte` file to integrate the new error modal and improve user feedback during form submissions.
- Ensured that all relevant file upload sections now validate the presence of documents before allowing form submission.
This commit is contained in:
2025-11-04 03:37:22 -03:00
parent c6c88f85a7
commit 6d613fe618
3 changed files with 444 additions and 287 deletions

View File

@@ -5,6 +5,7 @@
import { toast } from "svelte-sonner";
import FuncionarioSelect from "$lib/components/FuncionarioSelect.svelte";
import FileUpload from "$lib/components/FileUpload.svelte";
import ErrorModal from "$lib/components/ErrorModal.svelte";
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
const client = useConvexClient();
@@ -74,6 +75,14 @@
let salvandoMaternidade = $state(false);
let salvandoPaternidade = $state(false);
// Modal de erro
let erroModal = $state({
aberto: false,
titulo: "",
mensagem: "",
detalhes: "",
});
// Licenças maternidade para prorrogação (derivar dos dados já carregados)
const licencasMaternidade = $derived.by(() => {
const dados = dadosQuery?.data;
@@ -114,10 +123,33 @@
}
}
// Função para mostrar erro em modal
function mostrarErro(titulo: string, mensagem: string, detalhes?: string) {
erroModal = {
aberto: true,
titulo,
mensagem,
detalhes: detalhes || "",
};
}
// Salvar Atestado Médico
async function salvarAtestadoMedico() {
if (!atestadoMedico.funcionarioId || !atestadoMedico.dataInicio || !atestadoMedico.dataFim || !atestadoMedico.cid) {
toast.error("Preencha todos os campos obrigatórios");
mostrarErro(
"Campos obrigatórios",
"Preencha todos os campos obrigatórios antes de salvar.",
"Campos obrigatórios: Funcionário, Data Início, Data Fim e CID"
);
return;
}
if (!atestadoMedico.documentoId) {
mostrarErro(
"Documento obrigatório",
"É necessário anexar o documento do atestado médico.",
"Por favor, faça o upload do arquivo PDF ou imagem do atestado antes de salvar."
);
return;
}
@@ -129,14 +161,16 @@
dataFim: atestadoMedico.dataFim,
cid: atestadoMedico.cid,
observacoes: atestadoMedico.observacoes || undefined,
documentoId: atestadoMedico.documentoId as Id<"_storage"> | undefined,
documentoId: atestadoMedico.documentoId as Id<"_storage">,
});
toast.success("Atestado médico registrado com sucesso!");
resetarFormularioAtestado();
abaAtiva = "dashboard";
} catch (error: any) {
toast.error(error?.message || "Erro ao registrar atestado");
const mensagemErro = error?.message || "Erro ao registrar atestado";
const detalhesErro = error?.data?.message || error?.toString() || "";
mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
} finally {
salvandoAtestado = false;
}
@@ -145,7 +179,20 @@
// Salvar Declaração
async function salvarDeclaracao() {
if (!declaracao.funcionarioId || !declaracao.dataInicio || !declaracao.dataFim) {
toast.error("Preencha todos os campos obrigatórios");
mostrarErro(
"Campos obrigatórios",
"Preencha todos os campos obrigatórios antes de salvar.",
"Campos obrigatórios: Funcionário, Data Início e Data Fim"
);
return;
}
if (!declaracao.documentoId) {
mostrarErro(
"Documento obrigatório",
"É necessário anexar o documento da declaração.",
"Por favor, faça o upload do arquivo PDF ou imagem da declaração antes de salvar."
);
return;
}
@@ -156,14 +203,16 @@
dataInicio: declaracao.dataInicio,
dataFim: declaracao.dataFim,
observacoes: declaracao.observacoes || undefined,
documentoId: declaracao.documentoId as Id<"_storage"> | undefined,
documentoId: declaracao.documentoId as Id<"_storage">,
});
toast.success("Declaração registrada com sucesso!");
resetarFormularioDeclaracao();
abaAtiva = "dashboard";
} catch (error: any) {
toast.error(error?.message || "Erro ao registrar declaração");
const mensagemErro = error?.message || "Erro ao registrar declaração";
const detalhesErro = error?.data?.message || error?.toString() || "";
mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
} finally {
salvandoDeclaracao = false;
}
@@ -172,12 +221,29 @@
// Salvar Licença Maternidade
async function salvarLicencaMaternidade() {
if (!licencaMaternidade.funcionarioId || !licencaMaternidade.dataInicio || !licencaMaternidade.dataFim) {
toast.error("Preencha todos os campos obrigatórios");
mostrarErro(
"Campos obrigatórios",
"Preencha todos os campos obrigatórios antes de salvar.",
"Campos obrigatórios: Funcionário, Data Início e Data Fim"
);
return;
}
if (licencaMaternidade.ehProrrogacao && !licencaMaternidade.licencaOriginalId) {
toast.error("Selecione a licença original para prorrogação");
mostrarErro(
"Licença original obrigatória",
"Para prorrogações, é necessário selecionar a licença original.",
"Selecione a licença de maternidade original no campo 'Licença Original'."
);
return;
}
if (!licencaMaternidade.documentoId) {
mostrarErro(
"Documento obrigatório",
"É necessário anexar o documento da licença de maternidade.",
"Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar."
);
return;
}
@@ -188,7 +254,7 @@
dataInicio: licencaMaternidade.dataInicio,
dataFim: licencaMaternidade.dataFim,
observacoes: licencaMaternidade.observacoes || undefined,
documentoId: licencaMaternidade.documentoId as Id<"_storage"> | undefined,
documentoId: licencaMaternidade.documentoId as Id<"_storage">,
licencaOriginalId: licencaMaternidade.licencaOriginalId as Id<"licencas"> | undefined,
});
@@ -196,7 +262,9 @@
resetarFormularioMaternidade();
abaAtiva = "dashboard";
} catch (error: any) {
toast.error(error?.message || "Erro ao registrar licença");
const mensagemErro = error?.message || "Erro ao registrar licença";
const detalhesErro = error?.data?.message || error?.toString() || "";
mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
} finally {
salvandoMaternidade = false;
}
@@ -205,7 +273,20 @@
// Salvar Licença Paternidade
async function salvarLicencaPaternidade() {
if (!licencaPaternidade.funcionarioId || !licencaPaternidade.dataInicio || !licencaPaternidade.dataFim) {
toast.error("Preencha todos os campos obrigatórios");
mostrarErro(
"Campos obrigatórios",
"Preencha todos os campos obrigatórios antes de salvar.",
"Campos obrigatórios: Funcionário, Data Início e Data Fim"
);
return;
}
if (!licencaPaternidade.documentoId) {
mostrarErro(
"Documento obrigatório",
"É necessário anexar o documento da licença de paternidade.",
"Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar."
);
return;
}
@@ -216,14 +297,16 @@
dataInicio: licencaPaternidade.dataInicio,
dataFim: licencaPaternidade.dataFim,
observacoes: licencaPaternidade.observacoes || undefined,
documentoId: licencaPaternidade.documentoId as Id<"_storage"> | undefined,
documentoId: licencaPaternidade.documentoId as Id<"_storage">,
});
toast.success("Licença paternidade registrada com sucesso!");
resetarFormularioPaternidade();
abaAtiva = "dashboard";
} catch (error: any) {
toast.error(error?.message || "Erro ao registrar licença");
const mensagemErro = error?.message || "Erro ao registrar licença";
const detalhesErro = error?.data?.message || error?.toString() || "";
mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
} finally {
salvandoPaternidade = false;
}
@@ -1220,6 +1303,7 @@
<FileUpload
label="Anexar Atestado (PDF ou Imagem)"
bind:value={atestadoMedico.documentoId}
required={true}
onUpload={async (file) => {
atestadoMedico.documentoId = await handleDocumentoUpload(
file
@@ -1305,6 +1389,7 @@
<FileUpload
label="Anexar Documento (PDF ou Imagem)"
bind:value={declaracao.documentoId}
required={true}
onUpload={async (file) => {
declaracao.documentoId = await handleDocumentoUpload(file);
}}
@@ -1424,6 +1509,7 @@
<FileUpload
label="Anexar Documento (PDF ou Imagem)"
bind:value={licencaMaternidade.documentoId}
required={true}
onUpload={async (file) => {
licencaMaternidade.documentoId = await handleDocumentoUpload(
file
@@ -1512,6 +1598,7 @@
<FileUpload
label="Anexar Documento (PDF ou Imagem)"
bind:value={licencaPaternidade.documentoId}
required={true}
onUpload={async (file) => {
licencaPaternidade.documentoId = await handleDocumentoUpload(
file
@@ -1560,3 +1647,14 @@
{/if}
</main>
<!-- Modal de Erro -->
<ErrorModal
bind:open={erroModal.aberto}
title={erroModal.titulo}
message={erroModal.mensagem}
details={erroModal.detalhes}
onClose={() => {
erroModal.aberto = false;
}}
/>