diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 41b156943eda722ab70e73300565a957a5572433..0dbe62d87c8f7a7e2123f0bd6729dd2a76df155c 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -21,7 +21,9 @@
"roleStartDate": "From",
"roleEndDate": "To",
"comment": "Comment",
- "email": "E-mail"
+ "email": "E-mail",
+ "fullName": "Full name",
+ "mobilePhone": "Mobile phone"
},
"loading": "Loading...",
"termsHeader": "Terms",
@@ -66,6 +68,9 @@
"summaryPage": "Check that the values are correct before saving.",
"registerContactInfo": "Register contact info",
"registerPeriod": "Register period",
- "registerPeriodText": "Enter role and duration."
+ "registerPeriodText": "Enter role and duration.",
+ "summaryContactInformation": "Summary contact information",
+ "summaryPeriod": "Summary period",
+ "contactInformation": "Contact information"
}
}
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index fd070f31b75832601321097de88988d4fb03b459..97f539560b4d5d1c8176bcac135661cc97f9ddda 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -21,7 +21,9 @@
"roleStartDate": "Fra",
"roleEndDate": "Til",
"comment": "Kommentar",
- "email": "E-post"
+ "email": "E-post",
+ "fullName": "Full navn",
+ "mobilePhone": "Mobilnummer"
},
"loading": "Laster...",
"termsHeader": "Vilkår",
@@ -66,6 +68,9 @@
"summaryPage": "Sjekk at alt stemmer før lagring.",
"registerContactInfo": "Registrere kontaktinfo",
"registerPeriod": "Registrere periode",
- "registerPeriodText": "Fyll inn rolle og periode."
+ "registerPeriodText": "Fyll inn rolle og periode.",
+ "summaryContactInformation": "Summary contact information",
+ "summaryPeriod": "Summary period",
+ "contactInformation": "Kontaktinformasjon"
}
}
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 63d8ebd2cc92e28eaabef0ee8f115bbab2faefa9..5373de6f3781742c4ee5fe2b4d476b38af8ff3a7 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -22,7 +22,9 @@
"roleStartDate": "Frå",
"roleEndDate": "Til",
"comment": "Kommentar",
- "email": "E-post"
+ "email": "E-post",
+ "fullName": "Fullt namn",
+ "mobilePhone": "Mobilnummer"
},
"loading": "Lastar...",
"termsHeader": "Vilkår",
@@ -30,7 +32,7 @@
"firstName": "Fornamn",
"lastName": "Etternamn",
"dateOfBirth": "Fødselsdato",
- "name": "Navn",
+ "name": "Namn",
"role": "Gjesterolle",
"period": "Periode",
"ou": "Organisasjon",
@@ -67,6 +69,9 @@
"summaryPage": "Sjekk at alt stemmer før lagring.",
"registerContactInfo": "Registrere kontaktinfo",
"registerPeriod": "Registrere periode",
- "registerPeriodText": "Fyll inn rolle og periode."
+ "registerPeriodText": "Fyll inn rolle og periode.",
+ "summaryContactInformation": "Summary contact information",
+ "summaryPeriod": "Summary period",
+ "contactInformation": "Kontaktinformasjon"
}
}
diff --git a/frontend/src/routes/register/personFormMethods.ts b/frontend/src/routes/register/personFormMethods.ts
index 489a0b511c68e278fb358a8c9f4c4489e58f02c7..6dc1bf8a45790fbec3f9d379d9614ba8b5c6c9e4 100644
--- a/frontend/src/routes/register/personFormMethods.ts
+++ b/frontend/src/routes/register/personFormMethods.ts
@@ -1,3 +1,3 @@
export interface PersonFormMethods {
- doSubmit: () => Promise<void>
+ doSubmit: () => void
}
diff --git a/frontend/src/routes/register/stepSummary.tsx b/frontend/src/routes/register/stepSummary.tsx
index c09177ed8ce0e7520e3093c9cd9fbcecc4f611d1..ecbdeb58157295e1b123a984a52c1858dcbc21b5 100644
--- a/frontend/src/routes/register/stepSummary.tsx
+++ b/frontend/src/routes/register/stepSummary.tsx
@@ -1,11 +1,18 @@
-import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
+import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { Controller, SubmitHandler, useForm } from 'react-hook-form'
-import { Box, Stack, TextField } from '@mui/material'
+import {
+ Box,
+ Grid,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Typography,
+} from '@mui/material'
import format from 'date-fns/format'
-import { DatePicker } from '@mui/lab'
import { RegisterFormData } from './formData'
import { postJsonOpts } from '../../utils'
import { PersonFormMethods } from './personFormMethods'
@@ -21,23 +28,23 @@ interface StepSummaryProperties {
}
const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFormMethods>) => {
- const { i18n, t } = useTranslation(['common'])
+ const { t } = useTranslation(['common'])
const { formData, onSubmitSuccess, onSubmitFailure } = props
const ous = useOus()
const roleTypes = useRoleTypes()
const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
- const submit: SubmitHandler<RegisterFormData> = (data) => {
+ const submit = () => {
const payload = {
- first_name: data.first_name,
- last_name: data.last_name,
- email: data.email,
+ first_name: formData.first_name,
+ last_name: formData.last_name,
+ email: formData.email,
role: {
- type: data.role_type,
- start_date: data.role_start === null ? null : format(data.role_start as Date, 'yyyy-MM-dd'),
- end_date: data.role_end === null ? null : format(data.role_end as Date, 'yyyy-MM-dd'),
- comments: data.comment,
- orgunit_id: data.ou_id,
+ type: formData.role_type,
+ start_date: formData.role_start === null ? null : format(formData.role_start as Date, 'yyyy-MM-dd'),
+ end_date: formData.role_end === null ? null : format(formData.role_end as Date, 'yyyy-MM-dd'),
+ comments: formData.comment,
+ orgunit_id: formData.ou_id,
},
}
@@ -65,141 +72,67 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
})
}
- const getSelectedOrganisationalUnit = () => {
- if (formData?.ou_id) {
- const ousArray = ous.filter(((value) => value.id === formData.ou_id))
-
- if (ousArray.length === 0) {
- return ''
- }
-
- if (i18n.language === 'en') {
- return ousArray[0].en
- }
- return ousArray[0].nb
- }
- return ''
- }
-
- const getSelectedRoleType = () => {
- if (formData?.role_type) {
- const roleTypeArray = roleTypes.filter(((value) => value.identifier === formData.role_type))
-
- if (roleTypeArray.length === 0) {
- return ''
- }
-
- if (i18n.language === 'en') {
- return roleTypeArray[0].name_en
- }
- return roleTypeArray[0].name_nb
- }
- return ''
- }
-
- const {
- reset,
- register,
- handleSubmit,
- control,
- } = useForm<RegisterFormData>()
- const onSubmit = handleSubmit(submit)
-
- useEffect(() => {
- reset(formData)
- }, [])
-
function doSubmit() {
- return onSubmit()
+ return submit()
}
useImperativeHandle(ref, () => ({ doSubmit }))
return (
<>
+ <Typography variant='h5' sx={{
+ paddingTop: '1rem',
+ paddingBottom: '1rem',
+ }}>{t('registerWizardText.summaryContactInformation')}</Typography>
<Box sx={{ typography: 'subtitle2' }}>
{t('registerWizardText.summaryPage')}
</Box>
<Box sx={{ maxWidth: '30rem' }}>
- <form onSubmit={onSubmit}>
- <Stack spacing={2}>
- <TextField
- id='firstName'
- label={t('input.firstName')}
- disabled
- {...register('first_name')}
- />
- <TextField
- id='lastName'
- label={t('input.lastName')}
- disabled
- {...register('last_name')}
- />
-
- <TextField
- id='email'
- label={t('input.email')}
- disabled
- {...register('email')}
- />
-
- <TextField
- id='ou'
- value={getSelectedOrganisationalUnit()}
- label={t('ou')}
- disabled
- />
-
- <TextField
- id='roletype-select'
- value={getSelectedRoleType()}
- label={t('input.roleType')}
- disabled
- />
-
- <Controller name='role_start'
- control={control}
- render={({ field }) => (
- <DatePicker
- mask='____-__-__'
- label={t('input.roleStartDate')}
- disabled
- value={field.value}
- inputFormat='yyyy-MM-dd'
- onChange={(value) => {
- field.onChange(value)
- }}
- renderInput={(params) => <TextField {...params} />}
- />)}
- />
-
- <Controller name='role_end'
- control={control}
- render={({ field }) => (
- <DatePicker
- mask='____-__-__'
- label={t('input.roleEndDate')}
- disabled
- value={field.value}
- inputFormat='yyyy-MM-dd'
- onChange={(value) => {
- field.onChange(value)
- }}
- renderInput={(params) => <TextField {...params} />}
- />)}
- />
-
- <TextField
- id='comment'
- label={t('input.comment')}
- disabled
- multiline
- rows={5}
- {...register(`comment`)}
- />
-
- </Stack>
- </form>
+
+ <Box sx={{ padding: '1rem', bgcolor: 'primary.dark' }}>{t('registerWizardText.contactInformation')}</Box>
+
+ <Grid container>
+ <Grid item xs={4}>
+ {t('input.fullName')}
+ </Grid>
+ <Grid item xs={8}>
+ {formData.first_name} {formData.last_name}
+ </Grid>
+ <Grid item xs={4}>
+ {t('input.email')}
+ </Grid>
+ <Grid item xs={8}>
+ {formData.email}
+ </Grid>
+ </Grid>
+
+ <Typography variant='h5' sx={{
+ paddingTop: '1rem',
+ paddingBottom: '1rem',
+ }}>{t('registerWizardText.summaryPeriod')}</Typography>
+
+ <Table>
+ <TableHead sx={{
+ padding: '1rem',
+ bgcolor: 'primary.dark',
+ }}>
+
+ <TableRow>
+ <TableCell>Guest role</TableCell>
+ <TableCell>Period</TableCell>
+ <TableCell>Department</TableCell>
+ <TableCell>Comment</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ <TableRow>
+ <TableCell>{formData.role_type}</TableCell>
+ <TableCell>{formData.role_start === null ? null : format(formData.role_start as Date, 'yyyy-MM-dd')}-{formData.role_end === null ? null : format(formData.role_end as Date, 'yyyy-MM-dd')}</TableCell>
+ <TableCell>{formData.ou_id}</TableCell>
+ <TableCell>{formData.comment}</TableCell>
+ </TableRow>
+ </TableBody>
+ </Table>
{/* TODO For now just showing a heading to give the user some feedback */}
{submitState === SubmitState.SubmitSuccess && (
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index 70d898fcd78e5c6c54b40201bc79fccee3b2b524..e07e4ce55617aa862c5b99274a6288bb084bad9c 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -15,6 +15,7 @@ const mainTheme: ThemeOptions = {
palette: {
primary: {
main: '#3293ED',
+ dark: '#1565c0'
},
},
components: {
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index b1c29bbed025a17695ec7ad3af48dff0827a905a..a659679ec6cb1c1135c9a915772ce9d5cb16475e 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -4,6 +4,7 @@ const uibTheme: ThemeOptions = {
palette: {
primary: {
main: '#ba000d',
+ dark: '#1565c0'
},
},
}
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 6cc692871b3c3e2ca4051563be09a701b636fb56..c5f908ec246ee55b957079f81d4559b7b459ec7a 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -3,7 +3,8 @@ import { ThemeOptions } from "@mui/material"
const uioTheme: ThemeOptions = {
palette: {
primary: {
- main: "#4977af"
+ main: "#4977af",
+ dark: '#1565c0'
}
},
}