From 5396ae528c4685b05805f17cf6ed4ffcc749dccd Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Tue, 14 Dec 2021 15:18:03 +0100
Subject: [PATCH] GREG-135: Update register new guest UI
---
frontend/public/locales/en/common.json | 7 +-
frontend/public/locales/nb/common.json | 9 +-
frontend/public/locales/nn/common.json | 9 +-
.../sponsor/register/stepPersonForm.tsx | 89 +++++++++++--------
4 files changed, 65 insertions(+), 49 deletions(-)
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 61140646..1a439dac 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -23,7 +23,8 @@
"passportNumber": "Passport number",
"passportNationality": "Passport nationality",
"countryCallingCode": "Country code",
- "contactPersonUnit": "Contact at unit"
+ "contactPersonUnit": "Contact at unit",
+ "optional": "(optional)"
},
"sponsor": {
"addRole": "Add role",
@@ -118,10 +119,10 @@
"finishRegistration": "Finish registration"
},
"registerWizardText": {
- "registerPage": "Enter the contact information for the guest below. All fields are mandatory.",
+ "registerPage": "Enter the contact information for the guest below. These fields are mandatory.",
"summaryPage": "Check that the values are correct before saving.",
"registerContactInfo": "Register contact info",
- "registerPeriod": "Register period",
+ "registerPeriod": "Register role and period",
"registerPeriodText": "Enter role and duration.",
"summaryContactInformation": "Summary contact information",
"summaryPeriod": "Summary period",
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index b9f2d0a7..51858385 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -23,7 +23,8 @@
"passportNumber": "Passnummer",
"passportNationality": "Passnasjonalitet",
"countryCallingCode": "Landkode",
- "contactPersonUnit": "Kontakt ved avdeling"
+ "contactPersonUnit": "Kontakt ved avdeling",
+ "optional": "(valgfritt)"
},
"sponsor": {
"addRole": "Legg til rolle",
@@ -118,10 +119,10 @@
"finishRegistration": "Fullfør registrering"
},
"registerWizardText": {
- "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
+ "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Disse feltene er obligatoriske.",
"summaryPage": "Sjekk at alt stemmer før lagring.",
- "registerContactInfo": "Registrere kontaktinfo",
- "registerPeriod": "Registrere periode",
+ "registerContactInfo": "Registrer kontaktinfo",
+ "registerPeriod": "Registrer rolle og periode",
"registerPeriodText": "Fyll inn rolle og periode.",
"summaryContactInformation": "Summary contact information",
"summaryPeriod": "Summary period",
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 60fc0cc0..c28d96f4 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -24,7 +24,8 @@
"passportNumber": "Passnummer",
"passportNationality": "Passnasjonalitet",
"countryCallingCode": "Landkode",
- "contactPersonUnit": "Kontakt ved avdeling"
+ "contactPersonUnit": "Kontakt ved avdeling",
+ "optional": "(valfritt)"
},
"sponsor": {
"addRole": "Legg til role",
@@ -119,10 +120,10 @@
"finishRegistration": "Fullfør registrering"
},
"registerWizardText": {
- "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
+ "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Desse felta er obligatoriske.",
"summaryPage": "Sjekk at alt stemmer før lagring.",
- "registerContactInfo": "Registrere kontaktinfo",
- "registerPeriod": "Registrere periode",
+ "registerContactInfo": "Registrer kontaktinfo",
+ "registerPeriod": "Registrer rolle og periode",
"registerPeriodText": "Fyll inn rolle og periode.",
"summaryContactInformation": "Summary contact information",
"summaryPeriod": "Summary period",
diff --git a/frontend/src/routes/sponsor/register/stepPersonForm.tsx b/frontend/src/routes/sponsor/register/stepPersonForm.tsx
index 1bccad5a..1a294d5e 100644
--- a/frontend/src/routes/sponsor/register/stepPersonForm.tsx
+++ b/frontend/src/routes/sponsor/register/stepPersonForm.tsx
@@ -1,10 +1,7 @@
import {
Box,
- FormControl,
- InputLabel,
+ Divider,
MenuItem,
- Select,
- SelectChangeEvent,
Stack,
TextField,
Typography,
@@ -76,7 +73,7 @@ const StepPersonForm = forwardRef(
reset(formData)
}, [])
- const handleOuChange = (event: SelectChangeEvent) => {
+ const handleOuChange = (event: any) => {
if (event.target.value) {
setOuChoice(event.target.value)
setValue('ou_id', parseInt(event.target.value, 10))
@@ -132,11 +129,18 @@ const StepPersonForm = forwardRef(
>
{t('registerWizardText.registerContactInfo')}
</Typography>
- <Typography sx={{ paddingBottom: '2rem' }}>
+ <Typography sx={{ paddingBottom: '0.5rem' }}>
{t('registerWizardText.registerPage')}
</Typography>
- <Box sx={{ maxWidth: '30rem' }}>
- <form onSubmit={onSubmit}>
+ <Divider />
+ <form onSubmit={onSubmit}>
+ <Box
+ sx={{
+ paddingTop: '1rem',
+ paddingBottom: '4rem',
+ maxWidth: '30rem',
+ }}
+ >
<Stack spacing={2}>
<TextField
id="firstName"
@@ -166,33 +170,24 @@ const StepPersonForm = forwardRef(
validate: isValidEmail,
})}
/>
+ </Stack>
+ </Box>
+ <Typography
+ variant="h5"
+ sx={{
+ paddingTop: '1rem',
+ paddingBottom: '1rem',
+ }}
+ >
+ {t('registerWizardText.registerPeriod')}
+ </Typography>
+ <Typography sx={{ paddingBottom: '0.5rem' }}>
+ {t('registerWizardText.registerPeriodText')}
+ </Typography>
+ <Divider />
- <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>
-
+ <Box sx={{ paddingTop: '1rem', maxWidth: '30rem' }}>
+ <Stack spacing={2}>
<TextField
id="roletype-select"
select
@@ -210,6 +205,22 @@ const StepPersonForm = forwardRef(
))}
</TextField>
+ <TextField
+ id="ou-select-label"
+ select
+ value={ouChoice?.toString()}
+ label={t('common:ou')}
+ onChange={handleOuChange}
+ >
+ {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>
+ ))}
+ </TextField>
+
{/* There are no particular constraints on the date pickers. It should be allowed to add a role with a start date that is in the past for instance */}
<Controller
name="role_start"
@@ -257,7 +268,9 @@ const StepPersonForm = forwardRef(
{displayContactAtUnit && (
<TextField
id="contact_person"
- label={t('input.contactPersonUnit')}
+ label={`${t('input.contactPersonUnit')} ${t(
+ 'input.optional'
+ )}`}
{...register(`contact_person_unit`)}
/>
)}
@@ -265,15 +278,15 @@ const StepPersonForm = forwardRef(
{displayComment && (
<TextField
id="comment"
- label={t('input.comment')}
+ label={`${t('input.comment')} ${t('input.optional')}`}
multiline
rows={5}
{...register(`comment`)}
/>
)}
</Stack>
- </form>
- </Box>
+ </Box>
+ </form>
</>
)
}
--
GitLab