Cadastro de van agora faz requisições ao backend
This commit is contained in:
Matheus Albino Brunhara
@@ -20,12 +20,12 @@ import {
|
||||
|
||||
import React, { useEffect, useReducer, useState } from "react";
|
||||
|
||||
import * as yup from 'yup';
|
||||
|
||||
import { ApiClient } from "../services/api-client.service";
|
||||
// import * as yup from 'yup';
|
||||
|
||||
import carsService from '../services/functions/carsService'
|
||||
|
||||
import * as vansRoutes from '../services/api/vans';
|
||||
|
||||
import "./CadastroVan.css";
|
||||
|
||||
const CadastroVan: React.FC = () => {
|
||||
@@ -43,77 +43,34 @@ const CadastroVan: React.FC = () => {
|
||||
carPlate: '',
|
||||
carBrand: '',
|
||||
carModel: '',
|
||||
maxPassengers: 1,
|
||||
isRent: false,
|
||||
carRentalName: '',
|
||||
postalCode: '',
|
||||
street: '',
|
||||
number: '',
|
||||
complement: '',
|
||||
city: '',
|
||||
state: '',
|
||||
seats_number: 1,
|
||||
isRented: false,
|
||||
locator_name: '',
|
||||
locator_address: '',
|
||||
locator_complement: '',
|
||||
locator_city: '',
|
||||
locator_state: '',
|
||||
}
|
||||
);
|
||||
|
||||
// TODO, yup
|
||||
let schema = yup.object().shape({
|
||||
carPlate: yup.string().required(),
|
||||
carBrand: yup.string().required(),
|
||||
carModel: yup.string().required(),
|
||||
maxPassengers: yup.number().integer().min(1).max(100).required(),
|
||||
isRented: yup.boolean().required(),
|
||||
carRentalName: yup.string(), // .required(),
|
||||
postalCode: yup.string(), // .required(),
|
||||
street: yup.string(), // .required(),
|
||||
number: yup.number().integer(), // .required(),
|
||||
complement: yup.string(), // .required(),
|
||||
city: yup.string(), // .required(),
|
||||
state: yup.string(), // .required(),
|
||||
|
||||
// name: yup.string().required(),
|
||||
// age: yup.number().required().positive().integer(),
|
||||
// email: yup.string().email(),
|
||||
// website: yup.string().url(),
|
||||
// createdOn: yup.date().default(function () {
|
||||
// return new Date();
|
||||
// }),
|
||||
});
|
||||
|
||||
const vanForm = {
|
||||
carPlate: inputValues.carPlate,
|
||||
carBrand: inputValues.carBrand,
|
||||
carModel: inputValues.carModel,
|
||||
maxPassengers: inputValues.maxPassengers,
|
||||
isRented: inputValues.isRented,
|
||||
carRentalName: inputValues.carRentalName,
|
||||
carRentalAddress: {
|
||||
postalCode: inputValues.postalCode,
|
||||
street: inputValues.street,
|
||||
number: inputValues.number,
|
||||
complement: inputValues.complement,
|
||||
city: inputValues.city,
|
||||
state: inputValues.state,
|
||||
}
|
||||
};
|
||||
|
||||
const clearRentalData = () => {
|
||||
setInputValues({
|
||||
carPlate: '',
|
||||
carBrand: '',
|
||||
carModel: '',
|
||||
maxPassengers: 1,
|
||||
isRent: false,
|
||||
carRentalName: '',
|
||||
postalCode: '',
|
||||
street: '',
|
||||
number: '',
|
||||
complement: '',
|
||||
city: '',
|
||||
state: '',
|
||||
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 ||
|
||||
@@ -136,12 +93,18 @@ const CadastroVan: React.FC = () => {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!vanForm.maxPassengers || !parseInt(`${vanForm.maxPassengers}`)) {
|
||||
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 {
|
||||
@@ -152,43 +115,32 @@ const CadastroVan: React.FC = () => {
|
||||
};
|
||||
|
||||
const validateRentalForm = (): boolean => {
|
||||
if (!vanForm.carRentalName) {
|
||||
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 (
|
||||
!vanForm.carRentalAddress.postalCode ||
|
||||
vanForm.carRentalAddress.postalCode.length !== 8 ||
|
||||
!vanForm.carRentalAddress.postalCode.match(/([0-9]){8}/g)
|
||||
!locatorForm.locator_city ||
|
||||
!locatorForm.locator_city.match(/([A-zà-úÀ-Ú])/g)
|
||||
) {
|
||||
setToastMessage("Cep inválido");
|
||||
setToastMessage("Cidade inválida");
|
||||
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)
|
||||
!locatorForm.locator_state ||
|
||||
!locatorForm.locator_state.match(/([A-zà-úÀ-Ú])/g)
|
||||
) {
|
||||
setToastMessage("Estado inválido");
|
||||
setShowToast(true);
|
||||
@@ -199,9 +151,34 @@ const CadastroVan: React.FC = () => {
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (validateForm()) {
|
||||
await ApiClient.doPost("/cadastro-van", vanForm);
|
||||
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
|
||||
}
|
||||
|
||||
console.log(response)
|
||||
}).catch((err) => {
|
||||
setToastMessage(err);
|
||||
setShowToast(true);
|
||||
})
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -248,24 +225,15 @@ const CadastroVan: React.FC = () => {
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
maxlength={7}
|
||||
placeholder='Digite a Placa do Veículo'
|
||||
onIonInput={(e: any) => setInputValues({ carPlate: e.target.value })}
|
||||
onIonChange={(e: any) => setInputValues({ carPlate: e.target.value })}
|
||||
/>
|
||||
</IonItem>
|
||||
|
||||
{/* <IonItem>
|
||||
<IonLabel position='floating'>Marca </IonLabel>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Digite a Marca do Veículo'
|
||||
onIonInput={(e: any) => setInputValues({ carBrand: e.target.value })}
|
||||
/>
|
||||
</IonItem> */}
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Marca</IonLabel>
|
||||
<IonSelect value={inputValues.marca}>
|
||||
<IonSelect value={inputValues.carBrand} onIonChange={(e: any) => setInputValues({ carBrand: e.target.value })}>
|
||||
{ carModels ? carModels.map((carModel, index) => {
|
||||
return (<IonSelectOption key={index} value={carModel.name}>{carModel.name}</IonSelectOption>)
|
||||
}) : <></> }
|
||||
@@ -278,19 +246,20 @@ const CadastroVan: React.FC = () => {
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Digite o Modelo do Veículo'
|
||||
onIonInput={(e: any) => setInputValues({ carModel: e.target.value })}
|
||||
onIonChange={(e: any) => setInputValues({ carModel: e.target.value })}
|
||||
/>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>
|
||||
Número Máximo de Passageiros
|
||||
Número de assentos
|
||||
</IonLabel>
|
||||
<IonInput
|
||||
type='text'
|
||||
type='number'
|
||||
min={1}
|
||||
clearInput
|
||||
placeholder='Digite o número máximo de passageiros'
|
||||
onIonInput={(e: any) => setInputValues({ maxPassengers: e.target.value })}
|
||||
placeholder='podem ser ocupados por passageiros'
|
||||
onIonChange={(e: any) => setInputValues({ seats_number: e.target.value })}
|
||||
/>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
@@ -313,38 +282,32 @@ const CadastroVan: React.FC = () => {
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Nome completo do Locador'
|
||||
onIonInput={(e: any) => setInputValues({ carRentalName: e.target.value })}
|
||||
onIonChange={(e: any) => setInputValues({ locator_name: e.target.value })}
|
||||
/>
|
||||
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Endereço do locador'
|
||||
onIonInput={(e: any) => setInputValues({ postalCode: e.target.value })}
|
||||
/>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Número'
|
||||
onIonInput={(e: any) => setInputValues({ number: e.target.value })}
|
||||
onIonChange={(e: any) => setInputValues({ locator_address: e.target.value })}
|
||||
/>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Complemento'
|
||||
onIonInput={(e: any) => setInputValues({ complement: e.target.value })}
|
||||
onIonChange={(e: any) => setInputValues({ locator_complement: e.target.value })}
|
||||
/>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Cidade'
|
||||
onIonInput={(e: any) => setInputValues({ city: e.target.value })}
|
||||
onIonChange={(e: any) => setInputValues({ locator_city: e.target.value })}
|
||||
/>
|
||||
<IonInput
|
||||
type='text'
|
||||
clearInput
|
||||
placeholder='Estado'
|
||||
onIonInput={(e: any) => setInputValues({ state: e.target.value })}
|
||||
onIonChange={(e: any) => setInputValues({ locator_state: e.target.value })}
|
||||
/>
|
||||
</IonItem>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user