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

96
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,16 +334,68 @@ 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>
{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>
}
<Switch>
{isAdmin(user) && <Route path='/members/:id/details'>
<Grid stackable columns={2}> <Grid stackable columns={2}>
<Grid.Column width={isAdmin(user) ? 8 : 5}> <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> <p>
<Image rounded size='medium' src={photo ? staticUrl + '/' + photo : '/nophoto.png'} /> <Image rounded size='medium' src={photo ? staticUrl + '/' + photo : '/nophoto.png'} />
</p> </p>
{isAdmin(user) ? <>
<AdminMemberInfo result={result} refreshResult={refreshResult} {...props} />
:
<React.Fragment>
<BasicTable> <BasicTable>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
@ -368,41 +420,17 @@ export function MemberDetail(props) {
</p> </p>
{ !isMe && !isSponsoring && <Button onClick={ sponsorMember(true) }>Vouch for { member.preferred_name }</Button> } { !isMe && !isSponsoring && <Button onClick={ sponsorMember(true) }>Vouch for { member.preferred_name }</Button> }
{ !isMe && isSponsoring && <Button onClick={ sponsorMember(false) }>Revoke guarantee</Button> } { !isMe && isSponsoring && <Button onClick={ sponsorMember(false) }>Revoke guarantee</Button> }
</React.Fragment> </>
}
</Grid.Column> </Grid.Column>
<Grid.Column width={isAdmin(user) ? 8 : 11}> <Grid.Column width={11}>
{isInstructor(user) && !isAdmin(user) && <Segment padded> {isInstructor(user) && !isAdmin(user) && <Segment padded>
<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} /> <AdminMemberTraining result={result} refreshResult={refreshResult} {...props} />
</Segment>} </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.Column>
</Grid> </Grid>
</Route>
{isAdmin(user) && <Segment padded> </Switch>
<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) && <Segment padded>
<AdminMemberTransactions result={result} refreshResult={refreshResult} {...props} />
</Segment>}
</div> </div>
: :
<p>Loading...</p> <p>Loading...</p>