Merge branch 'GREG-61-role-button' into 'master'

Greg 61 role button

See merge request !124

frontend/public/locales/en/common.json

@@ -17,6 +17,8 @@
     "roleStartDate": "From",
     "roleEndDate": "To",
     "comment": "Comment",
+    "contact": "Contact person",
+    "searchable": "Available in search?",
     "email": "E-mail",
     "fullName": "Full name",
     "mobilePhone": "Mobile phone",
@@ -25,14 +27,21 @@
     "countryCallingCode": "Country code"
   },
   "sponsor": {
-    "contactInfo": "Contact information",
-    "roleInfo": "Guest role- and period information",
+    "addRole": "Add role",
     "roleInfoText": "You can change the start and end dates for the role.",
     "choose": "Choose",
     "details": "Details",
     "modifyEnd": "Change end date",
-    "endNow": "End role",
-    "overviewGuest": "Guest overview"
+    "endNow": "End role"
+  },
+  "guestInfo": {
+    "contactInfo": "Contact information",
+    "roleInfoHead": "Roles and periods",
+    "roleInfoBody": "You can only change roles that you have given"
+  },
+  "guest": {
+    "headerText": "Add new role and period.",
+    "bodyText": "Here you can add a new role to the same guest"
   },
   "register": {
     "registerHeading": "Register new guest",

frontend/public/locales/nb/common.json

@@ -17,6 +17,8 @@
     "roleStartDate": "Fra",
     "roleEndDate": "Til",
     "comment": "Kommentar",
+    "contact": "Kontaktperson",
+    "searchable": "Synlig i søk?",
     "email": "E-post",
     "fullName": "Fullt navn",
     "mobilePhone": "Mobilnummer",
@@ -25,14 +27,21 @@
     "countryCallingCode": "Landkode"
   },
   "sponsor": {
-    "contactInfo": "Kontaktinformasjon",
-    "roleInfo": "Gjesterolle- og periodeinformasjon",
+    "addRole": "Legg til rolle",
     "roleInfoText": "Her kan du endre på start- og sluttdato for gjesterollen eller avslutte perioden",
     "choose": "Velg",
     "details": "Detaljer",
     "modifyEnd": "Endre sluttdato",
-    "endNow": "Avslutt rolle",
-    "overviewGuest": "Oversikt over gjest"
+    "endNow": "Avslutt rolle"
+  },
+  "guestInfo": {
+    "contactInfo": "Kontaktinformasjon",
+    "roleInfoHead": "Roller og perioder",
+    "roleInfoBody": "Du kan bare endre på gjesteroller som du er vert for"
+  },
+  "guest": {
+    "headerText": "Legg til ny rolle og periode",
+    "bodyText": "Her kan du legge til en ny rolle på samme gjest"
   },
   "register": {
     "registerHeading": "Registrer ny gjest",

frontend/public/locales/nn/common.json

@@ -18,6 +18,8 @@
     "roleStartDate": "Frå",
     "roleEndDate": "Til",
     "comment": "Kommentar",
+    "contact": "Kontaktperson",
+    "searchable": "Synleg i søk?",
     "email": "E-post",
     "fullName": "Fullt namn",
     "mobilePhone": "Mobilnummer",
@@ -26,14 +28,21 @@
     "countryCallingCode": "Landkode"
   },
   "sponsor": {
-    "contactInfo": "Kontaktinformasjon",
-    "roleInfo": "Gjesterolle- og periodeinformasjon",
+    "addRole": "Legg til role",
     "roleInfoText": "Her kan du endre på start- og sluttdato for gjesterollen eller avslutte perioden",
     "choose": "Velg",
     "details": "Detaljer",
     "modifyEnd": "Endre sluttdato",
-    "endNow": "Avslutt rolle",
-    "overviewGuest": "Oversikt over gjest"
+    "endNow": "Avslutt rolle"
+  },
+  "guestInfo": {
+    "contactInfo": "Kontaktinformasjon",
+    "roleInfoHead": "Roller og perioder",
+    "roleInfoBody": "Du kan bare endre på gjesteroller som du er vert for"
+  },
+  "guest": {
+    "headerText": "Legg til ny rolle og periode",
+    "bodyText": "Her kan du legge til en ny rolle på samme gjest"
   },
   "register": {
     "registerHeading": "Registrer ny gjest",

frontend/src/hooks/useOus/index.tsx

@@ -22,5 +22,25 @@ function useOus(): OuData[] {
   return ous
 }
 
+export const enSort = (a: OuData, b: OuData) => {
+  if (a.en > b.en) {
+    return 1
+  }
+  if (b.en > a.en) {
+    return -1
+  }
+  return 0
+}
+
+export const nbSort = (a: OuData, b: OuData) => {
+  if (a.nb > b.nb) {
+    return 1
+  }
+  if (b.nb > a.nb) {
+    return -1
+  }
+  return 0
+}
+
 export type { OuData }
 export default useOus

frontend/src/hooks/useRoleTypes/index.tsx

@@ -5,6 +5,7 @@ type RoleTypeData = {
   identifier: string
   name_en: string
   name_nb: string
+  max_days: number
 }
 
 function useRoleTypes(): RoleTypeData[] {

frontend/src/routes/components/sponsorInfoButtons.tsx

@@ -2,14 +2,16 @@ import { IconButton, Theme, Box } from '@mui/material'
 import { Link } from 'react-router-dom'
 import PersonOutlineRoundedIcon from '@mui/icons-material/PersonOutlineRounded'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import { useTranslation } from 'react-i18next'
 
 interface SponsorInfoButtonsProps {
   to: string
+  name: string
 }
 
-export default function SponsorInfoButtons({ to }: SponsorInfoButtonsProps) {
-  const { t } = useTranslation(['common'])
+export default function SponsorInfoButtons({
+  to,
+  name,
+}: SponsorInfoButtonsProps) {
   return (
     <Box
       sx={{
@@ -46,7 +48,7 @@ export default function SponsorInfoButtons({ to }: SponsorInfoButtonsProps) {
             typography: 'caption',
           }}
         >
-          {t('sponsor.overviewGuest')}
+          {name}
         </Box>
       </Box>
     </Box>

frontend/src/routes/sponsor/guestInfo/index.tsx → frontend/src/routes/sponsor/guest/guestInfo/index.tsx

-import React, { useEffect, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 
 import Page from 'components/page'
@@ -13,10 +12,9 @@ import {
   TableRow,
   Paper,
 } from '@mui/material'
-import { Guest, Role, FetchedRole } from 'interfaces'
+import { Guest, Role } from 'interfaces'
 import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
 import { format } from 'date-fns'
-import { parseRole } from 'utils'
 
 type GuestInfoParams = {
   pid: string
@@ -25,14 +23,15 @@ interface RoleLineProps {
   role: Role
   pid: string
 }
+type GuestInfoProps = {
+  guest: Guest
+  roles: Role[]
+}
 
 const RoleLine = ({ role, pid }: RoleLineProps) => {
   const [t, i18n] = useTranslation('common')
   return (
-    <TableRow
-      key={role.id}
-      sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-    >
+    <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
       <TableCell align="left">
         {i18n.language === 'en' ? role.name_en : role.name_nb}
       </TableCell>
@@ -56,60 +55,19 @@ const RoleLine = ({ role, pid }: RoleLineProps) => {
   )
 }
 
-export default function GuestInfo() {
+export default function GuestInfo({ guest, roles }: GuestInfoProps) {
   const { pid } = useParams<GuestInfoParams>()
   const [t] = useTranslation(['common'])
-  const [guestInfo, setGuest] = useState<Guest>({
-    pid: '',
-    first: '',
-    last: '',
-    email: '',
-    fnr: '',
-    mobile: '',
-    active: false,
-    registered: false,
-    verified: false,
-    roles: [],
-  })
-  const [roles, setRoles] = useState<Role[]>([])
-
-  const getPerson = async (id: string) => {
-    try {
-      const response = await fetch(`/api/ui/v1/person/${id}`)
-      const rjson = await response.json()
-      if (response.ok) {
-        setGuest({
-          pid: rjson.pid,
-          first: rjson.first,
-          last: rjson.last,
-          email: rjson.email,
-          mobile: rjson.mobile,
-          fnr: rjson.fnr,
-          active: rjson.active,
-          registered: rjson.registered,
-          verified: rjson.verified,
-          roles: rjson.roles,
-        })
-        setRoles(rjson.roles.map((role: FetchedRole) => parseRole(role)))
-      }
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  useEffect(() => {
-    getPerson(pid)
-  }, [])
 
   return (
     <Page>
-      <SponsorInfoButtons to="/sponsor" />
-      <h4>{t('sponsor.contactInfo')}</h4>
+      <SponsorInfoButtons to="/sponsor" name={`${guest.first} ${guest.last}`} />
+      <h4>{t('guestInfo.contactInfo')}</h4>
       <TableContainer component={Paper}>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead sx={{ backgroundColor: 'primary.light' }}>
             <TableRow>
-              <TableCell align="left">{t('sponsor.contactInfo')}</TableCell>
+              <TableCell align="left">{t('guestInfo.contactInfo')}</TableCell>
               <TableCell />
             </TableRow>
           </TableHead>
@@ -117,25 +75,36 @@ export default function GuestInfo() {
             <TableRow>
               <TableCell align="left">{t('input.fullName')}</TableCell>
               <TableCell align="left">
-                {`${guestInfo.first} ${guestInfo.last}`}
+                {`${guest.first} ${guest.last}`}
               </TableCell>
             </TableRow>
             <TableRow>
               <TableCell align="left">{t('input.email')}</TableCell>
-              <TableCell align="left">{guestInfo.email}</TableCell>
+              <TableCell align="left">{guest.email}</TableCell>
             </TableRow>
             <TableRow>
               <TableCell align="left">{t('input.nationalIdNumber')}</TableCell>
-              <TableCell align="left">{guestInfo.fnr}</TableCell>
+              <TableCell align="left">{guest.fnr}</TableCell>
             </TableRow>
             <TableRow>
               <TableCell align="left">{t('input.mobilePhone')}</TableCell>
-              <TableCell align="left">{guestInfo.mobile}</TableCell>
+              <TableCell align="left">{guest.mobile}</TableCell>
             </TableRow>
           </TableBody>
         </Table>
       </TableContainer>
-      <h4>{t('sponsor.roleInfo')}</h4>
+      <h4>{t('guestInfo.roleInfoHead')}</h4>
+      <h5>
+        {t('guestInfo.roleInfoBody')}
+        <Button
+          variant="contained"
+          component={Link}
+          to={`/sponsor/guest/${pid}/newrole`}
+        >
+          {t('sponsor.addRole')}
+        </Button>
+      </h5>
+
       <TableContainer component={Paper}>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead sx={{ backgroundColor: 'primary.light' }}>
@@ -148,7 +117,7 @@ export default function GuestInfo() {
           </TableHead>
           <TableBody>
             {roles.map((role) => (
-              <RoleLine pid={pid} role={role} />
+              <RoleLine key={role.id} pid={pid} role={role} />
             ))}
           </TableBody>
         </Table>

frontend/src/routes/sponsor/guestRoleInfo/index.tsx → frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx

@@ -12,16 +12,17 @@ import {
   TextField,
 } from '@mui/material'
 import Page from 'components/page'
-import { Guest } from 'interfaces'
+import { Guest, Role } from 'interfaces'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
 import { DatePicker } from '@mui/lab'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
-import { submitJsonOpts } from '../../../utils'
+import { submitJsonOpts } from '../../../../utils'
 
 interface GuestRoleInfoProps {
-  guests: Guest[]
+  guest: Guest
+  roles: Role[]
 }
 const endPeriodPost = (id: string, data: { end_date: Date }) => {
   const payload = {
@@ -56,15 +57,12 @@ type RoleFormData = {
   end_date: Date
 }
 
-export default function GuestRoleInfo({ guests }: GuestRoleInfoProps) {
+export default function GuestRoleInfo({ guest, roles }: GuestRoleInfoProps) {
   const { pid, id } = useParams<GuestRoleInfoParams>()
   const [t, i18n] = useTranslation('common')
 
   // Find the role info relevant for this page
-  const guestInfo = guests.filter((guest) => guest.pid.toString() === pid)[0]
-  const roleInfo = guestInfo.roles.filter(
-    (role) => role.id.toString() === id
-  )[0]
+  const roleInfo = roles.filter((role) => role.id.toString() === id)[0]
 
   // Prepare min and max date values
   const today = new Date()
@@ -106,10 +104,12 @@ export default function GuestRoleInfo({ guests }: GuestRoleInfoProps) {
 
   const { control, handleSubmit } = useForm()
   const onSubmit = handleSubmit(submit)
-
   return (
     <Page>
-      <SponsorInfoButtons to={`/sponsor/guest/${pid}`} />
+      <SponsorInfoButtons
+        to={`/sponsor/guest/${pid}`}
+        name={`${guest.first} ${guest.last}`}
+      />
       <h4>{t('sponsor.roleInfoText')}</h4>
       <form onSubmit={onSubmit}>
         <TableContainer component={Paper}>
@@ -139,9 +139,7 @@ export default function GuestRoleInfo({ guests }: GuestRoleInfoProps) {
                     render={({ field: { onChange, value } }) => (
                       <DatePicker
                         mask="____-__-__"
-                        disabled={
-                          roleInfo.start_date.getDate() <= today.getDate()
-                        }
+                        disabled={roleInfo.start_date <= today}
                         label={t('input.roleStartDate')}
                         value={value}
                         minDate={today}
@@ -162,7 +160,7 @@ export default function GuestRoleInfo({ guests }: GuestRoleInfoProps) {
                       <DatePicker
                         mask="____-__-__"
                         label={t('input.roleEndDate')}
-                        disabled={roleInfo.end_date.getDate() < today.getDate()}
+                        disabled={roleInfo.end_date < today}
                         minDate={today}
                         maxDate={todayPlusMaxDays}
                         value={value}

frontend/src/routes/sponsor/guest/index.tsx

+import { FetchedRole, Guest, Role } from 'interfaces'
+import { useEffect, useState } from 'react'
+import { Route, useParams } from 'react-router-dom'
+import { parseRole } from 'utils'
+import GuestInfo from './guestInfo'
+import GuestRoleInfo from './guestRoleInfo'
+import NewGuestRole from './newGuestRole'
+
+type GuestInfoParams = {
+  pid: string
+}
+
+function GuestRoutes() {
+  const { pid } = useParams<GuestInfoParams>()
+
+  const [guestInfo, setGuest] = useState<Guest>({
+    pid: '',
+    first: '',
+    last: '',
+    email: '',
+    fnr: '',
+    mobile: '',
+    active: false,
+    registered: false,
+    verified: false,
+    roles: [],
+  })
+  const [roles, setRoles] = useState<Role[]>([])
+
+  const getPerson = async (id: string) => {
+    try {
+      const response = await fetch(`/api/ui/v1/person/${id}`)
+      const rjson = await response.json()
+      if (response.ok) {
+        setGuest({
+          pid: rjson.pid,
+          first: rjson.first,
+          last: rjson.last,
+          email: rjson.email,
+          mobile: rjson.mobile,
+          fnr: rjson.fnr,
+          active: rjson.active,
+          registered: rjson.registered,
+          verified: rjson.verified,
+          roles: rjson.roles,
+        })
+        setRoles(rjson.roles.map((role: FetchedRole) => parseRole(role)))
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  useEffect(() => {
+    getPerson(pid)
+  }, [])
+
+  return (
+    <>
+      <Route path="/sponsor/guest/:pid/roles/:id">
+        <GuestRoleInfo guest={guestInfo} roles={roles} />
+      </Route>
+      <Route exact path="/sponsor/guest/:pid/newrole">
+        <NewGuestRole guest={guestInfo} />
+      </Route>
+      <Route exact path="/sponsor/guest/:pid">
+        <GuestInfo guest={guestInfo} roles={roles} />
+      </Route>
+    </>
+  )
+}
+
+export default GuestRoutes

frontend/src/routes/sponsor/guest/newGuestRole/index.tsx

+import { DatePicker } from '@mui/lab'
+import { addDays } from 'date-fns/fp'
+import {
+  Checkbox,
+  Button,
+  Select,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Stack,
+  TextField,
+  SelectChangeEvent,
+  FormControlLabel,
+} from '@mui/material'
+import Page from 'components/page'
+import { format } from 'date-fns'
+import useOus, { enSort, nbSort, OuData } from 'hooks/useOus'
+import useRoleTypes, { RoleTypeData } from 'hooks/useRoleTypes'
+import { Guest } from 'interfaces'
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { Link, useParams } from 'react-router-dom'
+import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
+import { submitJsonOpts } from 'utils'
+
+type AddRoleFormData = {
+  orgunit: number
+  type: string
+  end_date: Date
+  start_date?: Date
+  contact_person_unit?: string
+  comments?: string
+  available_in_search?: boolean
+}
+type AddRolePayload = {
+  orgunit: number
+  person: string
+  type: string
+  end_date: string
+  start_date?: string
+  contact_person_unit?: string
+  comments?: string
+  available_in_search?: boolean
+}
+
+type GuestInfoParams = {
+  pid: string
+}
+
+interface NewGuestRoleProps {
+  guest: Guest
+}
+
+const postRole = (formData: AddRoleFormData, pid: string) => {
+  const payload: AddRolePayload = {
+    orgunit: formData.orgunit,
+    person: pid,
+    type: formData.type,
+    end_date: format(formData.end_date as Date, 'yyyy-MM-dd'),
+  }
+  if (formData.start_date) {
+    payload.start_date = format(formData.start_date as Date, 'yyyy-MM-dd')
+  }
+  if (formData.contact_person_unit) {
+    payload.contact_person_unit = formData.contact_person_unit
+  }
+  if (formData.comments) {
+    payload.comments = formData.comments
+  }
+  if (formData.available_in_search) {
+    payload.available_in_search = formData.available_in_search
+  }
+
+  console.log('submitting', JSON.stringify(payload))
+  fetch('/api/ui/v1/role', submitJsonOpts('POST', payload))
+    .then((res) => {
+      if (!res.ok) {
+        console.log('result', res)
+        return null
+      }
+      console.log('result', res)
+      return res.text()
+    })
+    .then((result) => {
+      if (result !== null) {
+        console.log('result', result)
+      }
+    })
+    .catch((error) => {
+      console.log('error', error)
+    })
+}
+
+function NewGuestRole({ guest }: NewGuestRoleProps) {
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    getValues,
+  } = useForm<AddRoleFormData>()
+
+  const { pid } = useParams<GuestInfoParams>()
+  const onSubmit = handleSubmit(() => {
+    postRole(getValues(), pid)
+  })
+
+  const ous = useOus()
+  const roleTypes = useRoleTypes()
+  const [ouChoice, setOuChoice] = useState<string>('')
+  const [roleTypeChoice, setRoleTypeChoice] = useState<string>('')
+  const [t, i18n] = useTranslation('common')
+  const today = new Date()
+
+  const todayPlusMaxDays = () => {
+    if (roleTypeChoice) {
+      const role = roleTypes.filter(
+        (rt) => rt.id.toString() === roleTypeChoice.toString()
+      )[0]
+      return addDays(role.max_days)(today)
+    }
+    return addDays(0)(today)
+  }
+
+  const roleTypeSort = () => (a: RoleTypeData, b: RoleTypeData) => {
+    if (i18n.language === 'en') {
+      return a.name_nb.localeCompare(b.name_nb)
+    }
+    return a.name_en.localeCompare(b.name_en)
+  }
+  // Handling choices in menus
+  const handleRoleTypeChange = (event: SelectChangeEvent) => {
+    setValue('type', event.target.value)
+    setRoleTypeChoice(event.target.value)
+  }
+  const handleOuChange = (event: SelectChangeEvent) => {
+    if (event.target.value) {
+      setOuChoice(event.target.value)
+      setValue('orgunit', parseInt(event.target.value, 10))
+    }
+  }
+  // Functions for menu items
+  const rolesToItem = (roleType: RoleTypeData) => (
+    <MenuItem key={roleType.id.toString()} value={roleType.id}>
+      {i18n.language === 'en' ? roleType.name_en : roleType.name_nb}
+    </MenuItem>
+  )
+  const ouToItem = (ou: OuData) => (
+    <MenuItem key={ou.id.toString()} value={ou.id}>
+      {i18n.language === 'en' ? ou.en : ou.nb} ({ou.id})
+    </MenuItem>
+  )
+
+  return (
+    <Page>
+      <SponsorInfoButtons
+        to={`/sponsor/guest/${pid}`}
+        name={`${guest.first} ${guest.last}`}
+      />
+      <h3>{t('guest.headerText')}</h3>
+      <h4>{t('guest.bodyText')}</h4>
+      <form onSubmit={onSubmit}>
+        <Stack spacing={2}>
+          <FormControl>
+            <InputLabel id="ou-select-label">{t('input.roleType')}</InputLabel>
+            <Select
+              id="roletype-select"
+              defaultValue=""
+              value={roleTypeChoice}
+              error={!!errors.type}
+              label={t('input.roleType')}
+              onChange={handleRoleTypeChange}
+            >
+              {roleTypes.sort(roleTypeSort()).map((rt) => rolesToItem(rt))}
+            </Select>
+          </FormControl>
+
+          <FormControl>
+            <InputLabel id="ou-select-label">{t('common:ou')}</InputLabel>
+            <Select
+              labelId="ou-select-label"
+              id="ou-select-label"
+              defaultValue=""
+              value={ouChoice.toString()}
+              label={t('common:ou')}
+              onChange={handleOuChange}
+            >
+              {ous.length > 0 ? (
+                ous
+                  .sort(i18n.language === 'en' ? enSort : nbSort)
+                  .map((ou) => ouToItem(ou))
+              ) : (
+                <></>
+              )}
+            </Select>
+          </FormControl>
+          <Controller
+            name="start_date"
+            control={control}
+            defaultValue={today}
+            render={({ field }) => (
+              <DatePicker
+                mask="____-__-__"
+                label={t('input.roleStartDate')}
+                disabled={!roleTypeChoice}
+                value={field.value}
+                minDate={today}
+                maxDate={todayPlusMaxDays()}
+                inputFormat="yyyy-MM-dd"
+                onChange={(value) => {
+                  field.onChange(value)
+                }}
+                renderInput={(params) => <TextField {...params} />}
+              />
+            )}
+          />
+          <Controller
+            name="end_date"
+            control={control}
+            defaultValue={today}
+            render={({ field }) => (
+              <DatePicker
+                mask="____-__-__"
+                label={t('input.roleEndDate')}
+                disabled={!roleTypeChoice}
+                value={field.value}
+                minDate={today}
+                maxDate={todayPlusMaxDays()}
+                inputFormat="yyyy-MM-dd"
+                onChange={(value) => {
+                  field.onChange(value)
+                }}
+                renderInput={(params) => <TextField {...params} />}
+              />
+            )}
+          />
+
+          <TextField
+            id="contact"
+            label={t('input.contact')}
+            multiline
+            rows={5}
+            {...register('contact_person_unit')}
+          />
+          <TextField
+            id="comments"
+            label={t('input.comment')}
+            multiline
+            rows={5}
+            {...register('comments')}
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                id="available_in_search"
+                {...register('available_in_search')}
+              />
+            }
+            label={t('input.searchable')}
+          />
+          <Button variant="contained" type="submit">
+            {t('button.save')}
+          </Button>
+          <Button component={Link} to={`/sponsor/guest/${pid}`}>
+            {t('button.cancel')}
+          </Button>
+        </Stack>
+      </form>
+    </Page>
+  )
+}
+export default NewGuestRole

frontend/src/routes/sponsor/index.tsx

-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Route } from 'react-router-dom'
 
 import FrontPage from 'routes/sponsor/frontpage'
-import GuestInfo from 'routes/sponsor/guestInfo'
-import GuestRoleInfo from 'routes/sponsor/guestRoleInfo'
 import { FetchedGuest, Guest } from 'interfaces'
 import { parseRole } from 'utils'
+import GuestRoutes from './guest'
 
 function Sponsor() {
   const [guests, setGuests] = useState<Guest[]>([])
@@ -44,11 +43,8 @@ function Sponsor() {
 
   return (
     <>
-      <Route path="/sponsor/guest/:pid/roles/:id">
-        <GuestRoleInfo guests={guests} />
-      </Route>
-      <Route exact path="/sponsor/guest/:pid">
-        <GuestInfo />
+      <Route path="/sponsor/guest/:pid">
+        <GuestRoutes />
       </Route>
       <Route exact path="/sponsor">
         <FrontPage guests={guests} />

frontend/src/routes/sponsor/register/stepPersonForm.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 import { DatePicker } from '@mui/lab'
-import React, {
+import {
   forwardRef,
   Ref,
   useEffect,
@@ -21,7 +21,7 @@ import React, {
 import { useTranslation } from 'react-i18next'
 import { RegisterFormData } from './formData'
 import { PersonFormMethods } from './personFormMethods'
-import useOus, { OuData } from '../../../hooks/useOus'
+import useOus, { enSort, nbSort } from '../../../hooks/useOus'
 import useRoleTypes, { RoleTypeData } from '../../../hooks/useRoleTypes'
 import { isValidEmail } from '../../../utils'
 
@@ -51,26 +51,6 @@ const StepPersonForm = forwardRef(
       return a.name_en.localeCompare(b.name_en)
     }
 
-    const enSort = (a: OuData, b: OuData) => {
-      if (a.en > b.en) {
-        return 1
-      }
-      if (b.en > a.en) {
-        return -1
-      }
-      return 0
-    }
-
-    const nbSort = (a: OuData, b: OuData) => {
-      if (a.nb > b.nb) {
-        return 1
-      }
-      if (b.nb > a.nb) {
-        return -1
-      }
-      return 0
-    }
-
     const submit: SubmitHandler<RegisterFormData> = (data) => {
       nextHandler(data)
     }

frontend/src/routes/sponsor/register/stepRegistration.tsx

@@ -71,7 +71,7 @@ export default function StepRegistration() {
             ? null
             : format(formData.role_end as Date, 'yyyy-MM-dd'),
         comments: formData.comment,
-        orgunit_id: formData.ou_id,
+        orgunit: formData.ou_id,
       },
     }
 

greg/api/serializers/person.py

@@ -15,8 +15,8 @@ class RoleSerializer(serializers.ModelSerializer):
             "id",
             "start_date",
             "end_date",
-            "sponsor_id",
-            "orgunit_id",
+            "sponsor",
+            "orgunit",
             "created",
             "updated",
             "type",

greg/migrations/0011_role_remove_id_suffix.py

+# Generated by Django 3.2.8 on 2021-10-26 14:43
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('greg', '0010_roletype_max_days'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='role',
+            old_name='orgunit_id',
+            new_name='orgunit',
+        ),
+        migrations.RenameField(
+            model_name='role',
+            old_name='sponsor_id',
+            new_name='sponsor',
+        ),
+    ]

greg/models.py

@@ -203,7 +203,7 @@ class Role(BaseModel):
     type = models.ForeignKey(
         "RoleType", on_delete=models.PROTECT, related_name="persons"
     )
-    orgunit_id = models.ForeignKey(
+    orgunit = models.ForeignKey(
         "OrganizationalUnit", on_delete=models.PROTECT, related_name="unit_person_role"
     )
     # The start date can be null for people that are already
@@ -213,7 +213,7 @@ class Role(BaseModel):
     contact_person_unit = models.TextField(blank=True)
     comments = models.TextField(blank=True)
     available_in_search = models.BooleanField(default=False)
-    sponsor_id = models.ForeignKey(
+    sponsor = models.ForeignKey(
         "Sponsor", on_delete=models.PROTECT, related_name="sponsor_role"
     )
 

greg/tests/api/test_person.py

@@ -55,8 +55,8 @@ def role_data_guest(
         "type": "Test Guest",
         "start_date": "2021-06-10",
         "end_date": "2021-08-10",
-        "sponsor_id": sponsor_bar.id,
-        "orgunit_id": unit_foo.id,
+        "sponsor": sponsor_bar.id,
+        "orgunit": unit_foo.id,
     }
 
 
@@ -131,8 +131,8 @@ def test_add_role(
         "type": "visiting_professor",
         "start_date": "2021-06-10",
         "end_date": "2021-08-10",
-        "sponsor_id": "1",
-        "orgunit_id": "1",
+        "sponsor": "1",
+        "orgunit": "1",
     }
     response = client.post(url, role_data)
 
@@ -425,8 +425,8 @@ def test_add_duplicate_role_fails(client, person_foo: Person, role_person_foo):
         "type": role_person_foo.type.identifier,
         "start_date": role_person_foo.start_date,
         "end_date": role_person_foo.end_date,
-        "sponsor_id": role_person_foo.sponsor_id.id,
-        "orgunit_id": role_person_foo.unit_id,
+        "sponsor": role_person_foo.sponsor.id,
+        "orgunit": role_person_foo.unit_id,
     }
     response = client.post(url, role_data)
     # If the role cannot be create the return code is 400
@@ -453,8 +453,8 @@ def test_filter_active_includes_person_with_active_role(
         person=person_foo,
         type=role_type_test_guest,
         end_date=date_today + datetime.timedelta(days=1),
-        sponsor_id=sponsor_guy,
-        orgunit_id=unit_foo,
+        sponsor=sponsor_guy,
+        orgunit=unit_foo,
     )
 
     url = reverse("v1:person-list")
@@ -491,8 +491,8 @@ def test_filter_active_value_false(
         person=person_foo,
         type=role_type_test_guest,
         end_date=date_today - datetime.timedelta(days=1),
-        sponsor_id=sponsor_guy,
-        orgunit_id=unit_foo,
+        sponsor=sponsor_guy,
+        orgunit=unit_foo,
     )
 
     url = reverse("v1:person-list")

greg/tests/conftest.py

@@ -152,8 +152,8 @@ def role_person_foo(
         type=role_type_test_guest,
         start_date="2021-08-02",
         end_date="2021-08-06",
-        sponsor_id=sponsor_guy,
-        orgunit_id=unit_foo,
+        sponsor=sponsor_guy,
+        orgunit=unit_foo,
     )
     return Role.objects.get(id=role.id)
 

greg/tests/models/test_person.py

@@ -98,14 +98,14 @@ def test_add_multiple_roles_to_person(
     role_with(
         person=person,
         type=role_type_foo,
-        orgunit_id=ou,
-        sponsor_id=Sponsor.objects.create(feide_id="foosponsor@uio.no"),
+        orgunit=ou,
+        sponsor=Sponsor.objects.create(feide_id="foosponsor@uio.no"),
     )
     role_with(
         person=person,
         type=role_type_bar,
-        orgunit_id=ou,
-        sponsor_id=Sponsor.objects.create(feide_id="barsponsor@uio.no"),
+        orgunit=ou,
+        sponsor=Sponsor.objects.create(feide_id="barsponsor@uio.no"),
     )
     assert person.roles.count() == 2
 

greg/tests/test_expire_role.py

@@ -33,12 +33,12 @@ def role(
     return Role.objects.create(
         person=person,
         type=role_type_bar,
-        orgunit_id=unit_foo,
+        orgunit=unit_foo,
         start_date="2020-03-05",
         end_date=datetime.today() + timedelta(days=30),
         contact_person_unit="Contact Person",
         available_in_search=True,
-        sponsor_id=sponsor_guy,
+        sponsor=sponsor_guy,
     )