feat: um botão para listar médicos e um para cadastrar médicos

ui/src/containers/DashboardContainer/index.jsx

@@ -1,12 +1,30 @@
 import React, { useState, useEffect } from "react";
 
-import { Table, Button, Modal } from 'antd';
+import { Table, Modal, Button, Form, Input } from 'antd';
 
 import _service from '@netuno/service-client';
 
 import "./index.less";
 
-const columns = [
+const medicosColumns = [
+    {
+        title: 'UID',
+        dataIndex: 'uid',
+        key: 'uid',
+    },
+    {
+        title: 'Nome',
+        dataIndex: 'nome',
+        key: 'nome',
+    },
+    {
+        title: 'CRM',
+        dataIndex: 'crm',
+        key: 'crm',
+    }
+]
+
+const pacientesColumns = [
     {
         title: 'UID',
         dataIndex: 'uid',
@@ -19,13 +37,13 @@ const columns = [
     },
     {
         title: 'CPF',
-        dataIndex: 'CPF',
-        key: 'CPF',
+        dataIndex: 'cpf',
+        key: 'cpf',
     },
     {
         title: 'RG',
-        dataIndex: 'RG',
-        key: 'RG',
+        dataIndex: 'rg',
+        key: 'rg',
     },
     {
         title: 'Data de Nascimento',
@@ -44,22 +62,67 @@ const columns = [
     }
 ];
 
+const onFinish = values => {
+  console.log('Success:', values);
+  _service({
+    url: "/services/medicos",
+    method: "POST",
+    data: {...values, especialidades: [], convenios: [] },
+    success: (response) => {
+      if (response.json) {
+        console.log("Service Response", response.json);
+      }
+    },
+    fail: (e) => {
+      console.log("Service Error", e);
+    }
+  });
+};
+
+const onFinishFailed = errorInfo => {
+  console.log('Failed:', errorInfo);
+};
+
 function DashboardContainer() {
   const [pacientes, setPacientes] = useState([]);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [medicos, setMedicos] = useState([]);
+  const [isPacientesModalOpen, setIsPacientesModalOpen] = useState(false);
+  const [isMedicosModalOpen, setIsMedicosModalOpen] = useState(false);
+  const [isCadastrarMedicosModalOpen, setIsCadastrarMedicosModalOpen] = useState(false);
 
-  const showModal = () => {
-    setIsModalOpen(true);
+  const showPacientesModal = () => {
+    setIsPacientesModalOpen(true);
   };
-  const handleOk = () => {
-    setIsModalOpen(false);
+  const handlePacientesOk = () => {
+    setIsPacientesModalOpen(false);
   };
-  const handleCancel = () => {
-    setIsModalOpen(false);
+  const handlePacientesCancel = () => {
+    setIsPacientesModalOpen(false);
+  };
+
+  const showMedicosModal = () => {
+    setIsMedicosModalOpen(true);
+  };
+  const handleMedicosOk = () => {
+    setIsMedicosModalOpen(false);
+  };
+  const handleMedicosCancel = () => {
+    setIsMedicosModalOpen(false);
+  };
+
+  const showCadastrarMedicosModal = () => {
+    setIsCadastrarMedicosModalOpen(true);
+  };
+  const handleCadastrarMedicosOk = () => {
+    setIsCadastrarMedicosModalOpen(false);
+  };
+  const handleCadastrarMedicosCancel = () => {
+    setIsCadastrarMedicosModalOpen(false);
   };
 
   useEffect(() => {
     carregarPacientes();
+    carregarMedicos();
   }, []);
 
   const carregarPacientes = () => {
@@ -76,20 +139,90 @@ function DashboardContainer() {
     });
   };
 
+  const carregarMedicos = () => {
+    setMedicos([]);
+    _service({
+      url: "/services/medicos",
+      success: (response) => {
+        setMedicos(response.json);
+      },
+      fail: (e) => {
+        console.error("Serviço de medicos falhou.", e);
+        message.error("Serviço de medicos falhou.", e);
+      }
+    });
+  };
+
   return (
     <>
-      <Button type="primary" onClick={showModal}>
+      <Button type="primary" onClick={showPacientesModal}>
         Lista de pacientes 
       </Button>
+      <Button type="primary" onClick={showMedicosModal}>
+        Lista de médicos 
+      </Button>
+      <Button type="primary" onClick={showCadastrarMedicosModal}>
+        Cadastrar médicos 
+      </Button>
       <Modal
         title="Pacientes"
         closable={{ 'aria-label': 'Custom Close Button' }}
-        open={isModalOpen}
-        onOk={handleOk}
-        onCancel={handleCancel}
+        open={isPacientesModalOpen}
+        onOk={handlePacientesOk}
+        onCancel={handlePacientesCancel}
         width={1000}
       >
-        <Table dataSource={pacientes} columns={columns} />
+        <Table dataSource={pacientes} columns={pacientesColumns} />
+      </Modal>
+      <Modal
+        title="Médicos"
+        closable={{ 'aria-label': 'Custom Close Button' }}
+        open={isMedicosModalOpen}
+        onOk={handleMedicosOk}
+        onCancel={handleMedicosCancel}
+        width={1000}
+      >
+        <Table dataSource={medicos} columns={medicosColumns} />
+      </Modal>
+      <Modal
+        title="Cadastrar novo médico"
+        closable={{ 'aria-label': 'Custom Close Button' }}
+        open={isCadastrarMedicosModalOpen}
+        onOk={handleCadastrarMedicosOk}
+        onCancel={handleCadastrarMedicosCancel}
+      >
+        <Form
+          name="basic"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 16 }}
+          style={{ maxWidth: 600 }}
+          initialValues={{ remember: true }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="Nome"
+            name="nome"
+            rules={[{ required: true, message: 'Escreva o nome' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="CRM"
+            name="crm"
+            rules={[{ required: true, message: 'Escreva o CRM' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item label={null}>
+            <Button type="primary" htmlType="submit">
+              Submit
+            </Button>
+          </Form.Item>
+        </Form>
       </Modal>
     </>
   );