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

Começo da fila de espera e icones de formulario

Browse Source
This commit is contained in:
jp-lima 2025-09-24 10:35:37 -03:00
parent 8866ebedbf
commit 00b58733e1
10 changed files with 156 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/AgendarConsulta/FormNovaConsulta.jsx
View File

@ -3,6 +3,40 @@ import InputMask from "react-input-mask";
import "./style/formagendamentos.css";
const FormNovaConsulta = ({ onCancel }) => {
const BuscarCPFnoBancodeDados = (cpf) => {
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
"cpf": cpf
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
const BuscarPacienteExistentePeloCPF = (value) => {
if(isNaN(value[13]) === false){
BuscarCPFnoBancodeDados(value)
}
//BuscarCPFnoBancodeDados(value)
}
const handleSubmit = (e) => {
e.preventDefault();
alert("Agendamento salvo!");
@ -23,8 +57,8 @@ const FormNovaConsulta = ({ onCancel }) => {
<div className="campo-de-input">
<label>CPF do paciente</label>
<InputMask mask="999.999.999-99" placeholder="000.000.000-00">
{(inputProps) => <input {...inputProps} type="text" name="cpf" />}
<InputMask mask="999.999.999-99" placeholder="000.000.000-00" onChange={(e) => BuscarPacienteExistentePeloCPF(e.target.value)}>
{(inputProps) => <input {...inputProps} type="text" name="cpf" />}
</InputMask>
</div>
@ -98,7 +132,7 @@ const FormNovaConsulta = ({ onCancel }) => {
<div className='campo-de-input'>
<label>Unidade *</label>
<select name="unidade">
<option value="" disabled invisible>Selecione sua unidade</option>
<option value="" disabled invisible>Selecione a unidade</option>
<option value="centro">Núcleo de Especialidades Integradas</option>
<option value="leste">Unidade Leste</option>
</select>
@ -133,7 +167,15 @@ const FormNovaConsulta = ({ onCancel }) => {
</div>
</div>
</section>
<div className="icons-container">
<span className="material-symbols-outlined icon">accessible</span>
<span className="material-symbols-outlined icon">elderly</span>
<span className="material-symbols-outlined icon">pregnant_woman</span>
<span className="material-symbols-outlined icon">child_care</span>
<span className="material-symbols-outlined icon">accessibility_new</span>
</div>
<div className="campo-de-input">
<label>Observações</label>
<textarea name="observacoes" rows="4" cols="1"></textarea>
@ -145,6 +187,7 @@ const FormNovaConsulta = ({ onCancel }) => {
<button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
</div>
</form>
</div>
);
};

10
src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
View File

@ -47,7 +47,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
))}
</div>
{dias.segunda.length > 3 ?
<div><p>+ {dias.segunda.length - 3}</p></div>
<div><p className='cards-que-faltam'>+ {dias.segunda.length - 3}</p></div>
: null}
</div>
</td>
@ -65,7 +65,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
))}
</div>
{dias.terca.length > 3 ?
<div><p>+ {dias.terca.length - 3}</p></div>
<div><p className='cards-que-faltam'>+ {dias.terca.length - 3}</p></div>
: null}
</div>
</td>
@ -83,7 +83,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
))}
</div>
{dias.quarta.length > 3 ?
<div><p>+ {dias.quarta.length - 3}</p></div>
<div><p className='cards-que-faltam'>+ {dias.quarta.length - 3}</p></div>
: null}
</div>
</td>
@ -101,7 +101,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
))}
</div>
{dias.quinta.length > 3 ?
<div><p>+ {dias.quinta.length - 3}</p></div>
<div><p className='cards-que-faltam'>+ {dias.quinta.length - 3}</p></div>
: null}
</div>
</td>
@ -119,7 +119,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
))}
</div>
{dias.sexta.length > 3 ?
<div><p>+ {dias.sexta.length - 3}</p></div>
<div><p className='cards-que-faltam'>+ {dias.sexta.length - 3}</p></div>
: null}
</div>
</td>

25
src/components/AgendarConsulta/style/formagendamentos.css
View File

@ -1,3 +1,26 @@
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
.icons-container {
display: flex;
gap: 10px;
}
.icon {
font-family: 'Material Symbols Outlined';
font-size: 36px;
padding: 12px;
border: 1px solid #d1d5db;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
cursor: default;
}
.form-container {
/*max-width: 800px;*/
margin: 20px auto;
@ -124,13 +147,11 @@
display: flex;
flex-direction: row;
gap: 4rem;
}
textarea{
width: 30px;
resize: both;
}
.campos-informacoes-paciente,

