GilenoNeto901/riseup-squad23
1
0
Fork 0
forked from RiseUP/riseup-squad23
Code Pull Requests Activity

Botão para transformar agendamentos cancelados em aprovados

Browse Source
This commit is contained in:
joao_pedro 2025-10-28 11:36:35 -03:00
parent b4d5ed76a9
commit f11bf05cc0
5 changed files with 125 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/AgendarConsulta/CardConsulta.jsx
View File

@ -4,7 +4,7 @@ import { useAuth } from '../utils/AuthProvider';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useMemo } from 'react'; import { useMemo } from 'react';
import "./style/card-consulta.css" import "./style/card-consulta.css"
const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId} ) => { const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId, setShowConfirmModal} ) => {
const navigate = useNavigate(); const navigate = useNavigate();
const {getAuthorizationHeader} = useAuth() const {getAuthorizationHeader} = useAuth()
@ -75,6 +75,19 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
> >
<i className="bi bi-pencil me-1"></i> <i className="bi bi-pencil me-1"></i>
</button> </button>
{DadosConsulta.status === "cancelled" ?
<button
className="btn btn-sm btn-confirm-style"
onClick={() => {
console.log(DadosConsulta.id)
setShowConfirmModal(true)
setSelectedId(DadosConsulta.id);
}}
>
<i class="bi bi-check-lg"></i>
</button>
:
<button <button
className="btn btn-sm btn-delete-custom-style " className="btn btn-sm btn-delete-custom-style "
onClick={() => { onClick={() => {
@ -85,6 +98,10 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
> >
<i className="bi bi-trash me-1"></i> <i className="bi bi-trash me-1"></i>
</button> </button>
}
</div> </div>
</div> </div>

4
src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import CardConsulta from './CardConsulta'; import CardConsulta from './CardConsulta';
import "./style/styleTabelas/tabeladia.css"; import "./style/styleTabelas/tabeladia.css";
const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo, setSelectedId }) => { const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo, setSelectedId, setShowConfirmModal }) => {
const [indiceAcesso, setIndiceAcesso] = useState(0) const [indiceAcesso, setIndiceAcesso] = useState(0)
const [Dia, setDia] = useState() const [Dia, setDia] = useState()
const agendamentosDoDia = agendamentos?.semana1?.segunda || []; const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
@ -73,7 +73,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
<td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td> <td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td>
<td className='mostrar-horario'> <td className='mostrar-horario'>
<div onClick={() => handleClickAgendamento(agendamento)}> <div onClick={() => handleClickAgendamento(agendamento)}>
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId}/> <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} setShowConfirmModal={setShowConfirmModal}/>
</div> </div>
</td> </td>
</tr> </tr>

12
src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
View File

@ -6,7 +6,7 @@ import { useEffect, useState, useMemo } from 'react';
import weekOfYear from 'dayjs/plugin/weekOfYear' import weekOfYear from 'dayjs/plugin/weekOfYear'
dayjs.extend(weekOfYear) dayjs.extend(weekOfYear)
const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteModal ,setSelectedId ,setDictInfo}) => { const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteModal ,setSelectedId ,setDictInfo, setShowConfirmModal}) => {
// Armazena o objeto COMPLETO das semanas organizadas // Armazena o objeto COMPLETO das semanas organizadas
const [semanasOrganizadas, setSemanasOrganizadas] = useState({}); const [semanasOrganizadas, setSemanasOrganizadas] = useState({});
@ -178,31 +178,31 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM
{/* Mapeamento de COLUNAS (dias) */} {/* Mapeamento de COLUNAS (dias) */}
<td> <td>
{semanaParaRenderizar?.segunda[indiceLinha] {semanaParaRenderizar?.segunda[indiceLinha]
? <CardConsulta DadosConsulta={semanaParaRenderizar?.segunda[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} /> ? <CardConsulta DadosConsulta={semanaParaRenderizar?.segunda[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}/>
: null : null
} }
</td> </td>
<td> <td>
{semanaParaRenderizar.terça[indiceLinha] {semanaParaRenderizar.terça[indiceLinha]
? <CardConsulta DadosConsulta={semanaParaRenderizar.terça[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/> ? <CardConsulta DadosConsulta={semanaParaRenderizar.terça[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}/>
: null : null
} }
</td> </td>
<td> <td>
{semanaParaRenderizar.quarta[indiceLinha] {semanaParaRenderizar.quarta[indiceLinha]
? <CardConsulta DadosConsulta={semanaParaRenderizar.quarta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/> ? <CardConsulta DadosConsulta={semanaParaRenderizar.quarta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}/>
: null : null
} }
</td> </td>
<td> <td>
{semanaParaRenderizar.quinta[indiceLinha] {semanaParaRenderizar.quinta[indiceLinha]
? <CardConsulta DadosConsulta={semanaParaRenderizar.quinta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} /> ? <CardConsulta DadosConsulta={semanaParaRenderizar.quinta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}/>
: null : null
} }
</td> </td>
<td> <td>
{semanaParaRenderizar.sexta[indiceLinha] {semanaParaRenderizar.sexta[indiceLinha]
? <CardConsulta DadosConsulta={semanaParaRenderizar.sexta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} /> ? <CardConsulta DadosConsulta={semanaParaRenderizar.sexta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} />
: null : null
} }
</td> </td>

12
src/components/AgendarConsulta/style/card-consulta.css
View File

@ -50,7 +50,7 @@
/* 6. Estilo de hover para o botão de exclusão */ /* 6. Estilo de hover para o botão de exclusão */
.btn-delete-custom-style:hover { .btn-delete-custom-style:hover {
background-color: #c82333; /* Um vermelho um pouco mais escuro para o hover */ background-color: #c82333; /* Um vermelho um pouco mais escuro para o hover */
filter: brightness(90%); /* Alternativa: escurecer um pouco mais */
} }
/* 7. Estilos para os ícones dentro dos botões (já está no JSX com fs-4) */ /* 7. Estilos para os ícones dentro dos botões (já está no JSX com fs-4) */
@ -58,4 +58,14 @@
.action-button .bi { .action-button .bi {
/* Exemplo: se precisar de um ajuste fino além do fs-4 */ /* Exemplo: se precisar de um ajuste fino além do fs-4 */
/* font-size: 1.5rem; */ /* font-size: 1.5rem; */
}
.btn-confirm-style{
background-color: #5ce687;
}
.btn-confirm-style:hover{
} }

90
src/pages/Agendamento.jsx
View File

@ -49,6 +49,8 @@ const Agendamento = ({setDictInfo}) => {
const [cacheAgendamentos, setCacheAgendamentos] = useState([]) const [cacheAgendamentos, setCacheAgendamentos] = useState([])
const [showConfirmModal, setShowConfirmModal] = useState(false)
let authHeader = getAuthorizationHeader() let authHeader = getAuthorizationHeader()
const cacheMedicos = {}; const cacheMedicos = {};
@ -159,6 +161,30 @@ const deleteConsulta = (selectedPatientId) => {
}); });
var requestOptions = {
method: 'PATCH',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
.then(response => {if(response.status !== 200)(console.log(response))})
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
const confirmConsulta = (selectedPatientId) => {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append('apikey', API_KEY)
myHeaders.append("authorization", authHeader)
var raw = JSON.stringify({ "status":"confirmed"
});
var requestOptions = { var requestOptions = {
method: 'PATCH', method: 'PATCH',
headers: myHeaders, headers: myHeaders,
@ -398,8 +424,8 @@ const handleSearchMedicos = (term) => {
</section> </section>
{/* Componentes de Tabela - Adicionado props de delete da main */} {/* Componentes de Tabela - Adicionado props de delete da main */}
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />} {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} />}
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>} {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}/>}
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />} {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
</div> </div>
</div> </div>
@ -527,6 +553,66 @@ const handleSearchMedicos = (term) => {
</div> </div>
</div>)} </div>)}
{showConfirmModal &&(
<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-success">
<h5 className="modal-title">
Confirmação de edição
</h5>
</div>
<div className="modal-body">
<p className="mb-0 fs-5">
Tem certeza que deseja ?
</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={() => setShowConfirmModal(false)}
>
Cancelar
</button>
<button
type="button"
className="btn btn-success"
onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)}}
>
<i className="bi bi-trash me-1"></i> Confirmar
</button>
</div>
</div>
</div>
</div>)
}
</div> </div>
) )