GREG-60: Showing proper names in summary table

frontend/src/routes/register/formData.ts

@@ -7,4 +7,4 @@ export type RegisterFormData = {
   comment?: string
   ou_id?: number
   email?: string
-}
+}
\ No newline at end of file

frontend/src/routes/register/stepSummary.tsx

@@ -19,6 +19,7 @@ import { PersonFormMethods } from './personFormMethods'
 import useOus from '../../hooks/useOus'
 import useRoleTypes from '../../hooks/useRoleTypes'
 import SubmitState from './submitState'
+import i18n from 'i18next'
 
 
 interface StepSummaryProperties {
@@ -78,6 +79,13 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
 
     useImperativeHandle(ref, () => ({ doSubmit }))
 
+    const selectedOus = ous.find((value) => value.id === formData.ou_id)
+    const ousName = selectedOus === undefined ? '' : (`${i18n.language === 'en' ? selectedOus.en : selectedOus.nb} (${selectedOus.id})`)
+
+    // TODO Fix this confusing mix between use of id and identifier
+    const selectedRoleType = roleTypes.find((value) => value.id === (formData.role_type === undefined ? -1 : parseInt(formData.role_type, 10)))
+    const roleTypeName = selectedRoleType === undefined ? '' : `${i18n.language === 'en' ? selectedRoleType.name_en : selectedRoleType.name_nb}`
+
     return (
       <>
         <Typography variant='h5' sx={{
@@ -88,7 +96,6 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
           {t('registerWizardText.summaryPage')}
         </Box>
         <Box sx={{ maxWidth: '30rem' }}>
-
           <Box sx={{ padding: '1rem', bgcolor: 'primary.dark' }}>{t('registerWizardText.contactInformation')}</Box>
 
           <Grid container>
@@ -126,9 +133,9 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
             </TableHead>
             <TableBody>
               <TableRow>
-                <TableCell>{formData.role_type}</TableCell>
+                <TableCell>{roleTypeName}</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>{ousName}</TableCell>
                 <TableCell>{formData.comment}</TableCell>
               </TableRow>
             </TableBody>