forked from RiseUP/riseup-squad23
form para nova consulta e tabelas de horario
This commit is contained in:
jp-lima
parent
874de8476c
commit
6737955323
35
src/App.js
35
src/App.js
@ -1,20 +1,20 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Sidebar from './components/Sidebar';
|
||||
import Header from './components/Header';
|
||||
import Table from "./pages/Table"; // <-- ADIÇÃO AQUI
|
||||
import DataTable from "./pages/DataTable";
|
||||
import Files from "./pages/files";
|
||||
import EmailApp from "./pages/EmailApp";
|
||||
//import ChatApp from "./pages/ChatApp";
|
||||
import GalleryApp from "./pages/GalleryApp";
|
||||
import Table from "./pages/Table";
|
||||
|
||||
|
||||
import FormLayout from './pages/FormLayout';
|
||||
import EditPage from './pages/EditPage';
|
||||
import PatientForm from "./components/patients/PatientForm";
|
||||
|
||||
import Details from './pages/Details';
|
||||
//import DoctorEditPage from './components/doctors/DoctorEditPage';
|
||||
|
||||
import DoctorTable from './pages/DoctorTable';
|
||||
import DoctorFormLayout from './pages/DoctorFormLayout';
|
||||
import Agendamento from './pages/Agendamento'
|
||||
|
||||
|
||||
|
||||
function App() {
|
||||
const [isSidebarActive, setIsSidebarActive] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState('table ');
|
||||
@ -41,21 +41,6 @@ const renderPageContent = () => {
|
||||
else if(currentPage === 'doctor-table'){
|
||||
return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID}/>
|
||||
}
|
||||
else if (currentPage === 'data-table') {
|
||||
return <DataTable />;
|
||||
}
|
||||
else if (currentPage === 'files') {
|
||||
return <Files />;
|
||||
}
|
||||
else if (currentPage === 'email-app') {
|
||||
return <EmailApp />;
|
||||
}
|
||||
//else if (currentPage === 'chat-app') {
|
||||
// return <ChatApp />;
|
||||
//}
|
||||
else if (currentPage === 'gallery-app') {
|
||||
return <GalleryApp />;
|
||||
}
|
||||
else if(currentPage === 'edit-page-paciente'){
|
||||
return <EditPage id={patientID} />
|
||||
}
|
||||
@ -64,9 +49,9 @@ const renderPageContent = () => {
|
||||
return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
|
||||
}
|
||||
else if(currentPage === 'agendamento-page'){
|
||||
return <Agendamento/>
|
||||
|
||||
return <Agendamento setCurrentPage={setCurrentPage} />
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Dashboard por padrão
|
||||
|
||||
0
src/components/AgendarConsulta/CardConsulta.jsx
Normal file
0
src/components/AgendarConsulta/CardConsulta.jsx
Normal file
80
src/components/AgendarConsulta/FormNovaConsulta.jsx
Normal file
80
src/components/AgendarConsulta/FormNovaConsulta.jsx
Normal file
@ -0,0 +1,80 @@
|
||||
import React from 'react'
|
||||
|
||||
const FormNovaConsulta = ( {onCancel}) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
<form action="">
|
||||
|
||||
<h2>Informações do paciente</h2>
|
||||
<label htmlFor="nome">Nome *</label>
|
||||
<input type="text" id='nome' />
|
||||
|
||||
<label htmlFor="cpf" >CPF do paciente</label>
|
||||
<input type="text" id='cpf' />
|
||||
|
||||
<label htmlFor="dataNascimento">Data de nascimeto *</label>
|
||||
<input type="text" id='dataNascimento' />
|
||||
|
||||
<label htmlFor="telefone"> Telefone</label>
|
||||
<input type="text" id='telefone' />
|
||||
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<input type="email" id='email' />
|
||||
|
||||
<label htmlFor="nome">Convenio</label>
|
||||
<select>
|
||||
<option value="">Particular</option>
|
||||
<option value="">Público</option>
|
||||
|
||||
</select>
|
||||
|
||||
<label htmlFor="matricula">Matrícula</label>
|
||||
<input type="text" id='matricula' />
|
||||
|
||||
<label htmlFor="validade">Validade</label>
|
||||
<input type="text" id='validade' />
|
||||
|
||||
|
||||
|
||||
<h2>Informações do atendimento</h2>
|
||||
<label htmlFor="nomedoProfissional">Nome do profissional *</label>
|
||||
<input type="text" id='nomedoProfissional' />
|
||||
<label htmlFor="TipodeAtendimento">Tipo de atendimento *</label>
|
||||
<input type="text" id='TipodeAtendimento' />
|
||||
|
||||
<label htmlFor="">Unidade *</label>
|
||||
<select name="" id="">
|
||||
<option value="">Unidade Centro</option>
|
||||
<option value="">Unidade Leste</option>
|
||||
</select>
|
||||
|
||||
<label htmlFor="DataAtendimento">Data *</label>
|
||||
<input type="text" id='DataAtendimento' />
|
||||
|
||||
<label htmlFor="TipodeAtendimento">Tipo de atendimento *</label>
|
||||
<input type="text" id='TipodeAtendimento' />
|
||||
|
||||
<label htmlFor="inicioAtendimento">Inicio</label>
|
||||
<input type="text" id='inicioAtendimento' />
|
||||
|
||||
|
||||
<label htmlFor="terminoAtendimento">Término</label>
|
||||
<input type="text" id='terminoAtendimento'/>
|
||||
|
||||
<label htmlFor="">Profissional Solicitante</label>
|
||||
<select name="" id="">
|
||||
<option value="">Secretária</option>
|
||||
<option value="">Médico</option>
|
||||
</select>
|
||||
|
||||
<button type='submit' >Saqlvar agendamento</button>
|
||||
<button onClick={() => onCancel()} >Cancelar</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormNovaConsulta
|
||||
49
src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
Normal file
49
src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
Normal file
@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
|
||||
const TabelaAgendamentoDia = ({agendamentos, handleClickAgendamento}) => {
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table border="2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Horário</th>
|
||||
<th>Paciente</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{agendamentos.map((agendamento) => (
|
||||
<tr key={agendamento.id} border='2' >
|
||||
<td>{agendamento.horario}</td>
|
||||
<td>
|
||||
|
||||
<div onClick={() => handleClickAgendamento(agendamento)} >
|
||||
<p>{agendamento.medico}</p>
|
||||
<p>{agendamento.paciente}</p>
|
||||
<p>{agendamento.status}</p>
|
||||
<p>www</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
))}
|
||||
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default TabelaAgendamentoDia
|
||||
43
src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
Normal file
43
src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from 'react'
|
||||
|
||||
import dayjs from "dayjs"
|
||||
|
||||
const TabelaAgendamentoMes = () => {
|
||||
|
||||
const dataHoje = dayjs()
|
||||
const AnoAtual = dataHoje.year()
|
||||
|
||||
const mes = dataHoje.getMonth()
|
||||
|
||||
console.log(AnoAtual)
|
||||
|
||||
//Domingo = 0
|
||||
//Segunda = 1
|
||||
//terça = 2
|
||||
//quarta = 3
|
||||
//quinta = 4
|
||||
//sexta = 5
|
||||
//Sabado = 6
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Seg</th>
|
||||
<th>Ter</th>
|
||||
<th>Qua</th>
|
||||
<th>Qui</th>
|
||||
<th>Sex</th>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabelaAgendamentoMes
|
||||
@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
const TabelaAgendamentoSemana = () => {
|
||||
return (
|
||||
<div>TabelaAgendamentoSemana</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabelaAgendamentoSemana
|
||||
@ -1,26 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const TabelaAgendamentoDia = (agendamentos) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
<table border='2'>
|
||||
|
||||
{agendamentos.map((agendamento) => (
|
||||
<tr>
|
||||
<td>{agendamento.horario}</td>
|
||||
<td>
|
||||
<div>{agendamento.paciente}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
))}
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabelaAgendamentoDia
|
||||
@ -1,34 +1,59 @@
|
||||
import React from 'react'
|
||||
import DoctorTable from './DoctorTable';
|
||||
import TabelaAgendamentoDia from '../components/TabelaAgendamentoDia';
|
||||
import { useState } from 'react';
|
||||
|
||||
const Agendamento = () => {
|
||||
import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
|
||||
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
|
||||
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
|
||||
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
|
||||
import { useState, useEffect } from 'react';
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
let agendamentos = [
|
||||
{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado' },
|
||||
{ horario: '07:10', medico: 'Rogerio Cena', paciente: 'João Pedro', status: 'marcado' },
|
||||
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado' },
|
||||
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido' },
|
||||
{ horario: '07:40', medico: 'Rogerio Cena', paciente: 'Mariana Souza', status: 'marcado' },
|
||||
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado' },
|
||||
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado' },
|
||||
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento' },
|
||||
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado' },
|
||||
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido' }
|
||||
]
|
||||
const Agendamento = ( {setCurrentPage }) => {
|
||||
|
||||
const [tabela, setTabela] = useState('diario')
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(true)
|
||||
|
||||
const handleClickAgendamento = (agendamento) => {
|
||||
|
||||
if(agendamento.status !== 'vazio'){alert('tem')}
|
||||
|
||||
else{
|
||||
setPageConsulta(false)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const handleClickCancel = () => {
|
||||
setPageConsulta(true)
|
||||
}
|
||||
|
||||
let agendamentos = [
|
||||
{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:10', satus:'vazio' },
|
||||
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:40', status:'vazio' },
|
||||
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
|
||||
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
|
||||
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
|
||||
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
return(
|
||||
<div>
|
||||
<h1>Agendar nova consulta</h1>
|
||||
|
||||
{PageNovaConsulta? (
|
||||
|
||||
<div>
|
||||
<h1>Unidades</h1>
|
||||
|
||||
|
||||
<div>
|
||||
<select name="" id="" div class>
|
||||
<select>
|
||||
<option value="">Unidade Central</option>
|
||||
<option value="">Unidade Zona Norte</option>
|
||||
<option value="">Unidade Zona Oeste</option>
|
||||
@ -37,11 +62,11 @@ const Agendamento = () => {
|
||||
|
||||
<div className="input-container">
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
<input type="text" placeholder="Buscar atendimento"/>
|
||||
<input type="text" placeholder="Buscar atendimento" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select name="" id="">
|
||||
<select>
|
||||
<option value="">Atendimento</option>
|
||||
<option value="">Sessões</option>
|
||||
<option value="">Urgência</option>
|
||||
@ -49,36 +74,52 @@ const Agendamento = () => {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn-buscar">
|
||||
<i class="fa-solid fa-calendar-day"></i>
|
||||
<button className="btn-buscar" onClick={() => setTabela("diario")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
dia
|
||||
</button>
|
||||
<button class="btn-buscar">
|
||||
<i class="fa-solid fa-calendar-day"></i>
|
||||
<button className="btn-buscar" onClick={() => setTabela("semanal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
semana
|
||||
</button>
|
||||
<button class="btn-buscar">
|
||||
<i class="fa-solid fa-calendar-day"></i>
|
||||
<button className="btn-buscar" onClick={() => setTabela("mensal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
mes
|
||||
</button>
|
||||
|
||||
{tabela === "diario" && (
|
||||
<TabelaAgendamentoDia
|
||||
agendamentos={agendamentos}
|
||||
handleClickAgendamento={handleClickAgendamento}
|
||||
/>
|
||||
)}
|
||||
|
||||
{tabela === 'semanal' &&
|
||||
<TabelaAgendamentoSemana/>
|
||||
|
||||
}
|
||||
|
||||
{tabela === 'mensal' && (
|
||||
<TabelaAgendamentoMes/>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
) : (
|
||||
|
||||
<FormNovaConsulta onCancel={handleClickCancel} />
|
||||
|
||||
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default Agendamento
|
||||
Loading…
x
Reference in New Issue
Block a user