Ajustes na estrutura do projeto | Tela do cadastro de vans com validacao
This commit is contained in:
Byancaam
178
src/pages/CadastroVan.tsx
Normal file
178
src/pages/CadastroVan.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import {
|
||||
IonIcon,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonInput,
|
||||
IonBackButton,
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonText,
|
||||
IonList,
|
||||
IonRadioGroup,
|
||||
IonListHeader,
|
||||
IonRadio
|
||||
} from "@ionic/react";
|
||||
|
||||
import React, { useEffect } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { ErrorMessage } from "@hookform/error-message";
|
||||
|
||||
import { ApiClient } from "../services/api-client.service";
|
||||
import { arrowBack } from "ionicons/icons";
|
||||
import "./CadastroVan.css";
|
||||
|
||||
const CadastroVan: React.FC = () => {
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
register,
|
||||
getValues,
|
||||
formState: { errors }
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
carPlate: "",
|
||||
carBrand: "",
|
||||
carModel: "",
|
||||
maxPassengers: "",
|
||||
isRent: "NO"
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
},[]);
|
||||
|
||||
const onSubmit = async (van: any) => {
|
||||
await ApiClient.doPost("/cadastro-van", van);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar color='primary'>
|
||||
<IonTitle>VanMos App v1.0</IonTitle>
|
||||
<IonButtons slot='start'>
|
||||
<IonBackButton icon={arrowBack} defaultHref='cadastro-van'>
|
||||
Return
|
||||
</IonBackButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent className='ion-padding'>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className='ion-padding'>
|
||||
<IonCardTitle>Cadastro do Veículo</IonCardTitle>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>Placa *</IonLabel>
|
||||
<IonInput
|
||||
{...register("carPlate", { required: "Placa é obrigatório" })}
|
||||
type='text'
|
||||
placeholder='Digite a Placa do Veículo'
|
||||
/>
|
||||
</IonItem>
|
||||
<ErrorMessage
|
||||
errors={errors}
|
||||
name='carPlate'
|
||||
as={<div style={{ color: "red" }} />}
|
||||
/>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>Marca *</IonLabel>
|
||||
<IonInput
|
||||
{...register("carBrand", { required: "Marca é obrigatório" })}
|
||||
type='text'
|
||||
placeholder='Digite a Marca do Veículo'
|
||||
/>
|
||||
</IonItem>
|
||||
<ErrorMessage
|
||||
errors={errors}
|
||||
name='carBrand'
|
||||
as={<div style={{ color: "red" }} />}
|
||||
/>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>Modelo *</IonLabel>
|
||||
<IonInput
|
||||
{...register("carModel", { required: "Modelo é obrigatório" })}
|
||||
type='text'
|
||||
placeholder='Digite o Modelo do Veículo'
|
||||
/>
|
||||
</IonItem>
|
||||
<ErrorMessage
|
||||
errors={errors}
|
||||
name='carModel'
|
||||
as={<div style={{ color: "red" }} />}
|
||||
/>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>
|
||||
Número Máximo de Passageiros *
|
||||
</IonLabel>
|
||||
<IonInput
|
||||
{...register("maxPassengers", {
|
||||
required: "Número máximo de passageiros é obrigatório"
|
||||
})}
|
||||
type='text'
|
||||
placeholder='Digite o número máximo de passageiros'
|
||||
/>
|
||||
</IonItem>
|
||||
<ErrorMessage
|
||||
errors={errors}
|
||||
name='maxPassengers'
|
||||
as={<div style={{ color: "red" }} />}
|
||||
/>
|
||||
|
||||
<IonItem>
|
||||
<IonText>
|
||||
<div style={{ padding: 8, paddingLeft: 0, fontWeight: "bold" }}>
|
||||
Veículo alugado?
|
||||
</div>
|
||||
<div>
|
||||
<IonRadioGroup
|
||||
style={{ display: "flex", width: "100%" }}
|
||||
{...register("isRent", { required: true })}
|
||||
defaultValue={getValues("isRent")}
|
||||
onIonChange={e => setValue("isRent", e.detail.value)}
|
||||
>
|
||||
<IonItem lines='none' style={{ flexGrow: 2 }}>
|
||||
<IonLabel position='fixed'>Sim</IonLabel>
|
||||
<IonRadio value='YES' />
|
||||
</IonItem>
|
||||
|
||||
<IonItem style={{ flexGrow: 2 }} lines='none'>
|
||||
<IonLabel position='fixed'>Não</IonLabel>
|
||||
<IonRadio value='NO' />
|
||||
</IonItem>
|
||||
</IonRadioGroup>
|
||||
</div>
|
||||
</IonText>
|
||||
</IonItem>
|
||||
{errors.isRent && (
|
||||
<span className='error-msg'>This field is required</span>
|
||||
)}
|
||||
|
||||
{getValues("isRent") === "YES" && <div>Teste Novos Campos</div>}
|
||||
|
||||
<div>
|
||||
<IonButton className='ion-margin-top' type='submit' expand='block'>
|
||||
Salvar
|
||||
</IonButton>
|
||||
</div>
|
||||
</form>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default CadastroVan;
|
||||
@@ -1,155 +0,0 @@
|
||||
import {
|
||||
IonIcon,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonInput,
|
||||
IonBackButton,
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonList,
|
||||
IonRadioGroup,
|
||||
IonListHeader,
|
||||
IonRadio
|
||||
} from "@ionic/react";
|
||||
import { arrowBack } from "ionicons/icons";
|
||||
import React, { useState } from "react";
|
||||
//import { Van } from "../models/van.model";
|
||||
import "./Vans.css";
|
||||
|
||||
const Vans: React.FC = () => {
|
||||
// const van: Van;
|
||||
|
||||
const [placa, setPlaca] = useState<string>("");
|
||||
const [marca, setMarca] = useState<string>("");
|
||||
const [modelo, setModelo] = useState<string>("");
|
||||
const [numPassageiros, setNumPassageiros] = useState("");
|
||||
const [tipoSelecionado, setTipoSelecionado] = useState<string>("Não");
|
||||
|
||||
const placaChangeHandle = (event: any) => {
|
||||
setPlaca(event.target.value);
|
||||
};
|
||||
|
||||
const marcaChangeHandle = (event: any) => {
|
||||
setMarca(event.target.value);
|
||||
};
|
||||
|
||||
const modeloChangeHandle = (event: any) => {
|
||||
setModelo(event.target.value);
|
||||
};
|
||||
|
||||
const numPassageirosChangeHandle = (event: any) => {
|
||||
setNumPassageiros(event.target.value);
|
||||
};
|
||||
|
||||
const tipoSelecionadoChangeHandle = (event: any) => {
|
||||
setTipoSelecionado(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle></IonTitle>
|
||||
<IonButtons slot='start'>
|
||||
<IonBackButton
|
||||
text={""}
|
||||
icon={arrowBack}
|
||||
defaultHref='cadastro-van'
|
||||
>
|
||||
Return
|
||||
</IonBackButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent className='ion-padding'>
|
||||
<form className='ion-padding'>
|
||||
<IonCardTitle>Cadastro da Veículo</IonCardTitle>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>Placa *</IonLabel>
|
||||
<IonInput
|
||||
type='text'
|
||||
required
|
||||
value={placa}
|
||||
placeholder='Digite a placa do Veículo'
|
||||
onIonChange={placaChangeHandle}
|
||||
//onIonChange={e => setPlaca(e.detail.value!)}
|
||||
></IonInput>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>Marca *</IonLabel>
|
||||
<IonInput
|
||||
type='text'
|
||||
required
|
||||
value={marca}
|
||||
placeholder='Digite a Marca do Veículo'
|
||||
onIonChange={marcaChangeHandle}
|
||||
></IonInput>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>Modelo *</IonLabel>
|
||||
<IonInput
|
||||
type='text'
|
||||
required
|
||||
value={modelo}
|
||||
placeholder='Digite o Modelo do Veículo'
|
||||
onIonChange={modeloChangeHandle}
|
||||
></IonInput>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel position='floating'>
|
||||
Digite o número total de passageiros *
|
||||
</IonLabel>
|
||||
<IonInput
|
||||
type='number'
|
||||
required
|
||||
value={numPassageiros}
|
||||
placeholder='Digite o número total de passageiros'
|
||||
onIonChange={numPassageirosChangeHandle}
|
||||
></IonInput>
|
||||
</IonItem>
|
||||
|
||||
<IonList>
|
||||
<IonRadioGroup
|
||||
value={tipoSelecionado}
|
||||
onIonChange={tipoSelecionadoChangeHandle}
|
||||
>
|
||||
<IonListHeader>
|
||||
<IonLabel>Veículo Alugado ?</IonLabel>
|
||||
</IonListHeader>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Sim</IonLabel>
|
||||
<IonRadio slot='start' value='Sim'></IonRadio>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Não</IonLabel>
|
||||
<IonRadio slot='start' value='Não'></IonRadio>
|
||||
</IonItem>
|
||||
</IonRadioGroup>
|
||||
</IonList>
|
||||
|
||||
<IonButton className='ion-margin-top' type='submit' expand='block'>
|
||||
Salvar
|
||||
</IonButton>
|
||||
</form>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Vans;
|
||||
Reference in New Issue
Block a user