7
src/components/AgendarConsulta/style/styleTabelas/tabeladia.css
View File

@ -51,8 +51,9 @@ font-weight: 600;
padding: 8px;
}
/* Ajuste para a classe .diadia, se for usada */
.diadia {
/* Ajuste para a classe calendario, se for usada */
/*
.calendario {
margin-top: 20px;
border-collapse: collapse;
width: 100%;
@ -61,7 +62,7 @@ font-weight: 600;
box-shadow: 0 4px 12px rgb(255, 255, 255);
border: 10px solid #ffffffc5;
background-color: rgb(253, 253, 253);
}
}*/
.mostrar-horario td, .mostrar-horario th {

6
src/components/AgendarConsulta/style/styleTabelas/tabelames.css
View File

@ -147,4 +147,10 @@
padding: 4px 8px;
margin-bottom: 5px;
border-radius: 4px;
}
.cards-que-faltam{
color: #005a9e;
font-weight: bold;
font-size: larger;
}

12
src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
View File

@ -56,17 +56,7 @@
padding: 12px;
}
/* Ajuste para a classe .diadia, se for usada */
.diadia {
margin-top: 20px;
border-collapse: collapse;
width: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgb(255, 255, 255);
border: 10px solid #ffffffc5;
background-color: rgb(253, 253, 253);
}
/* Ajuste para a classe .calendario, se for usada */
.tabelasemanal tr:nth-child(even) {
background-color: #e7e7e7a6 !important;

4
src/components/ProfileCard.js
View File

@ -1,4 +1,4 @@
import React from 'react';
/*import React from 'react';
function ProfileCard() {
return (
@ -18,4 +18,4 @@ function ProfileCard() {
);
}
export default ProfileCard;
export default ProfileCard;*/

29
src/pages/Agendamento.jsx
View File

@ -112,13 +112,20 @@ const Agendamento = () => {
<input type="text" placeholder='Selecionar profissional' />
</div>
<div className='container-btns-agenda-fila_esepera'>
<button className={`btn-agenda ${ FiladeEspera === false ? "opc-agenda-ativo": "" }`} onClick={ () => setFiladeEspera(false)}>Agenda</button>
<button className={`btn-fila-espera ${ FiladeEspera === true ? "opc-filaespera-ativo": "" }`} onClick={ () => setFiladeEspera(true)}>Fila de espera</button>
</div>
<section className='calendario-ou-filaespera'>
{FiladeEspera ===false ?
<div className='diadia'>
<div className='calendario'>
<div>
<section className='botões-container'>
<section className='btns-e-legenda-container'>
<div>
<button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
@ -136,12 +143,8 @@ const Agendamento = () => {
Mês
</button>
</div>
<div className='botão-fila-espera'>
<button onClick={ () => setFiladeEspera(true)}>Abrir fila de espera</button>
</div>
</section>
<div className='legenda-tabela'>
<div className='legenda-tabela'>
<div className='legenda-item-realizado'>
<span>Realizado</span>
@ -157,6 +160,10 @@ const Agendamento = () => {
<span>Cancelado</span>
</div>
</div>
</section>
@ -179,7 +186,15 @@ const Agendamento = () => {
)}
</div>
</div>:
<div>
<div className='container-fila-espera'></div>
</div>
}
</section>
</div>
) : (

6
src/pages/Table.jsx
View File

@ -29,8 +29,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
}
const DeleteAnexo = async (patientID) => {
@ -66,12 +64,8 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
// 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;

47
src/pages/style/Agendamento.css
View File

@ -93,6 +93,7 @@
margin-top: 30px;
margin-bottom: 10px;
gap: 15px;
justify-content: flex-end;
}
.legenda-item-realizado{
@ -143,9 +144,53 @@
border-radius: 10px;
}
.botões-container{
.btns-e-legenda-container{
display: flex;
justify-content: space-between;
flex-direction: row;
margin-top: 10px;
}
.calendario {
border-collapse: collapse;
width: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgb(255, 255, 255);
border: 10px solid #ffffffc5;
background-color: rgb(253, 253, 253);
}
.calendario-ou-filaespera{
margin-top: 0;
}
.container-btns-agenda-fila_esepera{
margin-top: 30px;
display: flex;
flex-direction: row;
gap: 20px;
margin-left:20px ;
}
.btn-fila-espera, .btn-agenda{
background-color: transparent;
border: 0px ;
border-bottom: 3px solid rgb(253, 253, 253);
padding: 8px;
border-radius: 10px 10px 0px 0px;
font-weight: bold;
}
.opc-filaespera-ativo, .opc-agenda-ativo{
color: white;
background-color: #5980fd;
}