Allow admins to add transactions to users

webclient/src/Admin.js

@@ -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;

webclient/src/InstructorClasses.js

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

webclient/src/Members.js

@@ -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>

webclient/src/Transactions.js

@@ -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>
 	);