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

Break admin member page into pages

Browse Source
master
Tanner Collin 7 months ago
parent 2c094f763b
commit 46d0e78d3c
1 changed files with 96 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      webclient/src/Members.js

164
webclient/src/Members.js
Unescape View File

@ -1,5 +1,5 @@
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 { 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';
@ -334,75 +334,103 @@ export function MemberDetail(props) {
<div>
<Header size='large'>{member.preferred_name} {member.last_name}</Header>
<Grid stackable columns={2}>
<Grid.Column width={isAdmin(user) ? 8 : 5}>
<p>
<Image rounded size='medium' src={photo ? staticUrl + '/' + photo : '/nophoto.png'} />
</p>
{isAdmin(user) ?
<AdminMemberInfo result={result} refreshResult={refreshResult} {...props} />
:
<React.Fragment>
<BasicTable>
<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>
<p className='bio-paragraph'>
{member.public_bio || 'None yet.'}
</p>
{ !isMe && !isSponsoring && <Button onClick={ sponsorMember(true) }>Vouch for { member.preferred_name }</Button> }
{ !isMe && isSponsoring && <Button onClick={ sponsorMember(false) }>Revoke guarantee</Button> }
</React.Fragment>
}
</Grid.Column>
<Grid.Column width={isAdmin(user) ? 8 : 11}>
{isInstructor(user) && !isAdmin(user) && <Segment padded>
<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} />
</Segment>}
{isAdmin(user) && <Segment padded>
<AdminMemberForm result={result} refreshResult={refreshResult} {...props} />
</Segment>}
{isAdmin(user) && <Segment padded>
<AdminMemberPause result={result} refreshResult={refreshResult} {...props} />
</Segment>}
</Grid.Column>
</Grid>
{isAdmin(user) && <Segment padded>
<AdminMemberCards result={result} refreshResult={refreshResult} {...props} />
</Segment>}
{isAdmin(user) && <Segment padded>
<AdminMemberCertifications result={result} refreshResult={refreshResult} {...props} />
</Segment>}
{isAdmin(user) && <Segment padded>
<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} />
</Segment>}
{isAdmin(user) &&
<p>Admin: {' '}
<Link to={'/members/'+member.id}>Profile</Link>{' - '}
<Link to={'/members/'+member.id+'/details'}>Details</Link>{' - '}
<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) && <Segment padded>
<AdminMemberTransactions result={result} refreshResult={refreshResult} {...props} />
</Segment>}
<Switch>
{isAdmin(user) && <Route path='/members/:id/details'>
<Grid stackable columns={2}>
<Grid.Column width={8}>
<AdminMemberInfo result={result} refreshResult={refreshResult} {...props} />
</Grid.Column>
<Grid.Column width={8}>
<Segment padded>
<AdminMemberForm result={result} refreshResult={refreshResult} {...props} />
</Segment>
<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} />
</Segment>
</Route>}
{isAdmin(user) && <Route path='/members/:id/transactions'>
<Segment padded>
<AdminMemberTransactions result={result} refreshResult={refreshResult} {...props} />
</Segment>
</Route>}
<Route path='/members/:id'>
<Grid stackable columns={2}>
<Grid.Column width={5}>
<p>
<Image rounded size='medium' src={photo ? staticUrl + '/' + photo : '/nophoto.png'} />
</p>
<>
<BasicTable>
<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>
<p className='bio-paragraph'>
{member.public_bio || 'None yet.'}
</p>
{ !isMe && !isSponsoring && <Button onClick={ sponsorMember(true) }>Vouch for { member.preferred_name }</Button> }
{ !isMe && isSponsoring && <Button onClick={ sponsorMember(false) }>Revoke guarantee</Button> }
</>
</Grid.Column>
<Grid.Column width={11}>
{isInstructor(user) && !isAdmin(user) && <Segment padded>
<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} />
</Segment>}
</Grid.Column>
</Grid>
</Route>
</Switch>
</div>
:
<p>Loading...</p>

Write Preview
Loading…
Cancel
Save