From d0605f0a5de5192cc4e91558777dfeacec2a60d5 Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Tue, 12 Oct 2021 15:15:18 +0200
Subject: [PATCH] GREG-82: Adding buttons to top of sponsor page
---
.../routes/components/sponsorGuestButtons.tsx | 6 +-
frontend/src/routes/index.tsx | 4 +-
frontend/src/routes/register/index.tsx | 3 +-
.../src/routes/sponsor/frontpage/index.tsx | 152 ++++++++++--------
4 files changed, 91 insertions(+), 74 deletions(-)
diff --git a/frontend/src/routes/components/sponsorGuestButtons.tsx b/frontend/src/routes/components/sponsorGuestButtons.tsx
index ad9ad019..cadf79d8 100644
--- a/frontend/src/routes/components/sponsorGuestButtons.tsx
+++ b/frontend/src/routes/components/sponsorGuestButtons.tsx
@@ -3,7 +3,7 @@ import { Box, IconButton, Theme } from '@mui/material'
import PersonAddIcon from '@mui/icons-material/PersonAdd'
import React from 'react'
import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
interface SponsorGuestButtonsProps {
yourGuestsActive?: boolean,
@@ -16,7 +16,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
const history = useHistory()
const goToOverview = () => {
- history.push('/')
+ history.push('/sponsor')
}
const goToRegister = () => {
@@ -24,7 +24,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
}
return (
- <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly' }}>
+ <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', marginBottom: '2rem' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<IconButton onClick={goToOverview}>
<PersonIcon
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 8a6b6b8d..8ecd1892 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -51,9 +51,9 @@ export default function App() {
<ProtectedRoute path="/sponsor">
<Sponsor />
</ProtectedRoute>
- <Route path="/register">
+ <ProtectedRoute path="/register">
<Register />
- </Route>
+ </ProtectedRoute>
<Route path="/invite/:id" component={InviteLink} />
<Route path="/invite/" component={Invite} />
<Route>
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 73b356be..e7d1053e 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -77,9 +77,8 @@ export default function StepRegistration() {
return (
<Page>
<SponsorGuestButtons registerNewGuestActive />
-
{/* Current page in wizard */}
- <Box sx={{ width: '100%', marginTop: '2rem' }}>
+ <Box sx={{ width: '100%' }}>
{activeStep === REGISTER_STEP && (
<StepPersonForm
nextHandler={handleForwardFromRegister}
diff --git a/frontend/src/routes/sponsor/frontpage/index.tsx b/frontend/src/routes/sponsor/frontpage/index.tsx
index 43057ae2..6492f737 100644
--- a/frontend/src/routes/sponsor/frontpage/index.tsx
+++ b/frontend/src/routes/sponsor/frontpage/index.tsx
@@ -6,12 +6,13 @@ import {
TableContainer,
TableHead,
TableRow,
- Paper,
+ Paper, Accordion, AccordionSummary, AccordionDetails,
} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import Page from 'components/page'
import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import SponsorGuestButtons from '../../components/sponsorGuestButtons'
type PersonInfo = {
name: string
@@ -50,24 +51,26 @@ const PersonLine = ({ person }: PersonLineProps) => {
key={person.name}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
- <TableCell component="th" scope="row">
+ <TableCell component='th' scope='row'>
{person.name}
</TableCell>
- <TableCell align="left">
+ <TableCell align='left'>
{i18n.language === 'en' ? person.role_en : person.role_nb}
</TableCell>
- <TableCell align="left">{person.period}</TableCell>
- <TableCell align="left">
+ <TableCell align='left'>{person.period}</TableCell>
+ <TableCell align='left'>
{i18n.language === 'en' ? person.ou_en : person.ou_nb}
</TableCell>
- <TableCell align="left">
- <button type="button">{t('common:details')}</button>
+ <TableCell align='left'>
+ <button type='button'>{t('common:details')}</button>
</TableCell>
</TableRow>
)
}
const ActiveGuests = ({ persons }: GuestProps) => {
+ const [activeExpanded, setActiveExpanded] = useState(false)
+
// Only show active people
let guests = persons.length > 0 ? persons : []
if (guests.length > 0) {
@@ -75,38 +78,46 @@ const ActiveGuests = ({ persons }: GuestProps) => {
}
const [t] = useTranslation(['common'])
return (
- <>
- <h1>{t('common:activeGuests')}</h1>
- <p>{t('common:activeGuestsDescription')}</p>
- <TableContainer component={Paper}>
- <Table sx={{ minWidth: 650 }} aria-label="simple table">
- <TableHead>
- <TableRow>
- <TableCell>{t('common:name')}</TableCell>
- <TableCell align="left">{t('common:role')}</TableCell>
- <TableCell align="left">{t('common:period')}</TableCell>
- <TableCell align="left">{t('common:ou')}</TableCell>
- <TableCell align="left">{t('common:choice')}</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {guests.map((person) => (
- <PersonLine person={person} />
- ))}
-
- <TableRow>
- <TableCell>
- {guests.length > 0 ? '' : t('common:noActiveGuests')}
- </TableCell>
- </TableRow>
- </TableBody>
- </Table>
- </TableContainer>
- </>
+ <Accordion expanded={activeExpanded} onChange={() => {
+ setActiveExpanded(!activeExpanded)
+ }}>
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+ <h4>{t('common:activeGuests')}</h4>
+ </AccordionSummary>
+ <AccordionDetails>
+ <p>{t('common:activeGuestsDescription')}</p>
+ <TableContainer component={Paper}>
+ <Table sx={{ minWidth: 650 }} aria-label='simple table'>
+ <TableHead sx={{ backgroundColor: 'primary.light' }}>
+ <TableRow>
+ <TableCell>{t('common:name')}</TableCell>
+ <TableCell align='left'>{t('common:role')}</TableCell>
+ <TableCell align='left'>{t('common:period')}</TableCell>
+ <TableCell align='left'>{t('common:ou')}</TableCell>
+ <TableCell align='left'>{t('common:choice')}</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {guests.map((person) => (
+ <PersonLine person={person} />
+ ))}
+
+ <TableRow>
+ <TableCell>
+ {guests.length > 0 ? '' : t('common:noActiveGuests')}
+ </TableCell>
+ </TableRow>
+ </TableBody>
+ </Table>
+ </TableContainer>
+ </AccordionDetails>
+ </Accordion>
)
}
const WaitingGuests = ({ persons }: GuestProps) => {
+ const [waitingExpanded, setWaitingExpanded] = useState(false)
+
// Only show non-active people
let guests = persons.length > 0 ? persons : []
if (guests.length > 0) {
@@ -115,34 +126,42 @@ const WaitingGuests = ({ persons }: GuestProps) => {
const [t] = useTranslation(['common'])
return (
- <>
- <h1>{t('common:waitingGuests')}</h1>
- <p>{t('common:waitingGuestsDescription')}</p>
-
- <TableContainer component={Paper}>
- <Table sx={{ minWidth: 650 }} aria-label="simple table">
- <TableHead>
- <TableRow>
- <TableCell>{t('common:name')}</TableCell>
- <TableCell align="left">{t('common:role')}</TableCell>
- <TableCell align="left">{t('common:period')}</TableCell>
- <TableCell align="left">{t('common:ou')}</TableCell>
- <TableCell align="left">{t('common:choice')}</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {guests.map((person) => (
- <PersonLine person={person} />
- ))}
- <TableRow>
- <TableCell>
- {guests.length > 0 ? '' : t('common:noWaitingGuests')}
- </TableCell>
- </TableRow>
- </TableBody>
- </Table>
- </TableContainer>
- </>
+ <Accordion expanded={waitingExpanded} onChange={() => {
+ setWaitingExpanded(!waitingExpanded)
+ }}
+ sx={{ border: 'none' }}>
+
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+ <h4>{t('common:waitingGuests')}</h4>
+ </AccordionSummary>
+ <AccordionDetails>
+ <p>{t('common:waitingGuestsDescription')}</p>
+
+ <TableContainer component={Paper}>
+ <Table sx={{ minWidth: 650 }} aria-label='simple table'>
+ <TableHead sx={{ backgroundColor: 'primary.light' }}>
+ <TableRow>
+ <TableCell>{t('common:name')}</TableCell>
+ <TableCell align='left'>{t('common:role')}</TableCell>
+ <TableCell align='left'>{t('common:period')}</TableCell>
+ <TableCell align='left'>{t('common:ou')}</TableCell>
+ <TableCell align='left'>{t('common:choice')}</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {guests.map((person) => (
+ <PersonLine person={person} />
+ ))}
+ <TableRow>
+ <TableCell>
+ {guests.length > 0 ? '' : t('common:noWaitingGuests')}
+ </TableCell>
+ </TableRow>
+ </TableBody>
+ </Table>
+ </TableContainer>
+ </AccordionDetails>
+ </Accordion>
)
}
@@ -173,10 +192,9 @@ function FrontPage() {
}, [])
return (
- <Page header="Sponsor front page">
- <Link to="/register">{t('common:registerText')}</Link>
+ <Page>
+ <SponsorGuestButtons yourGuestsActive />
<WaitingGuests persons={persons} />
- <hr className="rounded" />
<ActiveGuests persons={persons} />
</Page>
)
--
GitLab