tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Break admin member page into pages

Browse Source
This commit is contained in:
Tanner Collin 2023-10-12 20:10:48 +09:00
parent 2c094f763b
commit 46d0e78d3c
1 changed files with 89 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
webclient/src/Members.js
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useReducer } from 'react'; import React, { useState, useEffect, useReducer } from 'react';
import { Link, useParams, useHistory } from 'react-router-dom'; import { Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
import './light.css'; import './light.css';
import { Button, Container, Dropdown, Grid, Header, Icon, Image, Input, Item, Segment, Table } from 'semantic-ui-react'; import { Button, Container, Dropdown, Grid, Header, Icon, Image, Input, Item, Segment, Table } from 'semantic-ui-react';
import { statusColor, isAdmin, isInstructor, BasicTable, staticUrl, requester } from './utils.js'; import { statusColor, isAdmin, isInstructor, BasicTable, staticUrl, requester } from './utils.js';
@ -334,75 +334,103 @@ export function MemberDetail(props) {
<div> <div>
<Header size='large'>{member.preferred_name} {member.last_name}</Header> <Header size='large'>{member.preferred_name} {member.last_name}</Header>
<Grid stackable columns={2}> {isAdmin(user) &&
<Grid.Column width={isAdmin(user) ? 8 : 5}> <p>Admin: {' '}
<p> <Link to={'/members/'+member.id}>Profile</Link>{' - '}
<Image rounded size='medium' src={photo ? staticUrl + '/' + photo : '/nophoto.png'} /> <Link to={'/members/'+member.id+'/details'}>Details</Link>{' - '}
</p> <Link to={'/members/'+member.id+'/cards'}>Cards</Link>{' - '}
<Link to={'/members/'+member.id+'/lockouts'}>Lockouts</Link>{' - '}
<Link to={'/members/'+member.id+'/training'}>Training</Link>{' - '}
<Link to={'/members/'+member.id+'/transactions'}>Transactions</Link>
</p>
}
{isAdmin(user) ? <Switch>
<AdminMemberInfo result={result} refreshResult={refreshResult} {...props} /> {isAdmin(user) && <Route path='/members/:id/details'>
: <Grid stackable columns={2}>
<React.Fragment> <Grid.Column width={8}>
<BasicTable> <AdminMemberInfo result={result} refreshResult={refreshResult} {...props} />
<Table.Body> </Grid.Column>
<Table.Row>
<Table.Cell>Status:</Table.Cell>
<Table.Cell>
<Icon name='circle' color={statusColor[member.status]} />
{member.status || 'Unknown'}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Joined:</Table.Cell>
<Table.Cell>{member.application_date || 'Unknown'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Public Bio:</Table.Cell>
</Table.Row>
</Table.Body>
</BasicTable>
<p className='bio-paragraph'> <Grid.Column width={8}>
{member.public_bio || 'None yet.'} <Segment padded>
</p> <AdminMemberForm result={result} refreshResult={refreshResult} {...props} />
{ !isMe && !isSponsoring && <Button onClick={ sponsorMember(true) }>Vouch for { member.preferred_name }</Button> } </Segment>
{ !isMe && isSponsoring && <Button onClick={ sponsorMember(false) }>Revoke guarantee</Button> }
</React.Fragment>
}
</Grid.Column>
<Grid.Column width={isAdmin(user) ? 8 : 11}> <Segment padded>
{isInstructor(user) && !isAdmin(user) && <Segment padded> <AdminMemberPause result={result} refreshResult={refreshResult} {...props} />
</Segment>
</Grid.Column>
</Grid>
</Route>}
{isAdmin(user) && <Route path='/members/:id/cards'>
<Segment padded>
<AdminMemberCards result={result} refreshResult={refreshResult} {...props} />
</Segment>
</Route>}
{isAdmin(user) && <Route path='/members/:id/lockouts'>
<Segment padded>
<AdminMemberCertifications result={result} refreshResult={refreshResult} {...props} />
</Segment>
</Route>}
{isAdmin(user) && <Route path='/members/:id/training'>
<Segment padded>
<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} /> <AdminMemberTraining result={result} refreshResult={refreshResult} {...props} />
</Segment>} </Segment>
</Route>}
{isAdmin(user) && <Segment padded> {isAdmin(user) && <Route path='/members/:id/transactions'>
<AdminMemberForm result={result} refreshResult={refreshResult} {...props} /> <Segment padded>
</Segment>} <AdminMemberTransactions result={result} refreshResult={refreshResult} {...props} />
</Segment>
</Route>}
{isAdmin(user) && <Segment padded> <Route path='/members/:id'>
<AdminMemberPause result={result} refreshResult={refreshResult} {...props} /> <Grid stackable columns={2}>
</Segment>} <Grid.Column width={5}>
</Grid.Column> <p>
</Grid> <Image rounded size='medium' src={photo ? staticUrl + '/' + photo : '/nophoto.png'} />
</p>
{isAdmin(user) && <Segment padded> <>
<AdminMemberCards result={result} refreshResult={refreshResult} {...props} /> <BasicTable>
</Segment>} <Table.Body>
<Table.Row>
<Table.Cell>Status:</Table.Cell>
<Table.Cell>
<Icon name='circle' color={statusColor[member.status]} />
{member.status || 'Unknown'}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Joined:</Table.Cell>
<Table.Cell>{member.application_date || 'Unknown'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Public Bio:</Table.Cell>
</Table.Row>
</Table.Body>
</BasicTable>
{isAdmin(user) && <Segment padded> <p className='bio-paragraph'>
<AdminMemberCertifications result={result} refreshResult={refreshResult} {...props} /> {member.public_bio || 'None yet.'}
</Segment>} </p>
{ !isMe && !isSponsoring && <Button onClick={ sponsorMember(true) }>Vouch for { member.preferred_name }</Button> }
{isAdmin(user) && <Segment padded> { !isMe && isSponsoring && <Button onClick={ sponsorMember(false) }>Revoke guarantee</Button> }
<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} /> </>
</Segment>} </Grid.Column>
{isAdmin(user) && <Segment padded>
<AdminMemberTransactions result={result} refreshResult={refreshResult} {...props} />
</Segment>}
<Grid.Column width={11}>
{isInstructor(user) && !isAdmin(user) && <Segment padded>
<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} />
</Segment>}
</Grid.Column>
</Grid>
</Route>
</Switch>
</div> </div>
: :
<p>Loading...</p> <p>Loading...</p>