Refatora página VeiculoCadastro
This commit is contained in:
Matheus Albino Brunhara
374
src/pages/VeiculoCadastro.tsx
Normal file
374
src/pages/VeiculoCadastro.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
import {
|
||||
IonToast,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonInput,
|
||||
IonBackButton,
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonList,
|
||||
IonCheckbox,
|
||||
IonListHeader,
|
||||
IonSelect,
|
||||
IonSelectOption,
|
||||
} from "@ionic/react";
|
||||
|
||||
import React, { useEffect, useReducer, useState } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
// import * as yup from 'yup';
|
||||
|
||||
import carsService from '../services/functions/carsService'
|
||||
|
||||
import * as vansRoutes from '../services/api/vans';
|
||||
|
||||
import "./VeiculoCadastro.css";
|
||||
import { Color } from "@ionic/core";
|
||||
import { closeToast } from "../services/utils";
|
||||
import { PageHeader } from "../components/PageHeader";
|
||||
|
||||
const VeiculoCadastro: React.FC = () => {
|
||||
const history = useHistory();
|
||||
|
||||
const [showToast, setShowToast] = useState<boolean>(false);
|
||||
const [toastMessage, setToastMessage] = useState<string>("");
|
||||
const [toastColor, setToastColor] = useState<Color>("primary");
|
||||
|
||||
const [carBrands, setCarBrands] = useState([{
|
||||
codigo: '',
|
||||
nome: ''
|
||||
}]);
|
||||
|
||||
const [carModels, setCarModels] = useState([{
|
||||
codigo: '',
|
||||
nome: ''
|
||||
}]);
|
||||
|
||||
const [inputValues, setInputValues] = useReducer(
|
||||
(state: any, newState: any) => ({ ...state, ...newState }),
|
||||
{
|
||||
carPlate: '',
|
||||
carBrand: '',
|
||||
carModel: '',
|
||||
seats_number: 1,
|
||||
isRented: false,
|
||||
locator_name: '',
|
||||
locator_address: '',
|
||||
locator_complement: '',
|
||||
locator_city: '',
|
||||
locator_state: '',
|
||||
}
|
||||
);
|
||||
|
||||
const clearRentalData = () => {
|
||||
setInputValues({
|
||||
carRentalName: '',
|
||||
complement: '',
|
||||
city: '',
|
||||
state: '',
|
||||
})
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const vanForm = {
|
||||
carPlate: inputValues.carPlate,
|
||||
carBrand: inputValues.carBrand,
|
||||
carModel: inputValues.carModel,
|
||||
seats_number: inputValues.seats_number,
|
||||
isRented: inputValues.isRented,
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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.seats_number || !parseInt(`${vanForm.seats_number}`)) {
|
||||
setToastMessage("Número de passageiros inválido");
|
||||
setShowToast(true);
|
||||
return false;
|
||||
}
|
||||
|
||||
if ((Number)(vanForm.seats_number) < 1) {
|
||||
setToastMessage("Número de passageiros deve ser positivo!");
|
||||
setShowToast(true);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (vanForm.isRented) {
|
||||
return validateRentalForm();
|
||||
} else {
|
||||
clearRentalData();
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const validateRentalForm = (): boolean => {
|
||||
const locatorForm = {
|
||||
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,
|
||||
}
|
||||
|
||||
if (!locatorForm.locator_name) {
|
||||
setToastMessage("Nome do Locador é obrigatório");
|
||||
setShowToast(true);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
!locatorForm.locator_city ||
|
||||
!locatorForm.locator_city.match(/([A-zà-úÀ-Ú])/g)
|
||||
) {
|
||||
setToastMessage("Cidade inválida");
|
||||
setShowToast(true);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
!locatorForm.locator_state ||
|
||||
!locatorForm.locator_state.match(/([A-zà-úÀ-Ú])/g)
|
||||
) {
|
||||
setToastMessage("Estado inválido");
|
||||
setShowToast(true);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const loadCarModels = async (carBrandId: string) => {
|
||||
const carModelsRes = await carsService.getCarModels(carBrandId)
|
||||
|
||||
if (carModelsRes.error) {
|
||||
setToastColor("danger")
|
||||
setToastMessage(carModelsRes.error.errorMessage);
|
||||
setInputValues({ carBrand: '' })
|
||||
return
|
||||
}
|
||||
|
||||
if (carModelsRes.data) {
|
||||
setCarModels(carModelsRes.data)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!validateForm()) {
|
||||
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);
|
||||
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
|
||||
|
||||
const getCarsBrands = async () => {
|
||||
const carBrandsRes = await carsService.getAllCarBrands()
|
||||
|
||||
if (carBrandsRes.error) {
|
||||
setToastColor("danger")
|
||||
setToastMessage(carBrandsRes.error.errorMessage);
|
||||
setShowToast(true);
|
||||
return
|
||||
}
|
||||
|
||||
if (carBrandsRes.data) {
|
||||
if (isMounted) {
|
||||
setCarBrands(carBrandsRes.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getCarsBrands()
|
||||
|
||||
return () => { isMounted = false }
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<PageHeader
|
||||
pageName="Cadastro de veículo"
|
||||
backButtonPageUrl="/perfil"
|
||||
></PageHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonList lines="full" class="ion-no-margin">
|
||||
<IonListHeader lines="full">
|
||||
<IonLabel>Informações do veículo</IonLabel>
|
||||
</IonListHeader>
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>Placa </IonLabel>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
maxlength={7}
|
||||
placeholder='Digite a Placa do Veículo'
|
||||
onIonChange={(e: any) => setInputValues({ carPlate: e.target.value })}
|
||||
/>
|
||||
</IonItem>
|
||||
|
||||
{/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */}
|
||||
<IonItem>
|
||||
<IonLabel>Marca</IonLabel>
|
||||
<IonSelect onIonChange={(e: any) => { setInputValues({ carBrand: e.detail.value }); loadCarModels(e.detail.value) }}>
|
||||
{ carBrands ? carBrands.map((carBrand, index) => {
|
||||
return (<IonSelectOption key={index} value={index}>{carBrand.nome}</IonSelectOption>)
|
||||
}) : <></> }
|
||||
</IonSelect>
|
||||
</IonItem>
|
||||
|
||||
{ inputValues.carBrand ?
|
||||
<IonItem>
|
||||
<IonLabel>Modelo</IonLabel>
|
||||
<IonSelect onIonChange={(e: any) => { setInputValues({ carModel: e.detail.value }) }}>
|
||||
{ carModels ? carModels.map((carModel, index) => {
|
||||
return (<IonSelectOption key={index} value={carModel.nome}>{carModel.nome}</IonSelectOption>)
|
||||
}) : <></> }
|
||||
</IonSelect>
|
||||
</IonItem>
|
||||
: <></>}
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>
|
||||
Número de assentos
|
||||
</IonLabel>
|
||||
<IonInput
|
||||
type='number'
|
||||
min={1}
|
||||
clearInput
|
||||
placeholder='podem ser ocupados por passageiros'
|
||||
onIonChange={(e: any) => setInputValues({ seats_number: e.target.value })}
|
||||
/>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList lines="full" class="ion-no-margin">
|
||||
<IonListHeader lines="full">
|
||||
<IonLabel>Informações do locador</IonLabel>
|
||||
</IonListHeader>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>O veículo é alugado?</IonLabel>
|
||||
<IonCheckbox checked={inputValues.isRented} onIonChange={e => setInputValues({ isRented: e.detail.checked })} />
|
||||
</IonItem>
|
||||
|
||||
{inputValues.isRented && (
|
||||
<div>
|
||||
<IonItem>
|
||||
<IonLabel position="stacked" />
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Nome completo do Locador'
|
||||
onIonChange={(e: any) => setInputValues({ locator_name: e.target.value })}
|
||||
/>
|
||||
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Endereço do locador'
|
||||
onIonChange={(e: any) => setInputValues({ locator_address: e.target.value })}
|
||||
/>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Complemento'
|
||||
onIonChange={(e: any) => setInputValues({ locator_complement: e.target.value })}
|
||||
/>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Cidade'
|
||||
onIonChange={(e: any) => setInputValues({ locator_city: e.target.value })}
|
||||
/>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Estado'
|
||||
onIonChange={(e: any) => setInputValues({ locator_state: e.target.value })}
|
||||
/>
|
||||
</IonItem>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<IonButton
|
||||
className='ion-margin-top'
|
||||
expand='block'
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Salvar
|
||||
</IonButton>
|
||||
</div>
|
||||
</IonList>
|
||||
|
||||
<IonToast
|
||||
position="top"
|
||||
color={toastColor}
|
||||
isOpen={showToast}
|
||||
onDidDismiss={() => closeToast(setShowToast)}
|
||||
message={toastMessage}
|
||||
duration={2500}
|
||||
/>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default VeiculoCadastro;
|
||||
Reference in New Issue
Block a user