From 611fdcd5cb1c2b87d550b068c1f34243c2a45d5c Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Thu, 7 Oct 2021 16:52:34 +0200
Subject: [PATCH] GREG-60: Updates to summary page
---
frontend/public/locales/en/common.json | 9 +-
frontend/public/locales/nb/common.json | 9 +-
frontend/public/locales/nn/common.json | 11 +-
.../src/routes/register/personFormMethods.ts | 2 +-
frontend/src/routes/register/stepSummary.tsx | 209 ++++++------------
frontend/src/themes/main.ts | 1 +
frontend/src/themes/uib.ts | 1 +
frontend/src/themes/uio.ts | 3 +-
8 files changed, 98 insertions(+), 147 deletions(-)
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 41b15694..0dbe62d8 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 fd070f31..97f53956 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 63d8ebd2..5373de6f 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 489a0b51..6dc1bf8a 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 c09177ed..ecbdeb58 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 70d898fc..e07e4ce5 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 b1c29bbe..a659679e 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 6cc69287..c5f908ec 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'
}
},
}
--
GitLab