-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Indraneel Purohit
authored
Jul 12, 2024
1 parent
19bf5cf
commit d173294
Showing
14 changed files
with
1,461 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
web-app/src/app/screens/FeedSubmission/FeedSubmissionStepper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Stepper from '@mui/material/Stepper'; | ||
| import Step from '@mui/material/Step'; | ||
| import StepLabel from '@mui/material/StepLabel'; | ||
| import FeedSubmissionForm from './Form'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| const steps = ['', '', '']; | ||
|
|
||
| export default function FeedSubmissionStepper(): React.ReactElement { | ||
| const [activeStep, setActiveStep] = React.useState(0); | ||
| const navigateTo = useNavigate(); | ||
|
|
||
| const handleNext = (): void => { | ||
| const nextStep = activeStep + 1; | ||
| setActiveStep(nextStep); | ||
| if (nextStep === steps.length) { | ||
| navigateTo('/contribute/submitted'); | ||
| } | ||
| }; | ||
|
|
||
| const handleBack = (): void => { | ||
| setActiveStep((prevActiveStep) => prevActiveStep - 1); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box sx={{ width: '100%', px: 5 }}> | ||
| <Stepper activeStep={activeStep} sx={{ mb: 3 }}> | ||
| {steps.map((label) => { | ||
| const stepProps: { completed?: boolean } = {}; | ||
| const labelProps: { | ||
| optional?: React.ReactNode; | ||
| } = {}; | ||
| return ( | ||
| <Step key={label} {...stepProps}> | ||
| <StepLabel {...labelProps}>{label}</StepLabel> | ||
| </Step> | ||
| ); | ||
| })} | ||
| </Stepper> | ||
|
|
||
| <FeedSubmissionForm | ||
| activeStep={activeStep} | ||
| handleBack={handleBack} | ||
| handleNext={handleNext} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
201 changes: 201 additions & 0 deletions
201
web-app/src/app/screens/FeedSubmission/Form/FirstStep.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| import { | ||
| Grid, | ||
| FormControl, | ||
| FormLabel, | ||
| RadioGroup, | ||
| FormControlLabel, | ||
| Radio, | ||
| Select, | ||
| MenuItem, | ||
| Button, | ||
| TextField, | ||
| FormHelperText, | ||
| } from '@mui/material'; | ||
|
|
||
| import { type SubmitHandler, Controller, useForm } from 'react-hook-form'; | ||
| import { type FeedSubmissionFormFormInput } from '.'; | ||
|
|
||
| export interface FeedSubmissionFormFormInputFirstStep { | ||
| name: string; | ||
| isOfficialProducer: string; | ||
| dataType: string; | ||
| transitProviderName: string; | ||
| feedLink: string; | ||
| licensePath: string; | ||
| } | ||
|
|
||
| interface FormFirstStepProps { | ||
| initialValues: FeedSubmissionFormFormInput; | ||
| submitFormData: (formData: Partial<FeedSubmissionFormFormInput>) => void; | ||
| } | ||
|
|
||
| export default function FormFirstStep({ | ||
| initialValues, | ||
| submitFormData, | ||
| }: FormFirstStepProps): React.ReactElement { | ||
| const { | ||
| control, | ||
| handleSubmit, | ||
| formState: { errors }, | ||
| } = useForm<FeedSubmissionFormFormInputFirstStep>({ | ||
| defaultValues: { | ||
| name: initialValues.name, | ||
| isOfficialProducer: initialValues.isOfficialProducer, | ||
| dataType: initialValues.dataType, | ||
| transitProviderName: initialValues.transitProviderName, | ||
| feedLink: initialValues.feedLink, | ||
| licensePath: initialValues.licensePath, | ||
| }, | ||
| }); | ||
| const onSubmit: SubmitHandler<FeedSubmissionFormFormInputFirstStep> = ( | ||
| data, | ||
| ): void => { | ||
| submitFormData(data); | ||
| }; | ||
| return ( | ||
| <> | ||
| {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */} | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <Grid container direction={'column'} rowSpacing={2}> | ||
| <Grid item> | ||
| <FormControl | ||
| component='fieldset' | ||
| fullWidth | ||
| error={errors.name !== undefined} | ||
| > | ||
| <FormLabel required> | ||
| Your Name and (if applicable) Organization | ||
| </FormLabel> | ||
| <Controller | ||
| rules={{ required: 'Your name is required' }} | ||
| control={control} | ||
| name='name' | ||
| render={({ field }) => ( | ||
| <TextField | ||
| {...field} | ||
| className='md-small-input' | ||
| sx={{ | ||
| input: { py: 1 }, | ||
| }} | ||
| error={errors.name !== undefined} | ||
| helperText={errors.name?.message ?? ''} | ||
| /> | ||
| )} | ||
| /> | ||
| </FormControl> | ||
| </Grid> | ||
| <Grid item> | ||
| <FormControl | ||
| component='fieldset' | ||
| error={errors.isOfficialProducer !== undefined} | ||
| > | ||
| <FormLabel required> | ||
| Are you the official producer or transit agency responsible for | ||
| this data ? | ||
| </FormLabel> | ||
| <Controller | ||
| rules={{ required: 'This field is required' }} | ||
| control={control} | ||
| name='isOfficialProducer' | ||
| render={({ field }) => ( | ||
| <> | ||
| <RadioGroup {...field}> | ||
| <FormControlLabel | ||
| value='yes' | ||
| control={<Radio color='default' />} | ||
| label='Yes' | ||
| /> | ||
| <FormControlLabel | ||
| value='no' | ||
| control={<Radio sx={{}} />} | ||
| label='No' | ||
| /> | ||
| </RadioGroup> | ||
| <FormHelperText> | ||
| {errors.isOfficialProducer?.message ?? ''} | ||
| </FormHelperText> | ||
| </> | ||
| )} | ||
| /> | ||
| </FormControl> | ||
| </Grid> | ||
| <Grid item> | ||
| <FormControl | ||
| component='fieldset' | ||
| error={errors.dataType !== undefined} | ||
| > | ||
| <FormLabel required>Data Type</FormLabel> | ||
| <Controller | ||
| rules={{ required: true }} | ||
| control={control} | ||
| name='dataType' | ||
| render={({ field }) => ( | ||
| <Select {...field}> | ||
| <MenuItem value={'GTFS Schedule'}>GTFS Schedule</MenuItem> | ||
| <MenuItem value={'GTFS Realtime'}>GTFS Realtime</MenuItem> | ||
| </Select> | ||
| )} | ||
| /> | ||
| </FormControl> | ||
| </Grid> | ||
| <Grid item> | ||
| <FormControl component='fieldset' fullWidth> | ||
| <FormLabel>Transit Provider Name</FormLabel> | ||
| <Controller | ||
| control={control} | ||
| name='transitProviderName' | ||
| render={({ field }) => ( | ||
| <TextField {...field} className='md-small-input' /> | ||
| )} | ||
| /> | ||
| </FormControl> | ||
| </Grid> | ||
| <Grid item> | ||
| <FormControl | ||
| component='fieldset' | ||
| fullWidth | ||
| error={errors.feedLink !== undefined} | ||
| > | ||
| <FormLabel component='legend' required> | ||
| Feed link | ||
| </FormLabel> | ||
| <Controller | ||
| rules={{ required: 'Feed link required' }} | ||
| control={control} | ||
| name='feedLink' | ||
| render={({ field }) => ( | ||
| <TextField | ||
| className='md-small-input' | ||
| helperText={errors.feedLink?.message ?? ''} | ||
| error={errors.feedLink !== undefined} | ||
| {...field} | ||
| /> | ||
| )} | ||
| /> | ||
| </FormControl> | ||
| </Grid> | ||
| <Grid item> | ||
| <FormControl component='fieldset' fullWidth> | ||
| <FormLabel component='legend'>Link to feed license</FormLabel> | ||
| <Controller | ||
| control={control} | ||
| name='licensePath' | ||
| render={({ field }) => ( | ||
| <TextField className='md-small-input' {...field} /> | ||
| )} | ||
| /> | ||
| </FormControl> | ||
| </Grid> | ||
|
|
||
| <Grid container spacing={2}> | ||
| <Grid item> | ||
| <Button type='submit' variant='contained' sx={{ mt: 3, mb: 2 }}> | ||
| Next | ||
| </Button> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| </form> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.