377 lines
10 KiB
TypeScript
377 lines
10 KiB
TypeScript
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 "./CadastroVan.css";
|
|
import { Color } from "@ionic/core";
|
|
|
|
const CadastroVan: 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>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>Cadastro de veículo</IonTitle>
|
|
<IonButtons slot='start'>
|
|
<IonBackButton defaultHref='/perfil' />
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
<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={() => setShowToast(false)}
|
|
message={toastMessage}
|
|
duration={2500}
|
|
/>
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default CadastroVan;
|