diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index bf866efa5265ec601a931ea812f04c36ec741ac1..210cf747a4a6e2fe7356537050bad51f05098ad1 100644 --- a/frontend/public/locales/en/common.json +++ b/frontend/public/locales/en/common.json @@ -16,7 +16,6 @@ "roleStartDate": "From", "roleEndDate": "To", "comment": "Comment", - "contact": "Contact person", "searchable": "Available in search?", "email": "E-mail", "fullName": "Full name", diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json index 290d8f21ff951f77004efb2acb04566af96c0c4f..f8fc3a000306d744f00c9bb9292f2bb8f9dfb0a5 100644 --- a/frontend/public/locales/nb/common.json +++ b/frontend/public/locales/nb/common.json @@ -16,7 +16,6 @@ "roleStartDate": "Fra", "roleEndDate": "Til", "comment": "Kommentar", - "contact": "Kontaktperson", "searchable": "Synlig i søk?", "email": "E-post", "fullName": "Fullt navn", diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json index b7beee8b36c12ab5006cfcc88af9857989ec992d..ca630977cb0948a3ad697718ac5d0c54dad6857e 100644 --- a/frontend/public/locales/nn/common.json +++ b/frontend/public/locales/nn/common.json @@ -17,7 +17,6 @@ "roleStartDate": "Frå", "roleEndDate": "Til", "comment": "Kommentar", - "contact": "Kontaktperson", "searchable": "Synleg i søk?", "email": "E-post", "fullName": "Fullt namn", diff --git a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx index bad293bdafaa1d6b4d809d4fc0dd3d46cd93e0a4..3fc2155c5d4161d56c1b49a937d1207299185ef9 100644 --- a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx +++ b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx @@ -11,6 +11,7 @@ import { TextField, SelectChangeEvent, FormControlLabel, + Box, } from '@mui/material' import Page from 'components/page' import { format } from 'date-fns' @@ -117,13 +118,14 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { const [roleTypeChoice, setRoleTypeChoice] = useState<string>('') const [t, i18n] = useTranslation('common') const today = new Date() + const [maxDate, setMaxDate] = useState(today) - const todayPlusMaxDays = () => { - if (roleTypeChoice) { - const role = roleTypes.filter( - (rt) => rt.id.toString() === roleTypeChoice.toString() - )[0] - return addDays(role.max_days)(today) + const todayPlusMaxDays = (roleTypeId?: number) => { + if (roleTypeId) { + const role = roleTypes.find((rt) => rt.id === roleTypeId) + if (role !== undefined) { + return addDays(role.max_days)(today) + } } return addDays(0)(today) } @@ -138,6 +140,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { const handleRoleTypeChange = (event: SelectChangeEvent) => { setValue('type', event.target.value) setRoleTypeChoice(event.target.value) + setMaxDate(todayPlusMaxDays(Number(event.target.value))) } const handleOuChange = (event: SelectChangeEvent) => { if (event.target.value) { @@ -193,18 +196,21 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { label={t('common:ou')} onChange={handleOuChange} > - {ous.length > 0 ? ( + {ous.length > 0 && ous .sort(i18n.language === 'en' ? enSort : nbSort) - .map((ou) => ouToItem(ou)) - ) : ( - <></> - )} + .map((ou) => ouToItem(ou))} </Select> </FormControl> <Controller name="start_date" control={control} + rules={{ + required: true, + validate: () => + Number(getValues('start_date')) <= + Number(getValues('end_date')), + }} defaultValue={today} render={({ field }) => ( <DatePicker @@ -212,7 +218,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { label={t('input.roleStartDate')} disabled={!roleTypeChoice} value={field.value} - maxDate={todayPlusMaxDays()} + maxDate={maxDate} inputFormat="yyyy-MM-dd" onChange={(value) => { field.onChange(value) @@ -221,9 +227,26 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { /> )} /> + + {errors.start_date && errors.start_date.type === 'required' && ( + <Box sx={{ typography: 'caption', color: 'error.main' }}> + {t('validation.startDateMustBeSet')} + </Box> + )} + {errors.start_date && errors.start_date.type === 'validate' && ( + <Box sx={{ typography: 'caption', color: 'error.main' }}> + {t('validation.startDateMustBeBeforeEndDate')} + </Box> + )} <Controller name="end_date" control={control} + rules={{ + required: true, + validate: () => + Number(getValues('start_date')) <= + Number(getValues('end_date')), + }} defaultValue={today} render={({ field }) => ( <DatePicker @@ -231,7 +254,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { label={t('input.roleEndDate')} disabled={!roleTypeChoice} value={field.value} - maxDate={todayPlusMaxDays()} + maxDate={maxDate} inputFormat="yyyy-MM-dd" onChange={(value) => { field.onChange(value) @@ -240,10 +263,9 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { /> )} /> - <TextField id="contact" - label={t('input.contact')} + label={t('input.contactPersonUnit')} multiline rows={5} {...register('contact_person_unit')}