Skip to content
Snippets Groups Projects
Commit d0605f0a authored by Tore.Brede's avatar Tore.Brede
Browse files

GREG-82: Adding buttons to top of sponsor page

parent 687b2a1a
No related branches found
No related tags found
1 merge request!103GREG-82: Style tabs
Hide whitespace changes
Inline Side-by-side
frontend/src/routes/components/sponsorGuestButtons.tsx
+ 3
− 3
View file @ d0605f0a
...@@ -3,7 +3,7 @@ import { Box, IconButton, Theme } from '@mui/material' ...@@ -3,7 +3,7 @@ import { Box, IconButton, Theme } from '@mui/material'
import PersonAddIcon from '@mui/icons-material/PersonAdd' import PersonAddIcon from '@mui/icons-material/PersonAdd'
import React from 'react' import React from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useHistory } from 'react-router-dom' import { Link, useHistory } from 'react-router-dom'
interface SponsorGuestButtonsProps { interface SponsorGuestButtonsProps {
yourGuestsActive?: boolean, yourGuestsActive?: boolean,
...@@ -16,7 +16,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) { ...@@ -16,7 +16,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
const history = useHistory() const history = useHistory()
const goToOverview = () => { const goToOverview = () => {
history.push('/') history.push('/sponsor')
} }
const goToRegister = () => { const goToRegister = () => {
...@@ -24,7 +24,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) { ...@@ -24,7 +24,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
} }
return ( 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' }}> <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<IconButton onClick={goToOverview}> <IconButton onClick={goToOverview}>
<PersonIcon <PersonIcon
......
frontend/src/routes/index.tsx
+ 2
− 2
View file @ d0605f0a
...@@ -51,9 +51,9 @@ export default function App() { ...@@ -51,9 +51,9 @@ export default function App() {
<ProtectedRoute path="/sponsor"> <ProtectedRoute path="/sponsor">
<Sponsor /> <Sponsor />
</ProtectedRoute> </ProtectedRoute>
<Route path="/register"> <ProtectedRoute path="/register">
<Register /> <Register />
</Route> </ProtectedRoute>
<Route path="/invite/:id" component={InviteLink} /> <Route path="/invite/:id" component={InviteLink} />
<Route path="/invite/" component={Invite} /> <Route path="/invite/" component={Invite} />
<Route> <Route>
......
frontend/src/routes/register/index.tsx
+ 1
− 2
View file @ d0605f0a
...@@ -77,9 +77,8 @@ export default function StepRegistration() { ...@@ -77,9 +77,8 @@ export default function StepRegistration() {
return ( return (
<Page> <Page>
<SponsorGuestButtons registerNewGuestActive /> <SponsorGuestButtons registerNewGuestActive />
{/* Current page in wizard */} {/* Current page in wizard */}
<Box sx={{ width: '100%', marginTop: '2rem' }}> <Box sx={{ width: '100%' }}>
{activeStep === REGISTER_STEP && ( {activeStep === REGISTER_STEP && (
<StepPersonForm <StepPersonForm
nextHandler={handleForwardFromRegister} nextHandler={handleForwardFromRegister}
......
frontend/src/routes/sponsor/frontpage/index.tsx
+ 85
− 67
View file @ d0605f0a
...@@ -6,12 +6,13 @@ import { ...@@ -6,12 +6,13 @@ import {
TableContainer, TableContainer,
TableHead, TableHead,
TableRow, TableRow,
Paper, Paper, Accordion, AccordionSummary, AccordionDetails,
} from '@mui/material' } from '@mui/material'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import Page from 'components/page' import Page from 'components/page'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom' import SponsorGuestButtons from '../../components/sponsorGuestButtons'
type PersonInfo = { type PersonInfo = {
name: string name: string
...@@ -50,24 +51,26 @@ const PersonLine = ({ person }: PersonLineProps) => { ...@@ -50,24 +51,26 @@ const PersonLine = ({ person }: PersonLineProps) => {
key={person.name} key={person.name}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
> >
<TableCell component="th" scope="row"> <TableCell component='th' scope='row'>
{person.name} {person.name}
</TableCell> </TableCell>
<TableCell align="left"> <TableCell align='left'>
{i18n.language === 'en' ? person.role_en : person.role_nb} {i18n.language === 'en' ? person.role_en : person.role_nb}
</TableCell> </TableCell>
<TableCell align="left">{person.period}</TableCell> <TableCell align='left'>{person.period}</TableCell>
<TableCell align="left"> <TableCell align='left'>
{i18n.language === 'en' ? person.ou_en : person.ou_nb} {i18n.language === 'en' ? person.ou_en : person.ou_nb}
</TableCell> </TableCell>
<TableCell align="left"> <TableCell align='left'>
<button type="button">{t('common:details')}</button> <button type='button'>{t('common:details')}</button>
</TableCell> </TableCell>
</TableRow> </TableRow>
) )
} }
const ActiveGuests = ({ persons }: GuestProps) => { const ActiveGuests = ({ persons }: GuestProps) => {
const [activeExpanded, setActiveExpanded] = useState(false)
// Only show active people // Only show active people
let guests = persons.length > 0 ? persons : [] let guests = persons.length > 0 ? persons : []
if (guests.length > 0) { if (guests.length > 0) {
...@@ -75,38 +78,46 @@ const ActiveGuests = ({ persons }: GuestProps) => { ...@@ -75,38 +78,46 @@ const ActiveGuests = ({ persons }: GuestProps) => {
} }
const [t] = useTranslation(['common']) const [t] = useTranslation(['common'])
return ( return (
<> <Accordion expanded={activeExpanded} onChange={() => {
<h1>{t('common:activeGuests')}</h1> setActiveExpanded(!activeExpanded)
<p>{t('common:activeGuestsDescription')}</p> }}>
<TableContainer component={Paper}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Table sx={{ minWidth: 650 }} aria-label="simple table"> <h4>{t('common:activeGuests')}</h4>
<TableHead> </AccordionSummary>
<TableRow> <AccordionDetails>
<TableCell>{t('common:name')}</TableCell> <p>{t('common:activeGuestsDescription')}</p>
<TableCell align="left">{t('common:role')}</TableCell> <TableContainer component={Paper}>
<TableCell align="left">{t('common:period')}</TableCell> <Table sx={{ minWidth: 650 }} aria-label='simple table'>
<TableCell align="left">{t('common:ou')}</TableCell> <TableHead sx={{ backgroundColor: 'primary.light' }}>
<TableCell align="left">{t('common:choice')}</TableCell> <TableRow>
</TableRow> <TableCell>{t('common:name')}</TableCell>
</TableHead> <TableCell align='left'>{t('common:role')}</TableCell>
<TableBody> <TableCell align='left'>{t('common:period')}</TableCell>
{guests.map((person) => ( <TableCell align='left'>{t('common:ou')}</TableCell>
<PersonLine person={person} /> <TableCell align='left'>{t('common:choice')}</TableCell>
))} </TableRow>
</TableHead>
<TableRow> <TableBody>
<TableCell> {guests.map((person) => (
{guests.length > 0 ? '' : t('common:noActiveGuests')} <PersonLine person={person} />
</TableCell> ))}
</TableRow>
</TableBody> <TableRow>
</Table> <TableCell>
</TableContainer> {guests.length > 0 ? '' : t('common:noActiveGuests')}
</> </TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</AccordionDetails>
</Accordion>
) )
} }
const WaitingGuests = ({ persons }: GuestProps) => { const WaitingGuests = ({ persons }: GuestProps) => {
const [waitingExpanded, setWaitingExpanded] = useState(false)
// Only show non-active people // Only show non-active people
let guests = persons.length > 0 ? persons : [] let guests = persons.length > 0 ? persons : []
if (guests.length > 0) { if (guests.length > 0) {
...@@ -115,34 +126,42 @@ const WaitingGuests = ({ persons }: GuestProps) => { ...@@ -115,34 +126,42 @@ const WaitingGuests = ({ persons }: GuestProps) => {
const [t] = useTranslation(['common']) const [t] = useTranslation(['common'])
return ( return (
<> <Accordion expanded={waitingExpanded} onChange={() => {
<h1>{t('common:waitingGuests')}</h1> setWaitingExpanded(!waitingExpanded)
<p>{t('common:waitingGuestsDescription')}</p> }}
sx={{ border: 'none' }}>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table"> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<TableHead> <h4>{t('common:waitingGuests')}</h4>
<TableRow> </AccordionSummary>
<TableCell>{t('common:name')}</TableCell> <AccordionDetails>
<TableCell align="left">{t('common:role')}</TableCell> <p>{t('common:waitingGuestsDescription')}</p>
<TableCell align="left">{t('common:period')}</TableCell>
<TableCell align="left">{t('common:ou')}</TableCell> <TableContainer component={Paper}>
<TableCell align="left">{t('common:choice')}</TableCell> <Table sx={{ minWidth: 650 }} aria-label='simple table'>
</TableRow> <TableHead sx={{ backgroundColor: 'primary.light' }}>
</TableHead> <TableRow>
<TableBody> <TableCell>{t('common:name')}</TableCell>
{guests.map((person) => ( <TableCell align='left'>{t('common:role')}</TableCell>
<PersonLine person={person} /> <TableCell align='left'>{t('common:period')}</TableCell>
))} <TableCell align='left'>{t('common:ou')}</TableCell>
<TableRow> <TableCell align='left'>{t('common:choice')}</TableCell>
<TableCell> </TableRow>
{guests.length > 0 ? '' : t('common:noWaitingGuests')} </TableHead>
</TableCell> <TableBody>
</TableRow> {guests.map((person) => (
</TableBody> <PersonLine person={person} />
</Table> ))}
</TableContainer> <TableRow>
</> <TableCell>
{guests.length > 0 ? '' : t('common:noWaitingGuests')}
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</AccordionDetails>
</Accordion>
) )
} }
...@@ -173,10 +192,9 @@ function FrontPage() { ...@@ -173,10 +192,9 @@ function FrontPage() {
}, []) }, [])
return ( return (
<Page header="Sponsor front page"> <Page>
<Link to="/register">{t('common:registerText')}</Link> <SponsorGuestButtons yourGuestsActive />
<WaitingGuests persons={persons} /> <WaitingGuests persons={persons} />
<hr className="rounded" />
<ActiveGuests persons={persons} /> <ActiveGuests persons={persons} />
</Page> </Page>
) )
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment