alterações no roteamento da tabela de paciente e sidebar
This commit is contained in:
jp-lima
parent
54c337aaae
commit
a7d42e61d7
123
src/components/Sidebar.jsx
Normal file
123
src/components/Sidebar.jsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import menuItems from "../data/sidebar-items.json";
|
||||||
|
|
||||||
|
function Sidebar() {
|
||||||
|
const [isActive, setIsActive] = useState(true);
|
||||||
|
const [openSubmenu, setOpenSubmenu] = useState(null);
|
||||||
|
|
||||||
|
const toggleSidebar = () => {
|
||||||
|
setIsActive(!isActive);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmenuClick = (submenuName) => {
|
||||||
|
setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderLink = (item) => {
|
||||||
|
// Links internos (rotas do React Router)
|
||||||
|
if (item.url && item.url.startsWith("/")) {
|
||||||
|
return (
|
||||||
|
<Link to={item.url} className="sidebar-link">
|
||||||
|
{item.icon && <i className={`bi bi-${item.icon}`}></i>}
|
||||||
|
<span>{item.name}</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Links externos
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={item.url}
|
||||||
|
className="sidebar-link"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
{item.icon && <i className={`bi bi-${item.icon}`}></i>}
|
||||||
|
<span>{item.name}</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="sidebar" className={isActive ? "active" : ""}>
|
||||||
|
<div className="sidebar-wrapper active">
|
||||||
|
<div className="sidebar-header">
|
||||||
|
<div className="d-flex justify-content-between">
|
||||||
|
<div className="logo">
|
||||||
|
<Link to="/">
|
||||||
|
<h1>MediConnect</h1>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="toggler">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="sidebar-hide d-xl-none d-block btn"
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
>
|
||||||
|
<i className="bi bi-x bi-middle"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sidebar-menu">
|
||||||
|
<ul className="menu">
|
||||||
|
{menuItems.map((item, index) => {
|
||||||
|
if (item.isTitle) {
|
||||||
|
return (
|
||||||
|
<li key={index} className="sidebar-title">
|
||||||
|
{item.name}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.submenu) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={index}
|
||||||
|
className={`sidebar-item has-sub ${
|
||||||
|
openSubmenu === item.key ? "active" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="sidebar-link btn"
|
||||||
|
onClick={() => handleSubmenuClick(item.key)}
|
||||||
|
>
|
||||||
|
<i className={`bi bi-${item.icon}`}></i>
|
||||||
|
<span>{item.name}</span>
|
||||||
|
</button>
|
||||||
|
<ul
|
||||||
|
className={`submenu ${
|
||||||
|
openSubmenu === item.key ? "active" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.submenu.map((subItem, subIndex) => (
|
||||||
|
<li key={subIndex} className="submenu-item">
|
||||||
|
{renderLink(subItem)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li key={index} className="sidebar-item">
|
||||||
|
{renderLink(item)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="sidebar-toggler btn x" onClick={toggleSidebar}>
|
||||||
|
<i data-feather="x"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
363
src/pages/TablePaciente.jsx
Normal file
363
src/pages/TablePaciente.jsx
Normal file
@ -0,0 +1,363 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
// estados do modal
|
||||||
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
|
const [selectedPatientId, setSelectedPatientId] = useState(null);
|
||||||
|
|
||||||
|
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;
|
||||||
|
} 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 de exclusão atualizada
|
||||||
|
const deletePatient = async (id) => {
|
||||||
|
await DeleteAnexo(id);
|
||||||
|
|
||||||
|
const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fetch(
|
||||||
|
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
|
||||||
|
requestOptionsDelete
|
||||||
|
);
|
||||||
|
setPacientes((prev) => prev.filter((p) => p.id !== id));
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Deu problema", error);
|
||||||
|
} finally {
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Requisição inicial para buscar pacientes
|
||||||
|
useEffect(() => {
|
||||||
|
fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((result) => console.log(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>
|
||||||
|
<Link to={'/pacientes/cadastro'}>
|
||||||
|
<button
|
||||||
|
className="btn btn-primary"
|
||||||
|
|
||||||
|
>
|
||||||
|
<i className="bi bi-plus-circle"></i> Adicionar Paciente
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</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>
|
||||||
|
<th></th>
|
||||||
|
<th>Ações</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>
|
||||||
|
|
||||||
|
{/* Botão que abre o modal */}
|
||||||
|
<button
|
||||||
|
className="btn btn-sm"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "#F8D7DA",
|
||||||
|
color: "#721C24",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedPatientId(paciente.id);
|
||||||
|
setShowDeleteModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Modal de confirmaçã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 paciente?
|
||||||
|
</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={() => deletePatient(selectedPatientId)}
|
||||||
|
>
|
||||||
|
<i className="bi bi-trash me-1"></i> Excluir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TablePaciente;
|
||||||
Loading…
x
Reference in New Issue
Block a user