Mudar cores dos cards de consulta dinamicamente
This commit is contained in:
joao_pedro
parent
dbfc0de85d
commit
bf467a44f4
@ -4,21 +4,16 @@ import { useAuth } from '../utils/AuthProvider';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useMemo } from 'react';
|
||||
import "./style/card-consulta.css"
|
||||
const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId, setShowConfirmModal, corModal, selectedID} ) => {
|
||||
const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId, setShowConfirmModal, corModal, selectedID, coresConsultas, setListaConsultaID, listaConsultasID} ) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
console.log("Testando cor modal", corModal)
|
||||
|
||||
if(selectedID === DadosConsulta.id){
|
||||
console.log("É igual, man")
|
||||
}
|
||||
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
const authHeader = getAuthorizationHeader()
|
||||
const [Paciente, setPaciente] = useState()
|
||||
const [Medico, setMedico] = useState()
|
||||
|
||||
console.log(DadosConsulta.chief_complaint)
|
||||
|
||||
|
||||
const ids = useMemo(() => {
|
||||
@ -54,7 +49,12 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
|
||||
|
||||
let nameArrayMedico = Medico?.full_name.split(' ')
|
||||
|
||||
console.log(DadosConsulta.status)
|
||||
|
||||
let indice_cor = listaConsultasID.indexOf(DadosConsulta.id)
|
||||
|
||||
console.log(coresConsultas)
|
||||
console.log(indice_cor,"indice no cores")
|
||||
|
||||
|
||||
return (
|
||||
<div className={`container-cardconsulta container-cardconsulta-${TabelaAgendamento} ` }>
|
||||
@ -62,7 +62,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
|
||||
|
||||
{DadosConsulta.id?
|
||||
|
||||
<div className={`cardconsulta ${DadosConsulta.id === corModal ? "card-verde" : ""}`} id={selectedID === DadosConsulta.id ? `status-card-consulta-${corModal}` : `status-card-consulta-${DadosConsulta.status}`}>
|
||||
<div className={`cardconsulta`} id={indice_cor !== -1 ? `status-card-consulta-${coresConsultas[indice_cor]}` : `status-card-consulta-${DadosConsulta.status}`}>
|
||||
|
||||
<div>
|
||||
<section className='cardconsulta-infosecundaria'>
|
||||
@ -89,7 +89,8 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i>
|
||||
</button>
|
||||
{DadosConsulta.status === "cancelled" ?
|
||||
{DadosConsulta.status === "cancelled" || coresConsultas[indice_cor] === "cancelled" ?
|
||||
|
||||
<button
|
||||
className="btn btn-sm btn-confirm-style"
|
||||
onClick={() => {
|
||||
@ -97,6 +98,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
|
||||
setShowConfirmModal(true)
|
||||
setSelectedId(DadosConsulta.id);
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
<i class="bi bi-check-lg"></i>
|
||||
@ -107,6 +109,8 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
|
||||
onClick={() => {
|
||||
console.log(DadosConsulta.id)
|
||||
setSelectedId(DadosConsulta.id);
|
||||
|
||||
|
||||
setShowDeleteModal(true);
|
||||
|
||||
}}
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import CardConsulta from './CardConsulta';
|
||||
import "./style/styleTabelas/tabeladia.css";
|
||||
|
||||
const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, corModal }) => {
|
||||
const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
|
||||
const [indiceAcesso, setIndiceAcesso] = useState(0)
|
||||
const [Dia, setDia] = useState()
|
||||
const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
|
||||
@ -11,6 +11,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
|
||||
let ListaDiasComAgendamentos = Object.keys(agendamentos)
|
||||
|
||||
|
||||
|
||||
//console.log(Dia, "hshdhshhsdhs")
|
||||
|
||||
useEffect(() => {
|
||||
@ -71,7 +72,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
|
||||
<td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td>
|
||||
<td className='mostrar-horario'>
|
||||
<div onClick={() => handleClickAgendamento(agendamento)}>
|
||||
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID} setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>
|
||||
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -63,11 +63,6 @@
|
||||
.btn-confirm-style{
|
||||
background-color: #5ce687;
|
||||
|
||||
}
|
||||
|
||||
.btn-confirm-style:hover{
|
||||
|
||||
|
||||
}
|
||||
|
||||
.container-cardconsulta{
|
||||
@ -75,5 +70,7 @@
|
||||
}
|
||||
|
||||
.card-verde{
|
||||
background-color: #343a40;
|
||||
background-color: #b7ffbd;
|
||||
border: #91d392;
|
||||
}
|
||||
|
||||
|
||||
@ -50,8 +50,15 @@ const Agendamento = ({setDictInfo}) => {
|
||||
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false)
|
||||
|
||||
const [motivoCancelamento, setMotivoCancelamento] = useState("")
|
||||
|
||||
const [corModal, setCorModal] = useState("")
|
||||
|
||||
const [listaConsultasID, setListaConsultaID] = useState([])
|
||||
const [coresConsultas,setCoresConsultas] = useState([])
|
||||
|
||||
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
const cacheMedicos = {};
|
||||
@ -158,7 +165,8 @@ const deleteConsulta = (selectedPatientId) => {
|
||||
myHeaders.append("authorization", authHeader)
|
||||
|
||||
|
||||
var raw = JSON.stringify({ "status":"cancelled"
|
||||
var raw = JSON.stringify({ "status":"cancelled",
|
||||
"cancellation_reason": motivoCancelamento
|
||||
});
|
||||
|
||||
|
||||
@ -312,6 +320,7 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='spinner'></div>
|
||||
<h1>Agendar nova consulta</h1>
|
||||
|
||||
|
||||
@ -425,7 +434,7 @@ const handleSearchMedicos = (term) => {
|
||||
</section>
|
||||
|
||||
{/* Componentes de Tabela - Adicionado props de delete da main */}
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>}
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} corModal={corModal}/>}
|
||||
</div>
|
||||
@ -515,7 +524,7 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
<div className="modal-header bg-danger bg-opacity-25">
|
||||
<h5 className="modal-title text-danger">
|
||||
Confirmação de Exclusão
|
||||
Confirmação de Cancelamento
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
@ -526,11 +535,11 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
<div className="modal-body">
|
||||
<p className="mb-0 fs-5">
|
||||
Tem certeza que deseja excluir este agendamento?
|
||||
Qual o motivo do cancelamento?
|
||||
</p>
|
||||
<div className='campo-de-input'>
|
||||
<label htmlFor="">Qual o motivo do cancelamento</label>
|
||||
<input type="text" />
|
||||
|
||||
<textarea className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -539,7 +548,9 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
onClick={() => {setShowDeleteModal(false);
|
||||
|
||||
}}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
@ -548,7 +559,22 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={() => {deleteConsulta(selectedID);setShowDeleteModal(false)}}
|
||||
onClick={() => {deleteConsulta(selectedID);
|
||||
setShowDeleteModal(false)
|
||||
let lista_cores = coresConsultas
|
||||
|
||||
let lista = listaConsultasID
|
||||
|
||||
lista.push(selectedID)
|
||||
lista_cores.push("cancelled")
|
||||
|
||||
setCoresConsultas(lista_cores)
|
||||
|
||||
setListaConsultaID(lista)
|
||||
|
||||
console.log("lista", lista)
|
||||
|
||||
}}
|
||||
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
@ -605,7 +631,16 @@ const handleSearchMedicos = (term) => {
|
||||
type="button"
|
||||
className="btn btn-success"
|
||||
onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
|
||||
setCorModal("card-verde")
|
||||
let lista_cores = coresConsultas
|
||||
|
||||
let lista = listaConsultasID
|
||||
|
||||
lista.push(selectedID)
|
||||
lista_cores.push("confirmed")
|
||||
|
||||
setCoresConsultas(lista_cores)
|
||||
|
||||
setListaConsultaID(lista)
|
||||
|
||||
|
||||
}}
|
||||
|
||||
@ -427,3 +427,9 @@ html[data-bs-theme="dark"] {
|
||||
background-color: #f0f0f0; /* Cor ao passar o mouse */
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
|
||||
.input-modal{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user