Add user's training to webclient
This commit is contained in:
parent
42f3594e38
commit
b1ff647c6e
|
@ -6,6 +6,7 @@
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.3.2",
|
"@testing-library/react": "^9.3.2",
|
||||||
"@testing-library/user-event": "^7.1.2",
|
"@testing-library/user-event": "^7.1.2",
|
||||||
|
"moment": "^2.24.0",
|
||||||
"react": "^16.12.0",
|
"react": "^16.12.0",
|
||||||
"react-dom": "^16.12.0",
|
"react-dom": "^16.12.0",
|
||||||
"react-router-dom": "^5.1.2",
|
"react-router-dom": "^5.1.2",
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { requester } from './utils.js';
|
||||||
import { Home } from './Home.js';
|
import { Home } from './Home.js';
|
||||||
import { Transactions, TransactionDetail } from './Transactions.js';
|
import { Transactions, TransactionDetail } from './Transactions.js';
|
||||||
import { Cards } from './Cards.js';
|
import { Cards } from './Cards.js';
|
||||||
|
import { Training } from './Training.js';
|
||||||
import { NotFound, PleaseLogin } from './Misc.js';
|
import { NotFound, PleaseLogin } from './Misc.js';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
@ -41,9 +42,6 @@ function App() {
|
||||||
setUserCache(false);
|
setUserCache(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
let menuName = user && user.member && user.member.preferred_name || 'Profile';
|
|
||||||
menuName = menuName.length > 7 ? 'Profile' : menuName;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<Container>
|
<Container>
|
||||||
|
@ -60,13 +58,18 @@ function App() {
|
||||||
to='/'
|
to='/'
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Dropdown item text={menuName} id='ps-menu'>
|
<Dropdown item text='Profile' id='ps-menu'>
|
||||||
<Dropdown.Menu>
|
<Dropdown.Menu>
|
||||||
<Dropdown.Item
|
<Dropdown.Item
|
||||||
content='Transactions'
|
content='Transactions'
|
||||||
as={Link}
|
as={Link}
|
||||||
to='/transactions'
|
to='/transactions'
|
||||||
/>
|
/>
|
||||||
|
<Dropdown.Item
|
||||||
|
content='Training'
|
||||||
|
as={Link}
|
||||||
|
to='/training'
|
||||||
|
/>
|
||||||
<Dropdown.Item
|
<Dropdown.Item
|
||||||
content='Cards'
|
content='Cards'
|
||||||
as={Link}
|
as={Link}
|
||||||
|
@ -115,6 +118,10 @@ function App() {
|
||||||
<Cards user={user} />
|
<Cards user={user} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
|
<Route path='/training'>
|
||||||
|
<Training user={user} />
|
||||||
|
</Route>
|
||||||
|
|
||||||
<Route path='/:page'>
|
<Route path='/:page'>
|
||||||
<NotFound />
|
<NotFound />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
|
@ -142,7 +142,9 @@ function MemberInfo(props) {
|
||||||
{lastTrans.length ?
|
{lastTrans.length ?
|
||||||
lastTrans.map((x, i) =>
|
lastTrans.map((x, i) =>
|
||||||
<Table.Row key={i}>
|
<Table.Row key={i}>
|
||||||
<Table.Cell>{x.date}</Table.Cell>
|
<Table.Cell>
|
||||||
|
<Link to={'/transactions/'+x.id}>{x.date}</Link>
|
||||||
|
</Table.Cell>
|
||||||
<Table.Cell>{x.account_type}</Table.Cell>
|
<Table.Cell>{x.account_type}</Table.Cell>
|
||||||
<Table.Cell>${x.amount}</Table.Cell>
|
<Table.Cell>${x.amount}</Table.Cell>
|
||||||
</Table.Row>
|
</Table.Row>
|
||||||
|
|
49
webclient/src/Training.js
Normal file
49
webclient/src/Training.js
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
|
||||||
|
import './light.css';
|
||||||
|
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { requester } from './utils.js';
|
||||||
|
import { NotFound, PleaseLogin } from './Misc.js';
|
||||||
|
|
||||||
|
export function Training(props) {
|
||||||
|
const { user } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<Header size='large'>Training</Header>
|
||||||
|
|
||||||
|
{user.training.length ?
|
||||||
|
<Table basic='very'>
|
||||||
|
<Table.Header>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.HeaderCell>Course / Event Name</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell>Class Date</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell>Status</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell>Instructor</Table.HeaderCell>
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
|
||||||
|
<Table.Body>
|
||||||
|
{user.training.map((x, i) =>
|
||||||
|
<Table.Row key={i}>
|
||||||
|
<Table.Cell>
|
||||||
|
<Link to={'/courses/'+x.session.course.id}>{x.session.course.name}</Link>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>
|
||||||
|
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>{x.attendance_status}</Table.Cell>
|
||||||
|
<Table.Cell>{x.session.old_instructor}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
)}
|
||||||
|
</Table.Body>
|
||||||
|
</Table>
|
||||||
|
:
|
||||||
|
<p>No training yet! Sign up for a course to take a class.</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -17,7 +17,6 @@ export function Transactions(props) {
|
||||||
<Table.Header>
|
<Table.Header>
|
||||||
<Table.Row>
|
<Table.Row>
|
||||||
<Table.HeaderCell>Date</Table.HeaderCell>
|
<Table.HeaderCell>Date</Table.HeaderCell>
|
||||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
|
||||||
<Table.HeaderCell>Amount</Table.HeaderCell>
|
<Table.HeaderCell>Amount</Table.HeaderCell>
|
||||||
<Table.HeaderCell>Account</Table.HeaderCell>
|
<Table.HeaderCell>Account</Table.HeaderCell>
|
||||||
<Table.HeaderCell>Memo</Table.HeaderCell>
|
<Table.HeaderCell>Memo</Table.HeaderCell>
|
||||||
|
@ -28,8 +27,9 @@ export function Transactions(props) {
|
||||||
{user.transactions.length ?
|
{user.transactions.length ?
|
||||||
user.transactions.slice().reverse().map((x, i) =>
|
user.transactions.slice().reverse().map((x, i) =>
|
||||||
<Table.Row key={i}>
|
<Table.Row key={i}>
|
||||||
<Table.Cell>{x.date}</Table.Cell>
|
<Table.Cell>
|
||||||
<Table.Cell><Link to={'/transactions/'+x.id}>{x.id}</Link></Table.Cell>
|
<Link to={'/transactions/'+x.id}>{x.date}</Link>
|
||||||
|
</Table.Cell>
|
||||||
<Table.Cell>${x.amount}</Table.Cell>
|
<Table.Cell>${x.amount}</Table.Cell>
|
||||||
<Table.Cell>{x.account_type}</Table.Cell>
|
<Table.Cell>{x.account_type}</Table.Cell>
|
||||||
<Table.Cell>{x.memo}</Table.Cell>
|
<Table.Cell>{x.memo}</Table.Cell>
|
||||||
|
|
|
@ -6618,6 +6618,11 @@ mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
minimist "0.0.8"
|
minimist "0.0.8"
|
||||||
|
|
||||||
|
moment@^2.24.0:
|
||||||
|
version "2.24.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||||
|
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
|
||||||
|
|
||||||
move-concurrently@^1.0.1:
|
move-concurrently@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
|
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user