Jardesson Ajustes em Tela

package.json

@@ -2,7 +2,7 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
-  "homepage":"https://felipes4ntiago.github.io/ES2-UFPI/seyfert-frontend/",
+  "homepage": "https://felipes4ntiago.github.io/ES2-UFPI/seyfert-frontend/",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -21,6 +21,7 @@
     "next": "13.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-toastify": "^9.1.2",
     "typescript": "4.9.4",
     "uuid": "^9.0.0"
   }

src/components/toast-fake/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react"
+import styles from "./styles.module.css";
+
+type props = {
+    isApagado: boolean
+    onClick?: () => void
+}
+
+const ToastyFake = ( { isApagado, onClick }: props ) => {
+    const [isVisible, setIsVisble] = useState<boolean>(isApagado);
+
+    if(!isVisible){
+        setTimeout(() => {
+            setIsVisble(!isVisible);
+        }, 4000);
+
+    }
+
+
+    return (
+        <div className={styles.container} style={{
+            display: isVisible ? "none" : "unset"
+        }}>
+            <p>Deu bom</p>
+        </div>
+    );
+}
+
+export default ToastyFake;

src/components/toast-fake/styles.module.css

@@ -0,0 +1,11 @@
+.container {
+    background-color: rgb(226, 226, 226);
+    height: 40px;
+    width: 150px;
+    border-radius: 10px;
+    position: fixed;
+    top: calc(50vh - 20px);
+    left: calc(50vw - 75px);
+    text-align: center;
+    padding-bottom: 10px;
+}

src/pages/solicitacao/detalhe-solicitacao/[id].tsx

@@ -7,57 +7,87 @@ import { SeyfertConsultaRequestService } from "@/services/SeyfertConsultaRequest
 import { VisualizarConsultaResponse } from "@/types/consulta/VisualizarConsultaResponse"
 import { AxiosResponse } from "axios"
 import { GetServerSideProps } from "next";
