Criando modal para criação de usuários e finalizando tela de agenda d…

…o secretario
vinniciusgomes · Nov 25, 2020 · 76073ac · 76073ac · vercel · Nov 25, 2020
1 parent e7ec712
commit 76073ac
Show file tree

Hide file tree

Showing 22 changed files with 966 additions and 496 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "antd": "^4.6.6",
+    "antd-img-crop": "^3.13.2",
     "axios": "^0.19.2",
     "connected-react-router": "^6.8.0",
     "customize-cra": "^1.0.0",

diff --git a/src/modules/doctor/components/Patients/PatientItem/index.tsx b/src/modules/doctor/components/Patients/PatientItem/index.tsx
@@ -1,9 +1,11 @@
 import { IPatient } from '@doctor/pages/Patients/interfaces';
 import React from 'react';
-import { FiMoreVertical, FiTrash, FiPenTool } from 'react-icons/fi';
 
 import avatarIcon from '@shared/assets/images/avatar.png';
-import { Container, Item } from './styles';
+import trashIcon from '@shared/assets/images/trash.svg';
+import pencilIcon from '@shared/assets/images/pencil.svg';
+
+import { ActionIcon, Container, Item } from './styles';
 
 const PatientsList: React.FC<IPatient> = props => (
   <Container id={props.id}>
@@ -14,8 +16,8 @@ const PatientsList: React.FC<IPatient> = props => (
       </div>
 
       <div>
-        <FiTrash color="#FA7070" size={20} />
-        <FiPenTool color="#D6DADF" size={20} />
+        <ActionIcon src={trashIcon} alt="trash" />
+        <ActionIcon src={pencilIcon} alt="pencil" />
       </div>
     </Item>
   </Container>

diff --git a/src/modules/doctor/components/Patients/PatientItem/styles.tsx b/src/modules/doctor/components/Patients/PatientItem/styles.tsx
@@ -25,8 +25,9 @@ export const Item = styled.li`
     display: flex;
     align-items: center;
 
-    img {
+    > img {
       width: 50px;
+      height: auto;
       border-radius: 100%;
       margin-right: 20px;
     }
@@ -40,3 +41,10 @@ export const Item = styled.li`
     cursor: pointer;
   }
 `;
+
+export const ActionIcon = styled.img`
+  height: 20px !important;
+  margin-right: 0px !important;
+
+  cursor: pointer;
+`;
diff --git a/src/modules/secretary/components/Patients/CreateUserModal/index.tsx b/src/modules/secretary/components/Patients/CreateUserModal/index.tsx
@@ -0,0 +1,182 @@
+import React, { useCallback, useState } from 'react';
+import { message, Spin, Upload } from 'antd';
+import ImgCrop from 'antd-img-crop';
+
+import TextField from '@shared/components/TextField';
+import TextArea from '@shared/components/TextArea';
+import Button from '@shared/components/Button';
+import addIcon from '@shared/assets/images/add.svg';
+
+import {
+  ButtonWrapper,
+  Container,
+  InputRowAlign,
+  TextFieldRow,
+  TextFieldWrapper,
+} from './styles';
+import api from '@shared/services/api';
+import { ICreateUserModal } from './interfaces';
+
+const CreateUserModal: React.FC<ICreateUserModal> = ({ close }) => {
+  const [hasError, setHasError] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = useCallback(async e => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+    } catch (err) {
+      setHasError(true);
+      setLoading(false);
+      if (err.response) {
+        return message.error(err.response.data.message);
+      }
+      return message.error(
+        'Ocorreu um erro interno na aplicação. Tente novamente mais tarde!',
+      );
+    }
+  }, []);
+
+  const handleResetForm = useCallback(() => {
+    setHasError(false);
+
+    setLoading(false);
+  }, []);
+
+  const [fileList, setFileList] = useState<any>([]);
+
+  const onChange = ({ fileList: newFileList }: any) => {
+    setFileList(newFileList);
+  };
+
+  const onPreview = async (file: any) => {
+    let src = file.url;
+    if (!src) {
+      src = await new Promise(resolve => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file.originFileObj);
+        reader.onload = () => resolve(reader.result);
+      });
+    }
+    const image = new Image();
+    image.src = src;
+    const imgWindow = window.open(src);
+    imgWindow?.document.write(image.outerHTML);
+  };
+
+  return (
+    <Container>
+      <form onSubmit={handleSubmit}>
+        <TextFieldRow>
+          <TextFieldWrapper width={194}>
+            <ImgCrop modalTitle="Cortar imagem" rotate>
+              <Upload
+                listType="picture-card"
+                fileList={fileList}
+                onChange={onChange}
+                onPreview={onPreview}
+              >
+                {fileList.length < 1 && (
+                  <img src={addIcon} style={{ width: 40 }} />
+                )}
+              </Upload>
+            </ImgCrop>
+          </TextFieldWrapper>
+          <div>
+            <InputRowAlign>
+              <TextFieldWrapper width={260}>
+                <TextField label="Nome" name="name" />
+              </TextFieldWrapper>
+              <TextFieldWrapper width={555}>
+                <TextField label="E-mail" name="email" />
+              </TextFieldWrapper>
+            </InputRowAlign>
+            <InputRowAlign>
+              <TextFieldWrapper width={260}>
+                <TextField label="Telefone" name="phone" />
+              </TextFieldWrapper>
+              <TextFieldWrapper width={260}>
+                <TextField label="Cadastro" name="register" />
+              </TextFieldWrapper>
+              <TextFieldWrapper width={260}>
+                <TextField label="Nascimento" name="birthday" />
+              </TextFieldWrapper>
+            </InputRowAlign>
+            <InputRowAlign>
+              <TextFieldWrapper width={260}>
+                <TextField label="Prontuário" name="medicalRecord" />
+              </TextFieldWrapper>
+              <TextFieldWrapper width={260}>
+                <TextField label="Sexo" name="gender" />
+              </TextFieldWrapper>
+              <TextFieldWrapper width={260}>
+                <TextField label="Cor" name="color" />
+              </TextFieldWrapper>
+            </InputRowAlign>
+          </div>
+        </TextFieldRow>
+        <TextFieldRow>
+          <TextFieldWrapper width={260}>
+            <TextField label="Naturalidade" name="naturalness" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="Estado civil" name="maritalStatus" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="CPF" name="cpf" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="Titular do CPF" name="cpfOwner" />
+          </TextFieldWrapper>
+        </TextFieldRow>
+        <TextFieldRow>
+          <TextFieldWrapper width={260}>
+            <TextField label="Grau de instrução" name="educationLevel" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="Profissão" name="profession" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="Convenio" name="healthInsurance" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="Matrícula" name="registration" />
+          </TextFieldWrapper>
+        </TextFieldRow>
+        <TextFieldRow>
+          <TextFieldWrapper width={260}>
+            <TextField label="CEP" name="cep" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={565}>
+            <TextField label="Logradouro" name="street" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="Complemento" name="complement" />
+          </TextFieldWrapper>
+        </TextFieldRow>
+        <TextFieldRow>
+          <TextFieldWrapper width={260}>
+            <TextField label="Número" name="number" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="Bairro" name="neighborhood" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="Cidade" name="city" />
+          </TextFieldWrapper>
+          <TextFieldWrapper width={260}>
+            <TextField label="UF" name="state" />
+          </TextFieldWrapper>
+        </TextFieldRow>
+        <ButtonWrapper>
+          <Button>
+            {loading ? <Spin style={{ marginTop: 10 }} /> : 'Criar Paciente'}
+          </Button>
+        </ButtonWrapper>
+      </form>
+    </Container>
+  );
+};
+
+export default CreateUserModal;
diff --git a/src/modules/secretary/components/Patients/CreateUserModal/interfaces.ts b/src/modules/secretary/components/Patients/CreateUserModal/interfaces.ts
@@ -0,0 +1,3 @@
+export interface ICreateUserModal {
+  close(): void;
+}
diff --git a/src/modules/secretary/components/Patients/CreateUserModal/styles.ts b/src/modules/secretary/components/Patients/CreateUserModal/styles.ts
@@ -0,0 +1,110 @@
+import styled, { css } from 'styled-components';
+
+interface ITextFieldWrapperProps {
+  row?: boolean;
+  width: number;
+}
+
+interface ITextFieldProps {
+  hasError: boolean;
+  label: string;
+}
+
+export const TextFieldRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const TextFieldWrapper = styled.div<ITextFieldWrapperProps>`
+  width: ${props => props.width}px;
+
+  ${props =>
+    props.row &&
+    css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      div {
+        width: 47.5%;
+      }
+    `}
+`;
+
+export const Container = styled.div`
+  width: 100%;
+  padding: 40px 80px;
+
+  > .ant-select {
+    width: 100% !important;
+  }
+
+  .ant-upload.ant-upload-select-picture-card {
+    width: 259px;
+    height: 354px;
+    background-color: #f4f5fa;
+    border: 1px dashed #b5bcc7;
+    border-radius: 10px;
+  }
+
+  ${TextFieldWrapper + TextFieldWrapper} {
+    margin-top: 30px;
+  }
+`;
+
+export const ButtonWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin-top: 50px;
+`;
+
+export const TextField = styled.input<ITextFieldProps>`
+  width: 600px;
+  height: 60px;
+
+  box-shadow: 0px 0px 20px #eceff929;
+  border: 1px solid #b5bcc7;
+  border-radius: 10px;
+  background: #f4f5fa;
+
+  padding: 0 20px;
+  font-size: 18px;
+  font-weight: 600;
+
+  transition: border-color 0.2s;
+
+  ${props =>
+    props.hasError &&
+    css`
+      border: 1px solid #fa7070;
+    `}
+
+  &::placeholder {
+    color: #b5bcc7;
+    font-weight: 400;
+  }
+
+  &:hover {
+    border-color: #7081fa;
+  }
+
+  @media (max-width: 640px) {
+    width: 100%;
+  }
+
+  @media (max-width: 520px) {
+    height: 55px;
+    font-size: 16px;
+    padding: 0 16px;
+  }
+`;
+
+export const InputRowAlign = styled.div`
+  display: flex;
+  width: 848px;
+  justify-content: space-between;
+`;