diff --git a/src/components/patients/PatientForm.jsx b/src/components/patients/PatientForm.jsx index f4eb4484..9844b803 100644 --- a/src/components/patients/PatientForm.jsx +++ b/src/components/patients/PatientForm.jsx @@ -1,49 +1,36 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import InputMask from "react-input-mask"; function PatientForm({ onSave, onCancel, PatientDict }) { - const FormatTelefones = (valor) => { - - const digits = String(valor).replace(/\D/g, '').slice(0, 11); - - - return digits - .replace(/(\d)/, '($1') // 123 -> 123. - .replace(/(\d{2})(\d)/, '$1) $2' ) - .replace(/(\d)(\d{4})/, '$1 $2') - .replace(/(\d{4})(\d{4})/, '$1-$2') + const digits = String(valor).replace(/\D/g, '').slice(0, 11); + return digits + .replace(/(\d)/, '($1') + .replace(/(\d{2})(\d)/, '$1) $2' ) + .replace(/(\d)(\d{4})/, '$1 $2') + .replace(/(\d{4})(\d{4})/, '$1-$2') } - const FormatCPF = (valor) => { - - const digits = String(valor).replace(/\D/g, '').slice(0, 11); - - - - return digits - .replace(/(\d{3})(\d)/, '$1.$2') // 123 -> 123. - .replace(/(\d{3})(\d)/, '$1.$2') // 123.456 -> 123.456. - .replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01 - + const digits = String(valor).replace(/\D/g, '').slice(0, 11); + return digits + .replace(/(\d{3})(\d)/, '$1.$2') + .replace(/(\d{3})(\d)/, '$1.$2') + .replace(/(\d{3})(\d{1,2})$/, '$1-$2'); } - const [formData, setFormData] = useState({ + foto: null, nome: PatientDict.nome, nomeSocial: PatientDict.nome_social, dataNascimento: PatientDict.data_nascimento, genero: PatientDict.sexo, - documento: '', - numeroDocumento: '', cpf: PatientDict.cpf, profissao: PatientDict.profissao , nomeMae: PatientDict.nome_mae, profissaoMae: PatientDict.profissao_mae, nomePai: PatientDict.nome_pai, - profissaoPai: PatientDict.profissao_pai, nomeResponsavel: '', cpfResponsavel: '', nomeConjuge: '', @@ -59,50 +46,100 @@ function PatientForm({ onSave, onCancel, PatientDict }) { telefone1: PatientDict.celular, telefone2: '', telefone3: '', - observacoes: '' + observacoes: '', + rg: '', + documentoTipo: '', + numeroDocumento: '', + etniaRaca: '', + naturalidade: '', + nacionalidade: '', + estadoCivil: '', + rnConvenio: false, + + // INFORMAÇÕES MÉDICAS + tipoSanguineo: '', + peso: '', + altura: '', + imc: '', + alergias: '', + + // INFORMAÇÕES DE CONVÊNIO + convenio: '', + plano: '', + numeroMatricula: '', + validadeCarteira: '', + validadeIndeterminada: false, + pacienteVip: false, + + // ANEXO + anexos: null, }); + // Estado para armazenar a URL da foto do avatar + const [avatarUrl, setAvatarUrl] = useState(null); + + // Estado para controlar quais seções estão colapsadas + const [collapsedSections, setCollapsedSections] = useState({ + dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão + infoMedicas: false, + infoConvenio: false, + endereco: false, + contato: false, + }); + + // Função para alternar o estado de colapso de uma seção + const handleToggleCollapse = (section) => { + setCollapsedSections(prevState => ({ + ...prevState, + [section]: !prevState[section] + })); + }; + + // Lógica para calcular o IMC + useEffect(() => { + const peso = parseFloat(formData.peso); + const altura = parseFloat(formData.altura); + if (peso > 0 && altura > 0) { + const imcCalculado = peso / (altura * altura); + setFormData(prev => ({ ...prev, imc: imcCalculado.toFixed(2) })); + } else { + setFormData(prev => ({ ...prev, imc: '' })); + } + }, [formData.peso, formData.altura]); + + const handleChange = (e) => { - const { name, value } = e.target; - setFormData({ - ...formData, - [name]: value - }); + const { name, value, type, checked, files } = e.target; + + if (type === 'checkbox') { + setFormData({ ...formData, [name]: checked }); + } else if (type === 'file') { + setFormData({ ...formData, [name]: files[0] }); + // Lógica para pré-visualizar a imagem no avatar + if (name === 'foto' && files[0]) { + const reader = new FileReader(); + reader.onloadend = () => { + setAvatarUrl(reader.result); + }; + reader.readAsDataURL(files[0]); + } else if (name === 'foto' && !files[0]) { + setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado + } - if(name.includes('cpf')){ - - let cpfFormatado = FormatCPF(e.target.value) - - setFormData({...formData, - [name]: cpfFormatado,} - )} - - else if(name.includes('telefone')){ - let telefoneFormatado = FormatTelefones(value) - - console.log(telefoneFormatado) - - - - setFormData({...formData, - [name]: telefoneFormatado - }) + } else { + setFormData({ ...formData, [name]: value }); } - else if(name.includes('cep')){ - const digitsCep = String(value).replace(/\D/g, '').slice(0, 8); - setFormData({...formData, - [name]: digitsCep - }) - } - - - - }; - - - // Função para buscar endereço pelo CEP + if (name.includes('cpf')) { + let cpfFormatado = FormatCPF(value); + setFormData(prev => ({ ...prev, [name]: cpfFormatado })); + } else if (name.includes('telefone')) { + let telefoneFormatado = FormatTelefones(value); + setFormData(prev => ({ ...prev, [name]: telefoneFormatado })); + } + }; + const handleCepBlur = async () => { const cep = formData.cep.replace(/\D/g, ''); if (cep.length === 8) { @@ -127,197 +164,409 @@ function PatientForm({ onSave, onCancel, PatientDict }) { }; const handleSubmit = () => { - if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email||!formData.telefone1){ - alert('Por favor, preencha: Nome ,CPF, Gênero, Data de nascimento, telefone e Email.'); + if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento){ + alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.'); return; } - onSave( - {nome: formData.nome, - nomeSocial: formData.nomeSocial, - dataNascimento: formData.dataNascimento, - genero: formData.genero, - documento: formData.documento, - numeroDocumento: formData.numeroDocumento, - cpf: formData.cpf, - profissao: formData.profissao, - nomeMae: formData.nomeMae, - profissaoMae: formData.profissaoMae, - nomePai: formData.nomePai, - profissaoPai: formData.profissaoPai, - nomeResponsavel: formData.nomeResponsavel, - cpfResponsavel: formData.cpfResponsavel, - nomeConjuge: formData.nomeConjuge, - outroId: formData.outroId, - endereco: { - cep: formData.cep, - cidade: formData.cidade, - estado: formData.estado, - bairro: formData.bairro, - logradouro: formData.rua, - numero: formData.numero, - complemento: formData.complemento, - }, - - contato: { - email: formData.email, - telefone1: formData.telefone1, - telefone2: formData.telefone2, - telefone3: formData.telefone3, - }, - - observacoes: formData.observacoes, -} - - - ); + onSave({ + ...formData, + endereco: { + cep: formData.cep, + cidade: formData.cidade, + estado: formData.estado, + bairro: formData.bairro, + logradouro: formData.rua, + numero: formData.numero, + complemento: formData.complemento, + }, + contato: { + email: formData.email, + telefone1: formData.telefone1, + telefone2: formData.telefone2, + telefone3: formData.telefone3, + }, + infoMedicas: { + tipoSanguineo: formData.tipoSanguineo, + peso: formData.peso, + altura: formData.altura, + imc: formData.imc, + alergias: formData.alergias, + }, + infoConvenio: { + convenio: formData.convenio, + plano: formData.plano, + numeroMatricula: formData.numeroMatricula, + validadeCarteira: formData.validadeCarteira, + validadeIndeterminada: formData.validadeIndeterminada, + pacienteVip: formData.pacienteVip, + }, + }); }; return (
-

MediConnect

+

MediConnect

- {/* ------------------ DADOS PESSOAIS ------------------ */} -
Dados Pessoais
-
-
- - + {/* DADOS PESSOAIS */} +
+

handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}> + Dados Pessoais + + {collapsedSections.dadosPessoais ? '▲' : '▼'} + +

+
+
+ {/* AVATAR E INPUT DE FOTO */} +
+
+ {avatarUrl ? ( + Avatar do Paciente + ) : ( +
+ ☤ +
+ )} +
+
+ + + {formData.foto && {formData.foto.name}} +
+
+ {/* CADASTRO */} +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + {/* CAMPOS MOVIDOS */} +
+ + +
+
+ +
+ + + {formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'} +
+
+ +
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - +
+ + {/* INFORMAÇÕES MÉDICAS */} +
+

handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}> + Informações Médicas + + {collapsedSections.infoMedicas ? '▲' : '▼'} + +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
- {/* ------------------ ENDEREÇO ------------------ */} -
Endereço
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - + {/* INFORMAÇÕES DE CONVÊNIO */} +
+

handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}> + Informações de convênio + + {collapsedSections.infoConvenio ? '▲' : '▼'} + +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ {/* PACIENTE VIP */} +
+
+ + +
+
+
- {/* ------------------ CONTATO ------------------ */} -
Contato
-
-
- - -
-
- - -
-
- - -
-
- - + {/* ENDEREÇO */} +
+

handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}> + Endereço + + {collapsedSections.endereco ? '▲' : '▼'} + +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
- {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */} -
Informações Adicionais
-
- - + {/* CONTATO */} +
+

handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}> + Contato + + {collapsedSections.contato ? '▲' : '▼'} + +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
- + {/* Botões */} -
- -
@@ -325,4 +574,4 @@ function PatientForm({ onSave, onCancel, PatientDict }) { ); } -export default PatientForm; +export default PatientForm; \ No newline at end of file