From 2771eb111cc24d0a0ce22a1030798402d022ddd5 Mon Sep 17 00:00:00 2001 From: Hugo Oliveira Date: Tue, 6 Feb 2024 19:40:58 +0000 Subject: [PATCH] Update #8 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit O forms agora contém as diversas restrições e faz o step conforme a escolha do utilzador no tipo de empresa. --- high-green-power/src/App.tsx | 57 ++++++++++++++++++-------- high-green-power/src/DadosPessoais.tsx | 54 ++++++++++++++---------- 2 files changed, 72 insertions(+), 39 deletions(-) diff --git a/high-green-power/src/App.tsx b/high-green-power/src/App.tsx index d7a730e..aad511d 100644 --- a/high-green-power/src/App.tsx +++ b/high-green-power/src/App.tsx @@ -7,7 +7,7 @@ import { Box, Container, Grid, Typography, Button, Stepper, Step, StepLabel } fr import { useFormik } from 'formik'; import { useState } from "react"; import { matchIsValidTel } from 'mui-tel-input'; -import axios from "axios"; +//import axios from "axios"; interface dados { @@ -23,7 +23,7 @@ interface dados { pais?: string; cidade?: string; codigoPostal?: string; - estado: string; + nomePessoaContacto: string; telemovelPC: string; @@ -49,7 +49,6 @@ const initialValues: dados = { pais: 'Portugal', cidade: '', codigoPostal: undefined, - estado: 'Pendente', nomePessoaContacto: '', telemovelPC: '', @@ -69,11 +68,9 @@ function App() { const schemaStep1 = yup.object({ - tiporegisto: yup.string().required("*Por favor insira um tipo de registo registo válido"), - tipoempresa: yup.string(), - empresa: yup.string().required("*Por favor insira um nome válido"), + tiporegisto: yup.string().required("*Por favor insira um tipo de registo válido"), + representante: yup.string().required("*Por favor insira um nome válido"), nif: yup.string().matches(/^[0-9]+$/, "*Por favor insira um NIF válido").length(9, "*O NIF deve ser composto por 9 dígitos"), - representante: yup.string().required("*Por favor insira um representante válido"), telemovelDP: yup.string() .required(' ') .test('is-valid-phone', "*Por favor insira um número de telemóvel válido", (value) => { @@ -84,7 +81,7 @@ function App() { .required("*Por favor insira um email válido"), morada: yup.string(), andar: yup.string().matches(/^[0-9]+$/, "*Por favor insira um Andar válido"), - cidade: yup.string().required("*Por favor insira uma Cidade válida"), + cidade: yup.string().required("*Por favor insira uma cidade válida"), pais: yup.string(), codigoPostal: yup.string() @@ -139,14 +136,15 @@ function App() { name: values.nomePessoaContacto, email: values.emailPessoaContacto, phone: values.telemovelPC.replace(/\s/g, ''), - }] + }], + type: values.tipoempresa }; console.log('Dados: ', values); console.log('Dados API:', extractedData); - try { + /*try { // Make a POST request using Axios const response = await axios.post('https://dev-hgp-sgi.streamline.pt/api/entities', extractedData); @@ -155,7 +153,7 @@ function App() { } catch (error) { // Handle errors console.error('Error submitting data:', error); - } + }*/ }; @@ -183,8 +181,21 @@ function App() { const [activeStep, setActiveStep] = React.useState(0); const handleNext = async () => { + console.log(formik.values.tipoempresa); try { + if (formik.values.tiporegisto == '0'){ + await yup.object({ + tipoempresa: yup.string().required("*Por favor insira um tipo de empresa válido"), + }).validateAt('tipoempresa', formik.values, { abortEarly: false }); + } + + if (formik.values.tipoempresa >= '0'){ + await yup.object({ + empresa: yup.string().required("*Por favor insira nome da empresa válido"), + }).validateAt('empresa', formik.values, { abortEarly: false }); + } + if (activeStep === 0) { await schemaStep1.validate(formik.values, { abortEarly: false }); } else if (activeStep === 1) { @@ -192,9 +203,17 @@ function App() { } else if (activeStep === 2) { await schemaStep3.validate(formik.values, { abortEarly: false }); } - - setActiveStep(activeStep + 1); - setValidationErrors([]); + + if (formik.values.tiporegisto == '1'){ + formik.values.nomePessoaContacto = formik.values.representante; + formik.values.telemovelPC = formik.values.telemovelDP; + formik.values.emailPessoaContacto = formik.values.emailDP; + setActiveStep(activeStep + 2); + setValidationErrors([]); + }else{ + setActiveStep(activeStep + 1); + setValidationErrors([]); + } } catch (error) { const errors = (error as yup.ValidationError).errors; @@ -204,9 +223,13 @@ function App() { }; const handleBack = () => { - - setActiveStep(activeStep - 1); - + if (formik.values.tiporegisto == '1'){ + setActiveStep(activeStep - 2); + setValidationErrors([]); + }else{ + setActiveStep(activeStep - 1); + setValidationErrors([]); + } }; return ( diff --git a/high-green-power/src/DadosPessoais.tsx b/high-green-power/src/DadosPessoais.tsx index 7aa00c8..f0d7a57 100644 --- a/high-green-power/src/DadosPessoais.tsx +++ b/high-green-power/src/DadosPessoais.tsx @@ -21,7 +21,10 @@ export const DadosPessoais = ( {formik}: any ) => { const [tipoRegisto, setTipoRegisto] = useState(''); - const [smValue, setSmValue] = useState(6); + const [smValue, setSmValue] = useState(12); + + const [showEmpresa, setShowEmpresa] = useState(false); // State to track whether to show "Representante" field + const handleTipoRegistoChange = (event: { target: { value: SetStateAction; }; }) => { setTipoRegisto(event.target.value); @@ -29,9 +32,9 @@ export const DadosPessoais = ( {formik}: any ) => { const tipoempresaValue = ''; if (event.target.value == '0') { - setSmValue(3); - } else { setSmValue(6); + } else { + setSmValue(12); } formik.setFieldValue('tiporegisto', event.target.value); @@ -56,6 +59,10 @@ export const DadosPessoais = ( {formik}: any ) => { } }; + useEffect(() => { + setShowEmpresa(formik.values.tipoempresa !== ''); // Update showRepresentante based on tipoempresa field value + }, [formik.values.tipoempresa]); + const [countries, setCountries] = useState([]); useEffect(() => { @@ -97,7 +104,7 @@ export const DadosPessoais = ( {formik}: any ) => { {tipoRegisto == '0' && ( - + Tipo de empresa )} - - - + {showEmpresa && ( + + + + )} { type='text' id="representante" name="representante" - label="Nome do representante legal (empresa)" + label={tipoRegisto == '0' ? "Nome do representante da empresa" : "Nome completo"} fullWidth variant="standard" error={formik.touched.representante && Boolean(formik.errors.representante)} helperText={formik.touched.representante && formik.errors.representante} /> - + { {countries.map((country: Paises, index: number) => ( - + {country.name.common}