Skip to content
Snippets Groups Projects

Refactor register summary step

Merged Refactor register summary step
refactor_register_summary_step into master
All threads resolved!
Merged Tore.Brede requested to merge refactor_register_summary_step into master
All threads resolved!
Compare
and
Show latest version
10 files
+ 424
− 361
Compare changes
  • Side-by-side
  • Inline
Files
10
frontend/src/routes/register/stepPersonForm.tsx deleted 100644 → 0
+ 0
− 234
import {
Box,
FormControl,
InputLabel,
MenuItem,
Select,
SelectChangeEvent,
Stack,
TextField,
Typography,
} from '@mui/material'
import { Controller, SubmitHandler, useForm } from 'react-hook-form'
import { DatePicker } from '@mui/lab'
import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { RegisterFormData } from './formData'
import { PersonFormMethods } from './personFormMethods'
import useOus, { OuData } from '../../hooks/useOus'
import useRoleTypes, { RoleTypeData } from '../../hooks/useRoleTypes'
import { isValidEmail } from '../../utils'
interface StepPersonFormProperties {
nextHandler(formState: RegisterFormData): void
formData: RegisterFormData
}
const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<PersonFormMethods>) => {
const { i18n, t } = useTranslation(['common'])
const { nextHandler, formData } = props
const ous = useOus()
const [ouChoice, setOuChoice] = useState(formData.ou_id ? formData.ou_id : '')
const [selectedRoleType, setSelectedRoleType] = useState(formData.role_type ? formData.role_type : '')
const roleTypes = useRoleTypes()
const roleTypeSort = () => (a: RoleTypeData, b: RoleTypeData) => {
if (i18n.language === 'en') {
return a.name_nb.localeCompare(b.name_nb)
}
return a.name_en.localeCompare(b.name_en)
}
const enSort = (a: OuData, b: OuData) => {
if (a.en > b.en) {
return 1
}
if (b.en > a.en) {
return -1
}
return 0
}
const nbSort = (a: OuData, b: OuData) => {
if (a.nb > b.nb) {
return 1
}
if (b.nb > a.nb) {
return -1
}
return 0
}
const submit: SubmitHandler<RegisterFormData> = (data) => {
nextHandler(data)
}
const {
register,
control,
handleSubmit,
formState: { errors },
reset,
setValue,
} = useForm<RegisterFormData>()
const onSubmit = handleSubmit(submit)
useEffect(() => {
reset(formData)
}, [])
const handleOuChange = (event: SelectChangeEvent) => {
if (event.target.value) {
setOuChoice(event.target.value)
setValue('ou_id', parseInt(event.target.value, 10))
} else {
setValue('ou_id', undefined)
}
}
register('role_type', {
required: t<string>('validation.roleTypeRequired'),
})
const handleRoleTypeChange = (event: any) => {
setValue('role_type', event.target.value)
setSelectedRoleType(event.target.value)
}
function doSubmit() {
return onSubmit()
}
useImperativeHandle(ref, () => ({ doSubmit }))
return (
<>
<Typography variant='h5' sx={{
paddingTop: '1rem',
paddingBottom: '1rem',
}}>{t('registerWizardText.registerContactInfo')}</Typography>
<Typography sx={{ paddingBottom: '2rem' }}>{t('registerWizardText.registerPage')}</Typography>
<Box sx={{ maxWidth: '30rem' }}>
<form onSubmit={onSubmit}>
<Stack spacing={2}>
<TextField
id='firstName'
label={t('input.firstName')}
error={!!errors.first_name}
helperText={errors.first_name && errors.first_name.message}
{...register(`first_name`, {
required: t<string>('validation.firstNameRequired'),
})}
/>
<TextField
id='lastName'
label={t('input.lastName')}
error={!!errors.last_name}
helperText={errors.last_name && errors.last_name.message}
{...register(`last_name`, {
required: t<string>('validation.lastNameRequired'),
})}
/>
<TextField
id='email'
label={t('input.email')}
error={!!errors.email}
helperText={errors.email && errors.email.message}
{...register(`email`, {
validate: isValidEmail,
})}
/>
<Typography variant='h5' sx={{ paddingTop: '1rem' }}>{t('registerWizardText.registerPeriod')}</Typography>
<Typography sx={{ paddingBottom: '1rem' }}>{t('registerWizardText.registerPeriodText')}</Typography>
<FormControl fullWidth>
<InputLabel id='ou-select-label'>{t('common:ou')}</InputLabel>
<Select
labelId='ou-select-label'
id='ou-select-label'
value={ouChoice?.toString()}
label={t('common:ou')}
onChange={handleOuChange}
>
{ous.length > 0 ? (
ous
.sort(i18n.language === 'en' ? enSort : nbSort)
.map((ou) => (
<MenuItem key={ou.id.toString()} value={ou.id}>
{i18n.language === 'en' ? ou.en : ou.nb} ({ou.id})
</MenuItem>
))
) : (
<></>
)}
</Select>
</FormControl>
<TextField
id='roletype-select'
select
value={selectedRoleType}
error={!!errors.role_type}
label={t('input.roleType')}
onChange={handleRoleTypeChange}
>
{
roleTypes.sort(roleTypeSort())
.map((roleType) => (
<MenuItem
key={roleType.id.toString()}
value={roleType.id}>{i18n.language === 'en' ? roleType.name_en : roleType.name_nb}</MenuItem>
))
}
</TextField>
<Controller name='role_start'
control={control}
render={({ field }) => (
<DatePicker
mask='____-__-__'
label={t('input.roleStartDate')}
value={field.value}
inputFormat='yyyy-MM-dd'
onChange={(value) => {
field.onChange(value)
}}
renderInput={(params) => <TextField {...params} />}
/>)}
/>
<Controller name='role_end'
control={control}
defaultValue={undefined}
render={({ field }) => (
<DatePicker
mask='____-__-__'
label={t('input.roleEndDate')}
value={field.value}
inputFormat='yyyy-MM-dd'
onChange={(value) => {
field.onChange(value)
}}
renderInput={(params) => <TextField {...params} />}
/>)}
/>
<TextField
id='comment'
label={t('input.comment')}
multiline
rows={5}
{...register(`comment`)}
/>
</Stack>
</form>
</Box>
</>
)
})
export default StepPersonForm