feat: adicionar upload e delete de anexos do paciente
This commit is contained in:
parent
4b404c0f5b
commit
908d54569b
@ -1,8 +1,53 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import InputMask from "react-input-mask";
|
||||
import "./style/styleagendamentos.css";
|
||||
|
||||
const FormNovaConsulta = ({ onCancel }) => {
|
||||
const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [anexos, setAnexos] = useState([]);
|
||||
const [loadingAnexos, setLoadingAnexos] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!patientID) return;
|
||||
|
||||
const fetchAnexos = async () => {
|
||||
setLoadingAnexos(true);
|
||||
try {
|
||||
const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`);
|
||||
const data = await res.json();
|
||||
setAnexos(data.data || []);
|
||||
} catch (err) {
|
||||
console.error("Erro ao buscar anexos:", err);
|
||||
} finally {
|
||||
setLoadingAnexos(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAnexos();
|
||||
}, [patientID]);
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!selectedFile) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", selectedFile);
|
||||
|
||||
try {
|
||||
const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`, {
|
||||
method: "POST",
|
||||
body: formData
|
||||
});
|
||||
if (res.ok) {
|
||||
const novoAnexo = await res.json();
|
||||
setAnexos(prev => [...prev, novoAnexo]);
|
||||
setSelectedFile(null);
|
||||
} else {
|
||||
console.error("Erro ao enviar anexo");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Erro ao enviar anexo:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
alert("Agendamento salvo!");
|
||||
@ -55,7 +100,29 @@ const FormNovaConsulta = ({ onCancel }) => {
|
||||
|
||||
<h3 className="section-subtitle">Informações adicionais</h3>
|
||||
<button type="button" className="btn-secondary">Documentos e anexos</button>
|
||||
|
||||
<label htmlFor="anexo-input" className="btn btn-secondary">Adicionar Anexo</label>
|
||||
<input
|
||||
type="file"
|
||||
id="anexo-input"
|
||||
className="d-none"
|
||||
onChange={(e) => setSelectedFile(e.target.files[0])}
|
||||
/>
|
||||
{selectedFile && (
|
||||
<button type="button" className="btn btn-primary ms-2" onClick={handleUpload}>
|
||||
Enviar
|
||||
</button>
|
||||
)}
|
||||
<div className="anexos-list">
|
||||
{loadingAnexos ? (
|
||||
<p>Carregando anexos...</p>
|
||||
) : (
|
||||
anexos.map((anexo, index) => (
|
||||
<div key={index} className="anexo-item">
|
||||
<span>{anexo.nome || anexo.fileName}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<h2 className="section-title">Informações do atendimento</h2>
|
||||
|
||||
<label>Nome do profissional *</label>
|
||||
|
||||
@ -167,7 +167,8 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
|
||||
alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.');
|
||||
return;
|
||||
@ -181,7 +182,7 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
}
|
||||
|
||||
|
||||
onSave({
|
||||
const pacienteSalvo = await onSave({
|
||||
...formData,
|
||||
endereco: {
|
||||
cep: enderecoData.cep,
|
||||
@ -214,8 +215,52 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
pacienteVip: formData.pacienteVip,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const pacienteId = pacienteSalvo.id;
|
||||
|
||||
try{
|
||||
if (formData.foto) await uploadFotoPaciente(pacienteId, formData.foto);
|
||||
if (formData.anexos) await uploadAnexoPaciente(pacienteId, formData.anexos);
|
||||
alert("Paciente salvo com sucesso!");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Erro ao salvar paciente ou enviar arquivos.");
|
||||
}
|
||||
};
|
||||
const uploadFotoPaciente = async (pacienteId, foto) => {
|
||||
const formDataUpload = new FormData();
|
||||
formDataUpload.append('foto', foto);
|
||||
|
||||
try {
|
||||
const res = await fetch(`https://suaapi.com/pacientes/${pacienteId}/foto`, {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': 'Bearer <token>' },
|
||||
body: formDataUpload
|
||||
});
|
||||
if (!res.ok) throw new Error('Erro ao enviar foto');
|
||||
alert('Foto enviada com sucesso!');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Falha ao enviar foto');
|
||||
}
|
||||
};
|
||||
const uploadAnexoPaciente = async (pacienteId, anexo) => {
|
||||
const formDataUpload = new FormData();
|
||||
formDataUpload.append('anexo', anexo);
|
||||
try {
|
||||
const res = await fetch(`https://suaapi.com/pacientes/${pacienteId}/anexos`, {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': 'Bearer <token>' },
|
||||
body: formDataUpload
|
||||
});
|
||||
if (!res.ok) throw new Error('Erro ao enviar anexo');
|
||||
alert('Anexo enviado com sucesso!');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Falha ao enviar anexo');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-3">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
@ -3,17 +3,69 @@ import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
|
||||
|
||||
const Details = ({ patientID, setCurrentPage }) => {
|
||||
const [paciente, setPaciente] = useState({});
|
||||
const [anexos, setAnexos] = useState([]);
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!patientID) return;
|
||||
|
||||
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
|
||||
.then(res => res.json())
|
||||
|
||||
|
||||
.then(result => {setPaciente(result.data)})
|
||||
.catch(err => console.error("Erro ao buscar paciente:", err));
|
||||
|
||||
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`)
|
||||
.then(res => res.json())
|
||||
.then(data => setAnexos(data.data || []))
|
||||
.catch(err => console.error("Erro ao buscar anexos:", err));
|
||||
|
||||
}, [patientID]);
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!selectedFile) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', selectedFile);
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const newAnexo = await response.json();
|
||||
setAnexos(prev => [...prev, newAnexo]);
|
||||
setSelectedFile(null);
|
||||
} else {
|
||||
console.error('Erro ao enviar anexo');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erro ao enviar anexo:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (anexoId) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${anexoId}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
setAnexos((prev) => prev.filter((a) => a.id !== anexoId));
|
||||
} else {
|
||||
console.error("Erro ao deletar anexo");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Erro ao deletar anexo:", err);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
@ -137,7 +189,29 @@ const Details = ({ patientID, setCurrentPage }) => {
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Anexos do Paciente:</label>
|
||||
<p>{ "-"}</p>
|
||||
{anexos.length > 0 ?(
|
||||
<ul>
|
||||
{anexos.map((anexo) => (
|
||||
<li key={anexo.id} className="d-flex aling-items-center">
|
||||
<a href={anexo.url} target="-blank" rel="noopener noreferrer">
|
||||
{anexo.nome}
|
||||
</a>
|
||||
<button className="btn btn-danger btn-sm" onclick={() => handleDelete(anexo.id)} >Remover</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>-</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>
|
||||
Carregar Um Novo Anexo
|
||||
</label>
|
||||
<input
|
||||
type="file" className="form-control d-none" name="foto" id="foto-input" onChange={(e) => setSelectedFile(e.target.files[0])} accept="image/*"/>
|
||||
{selectedFile && <span className="ms-2" style={{ fontSize: '1rem' }}>{selectedFile.name}</span>}
|
||||
<button onClick={handleUpload} className="btn btn-success ms-2">Enviar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user