cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refatora página VeiculoCadastro

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-09-03 16:54:20 -03:00
parent c92c38d00a
commit bbbfbcd48b
1 changed files with 172 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/pages/VeiculoCadastro.tsx
View File

@@ -16,6 +16,7 @@ import {
IonListHeader, IonListHeader,
IonSelect, IonSelect,
IonSelectOption, IonSelectOption,
IonItemDivider,
} from "@ionic/react"; } from "@ionic/react";
import React, { useEffect, useReducer, useState } from "react"; import React, { useEffect, useReducer, useState } from "react";
@@ -23,9 +24,9 @@ import { useHistory } from "react-router-dom";
// import * as yup from 'yup'; // 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 "./VeiculoCadastro.css";
import { Color } from "@ionic/core"; import { Color } from "@ionic/core";
@@ -39,39 +40,43 @@ const VeiculoCadastro: React.FC = () => {
const [toastMessage, setToastMessage] = useState<string>(""); const [toastMessage, setToastMessage] = useState<string>("");
const [toastColor, setToastColor] = useState<Color>("primary"); const [toastColor, setToastColor] = useState<Color>("primary");
const [carBrands, setCarBrands] = useState([{ const [carBrands, setCarBrands] = useState([
codigo: '', {
nome: '' codigo: "",
}]); nome: "",
},
]);
const [carModels, setCarModels] = useState([{ const [carModels, setCarModels] = useState([
codigo: '', {
nome: '' codigo: "",
}]); nome: "",
},
]);
const [inputValues, setInputValues] = useReducer( const [inputValues, setInputValues] = useReducer(
(state: any, newState: any) => ({ ...state, ...newState }), (state: any, newState: any) => ({ ...state, ...newState }),
{ {
carPlate: '', carPlate: "",
carBrand: '', carBrand: "",
carModel: '', carModel: "",
seats_number: 1, seats_number: 1,
isRented: false, isRented: false,
locator_name: '', locator_name: "",
locator_address: '', locator_address: "",
locator_complement: '', locator_complement: "",
locator_city: '', locator_city: "",
locator_state: '', locator_state: "",
} }
); );
const clearRentalData = () => { const clearRentalData = () => {
setInputValues({ setInputValues({
carRentalName: '', carRentalName: "",
complement: '', complement: "",
city: '', city: "",
state: '', state: "",
}) });
}; };
const validateForm = (): boolean => { const validateForm = (): boolean => {
@@ -111,7 +116,7 @@ const VeiculoCadastro: React.FC = () => {
return false; return false;
} }
if ((Number)(vanForm.seats_number) < 1) { if (Number(vanForm.seats_number) < 1) {
setToastMessage("Número de passageiros deve ser positivo!"); setToastMessage("Número de passageiros deve ser positivo!");
setShowToast(true); setShowToast(true);
return false; return false;
@@ -133,7 +138,7 @@ const VeiculoCadastro: React.FC = () => {
locator_complement: inputValues.locator_complement, locator_complement: inputValues.locator_complement,
locator_city: inputValues.locator_city, locator_city: inputValues.locator_city,
locator_state: inputValues.locator_state, locator_state: inputValues.locator_state,
} };
if (!locatorForm.locator_name) { if (!locatorForm.locator_name) {
setToastMessage("Nome do Locador é obrigatório"); setToastMessage("Nome do Locador é obrigatório");
@@ -163,27 +168,28 @@ const VeiculoCadastro: React.FC = () => {
}; };
const loadCarModels = async (carBrandId: string) => { const loadCarModels = async (carBrandId: string) => {
const carModelsRes = await carsService.getCarModels(carBrandId) const carModelsRes = await carsService.getCarModels(carBrandId);
if (carModelsRes.error) { if (carModelsRes.error) {
setToastColor("danger") setToastColor("danger");
setToastMessage(carModelsRes.error.errorMessage); setToastMessage(carModelsRes.error.errorMessage);
setInputValues({ carBrand: '' }) setInputValues({ carBrand: "" });
return return;
} }
if (carModelsRes.data) { if (carModelsRes.data) {
setCarModels(carModelsRes.data) setCarModels(carModelsRes.data);
}
} }
};
const handleSubmit = async () => { const handleSubmit = async () => {
if (!validateForm()) { if (!validateForm()) {
return return;
} }
// cria registro da van // cria registro da van
await vansRoutes.create({ await vansRoutes
.create({
plate: inputValues.carPlate, plate: inputValues.carPlate,
brand: inputValues.carBrand, brand: inputValues.carBrand,
model: inputValues.carModel, model: inputValues.carModel,
@@ -192,53 +198,60 @@ const VeiculoCadastro: React.FC = () => {
locator_address: inputValues.locator_address, locator_address: inputValues.locator_address,
locator_complement: inputValues.locator_complement, locator_complement: inputValues.locator_complement,
locator_city: inputValues.locator_city, locator_city: inputValues.locator_city,
locator_state: inputValues.locator_state locator_state: inputValues.locator_state,
}).then(response => { })
if (response.status === 'error') { .then((response) => {
if (response.status === "error") {
setToastMessage(response.message); setToastMessage(response.message);
setShowToast(true); setShowToast(true);
return return;
} }
history.push({ pathname: '/minhas-vans', state: { history.push({
pathname: "/minhas-vans",
state: {
redirectData: { redirectData: {
showToastMessage: true, showToastMessage: true,
toastColor: "success", toastColor: "success",
toastMessage: response.message, toastMessage: response.message,
}, },
}}) },
}).catch((err) => { });
setToastColor("danger") })
.catch((err) => {
setToastColor("danger");
setToastMessage(err); setToastMessage(err);
setShowToast(true); setShowToast(true);
}) });
}; };
useEffect(() => { useEffect(() => {
let isMounted = true let isMounted = true;
const getCarsBrands = async () => { const getCarsBrands = async () => {
const carBrandsRes = await carsService.getAllCarBrands() const carBrandsRes = await carsService.getAllCarBrands();
if (carBrandsRes.error) { if (carBrandsRes.error) {
setToastColor("danger") setToastColor("danger");
setToastMessage(carBrandsRes.error.errorMessage); setToastMessage(carBrandsRes.error.errorMessage);
setShowToast(true); setShowToast(true);
return return;
} }
if (carBrandsRes.data) { if (carBrandsRes.data) {
if (isMounted) { if (isMounted) {
setCarBrands(carBrandsRes.data) setCarBrands(carBrandsRes.data);
}
} }
} }
};
getCarsBrands() getCarsBrands();
return () => { isMounted = false } return () => {
}, []) isMounted = false;
};
}, []);
return ( return (
<IonPage> <IonPage>
@@ -249,108 +262,144 @@ const VeiculoCadastro: React.FC = () => {
<IonContent> <IonContent>
<IonList lines="full" class="ion-no-margin"> <IonList lines="full" class="ion-no-margin">
<IonListHeader lines="full"> <IonItemDivider color={"primary"}>Informações do veículo</IonItemDivider>
<IonLabel>Informações do veículo</IonLabel>
</IonListHeader>
<IonItem> <IonItem>
<IonLabel position='floating'>Placa </IonLabel> <IonLabel position="fixed">Placa </IonLabel>
<IonInput <IonInput
type='text' type="text"
clearInput clearInput
maxlength={7} maxlength={7}
placeholder='Digite a Placa do Veículo' onIonChange={(e: any) =>
onIonChange={(e: any) => setInputValues({ carPlate: e.target.value })} setInputValues({ carPlate: e.target.value })
}
/> />
</IonItem> </IonItem>
{/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */} {/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */}
<IonItem> <IonItem>
<IonLabel>Marca</IonLabel> <IonLabel>Marca</IonLabel>
<IonSelect onIonChange={(e: any) => { setInputValues({ carBrand: e.detail.value }); loadCarModels(e.detail.value) }}> <IonSelect
{ carBrands ? carBrands.map((carBrand, index) => { onIonChange={(e: any) => {
return (<IonSelectOption key={index} value={index}>{carBrand.nome}</IonSelectOption>) setInputValues({ carBrand: e.detail.value });
}) : <></> } loadCarModels(e.detail.value);
}}
>
{carBrands ? (
carBrands.map((carBrand, index) => {
return (
<IonSelectOption key={index} value={index}>
{carBrand.nome}
</IonSelectOption>
);
})
) : (
<></>
)}
</IonSelect> </IonSelect>
</IonItem> </IonItem>
{ inputValues.carBrand ? {inputValues.carBrand ? (
<IonItem> <IonItem>
<IonLabel>Modelo</IonLabel> <IonLabel>Modelo</IonLabel>
<IonSelect onIonChange={(e: any) => { setInputValues({ carModel: e.detail.value }) }}> <IonSelect
{ carModels ? carModels.map((carModel, index) => { onIonChange={(e: any) => {
return (<IonSelectOption key={index} value={carModel.nome}>{carModel.nome}</IonSelectOption>) setInputValues({ carModel: e.detail.value });
}) : <></> } }}
>
{carModels ? (
carModels.map((carModel, index) => {
return (
<IonSelectOption key={index} value={carModel.nome}>
{carModel.nome}
</IonSelectOption>
);
})
) : (
<></>
)}
</IonSelect> </IonSelect>
</IonItem> </IonItem>
: <></>} ) : (
<></>
)}
<IonItem> <IonItem>
<IonLabel position='floating'> <IonLabel position="fixed">Nº assentos</IonLabel>
Número de assentos
</IonLabel>
<IonInput <IonInput
type='number' type="number"
min={1} min={1}
clearInput clearInput
placeholder='podem ser ocupados por passageiros' onIonChange={(e: any) =>
onIonChange={(e: any) => setInputValues({ seats_number: e.target.value })} setInputValues({ seats_number: e.target.value })
}
/> />
</IonItem> </IonItem>
</IonList> </IonList>
<IonList lines="full" class="ion-no-margin"> <IonItemDivider color={"medium"}>Informações de locação</IonItemDivider>
<IonListHeader lines="full">
<IonLabel>Informações do locador</IonLabel>
</IonListHeader>
<IonList lines="full" class="ion-no-margin">
<IonItem> <IonItem>
<IonLabel>O veículo é alugado?</IonLabel> <IonLabel>O veículo é alugado?</IonLabel>
<IonCheckbox checked={inputValues.isRented} onIonChange={e => setInputValues({ isRented: e.detail.checked })} /> <IonCheckbox
checked={inputValues.isRented}
onIonChange={(e) =>
setInputValues({ isRented: e.detail.checked })
}
/>
</IonItem> </IonItem>
{inputValues.isRented && ( {inputValues.isRented && (
<div>
<IonItem> <IonItem>
<IonLabel position="stacked" /> <IonLabel position="stacked" />
<IonInput <IonInput
type='text' type="text"
clearInput clearInput
placeholder='Nome completo do Locador' placeholder="Nome completo do Locador"
onIonChange={(e: any) => setInputValues({ locator_name: e.target.value })} onIonChange={(e: any) =>
setInputValues({ locator_name: e.target.value })
}
/> />
<IonInput <IonInput
type='text' type="text"
clearInput clearInput
placeholder='Endereço do locador' placeholder="Endereço do locador"
onIonChange={(e: any) => setInputValues({ locator_address: e.target.value })} onIonChange={(e: any) =>
setInputValues({ locator_address: e.target.value })
}
/> />
<IonInput <IonInput
type='text' type="text"
clearInput clearInput
placeholder='Complemento' placeholder="Complemento"
onIonChange={(e: any) => setInputValues({ locator_complement: e.target.value })} onIonChange={(e: any) =>
setInputValues({ locator_complement: e.target.value })
}
/> />
<IonInput <IonInput
type='text' type="text"
clearInput clearInput
placeholder='Cidade' placeholder="Cidade"
onIonChange={(e: any) => setInputValues({ locator_city: e.target.value })} onIonChange={(e: any) =>
setInputValues({ locator_city: e.target.value })
}
/> />
<IonInput <IonInput
type='text' type="text"
clearInput clearInput
placeholder='Estado' placeholder="Estado"
onIonChange={(e: any) => setInputValues({ locator_state: e.target.value })} onIonChange={(e: any) =>
setInputValues({ locator_state: e.target.value })
}
/> />
</IonItem> </IonItem>
</div>
)} )}
<div> <div>
<IonButton <IonButton
className='ion-margin-top' className="ion-margin-top"
expand='block' expand="block"
onClick={handleSubmit} onClick={handleSubmit}
> >
Salvar Salvar