From cf3ea901b802955337a2394f0bdc0e48898f7f3f Mon Sep 17 00:00:00 2001 From: joao_pedro Date: Thu, 23 Oct 2025 10:11:55 -0300 Subject: [PATCH] Alteracoes nos agendamenos --- .../AgendarConsulta/FormNovaConsulta.jsx | 156 +++++++++++------- .../style/formagendamentos.css | 84 +++++++++- 2 files changed, 175 insertions(+), 65 deletions(-) diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx index 9bf0e582..36cee3e6 100644 --- a/src/components/AgendarConsulta/FormNovaConsulta.jsx +++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx @@ -11,6 +11,9 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => console.log(agendamento, 'aqui2') + const [sessoes,setSessoes] = useState(1) + const [tempoBaseConsulta, setTempoBaseConsulta] = useState(30); // NOVO: Tempo base da consulta em minutos + const [selectedFile, setSelectedFile] = useState(null); const [anexos, setAnexos] = useState([]); const [loadingAnexos, setLoadingAnexos] = useState(false); @@ -165,6 +168,33 @@ const formatarHora = (datetimeString) => { disabled: !item.available })); +const calcularHorarioTermino = (inicio, sessoes, tempoBase) => { + if (!inicio || inicio.length !== 5 || !inicio.includes(':')) return ''; + + const [horas, minutos] = inicio.split(':').map(Number); + const minutosInicio = (horas * 60) + minutos; + const duracaoTotalMinutos = sessoes * tempoBase; + const minutosTermino = minutosInicio + duracaoTotalMinutos; + + const horaTermino = Math.floor(minutosTermino / 60) % 24; + const minutoTermino = minutosTermino % 60; + + const formatar = (num) => String(num).padStart(2, '0'); + + return `${formatar(horaTermino)}:${formatar(minutoTermino)}`; + }; + + useEffect(() => { + // Recalcula o horário de término sempre que houver alteração nas variáveis dependentes + const novoTermino = calcularHorarioTermino(horarioInicio, sessoes, tempoBaseConsulta); + setHorarioTermino(novoTermino); + + setAgendamento(prev => ({ + ...prev, + horarioTermino: novoTermino + })); + }, [horarioInicio, sessoes, tempoBaseConsulta, setAgendamento]); + const handleSubmit = (e) => { e.preventDefault(); alert("Agendamento salvo!"); @@ -247,92 +277,82 @@ const handleSubmit = (e) => { -
- - -
-
- - -
- - +
- - -
-
- - setHorarioInicio(e.target.value)} - > + > {opcoesDeHorario?.map((opcao, index) => ( - + ))} - + +
+ + {/* SELETOR DE SESSÕES MODIFICADO */} + {/* Removemos o 'label' para evitar o desalinhamento e colocamos o texto acima */} +
+ {/* Novo label para o seletor */} +
+ + +

{sessoes}

{/* Adicionada classe para estilização */} + +
- -
- -
- +
+
+ + - - {/* Dropdown de Término */} -
- - -
-
- - + +
+
@@ -344,13 +364,21 @@ const handleSubmit = (e) => {
+ +
+
+ + +
); diff --git a/src/components/AgendarConsulta/style/formagendamentos.css b/src/components/AgendarConsulta/style/formagendamentos.css index b42fd96e..6f437032 100644 --- a/src/components/AgendarConsulta/style/formagendamentos.css +++ b/src/components/AgendarConsulta/style/formagendamentos.css @@ -110,6 +110,7 @@ svg{ margin-top: 25px; display: flex; gap: 12px; + justify-content: flex-end; } .btn-primary { @@ -389,4 +390,85 @@ html[data-bs-theme="dark"] svg { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; -} \ No newline at end of file +} +/* Container dos três elementos na linha */ +.linha { + display: flex; + align-items: flex-end; /* Garante que os campos de input e o seletor fiquem alinhados pela base */ + gap: 20px; /* Espaçamento entre os campos */ +} + +/* ------------------------------------------- */ +/* ESTILIZAÇÃO DO SELETOR DE SESSÕES */ +/* ------------------------------------------- */ + +.seletor-wrapper { + /* Garante que o label e o contador fiquem alinhados verticalmente com os selects */ + display: flex; + flex-direction: column; +} + +.sessao-contador { + /* Estilo de "campo de input" */ + display: flex; + align-items: center; + justify-content: space-between; + + /* Cores e Bordas */ + background-color: #e9ecef; /* Cor cinza claro dos inputs do Bootstrap */ + border: 1px solid #ced4da; /* Borda sutil */ + border-radius: 0.25rem; /* Bordas arredondadas (Padrão Bootstrap) */ + + /* Garante a mesma altura dos selects */ + height: 40px; /* Ajuste este valor para corresponder à altura exata do seu select */ + width: 100px; /* Largura ajustável */ + padding: 0 5px; /* Padding interno */ + + font-size: 1rem; + font-weight: 500; +} + +.sessao-valor { + /* Estilo do número de sessões */ + margin: 0; + padding: 0 5px; + font-size: 1.1rem; /* Um pouco maior que o texto dos selects */ + color: #007bff; /* Cor azul destacada (como na sua imagem) */ +} + +.sessao-contador button { + /* Estilo dos botões de chevron */ + background: none; + border: none; + cursor: pointer; + padding: 0 2px; + color: #495057; /* Cor do ícone */ + font-size: 1.5rem; /* Aumenta o tamanho dos ícones do chevron */ + line-height: 1; /* Alinha o ícone verticalmente */ + transition: color 0.2s; +} + +.sessao-contador button:hover:not(:disabled) { + color: #007bff; /* Cor azul ao passar o mouse */ +} + +.sessao-contador button:disabled { + cursor: not-allowed; + color: #adb5bd; /* Cor mais clara quando desabilitado */ +} + +/* ------------------------------------------- */ +/* GARANTINDO COERÊNCIA NOS SELECTS */ +/* ------------------------------------------- */ + +.campo-de-input select { + /* Se seus selects estiverem com estilos diferentes, este bloco garante que eles se pareçam */ + /* com o seletor de sessões (se já usarem classes do Bootstrap, podem não precisar disso) */ + background-color: #e9ecef; /* Fundo cinza claro */ + border: 1px solid #ced4da; /* Borda sutil */ + border-radius: 0.25rem; + height: 40px; /* Garante a mesma altura do sessao-contador */ + /* Adicione mais estilos do seu input/select se necessário (ex: font-size, padding) */ +} + +