Skip to content

Commit

Permalink
wip property form
Browse files Browse the repository at this point in the history
  • Loading branch information
pedroramos17 committed Oct 2, 2024
1 parent 4fc2ea2 commit a424697
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 167 deletions.
167 changes: 12 additions & 155 deletions src/lib/features/properties/PropertyForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,10 @@ import {
Stepper,
Step,
StepLabel,
Select,
MenuItem,
FormControl,
Box,
Checkbox,
FormControlLabel,
FormGroup,
FormLabel,
InputAdornment,
OutlinedInput,
Radio,
RadioGroup,
SelectChangeEvent
} from '@mui/material';
import { Formik, Form, FormikHelpers, getIn } from 'formik';
Expand All @@ -39,6 +31,7 @@ import { step1ValidationSchema, step2ValidationSchema, step3ValidationSchema, st
import Step1PropertyInfo from './propertyFormSteps/Step1PropertyInfo';
import Step2HouseRules from './propertyFormSteps/Step2HouseRules';
import Step3Address from './propertyFormSteps/Step3Address';
import Step5Parking from './propertyFormSteps/Step5Parking';

interface UrlParams {
id: string;
Expand Down Expand Up @@ -80,36 +73,10 @@ export interface FormValues {
updatedAt: null;
};


export type ParkingLocationType = 'onsite' | 'offsite';
export type ParkingPrivacyType = 'private' | 'public';

export interface ParkingDetailsForm {
parkingAvailable: number;
parkingChargePer?: ChargePer;
parkingChargeAmount?: number;
reservationsAvailable: number;
parkingLocation: ParkingLocationType;
parkingType: ParkingPrivacyType;
}

export default function PropertyForm(props: Readonly<UrlParams>) {
const parkingAvailableOptions = {
0: 'Não',
1: 'Sim, gratuito',
2: 'Sim, pago',
}

const { id } = props;
const [activeStep, setActiveStep] = useState(0);
const[parkingDetailsForm, setParkingDetailsForm] = useState<ParkingDetailsForm>({
parkingAvailable: 0,
parkingChargeAmount: 0.00,
parkingChargePer: 'day' as ChargePer,
reservationsAvailable: 0,
parkingLocation: 'onsite' as ParkingLocationType,
parkingType: 'private' as ParkingPrivacyType,
});

const router = useRouter()
const dispatch = useAppDispatch();
const initialValues: FormValues = {
Expand Down Expand Up @@ -278,7 +245,7 @@ const handleBack = () => {
validateOnBlur
onSubmit={handleSubmit}
>
{({ values, errors, touched, handleChange, handleBlur, validateForm }) => {
{({ values, handleChange, handleBlur, validateForm }) => {


return (
Expand All @@ -299,132 +266,22 @@ const handleBack = () => {

{activeStep === 3 && (
<div>
{values.propertyInfo.services.map((service, index) => (
<div key={index}>
{values.propertyInfo.services.map((service) => (
<div key={service.key}>
<FormGroup>
<FormControlLabel control={<Checkbox value={service.value}/>} label={service.key} />
<FormControlLabel
control={<Checkbox value={service.value}/>}
label={service.key}
onChange={handleChange}
onBlur={handleBlur}
/>
</FormGroup>
</div>
))}
</div>
)}

{activeStep === 4 && (
<>
<FormControl>
<FormLabel id="demo-controlled-radio-buttons-group">O estacionamento está disponível para as pessoas?</FormLabel>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={parkingDetailsForm.parkingAvailable}
onChange={e => setParkingDetailsForm((prevProps) => {
return { ...prevProps, parkingAvailable: parseInt(e.target.value)}
})}
>
{Object.entries(parkingAvailableOptions).map(([key, value]) => (
<FormControlLabel key={key} value={key} control={<Radio />} label={value} />
))}
</RadioGroup>
</FormControl>
{parkingDetailsForm.parkingAvailable === 2 && (
<Box
sx={{
minwidth: 120,
display: 'flex',
flexDirection: 'row',
justifyContent: 'start',
alignItems: 'end',
gap: '8px',
}}
>
<FormControl>
<FormLabel id="adornment-amount">Quanto custa o estacionamento?</FormLabel>
<OutlinedInput
id="adornment-amount"
startAdornment={<InputAdornment position="start">R$</InputAdornment>}
value={parkingDetailsForm.parkingChargeAmount}
onChange={e => setParkingDetailsForm((prevProps) => {
return { ...prevProps, parkingChargeAmount: parseFloat(e.target.value)}
})}
type="number"
placeholder="0.00"
/>
</FormControl>
<Select
defaultValue='day'
value={parkingDetailsForm.parkingChargePer}
onChange={e => setParkingDetailsForm((prevProps) => {
return { ...prevProps, parkingChargePer: (e.target.value as ChargePer)}
})}
inputProps={{
name: 'Custo por',
id: 'charge-per',
}}
variant='outlined'
>
<MenuItem value="hour">Por hora</MenuItem>
<MenuItem value="day">Por dia</MenuItem>
<MenuItem value="month">Por mês</MenuItem>
<MenuItem value="stay">Por estadia</MenuItem>
</Select>
</Box>
)}
{parkingDetailsForm.parkingAvailable !== 0 && (
<>
<FormControl>
<FormLabel id="reservations-available-label">É necessário fazer reservas?</FormLabel>
<RadioGroup
aria-labelledby="reservations-available-label"
name="reservations-available-radio-buttons-group"
value={parkingDetailsForm.reservationsAvailable}
onChange={({ target }) => setParkingDetailsForm((prevProps) => {
return { ...prevProps, reservationsAvailable: parseInt(target.value)}
})}
>
<FormControlLabel value="1" control={<Radio />} label="Sim" />
<FormControlLabel value="0" control={<Radio />} label="Não" />
</RadioGroup>
</FormControl>
<FormControl>
<FormLabel id="">Onde o estacionamento está localizado?</FormLabel>
<RadioGroup
aria-labelledby="parking-location-label"
name="parking-location-radio-buttons-group"
value={parkingDetailsForm.parkingLocation}
onChange={
(e) => {
setParkingDetailsForm((prevProps) => {
return {...prevProps, parkingLocation: (e.target.value as ParkingLocationType)}
})
}
}
>
<FormControlLabel value="onsite" control={<Radio />} label="Interno, dentro da empresa" />
<FormControlLabel value="offsite" control={<Radio />} label="Externo, fora da empresa" />
</RadioGroup>
</FormControl>
<FormControl>
<FormLabel id="">Que tipo de estacionamento é?</FormLabel>
<RadioGroup
aria-labelledby="parking-type-label"
name="parking-type-radio-buttons-group"
value={parkingDetailsForm.parkingType}
onChange={
(e) => {
setParkingDetailsForm((prevProps) => {
return {...prevProps, parkingType: (e.target.value as ParkingPrivacyType)}
})
}
}
>
<FormControlLabel value="private" control={<Radio />} label="Privado" />
<FormControlLabel value="public" control={<Radio />} label="Público" />
</RadioGroup>
</FormControl>
</>
)}
</>
)}
{activeStep === 4 && <Step5Parking />}

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{activeStep > 0 && (
Expand Down
Empty file.
152 changes: 152 additions & 0 deletions src/lib/features/properties/propertyFormSteps/Step5Parking.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
'use client';
import 'client-only';
import { ChargePer } from "@/lib/db/idb"
import { Box, FormControl, FormControlLabel, FormLabel, InputAdornment, MenuItem, OutlinedInput, Radio, RadioGroup, Select } from "@mui/material"
import { useState } from "react";



export type ParkingLocationType = 'onsite' | 'offsite';
export type ParkingPrivacyType = 'private' | 'public';

export interface ParkingDetailsForm {
parkingAvailable: number;
parkingChargePer?: ChargePer;
parkingChargeAmount?: number;
reservationsAvailable: number;
parkingLocation: ParkingLocationType;
parkingType: ParkingPrivacyType;
}

export default function Step5Parking() {
const parkingAvailableOptions = {
0: 'Não',
1: 'Sim, gratuito',
2: 'Sim, pago',
}

const[parkingDetailsForm, setParkingDetailsForm] = useState<ParkingDetailsForm>({
parkingAvailable: 0,
parkingChargeAmount: 0.00,
parkingChargePer: 'day' as ChargePer,
reservationsAvailable: 0,
parkingLocation: 'onsite' as ParkingLocationType,
parkingType: 'private' as ParkingPrivacyType,
});

return (
<>
<FormControl>
<FormLabel id="parking-available-label">O estacionamento está disponível para as pessoas?</FormLabel>
<RadioGroup
aria-labelledby="parking-available-label"
name="parking.available"
value={parkingDetailsForm.parkingAvailable}
onChange={e => setParkingDetailsForm((prevProps) => {
return { ...prevProps, parkingAvailable: parseInt(e.target.value)}
})}
>
{Object.entries(parkingAvailableOptions).map(([key, value]) => (
<FormControlLabel key={key} value={key} control={<Radio />} label={value} />
))}
</RadioGroup>
</FormControl>
{parkingDetailsForm.parkingAvailable === 2 && (
<Box
sx={{
minwidth: 120,
display: 'flex',
flexDirection: 'row',
justifyContent: 'start',
alignItems: 'end',
gap: '8px',
}}
>
<FormControl>
<FormLabel id="parking-charge-amount-label">Quanto custa o estacionamento?</FormLabel>
<OutlinedInput
id="parking-charge-amount"
aria-labelledby="parking-charge-amount-label"
startAdornment={<InputAdornment position="start">R$</InputAdornment>}
value={parkingDetailsForm.parkingChargeAmount}
onChange={e => setParkingDetailsForm((prevProps) => {
return { ...prevProps, parkingChargeAmount: parseFloat(e.target.value)}
})}
type="number"
placeholder="0.00"
/>
</FormControl>
<Select
defaultValue='day'
id="parking-charge-per"
name='parking.chargePer'
value={parkingDetailsForm.parkingChargePer}
onChange={e => setParkingDetailsForm((prevProps) => {
return { ...prevProps, parkingChargePer: (e.target.value as ChargePer)}
})}
variant='outlined'
>
<MenuItem value="hour">Por hora</MenuItem>
<MenuItem value="day">Por dia</MenuItem>
<MenuItem value="month">Por mês</MenuItem>
<MenuItem value="stay">Por estadia</MenuItem>
</Select>
</Box>
)}
{parkingDetailsForm.parkingAvailable !== 0 && (
<>
<FormControl>
<FormLabel id="reservations-available-label">É necessário fazer reservas?</FormLabel>
<RadioGroup
aria-labelledby="reservations-available-label"
name="reservations.available"
value={parkingDetailsForm.reservationsAvailable}
onChange={({ target }) => setParkingDetailsForm((prevProps) => {
return { ...prevProps, reservationsAvailable: parseInt(target.value)}
})}
>
<FormControlLabel value="1" control={<Radio />} label="Sim" />
<FormControlLabel value="0" control={<Radio />} label="Não" />
</RadioGroup>
</FormControl>
<FormControl>
<FormLabel id="parking-location-label">Onde o estacionamento está localizado?</FormLabel>
<RadioGroup
aria-labelledby="parking-location-label"
name="parking.location"
value={parkingDetailsForm.parkingLocation}
onChange={
(e) => {
setParkingDetailsForm((prevProps) => {
return {...prevProps, parkingLocation: (e.target.value as ParkingLocationType)}
})
}
}
>
<FormControlLabel value="onsite" control={<Radio />} label="Interno, dentro da empresa" />
<FormControlLabel value="offsite" control={<Radio />} label="Externo, fora da empresa" />
</RadioGroup>
</FormControl>
<FormControl>
<FormLabel id="parking-type-label">Que tipo de estacionamento é?</FormLabel>
<RadioGroup
aria-labelledby="parking-type-label"
name="parking.type"
value={parkingDetailsForm.parkingType}
onChange={
(e) => {
setParkingDetailsForm((prevProps) => {
return {...prevProps, parkingType: (e.target.value as ParkingPrivacyType)}
})
}
}
>
<FormControlLabel value="private" control={<Radio />} label="Privado" />
<FormControlLabel value="public" control={<Radio />} label="Público" />
</RadioGroup>
</FormControl>
</>
)}
</>
)
}
Empty file.
Empty file.
Loading

0 comments on commit a424697

Please sign in to comment.