diff --git a/src/pages/VeiculoCadastro.tsx b/src/pages/VeiculoCadastro.tsx index dc2a42b..b62a2a2 100644 --- a/src/pages/VeiculoCadastro.tsx +++ b/src/pages/VeiculoCadastro.tsx @@ -16,6 +16,7 @@ import { IonListHeader, IonSelect, IonSelectOption, + IonItemDivider, } from "@ionic/react"; import React, { useEffect, useReducer, useState } from "react"; @@ -23,9 +24,9 @@ import { useHistory } from "react-router-dom"; // import * as yup from 'yup'; -import carsService from '../services/functions/carsService' +import carsService from "../services/functions/carsService"; -import * as vansRoutes from '../services/api/vans'; +import * as vansRoutes from "../services/api/vans"; import "./VeiculoCadastro.css"; import { Color } from "@ionic/core"; @@ -34,44 +35,48 @@ import { PageHeader } from "../components/PageHeader"; const VeiculoCadastro: React.FC = () => { const history = useHistory(); - + const [showToast, setShowToast] = useState(false); const [toastMessage, setToastMessage] = useState(""); const [toastColor, setToastColor] = useState("primary"); - const [carBrands, setCarBrands] = useState([{ - codigo: '', - nome: '' - }]); + const [carBrands, setCarBrands] = useState([ + { + codigo: "", + nome: "", + }, + ]); - const [carModels, setCarModels] = useState([{ - codigo: '', - nome: '' - }]); + const [carModels, setCarModels] = useState([ + { + codigo: "", + nome: "", + }, + ]); const [inputValues, setInputValues] = useReducer( (state: any, newState: any) => ({ ...state, ...newState }), { - carPlate: '', - carBrand: '', - carModel: '', + carPlate: "", + carBrand: "", + carModel: "", seats_number: 1, isRented: false, - locator_name: '', - locator_address: '', - locator_complement: '', - locator_city: '', - locator_state: '', + locator_name: "", + locator_address: "", + locator_complement: "", + locator_city: "", + locator_state: "", } ); const clearRentalData = () => { setInputValues({ - carRentalName: '', - complement: '', - city: '', - state: '', - }) + carRentalName: "", + complement: "", + city: "", + state: "", + }); }; const validateForm = (): boolean => { @@ -111,7 +116,7 @@ const VeiculoCadastro: React.FC = () => { return false; } - if ((Number)(vanForm.seats_number) < 1) { + if (Number(vanForm.seats_number) < 1) { setToastMessage("Número de passageiros deve ser positivo!"); setShowToast(true); return false; @@ -133,7 +138,7 @@ const VeiculoCadastro: React.FC = () => { locator_complement: inputValues.locator_complement, locator_city: inputValues.locator_city, locator_state: inputValues.locator_state, - } + }; if (!locatorForm.locator_name) { setToastMessage("Nome do Locador é obrigatório"); @@ -163,82 +168,90 @@ const VeiculoCadastro: React.FC = () => { }; const loadCarModels = async (carBrandId: string) => { - const carModelsRes = await carsService.getCarModels(carBrandId) - + const carModelsRes = await carsService.getCarModels(carBrandId); + if (carModelsRes.error) { - setToastColor("danger") + setToastColor("danger"); setToastMessage(carModelsRes.error.errorMessage); - setInputValues({ carBrand: '' }) - return + setInputValues({ carBrand: "" }); + return; } if (carModelsRes.data) { - setCarModels(carModelsRes.data) + setCarModels(carModelsRes.data); } - } + }; const handleSubmit = async () => { if (!validateForm()) { - return + return; } // cria registro da van - await vansRoutes.create({ - plate: inputValues.carPlate, - brand: inputValues.carBrand, - model: inputValues.carModel, - seats_number: inputValues.seats_number, - locator_name: inputValues.locator_name, - locator_address: inputValues.locator_address, - locator_complement: inputValues.locator_complement, - locator_city: inputValues.locator_city, - locator_state: inputValues.locator_state - }).then(response => { - if (response.status === 'error') { - setToastMessage(response.message); + await vansRoutes + .create({ + plate: inputValues.carPlate, + brand: inputValues.carBrand, + model: inputValues.carModel, + seats_number: inputValues.seats_number, + locator_name: inputValues.locator_name, + locator_address: inputValues.locator_address, + locator_complement: inputValues.locator_complement, + locator_city: inputValues.locator_city, + locator_state: inputValues.locator_state, + }) + .then((response) => { + if (response.status === "error") { + setToastMessage(response.message); + setShowToast(true); + + return; + } + + history.push({ + pathname: "/minhas-vans", + state: { + redirectData: { + showToastMessage: true, + toastColor: "success", + toastMessage: response.message, + }, + }, + }); + }) + .catch((err) => { + setToastColor("danger"); + setToastMessage(err); setShowToast(true); - - return - } - - history.push({ pathname: '/minhas-vans', state: { - redirectData: { - showToastMessage: true, - toastColor: "success", - toastMessage: response.message, - }, - }}) - }).catch((err) => { - setToastColor("danger") - setToastMessage(err); - setShowToast(true); - }) + }); }; useEffect(() => { - let isMounted = true + let isMounted = true; const getCarsBrands = async () => { - const carBrandsRes = await carsService.getAllCarBrands() - + const carBrandsRes = await carsService.getAllCarBrands(); + if (carBrandsRes.error) { - setToastColor("danger") + setToastColor("danger"); setToastMessage(carBrandsRes.error.errorMessage); setShowToast(true); - return + return; } - + if (carBrandsRes.data) { if (isMounted) { - setCarBrands(carBrandsRes.data) + setCarBrands(carBrandsRes.data); } } - } + }; - getCarsBrands() + getCarsBrands(); - return () => { isMounted = false } - }, []) + return () => { + isMounted = false; + }; + }, []); return ( @@ -249,108 +262,144 @@ const VeiculoCadastro: React.FC = () => { - - Informações do veículo - + Informações do veículo - Placa + Placa setInputValues({ carPlate: e.target.value })} + onIonChange={(e: any) => + setInputValues({ carPlate: e.target.value }) + } /> {/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */} Marca - { setInputValues({ carBrand: e.detail.value }); loadCarModels(e.detail.value) }}> - { carBrands ? carBrands.map((carBrand, index) => { - return ({carBrand.nome}) - }) : <> } + { + setInputValues({ carBrand: e.detail.value }); + loadCarModels(e.detail.value); + }} + > + {carBrands ? ( + carBrands.map((carBrand, index) => { + return ( + + {carBrand.nome} + + ); + }) + ) : ( + <> + )} - { inputValues.carBrand ? + {inputValues.carBrand ? ( Modelo - { setInputValues({ carModel: e.detail.value }) }}> - { carModels ? carModels.map((carModel, index) => { - return ({carModel.nome}) - }) : <> } + { + setInputValues({ carModel: e.detail.value }); + }} + > + {carModels ? ( + carModels.map((carModel, index) => { + return ( + + {carModel.nome} + + ); + }) + ) : ( + <> + )} - : <>} + ) : ( + <> + )} - - Número de assentos - + Nº assentos setInputValues({ seats_number: e.target.value })} + onIonChange={(e: any) => + setInputValues({ seats_number: e.target.value }) + } /> - - - Informações do locador - + Informações de locação + O veículo é alugado? - setInputValues({ isRented: e.detail.checked })} /> + + setInputValues({ isRented: e.detail.checked }) + } + /> {inputValues.isRented && ( -
setInputValues({ locator_name: e.target.value })} + placeholder="Nome completo do Locador" + onIonChange={(e: any) => + setInputValues({ locator_name: e.target.value }) + } /> setInputValues({ locator_address: e.target.value })} + placeholder="Endereço do locador" + onIonChange={(e: any) => + setInputValues({ locator_address: e.target.value }) + } /> setInputValues({ locator_complement: e.target.value })} + placeholder="Complemento" + onIonChange={(e: any) => + setInputValues({ locator_complement: e.target.value }) + } /> setInputValues({ locator_city: e.target.value })} + placeholder="Cidade" + onIonChange={(e: any) => + setInputValues({ locator_city: e.target.value }) + } /> setInputValues({ locator_state: e.target.value })} + placeholder="Estado" + onIonChange={(e: any) => + setInputValues({ locator_state: e.target.value }) + } /> -
)}
Salvar @@ -360,12 +409,12 @@ const VeiculoCadastro: React.FC = () => { closeToast(setShowToast)} message={toastMessage} duration={2500} - /> + /> );