diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx index 8d83e81..4fec045 100644 --- a/src/pages/CadastroVan.tsx +++ b/src/pages/CadastroVan.tsx @@ -1,5 +1,5 @@ import { - IonIcon, + IonToast, IonItem, IonLabel, IonInput, @@ -7,53 +7,157 @@ import { IonButton, IonButtons, IonCardTitle, - IonCol, IonContent, - IonGrid, IonHeader, IonPage, - IonRow, IonToolbar, IonTitle, IonText, - IonList, IonRadioGroup, - IonListHeader, IonRadio } from "@ionic/react"; -import React, { useEffect } from "react"; -import { useForm, Controller } from "react-hook-form"; -import { ErrorMessage } from "@hookform/error-message"; +import React, { useState } from "react"; import { ApiClient } from "../services/api-client.service"; import { arrowBack } from "ionicons/icons"; import "./CadastroVan.css"; + const CadastroVan: React.FC = () => { - const { - handleSubmit, - control, - setValue, - register, - getValues, - formState: { errors } - } = useForm({ - defaultValues: { - carPlate: "", - carBrand: "", - carModel: "", - maxPassengers: "", - isRent: "NO" + + const [showToast, setShowToast] = useState(false); + const [toastMessage, setToastMessage] = useState(""); + + const [carPlate, setCarPlate] = useState(""); + const [carBrand, setCarBrand] = useState(""); + const [carModel, setCarModel] = useState(""); + const [maxPassengers, setMaxPassengers] = useState(1); + const [isRent, setIsRent] = useState(false); + const [carRentalName, setCarRentalName] = useState(""); + const [postalCode, setPostalCode] = useState(""); + const [street, setStreet] = useState(""); + const [number, setNumber] = useState(""); + const [complement, setComplement] = useState(""); + const [city, setCity] = useState(""); + const [state, setState] = useState(""); + + const vanForm = { + carPlate, + carBrand, + carModel, + maxPassengers, + isRent, + carRentalName, + carRentalAddress: { + postalCode, + street, + number, + complement, + city, + state } - }); + }; - useEffect(() => { + const clearRentalData = () => { + setCarRentalName(""); + setPostalCode(""); + setStreet(""); + setNumber(""); + setComplement(""); + setCity(""); + setState(""); + }; - },[]); + const validateForm = (): boolean => { + if ( + !vanForm.carPlate || + vanForm.carPlate.length !== 7 || + !vanForm.carPlate.match(/([A-z0-9]){7}/g) + ) { + setToastMessage("Placa do veículo inválida!"); + setShowToast(true); + return false; + } - const onSubmit = async (van: any) => { - await ApiClient.doPost("/cadastro-van", van); + if (!vanForm.carBrand) { + setToastMessage("Marca do veículo é obrigatório"); + setShowToast(true); + return false; + } + + if (!vanForm.carModel) { + setToastMessage("Modelo do veículo é obrigatório"); + setShowToast(true); + return false; + } + + if (!vanForm.maxPassengers || !parseInt(`${vanForm.maxPassengers}`)) { + setToastMessage("Número de passageiros inválido"); + setShowToast(true); + return false; + } + + if (vanForm.isRent) { + return validateRentalForm(); + } else { + clearRentalData(); + } + + return true; + }; + + const validateRentalForm = (): boolean => { + if (!vanForm.carRentalName) { + setToastMessage("Nome do Locador é obrigatório"); + setShowToast(true); + return false; + } + + if ( + !vanForm.carRentalAddress.postalCode || + vanForm.carRentalAddress.postalCode.length !== 8 || + !vanForm.carRentalAddress.postalCode.match(/([0-9]){8}/g) + ) { + setToastMessage("Cep inválido"); + setShowToast(true); + return false; + } + + if ( + !vanForm.carRentalAddress.number || + !parseInt(`${vanForm.carRentalAddress.number}`) + ) { + setToastMessage("Número inválido"); + setShowToast(true); + return false; + } + + if ( + !vanForm.carRentalAddress.city || + !vanForm.carRentalAddress.city.match(/([A-zà-úÀ-Ú])/g) + ) { + setToastMessage("Cidade inválido"); + setShowToast(true); + return false; + } + + if ( + !vanForm.carRentalAddress.state || + !vanForm.carRentalAddress.state.match(/([A-zà-úÀ-Ú])/g) + ) { + setToastMessage("Estado inválido"); + setShowToast(true); + return false; + } + + return true; + }; + + const handleSubmit = async () => { + if (validateForm()) { + await ApiClient.doPost("/cadastro-van", vanForm); + } }; return ( @@ -70,68 +174,50 @@ const CadastroVan: React.FC = () => { -
+ Cadastro do Veículo Placa * setCarPlate(e.target.value)} /> - } - /> Marca * setCarBrand(e.target.value)} /> - } - /> Modelo * setCarModel(e.target.value)} /> - } - /> Número Máximo de Passageiros * setMaxPassengers(e.target.value)} /> - } - /> @@ -141,35 +227,118 @@ const CadastroVan: React.FC = () => {
setValue("isRent", e.detail.value)} + onIonChange={(e: any) => setIsRent(e.target.value)} > Sim - + Não - +
- {errors.isRent && ( - This field is required + + {isRent && ( +
+ + Nome do Locador * + setCarRentalName(e.target.value)} + /> + + +
+ Endereço do Locador +
+ + CEP* + setPostalCode(e.target.value)} + /> + + + Logradouro* + setStreet(e.target.value)} + /> + + + + Número* + setNumber(e.target.value)} + /> + + + + Complemento* + setComplement(e.target.value)} + /> + + + + Cidade* + setCity(e.target.value)} + /> + + + + Estado* + setState(e.target.value)} + /> + +
+
)} - {getValues("isRent") === "YES" &&
Teste Novos Campos
} -
- + Salvar
+ setShowToast(false)} + message={toastMessage} + duration={2500} + />
);