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

Allow admins to add transactions to users

Browse Source
This commit is contained in:
Tanner Collin 2020-01-18 04:47:54 +00:00
parent 6a7f409986
commit 3755969ead
4 changed files with 105 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
webclient/src/Admin.js
View File

@ -1,8 +1,71 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
import './light.css';
import { Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment';
import { BasicTable, staticUrl, requester } from './utils.js';
import { TransactionList, TransactionEditor } from './Transactions.js';
export function AdminTransactions(props) {
const { token, result, refreshResult } = props;
const transactions = result.transactions;
const [open, setOpen] = useState(false);
const [input, setInput] = useState({ date: moment().format('YYYY-MM-DD'), info_source: 'Web' });
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const { id } = useParams();
const handleSubmit = (e) => {
setLoading(true);
setSuccess(false);
const data = { ...input, member_id: id };
requester('/transactions/', 'POST', token, data)
.then(res => {
setSuccess(res.id);
setInput({});
setLoading(false);
setError(false);
refreshResult();
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
<div>
<Header size='medium'>Edit Member Transactions</Header>
<Form onSubmit={handleSubmit}>
<Header size='small'>Add a Transaction</Header>
<TransactionEditor input={input} setInput={setInput} error={error} />
{success && <p>Added! <Link to={'/transactions/'+success}>View the transaction.</Link></p>}
<Form.Button loading={loading} error={error.non_field_errors}>
Submit
</Form.Button>
</Form>
<Header size='small'>Current Transactions</Header>
{transactions.length ?
open ?
<TransactionList transactions={transactions} />
:
<Button onClick={() => setOpen(true)}>
View / Edit Transactions
</Button>
:
<p>None</p>
}
</div>
);
};
function AdminCardDetail(props) {
const { token, result, card } = props;

1
webclient/src/InstructorClasses.js
View File

@ -245,4 +245,3 @@ export function InstructorClassList(props) {
</div>
);
};

6
webclient/src/Members.js
View File

@ -4,7 +4,7 @@ import './light.css';
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { isAdmin, BasicTable, staticUrl, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
import { AdminMemberInfo, AdminMemberForm, AdminMemberCards } from './Admin.js';
import { AdminMemberInfo, AdminMemberForm, AdminMemberCards, AdminTransactions } from './Admin.js';
export function Members(props) {
const [response, setResponse] = useState(false);
@ -134,6 +134,10 @@ export function MemberDetail(props) {
<AdminMemberCards result={result} refreshResult={refreshResult} {...props} />
</Segment>}
{isAdmin(user) && <Segment padded>
<AdminTransactions result={result} refreshResult={refreshResult} {...props} />
</Segment>}
</div>
:
<p>Loading...</p>

64
webclient/src/Transactions.js
View File

@ -5,7 +5,7 @@ import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Me
import { isAdmin, BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
function TransactionEditor(props) {
export function TransactionEditor(props) {
const { input, setInput, error } = props;
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
@ -178,6 +178,40 @@ function EditTransaction(props) {
);
};
export function TransactionList(props) {
const { transactions } = props;
return (
<Table basic='very'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Date</Table.HeaderCell>
<Table.HeaderCell>Amount</Table.HeaderCell>
<Table.HeaderCell>Account</Table.HeaderCell>
<Table.HeaderCell>Memo</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{transactions.length ?
transactions.slice().sort((a, b) => a.date < b.date ? 1 : -1).map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Link to={'/transactions/'+x.id}>{x.date}</Link>
</Table.Cell>
<Table.Cell>${x.amount}</Table.Cell>
<Table.Cell>{x.account_type}</Table.Cell>
<Table.Cell>{x.memo}</Table.Cell>
</Table.Row>
)
:
<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
}
</Table.Body>
</Table>
);
};
export function Transactions(props) {
const { user } = props;
@ -185,33 +219,7 @@ export function Transactions(props) {
<Container>
<Header size='large'>Transactions</Header>
<Table basic='very'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Date</Table.HeaderCell>
<Table.HeaderCell>Amount</Table.HeaderCell>
<Table.HeaderCell>Account</Table.HeaderCell>
<Table.HeaderCell>Memo</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{user.transactions.length ?
user.transactions.slice().reverse().map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Link to={'/transactions/'+x.id}>{x.date}</Link>
</Table.Cell>
<Table.Cell>${x.amount}</Table.Cell>
<Table.Cell>{x.account_type}</Table.Cell>
<Table.Cell>{x.memo}</Table.Cell>
</Table.Row>
)
:
<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
}
</Table.Body>
</Table>
<TransactionList transactions={user.transactions} />
</Container>
);