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

Mais atualizações em CadastroVan

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-05-28 14:57:05 -05:00
parent 0907e80ffa
commit 34c08df016
1 changed files with 93 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/pages/CadastroVan.tsx
View File

@@ -6,18 +6,22 @@ import {
IonBackButton, IonBackButton,
IonButton, IonButton,
IonButtons, IonButtons,
IonCardTitle,
IonContent, IonContent,
IonHeader, IonHeader,
IonPage, IonPage,
IonToolbar, IonToolbar,
IonText, IonText,
IonRadioGroup, IonTitle,
IonRadio IonList,
IonCheckbox,
IonItemDivider,
IonListHeader,
} from "@ionic/react"; } from "@ionic/react";
import React, { useReducer, useState } from "react"; import React, { useReducer, useState } from "react";
import * as yup from 'yup';
import { ApiClient } from "../services/api-client.service"; import { ApiClient } from "../services/api-client.service";
import "./CadastroVan.css"; import "./CadastroVan.css";
@@ -44,12 +48,36 @@ const CadastroVan: React.FC = () => {
} }
); );
// 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 = { const vanForm = {
carPlate: inputValues.carPlate, carPlate: inputValues.carPlate,
carBrand: inputValues.carBrand, carBrand: inputValues.carBrand,
carModel: inputValues.carModel, carModel: inputValues.carModel,
maxPassengers: inputValues.maxPassengers, maxPassengers: inputValues.maxPassengers,
isRent: inputValues.isRent, isRented: inputValues.isRented,
carRentalName: inputValues.carRentalName, carRentalName: inputValues.carRentalName,
carRentalAddress: { carRentalAddress: {
postalCode: inputValues.postalCode, postalCode: inputValues.postalCode,
@@ -107,7 +135,7 @@ const CadastroVan: React.FC = () => {
return false; return false;
} }
if (vanForm.isRent) { if (vanForm.isRented) {
return validateRentalForm(); return validateRentalForm();
} else { } else {
clearRentalData(); clearRentalData();
@@ -173,18 +201,20 @@ const CadastroVan: React.FC = () => {
<IonPage> <IonPage>
<IonHeader> <IonHeader>
<IonToolbar> <IonToolbar>
<IonTitle>Cadastro de veículo</IonTitle>
<IonButtons slot='start'> <IonButtons slot='start'>
<IonBackButton defaultHref='/perfil' /> <IonBackButton defaultHref='/perfil' />
</IonButtons> </IonButtons>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent className='ion-padding'> <IonContent>
<form className='ion-padding'> <IonList lines="full" class="ion-no-margin">
<IonCardTitle>Cadastro do Veículo</IonCardTitle> <IonListHeader lines="full">
<IonLabel>Informações do veículo</IonLabel>
</IonListHeader>
<IonItem> <IonItem>
<IonLabel position='floating'>Placa *</IonLabel> <IonLabel position='floating'>Placa </IonLabel>
<IonInput <IonInput
type='text' type='text'
clearInput clearInput
@@ -194,7 +224,7 @@ const CadastroVan: React.FC = () => {
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel position='floating'>Marca *</IonLabel> <IonLabel position='floating'>Marca </IonLabel>
<IonInput <IonInput
type='text' type='text'
clearInput clearInput
@@ -204,7 +234,7 @@ const CadastroVan: React.FC = () => {
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel position='floating'>Modelo *</IonLabel> <IonLabel position='floating'>Modelo </IonLabel>
<IonInput <IonInput
type='text' type='text'
clearInput clearInput
@@ -215,7 +245,7 @@ const CadastroVan: React.FC = () => {
<IonItem> <IonItem>
<IonLabel position='floating'> <IonLabel position='floating'>
Número Máximo de Passageiros * Número Máximo de Passageiros
</IonLabel> </IonLabel>
<IonInput <IonInput
type='text' type='text'
@@ -224,107 +254,60 @@ const CadastroVan: React.FC = () => {
onIonInput={(e: any) => setInputValues({ maxPassengers: e.target.value })} onIonInput={(e: any) => setInputValues({ maxPassengers: e.target.value })}
/> />
</IonItem> </IonItem>
</IonList>
<IonList lines="full" class="ion-no-margin">
<IonListHeader lines="full">
<IonLabel>Informações do locador</IonLabel>
</IonListHeader>
<IonItem> <IonItem>
<IonText> <IonLabel>O veículo é alugado?</IonLabel>
<div style={{ padding: 8, paddingLeft: 0, fontWeight: "bold" }}> <IonCheckbox checked={inputValues.isRented} onIonChange={e => setInputValues({ isRented: e.detail.checked })} />
Veículo alugado?
</div>
<div>
<IonRadioGroup
style={{ display: "flex", width: "100%" }}
onIonChange={(e: any) => setInputValues({ isRent: e.target.value })}
>
<IonItem lines='none' style={{ flexGrow: 2 }}>
<IonLabel position='fixed'>Sim</IonLabel>
<IonRadio value={true} />
</IonItem>
<IonItem style={{ flexGrow: 2 }} lines='none'>
<IonLabel position='fixed'>Não</IonLabel>
<IonRadio value={false} />
</IonItem>
</IonRadioGroup>
</div>
</IonText>
</IonItem> </IonItem>
{inputValues.isRent && ( {inputValues.isRented && (
<div> <div>
<IonItem> <IonItem>
<IonLabel position='floating'>Nome do Locador *</IonLabel> <IonLabel position="stacked" />
<IonInput <IonInput
type='text' type='text'
clearInput clearInput
placeholder='Digite o nome do locador do veículo' placeholder='Nome completo do Locador'
onIonInput={(e: any) => setInputValues({ carRentalName: e.target.value })} onIonInput={(e: any) => setInputValues({ carRentalName: e.target.value })}
/> />
</IonItem>
<IonText>
<div
style={{ padding: 8, paddingLeft: 16, fontWeight: "bold" }}
>
Endereço do Locador
</div>
<IonItem>
<IonLabel position='floating'>CEP*</IonLabel>
<IonInput
type='text'
clearInput
placeholder='Digite o endereço completo do locador do veículo'
onIonInput={(e: any) => setInputValues({ postalCode: e.target.value })}
/>
</IonItem>
<IonItem>
<IonLabel position='floating'>Logradouro*</IonLabel>
<IonInput
type='text'
clearInput
placeholder='Digite o nome da rua'
onIonInput={(e: any) => setInputValues({ street: e.target.value })}
/>
</IonItem>
<IonItem> <IonInput
<IonLabel position='floating'>Número*</IonLabel> type='text'
<IonInput clearInput
type='text' placeholder='Endereço do locador'
clearInput onIonInput={(e: any) => setInputValues({ postalCode: e.target.value })}
placeholder='Digite o número' />
onIonInput={(e: any) => setInputValues({ number: e.target.value })} <IonInput
/> type='text'
</IonItem> clearInput
placeholder='Número'
<IonItem> onIonInput={(e: any) => setInputValues({ number: e.target.value })}
<IonLabel position='floating'>Complemento*</IonLabel> />
<IonInput <IonInput
type='text' type='text'
clearInput clearInput
placeholder='Digite o endereço completo' placeholder='Complemento'
onIonInput={(e: any) => setInputValues({ complement: e.target.value })} onIonInput={(e: any) => setInputValues({ complement: e.target.value })}
/> />
</IonItem> <IonInput
type='text'
<IonItem> clearInput
<IonLabel position='floating'>Cidade*</IonLabel> placeholder='Cidade'
<IonInput onIonInput={(e: any) => setInputValues({ city: e.target.value })}
type='text' />
clearInput <IonInput
placeholder='Digite a cidade' type='text'
onIonInput={(e: any) => setInputValues({ city: e.target.value })} clearInput
/> placeholder='Estado'
</IonItem> onIonInput={(e: any) => setInputValues({ state: e.target.value })}
/>
<IonItem> </IonItem>
<IonLabel position='floating'>Estado*</IonLabel>
<IonInput
type='text'
clearInput
placeholder='Digite o estado'
onIonInput={(e: any) => setInputValues({ state: e.target.value })}
/>
</IonItem>
</IonText>
</div> </div>
)} )}
@@ -337,7 +320,8 @@ const CadastroVan: React.FC = () => {
Salvar Salvar
</IonButton> </IonButton>
</div> </div>
</form> </IonList>
<IonToast <IonToast
color='danger' color='danger'
isOpen={showToast} isOpen={showToast}