RiseUP/riseup-squad23
4
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

melhorar organização e adição de modal para excluir

Browse Source
This commit is contained in:
jp-lima 2025-09-25 10:47:18 -03:00
parent 355f2a5d0a
commit 54625235d5
9 changed files with 95 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import Sidebar from './components/Sidebar';
//import Header from './components/Header';
import Table from "./pages/Table";
import TablePaciente from "./pages/TablePaciente";
import Inicio from './pages/Inicio';
import PatientCadastroManager from './pages/PatientCadastroManager';
@ -34,7 +34,7 @@ function App() {
case 'doctor-form-layout':
return <DoctorCadastroManager />;
case 'table':
return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
return <TablePaciente setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
case 'doctor-table':
return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
case 'details-page-paciente':
@ -42,7 +42,7 @@ function App() {
case 'details-page-doctor':
return <DoctorDetails patientID={patientID} setCurrentPage={setCurrentPage} />;
case 'edit-page-paciente':
return <EditPage id={patientID} />;
return <EditPage id={patientID} setCurrentPage={setCurrentPage}/>;
case 'edit-page-doctor':
return <DoctorEditPage id={patientID} />;
case 'laudo-manager':

20
src/components/doctors/DoctorList.jsx
View File

@ -1,20 +0,0 @@
import React from 'react';
// Este componente recebe uma função 'onAddDoctor' para avisar que o botão foi clicado
function DoctorList({ onAddPatient }) {
return (
<div className="card">
<div className="card-header">
<h4 className="card-title">Médicos</h4>
</div>
<div className="card-body">
<p>Gerencie os médicos cadastrados no sistema.</p>
<button className="btn btn-primary" onClick={onAddPatient}>
<i className="bi bi-plus-circle"></i> Adicionar Médico
</button>
</div>
</div>
);
}
export default DoctorList;

4
src/components/patients/PatientForm.jsx
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
function PatientForm({ onSave, onCancel,formData, setFormData }) {
function PatientForm({ onSave, onCancel,formData, setFormData,setCurrentPage }) {
// Estado para controlar modal de feedback
const [showMessage, setShowMessage] = useState(false);
@ -296,7 +296,7 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
{message}
</div>
<div className="modal-footer" style={{ borderTop: '2px solid #23336f1a', justifyContent: 'flex-end' }}>
<button type="button" className="btn btn-primary" style={{ minWidth: 100 }} onClick={() => setShowMessage(false)}>
<button type="button" className="btn btn-primary" style={{ minWidth: 100 }} onClick={setCurrentPage('table')}>
Fechar
</button>
</div>

20
src/components/patients/PatientList.jsx
View File

@ -1,20 +0,0 @@
import React from 'react';
// Este componente recebe uma função 'onAddPatient' para avisar que o botão foi clicado
function PatientList({ onAddPatient }) {
return (
<div className="card">
<div className="card-header">
<h4 className="card-title">Pacientes</h4>
</div>
<div className="card-body">
<p>Gerencie os pacientes cadastrados no sistema.</p>
<button className="btn btn-primary" onClick={onAddPatient}>
<i className="bi bi-plus-circle"></i> Adicionar Paciente
</button>
</div>
</div>
);
}
export default PatientList;

14
src/pages/DoctorCadastroManager.jsx
View File

@ -1,12 +1,12 @@
import React, { useState } from 'react';
// Importamos os dois novos componentes que criamos
import DoctorList from '../components/doctors/DoctorList';
import DoctorForm from '../components/doctors/DoctorForm';
function DoctorCadastroManager( ) {
// Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
const [view, setView] = useState('form');
var myHeaders = new Headers();
@ -36,7 +36,7 @@ function DoctorCadastroManager( ) {
setModalMsg(`Médico "${patientData.nome}" salvo com sucesso!`);
setShowModal(true);
setView('list');
};
return (
@ -66,15 +66,13 @@ function DoctorCadastroManager( ) {
<div className="page-content">
<section className="row">
<div className="col-12">
{view === 'list' ? (
<DoctorList onAddPatient={() => setView('form')} />
) : (
<DoctorForm
onSave={handleSavePatient}
onCancel={() => setView('list')}
onCancel={console.log('hsh')}
PatientDict={{}}
/>
)}
</div>
</section>
</div>

81
src/pages/DoctorTable.jsx
View File

@ -5,19 +5,25 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
const [search, setSearch] = useState("");
const [filtroAniversariante, setFiltroAniversariante] = useState(false);
// estados do modal
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [selectedDoctorId, setSelectedDoctorId] = useState(null);
// Função para excluir médicos
const deleteDoctor = async (id) => {
const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
if (!window.confirm("Tem certeza que deseja excluir este médico?")) return;
try {
await fetch(
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
requestOptionsDelete
)
.then((response) => response.text())
.then((mensage) => console.log(mensage))
.catch((error) => console.log("Deu problema", error));
);
setMedicos((prev) => prev.filter((m) => m.id !== id));
} catch (error) {
console.log("Deu problema", error);
} finally {
setShowDeleteModal(false);
}
};
// Função para verificar se hoje é aniversário
@ -60,7 +66,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
<section className="row">
<div className="col-12">
<div className="card">
<div className="card-header d-flex justify-content-between align-items-center">
<h4 className="card-title mb-0">Médicos Cadastrados</h4>
<button
@ -72,7 +77,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
</div>
<div className="card-body">
<div className="d-flex gap-2 mb-3">
<input
type="text"
@ -95,7 +99,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
</button>
</div>
<div className="table-responsive">
<table className="table table-striped table-hover">
<thead>
@ -105,7 +108,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
<th>Email</th>
<th>Telefone</th>
<th></th>
<th></th>
<th>Ações</th>
</tr>
</thead>
<tbody>
@ -130,7 +133,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
<td>
<div className="d-flex gap-2">
{/* Ver Detalhes */}
<button
className="btn btn-sm"
style={{
@ -146,6 +149,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
Detalhes
</button>
{/* Editar */}
<button
className="btn btn-sm"
style={{
@ -160,13 +164,17 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
<i className="bi bi-pencil me-1"></i> Editar
</button>
<button
className="btn btn-sm"
style={{
backgroundColor: "#F8D7DA",
color: "#721C24",
}}
onClick={() => deleteDoctor(medico.id)}
onClick={() => {
setSelectedDoctorId(medico.id);
setShowDeleteModal(true);
}}
>
<i className="bi bi-trash me-1"></i> Excluir
</button>
@ -189,6 +197,55 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
</div>
</section>
</div>
{/* Modal de confirmação de exclusão */}
{showDeleteModal && (
<div
className="modal fade show"
style={{
display: "block",
backgroundColor: "rgba(0, 0, 0, 0.5)",
}}
tabIndex="-1"
onClick={(e) =>
e.target.classList.contains("modal") && setShowDeleteModal(false)
}
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header bg-danger bg-opacity-25">
<h5 className="modal-title text-danger"> Confirmação de Exclusão</h5>
<button
type="button"
className="btn-close"
onClick={() => setShowDeleteModal(false)}
></button>
</div>
<div className="modal-body">
<p className="mb-0 fs-5">
Tem certeza que deseja excluir este médico?
</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={() => setShowDeleteModal(false)}
>
Cancelar
</button>
<button
type="button"
className="btn btn-danger"
onClick={() => deleteDoctor(selectedDoctorId)}
>
<i className="bi bi-trash me-1"></i> Excluir
</button>
</div>
</div>
</div>
</div>
)}
</>
);
}

20
src/pages/EditPage.jsx
View File

@ -4,7 +4,7 @@ import PatientForm from '../components/patients/PatientForm'
import {useEffect, useState} from 'react'
const EditPage = ( {id}) => {
const EditPage = ( {id, setCurrentPage}) => {
const [PatientToPUT, setPatientPUT] = useState({})
@ -22,9 +22,10 @@ fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOpt
.then(data => setPatientPUT(data))
.catch(error => console.log('error', error));
}, [])
}, [id,requestOptions])
const HandlePutPatient = async () => {
//alert(`Atualizando paciente "${PatientToPUT.nome}" com sucesso`);
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
@ -51,25 +52,22 @@ const HandlePutPatient = async () => {
const result = await response.json();
console.log("ATUALIZADO COM SUCESSO", result);
return result; // <- importante!
return result;
} catch (error) {
console.error("Erro ao atualizar paciente:", error);
throw error;
}
};
return (
<div>
<PatientForm
onSave={HandlePutPatient}
onCancel={console.log('Não atualizar')}
onCancel={() => {setCurrentPage('table')}}
setCurrentPage={setCurrentPage}
formData={PatientToPUT}
setFormData={setPatientPUT}
/>

4
src/pages/PatientCadastroManager.jsx
View File

@ -1,12 +1,9 @@
import {useState} from 'react';
import PatientForm from '../components/patients/PatientForm';
function PatientCadastroManager( {setCurrentPage} ) {
const [formData, setFormData] = useState({})
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
@ -30,6 +27,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions);
const result = await response.json();
console.log("Paciente salvo no backend:", result);
setCurrentPage('table')
return result;
} catch (error) {
console.error("Erro ao salvar paciente:", error);

295
src/pages/Table.jsx
View File

@ -1,295 +0,0 @@
import React, { useState, useEffect } from "react";
function TablePaciente({ setCurrentPage, setPatientID }) {
const [pacientes, setPacientes] = useState([]);
const [search, setSearch] = useState("");
const [filtroConvenio, setFiltroConvenio] = useState("Todos");
const [filtroVIP, setFiltroVIP] = useState(false);
const [filtroAniversariante, setFiltroAniversariante] = useState(false);
const GetAnexos = async (id) => {
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
try {
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`, requestOptions);
const result = await response.json();
return result.data; // agora retorna corretamente
} catch (error) {
console.log('error', error);
return [];
}
}
const DeleteAnexo = async (patientID) => {
const RespostaGetAnexos = await GetAnexos(patientID)
for(let i = 0; i < RespostaGetAnexos.length; i++){
const idAnexo = RespostaGetAnexos[i].id;
console.log('anexos',RespostaGetAnexos)
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
var requestOptions = {
method: 'DELETE',
headers: myHeaders,
redirect: 'follow'
};
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`, requestOptions)
.then(response => response.text())
.then(result => console.log('anexo excluido com sucesso',result))
.catch(error => console.log('error', error));
}
}
// Função para excluir paciente
const deletePatient = async (id) => {
DeleteAnexo(id)
const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
if (!window.confirm("Tem certeza que deseja excluir este paciente?")) return;
await fetch(
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
requestOptionsDelete
)
.then((response) => response.text())
.then((mensage) => console.log(mensage))
.catch((error) => console.log("Deu problema", error));
};
// Requisição inicial para buscar pacientes
useEffect(() => {
fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
.then((response) => response.json())
.then((result) => setPacientes(result["data"]))
.catch((error) =>
console.log("Erro para encontrar pacientes no banco de dados", error)
);
}, []);
// Função para verificar se hoje é aniversário do paciente
const ehAniversariante = (dataNascimento) => {
if (!dataNascimento) return false;
const hoje = new Date();
const nascimento = new Date(dataNascimento);
return (
hoje.getDate() === nascimento.getDate() &&
hoje.getMonth() === nascimento.getMonth()
);
};
const pacientesFiltrados = pacientes.filter((paciente) => {
const texto = `${paciente.nome}`.toLowerCase();
const passaBusca = texto.includes(search.toLowerCase());
const passaVIP = filtroVIP ? paciente.vip === true : true;
const passaConvenio =
filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
const passaAniversario = filtroAniversariante
? ehAniversariante(paciente.data_nascimento)
: true;
return passaBusca && passaVIP && passaConvenio && passaAniversario;
});
return (
<>
<div className="page-heading">
<h3>Lista de Pacientes</h3>
</div>
<div className="page-content">
<section className="row">
<div className="col-12">
<div className="card">
<div className="card-header d-flex justify-content-between align-items-center">
<h4 className="card-title mb-0">Pacientes Cadastrados</h4>
<button
className="btn btn-primary"
onClick={() => setCurrentPage("form-layout")}
>
<i className="bi bi-plus-circle"></i> Adicionar Paciente
</button>
</div>
<div className="card-body">
<div className="card p-3 mb-3">
<h5 className="mb-3">
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
</h5>
<div
className="d-flex flex-nowrap align-items-center gap-2"
style={{ overflowX: "auto", paddingBottom: "6px" }}
>
<input
type="text"
className="form-control"
placeholder="Buscar por nome..."
value={search}
onChange={(e) => setSearch(e.target.value)}
style={{
minWidth: 250,
maxWidth: 300,
width: 260,
flex: "0 0 auto",
}}
/>
<select
className="form-select"
value={filtroConvenio}
onChange={(e) => setFiltroConvenio(e.target.value)}
style={{
minWidth: 200,
width: 180,
flex: "0 0 auto",
}}
>
<option>Todos os Convênios</option>
<option>Bradesco Saúde</option>
<option>Hapvida</option>
<option>Unimed</option>
</select>
<button
className={`btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setFiltroVIP(!filtroVIP)}
style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
>
<i className="bi bi-award me-1"></i> VIP
</button>
<button
className={`btn ${filtroAniversariante
? "btn-primary"
: "btn-outline-primary"
}`}
onClick={() =>
setFiltroAniversariante(!filtroAniversariante)
}
style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
>
<i className="bi bi-calendar me-1"></i> Aniversariantes
</button>
</div>
</div>
<div className="table-responsive">
<table className="table table-striped table-hover">
<thead>
<tr>
<th>Nome</th>
<th>CPF</th>
<th>Email</th>
<th>Telefone</th>
</tr>
</thead>
<tbody>
{pacientesFiltrados.length > 0 ? (
pacientesFiltrados.map((paciente) => (
<tr key={paciente.id}>
<td>{paciente.nome}</td>
<td>{paciente.cpf}</td>
<td>{paciente.email}</td>
<td>{paciente.telefone}</td>
<td>
<span
className={`badge ${paciente.ativo === "ativo"
? "bg-success"
: "bg-danger"
}`}
>
{paciente.ativo}
</span>
</td>
<td>
<div className="d-flex gap-2">
<button
className="btn btn-sm"
style={{
backgroundColor: "#E6F2FF",
color: "#004085",
}}
onClick={() => {
setCurrentPage("details-page-paciente");
setPatientID(paciente.id);
}}
>
<i className="bi bi-eye me-1"></i> Ver Detalhes
</button>
<button
className="btn btn-sm"
style={{
backgroundColor: "#FFF3CD",
color: "#856404",
}}
onClick={() => {
setCurrentPage("edit-page-paciente");
setPatientID(paciente.id);
}}
>
<i className="bi bi-pencil me-1"></i> Editar
</button>
<button
className="btn btn-sm"
style={{
backgroundColor: "#F8D7DA",
color: "#721C24",
}}
onClick={() => deletePatient(paciente.id)}
>
<i className="bi bi-trash me-1"></i> Excluir
</button>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="8" className="text-center">
Nenhum paciente encontrado.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
</>
);
}
export default TablePaciente;