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;