+import DadosPostProposta, { SeyfertPropostaRequestService } from "@/services/SeyfertPropostaRequestService"
+import { SolicitacaoResponse } from "@/types/solicitacao/SolicitacaoResponse"
+import { SeyfertSolicitacaoRequestService } from "@/services/SeyfertSolicitacaoRequestService"
+
 
 type props = {
     id: string
 }
 
 const detalhesSolicitacao = ({ id }: props) => {
-    const [consultaResponse, setConsultaResponse] = useState<VisualizarConsultaResponse>();
     const [isVisibleInputs, setIsVisibleInputs] = useState<boolean>(false);
-    const [propostas, updatePropostas] = useState<any[]>([]);
-
+    const [propostas, updatePropostas] = useState<DadosPostProposta[]>([]);
+    
     const [data, setData] = useState<string>("");
-    const [horario, setHorario] = useState<string>("");
+    const [horarioInicial, setHorarioInicial] = useState<string>("");
+    const [horarioFinal, setHorarioFinal] = useState<string>("");
     const [valor, setValor] = useState<string>("");
-
+    
     function mudarVisibilidadeDeInputs(){
         setIsVisibleInputs(!isVisibleInputs);
     }
+
+    const solicitacao = {
+        uuid: 'f7da86d7-ab59-4513-8885-b54dba47f142',
+        dataParaAtendimento: '2023-03-01',
+        horaInicial: '10:00',
+        horaFinal: '10:30',
+        descricaoSolicitacao:"Dor nas costas",
+        nomePaciente: "Matheus Webber",
+        nomeEspecialidade: "Ortopedia",
+        sexoPreferivelDoAtendimento: "MASCULINO",
+        situacaoSolicitacao: "SOLICITADA"
+    }
+
+    const [detalhesSolicitacao, setDetalhesSolicitacao] = useState<any>(solicitacao);
+    function cadastrarPropostas(){
+        SeyfertPropostaRequestService.cadastrarSolicitacao(propostas, id, '4d6032eb-1941-4474-b7a4-4260bb3405fc',)
+      .then((res) => {
+        alert("Propostas Cadastradas")
+      })
+      .catch((erro) => {
+        alert("Falha na requisição de cadastro de propostas")
+      });
+    }
 
     function adicionarPropostas() {
-        const proposta = {
-            data,
-            horario,
+        const proposta:DadosPostProposta = {
+            dataAtendimento: data,
+            horaInicial: horarioInicial,
+            horaFinal: horarioFinal,
             valor
         }
 
         updatePropostas([proposta, ...propostas]);
         setData("");
-        setHorario("");
-        setValor("");
+        setHorarioInicial("");
+        setHorarioFinal("");
+        setValor("0");
         mudarVisibilidadeDeInputs();
     }
     // useEffect(() => {
     //     if(!id) return;
 
-    //     SeyfertConsultaRequestService.visualizarConsulta(id).then(({ data }: AxiosResponse<VisualizarConsultaResponse>) => {
-    //         console.log(data)
-    //         setConsultaResponse(data);
+    //     SeyfertSolicitacaoRequestService.buscarDetalhesSolicitacao(id).then(response => {
+    //         console.log(response.data)
+    //         setDetalhesSolicitacao(response.data);
     //     }).catch(( {response} ) => {
-    //         alert("Deu problema")
+    //         alert("Falha na requisição")
     //     })
     // }, [id]);
+
     return(
         <Layout titleHeader="Detalhamento da solicitação de consulta">
         <div>
             <h1>Consulta</h1>
             <ul>
-                <li>Nome do paciente: Járdesson Ribeiro</li>
-                <li>Data da consulta:  10/10/2010</li>
-                <li>Horário do início:  10:00</li>
-                <li>Horário do fim: 11:00</li>
-                <li>Descrição da consulta: <p>Desde o dia 13/05 desse ano vim sentindo fortes dores nas costas, e a situação vem piorando desde que...</p></li>
+                <li>Nome do paciente: {detalhesSolicitacao?.nomePaciente}</li>
+                <li>Data para atendimento:  {detalhesSolicitacao?.dataParaAtendimento}</li>
+                <li>Horário do início:  {detalhesSolicitacao?.horaInicial}</li>
+                <li>Horário do fim: {detalhesSolicitacao?.horaFinal}</li>
+                <li>Descrição da solicitação: <p>{detalhesSolicitacao?.descricaoSolicitacao}</p></li>
             </ul>
             <button  name="button">Criar proposta de consulta</button>
             <div>
@@ -69,7 +99,8 @@ const detalhesSolicitacao = ({ id }: props) => {
                         <div className=''>
                             <div className=''>
                                 <input onChange={e => setData(e.target.value)} type="date" placeholder="Digite a data de atendimento" />
-                                <input onChange={e => setHorario(e.target.value)} type="time" placeholder="Horário" />
+                                <input onChange={e => setHorarioInicial(e.target.value)} type="time" placeholder="Horário Inicial" />
+                                <input onChange={e => setHorarioFinal(e.target.value)} type="time" placeholder="Horário Final" />
                                 <input onChange={e => setValor(e.target.value)} type="text" placeholder="R$ 0, 00" />
                             </div>
                             <div>
@@ -84,7 +115,8 @@ const detalhesSolicitacao = ({ id }: props) => {
                         <thead>
                         <tr>
                             <th className=''>Data</th>
-                            <th className=''>Horario</th>
+                            <th className=''>Horario Inicial</th>
+                            <th className=''>Horario Final</th>
                             <th className=''>Valor</th>
                         </tr>
                         </thead>
@@ -94,8 +126,9 @@ const detalhesSolicitacao = ({ id }: props) => {
                         {propostas.map((linhaTabela, index) => {
                             return (
                                 <tr>
-                                    <td className=''>{linhaTabela.data}</td>
-                                    <td  className=''>{linhaTabela.horario}</td>
+                                    <td className=''>{linhaTabela.dataAtendimento}</td>
+                                    <td  className=''>{linhaTabela.horaInicial}</td>
+                                    <td  className=''>{linhaTabela.horaFinal}</td>
                                     <td className=''>{linhaTabela.valor}</td>
                                     <td className=''><button onClick={() => alert("clicou em excluir")} name="button">Excluir</button></td>
                                 </tr>
@@ -106,7 +139,7 @@ const detalhesSolicitacao = ({ id }: props) => {
                     </table>    
                 </div>
                 <div>
-                    <button>Cadastrar {propostas.length} Propostas</button>
+                    <button onClick={cadastrarPropostas}>Cadastrar {propostas.length} Propostas</button>
                 </div>
             </div>
         </div>

src/pages/solicitacao/index.tsx

@@ -4,54 +4,85 @@ import Link from "next/link"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 import { SeyfertSolicitacaoRequestService } from "@/services/SeyfertSolicitacaoRequestService"
+import { ToastContainer, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
+import ToastyFake from "@/components/toast-fake"
+import { SolicitacaoResponse } from "@/types/solicitacao/SolicitacaoResponse"
+import { PageResponse } from "@/types/PageResponse"
 
 
 const VisualizarSolicitacoes = () => {
-    const registroFake1 = {
-        nome: "Felipe Santiago",
-        data: "03/03/2023",
-        horarioInicial: "10:00",
-        horarioFinal: "13:00",
-        descricao: "Covid",
-        uuidSolicitacao: "8907d113-9496-4bf2-800a-dce95d489143"
-    };
-    const registroFake2 = {
-        nome: "Járdesson Ribeiro",
-        data: "03/03/2023",
-        horarioInicial: "11:00",
-        horarioFinal: "12:00",
-        descricao: "Dor nas costas",
-        uuidSolicitacao: "2207d113-9496-4bf2-800a-dce95d489144"
-    };
-
+    const route = useRouter();
     const tipoUsuario = "MEDICO";
-
-    const registros = [registroFake1, registroFake2, registroFake1]
-
-    const [registrosSolicitacoes, updateRegistrosPropostas] = useState<any[]>([]);
-
-    const route = useRouter()
-
+
+    const solicitacao = {
+        uuid: 'f7da86d7-ab59-4513-8885-b54dba47f142',
+        dataParaAtendimento: '2023-03-01',
+        horaInicial: '10:00',
+        horaFinal: '10:30',
+        descricaoSolicitacao:"Dor nas costas",
+        nomePaciente: "Matheus Webber",
+        nomeEspecialidade: "Ortopedia",
+        sexoPreferivelDoAtendimento: "MASCULINO",
+        situacaoSolicitacao: "SOLICITADA"
+    }
+    const solicitacao1 = {
+        uuid: 'c8da86d7-ab59-4513-8885-b54dba47f365',
+        dataParaAtendimento: '2023-03-01',
+        horaInicial: '10:00',
+        horaFinal: '10:30',
+        descricaoSolicitacao:"Dor nas costas",
+        nomePaciente: "Felipe Mororo",
+        nomeEspecialidade: "Ortopedia",
+        sexoPreferivelDoAtendimento: "MASCULINO",
+        situacaoSolicitacao: "SOLICITADA"
+    }
+    const solicitacao2 = {
+        uuid: 'c1da86d7-ab59-4513-8885-b54dba47f245',
+        dataParaAtendimento: '2023-03-01',
+        horaInicial: '10:00',
+        horaFinal: '10:30',
+        descricaoSolicitacao:"Dor nas costas",
+        nomePaciente: "Pedro Nery",
+        nomeEspecialidade: "Ortopedia",
+        sexoPreferivelDoAtendimento: "MASCULINO",
+        situacaoSolicitacao: "SOLICITADA"
+    }
+    const solicitacao4 = {
+        uuid: 'd9da86d7-ab59-4513-8885-b54dba47f221',
+        dataParaAtendimento: '2023-03-01',
+        horaInicial: '10:00',
+        horaFinal: '10:30',
+        descricaoSolicitacao:"Dor nas costas",
+        nomePaciente: "Járdesson Ribeiro dos Santos",
+        nomeEspecialidade: "Ortopedia",
+        sexoPreferivelDoAtendimento: "MASCULINO",
+        situacaoSolicitacao: "SOLICITADA"
+    }
+
+
     function mudarPagina(UUIDSolicitacao: string){
-    route.push("../../solicitacao/detalhe-solicitacao/"+UUIDSolicitacao);
-
+        route.push("../../solicitacao/detalhe-solicitacao/"+UUIDSolicitacao);
+        
     }
-
-    useEffect(() => {
-        SeyfertSolicitacaoRequestService.listarSolicitacoes({
-            uuidMedico: '4d6032eb-1941-4474-b7a4-4260bb3405fc',
-            dataParaAtendimento: '2023-02-02',
-            nomeEspecialidade: "Ortopedia Teste"
-        })
-      .then((res) => {
-        console.log(res.data.content)
-        updateRegistrosPropostas(res.data.content);
-        alert("Solicitação cadastrada "+res.data);
-      })
-      .catch((erro) => {
-        alert("Erro ao cadastrar solicitação"+erro);
-      });
-    }, [tipoUsuario])
+
+    const [registrosSolicitacoes, updateRegistrosPropostas] = useState<any[]>([solicitacao, solicitacao1, solicitacao2, solicitacao4]);
+    // updateRegistrosPropostas(...registrosSolicitacoes, );
+    // useEffect(() => {
+        //     SeyfertSolicitacaoRequestService.listarSolicitacoesMedico({
+            //         uuidMedico: 'd9da86d7-ab59-4513-8885-b54dba47f565',
+            //         dataParaAtendimento: '2023-02-02',
+            //         nomeEspecialidade: "Ortopedia",
+            //         page: 0,
+            //         size: 10
+            //     })
+    //   .then((res) => {
+    //     updateRegistrosPropostas(res.data.content);
+    //   })
+    //   .catch((erro) => {
+    //     alert("Falha na requisição de busca de solicitações")
+    //   });
+    // }, [tipoUsuario])
     return(
         <Layout titleHeader="Listagem de Solicitações de consulta">
         <div >

src/services/SeyfertPropostaRequestService.ts

@@ -0,0 +1,24 @@
+import { AxiosResponse } from 'axios';
+import apiSeyfert from './api/SeyfertRequestBaseManager';
+
+const baseUrlPropostaService =  "/proposta";
+
+export default interface DadosPostProposta {
+    dataAtendimento: string   
+    horaInicial: string
+    horaFinal: string
+    valor: string
+}
+
+
+export class SeyfertPropostaRequestService {
+
+    static async cadastrarSolicitacao(dados: DadosPostProposta[], solicitacao: string, medico: string): Promise<AxiosResponse<any>> {
+        return apiSeyfert.post(`${baseUrlPropostaService}`, dados, {
+            params: {
+                solicitacao,
+                medico
+            }
+        })
+    }
+}