diff --git a/webclient/src/Transactions.js b/webclient/src/Transactions.js
index 2f30ef9..8b6849b 100644
--- a/webclient/src/Transactions.js
+++ b/webclient/src/Transactions.js
@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import ReactToPrint from 'react-to-print';
import './light.css';
-import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { MembersDropdown } from './Members.js';
import { isAdmin, BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
@@ -308,12 +309,101 @@ export function Transactions(props) {
);
};
+class TransactionTable extends React.Component {
+ render() {
+ const transaction = this.props.transaction;
+ const user = this.props.user;
+
+ return (
+
+
+
+ Member:
+ {isAdmin(user) && transaction.member_id ?
+
+
+ {transaction.member_name}
+
+
+ :
+ {transaction.member_name}
+ }
+
+
+ Number:
+ {transaction.id}
+
+
+ Date:
+ {transaction.date}
+
+
+ Amount:
+ ${transaction.amount}
+
+
+ Category:
+ {transaction.category}
+
+
+ Account:
+ {transaction.account_type}
+
+
+ Payment Method:
+ {transaction.payment_method}
+
+
+ Info Source:
+ {transaction.info_source}
+
+
+ Reference:
+ {transaction.reference_number}
+
+
+ Memo:
+ {transaction.memo}
+
+
+ {!!transaction.report_type &&
+ Report Type:
+ {transaction.report_type}
+ }
+ {!!transaction.report_memo &&
+ Report Memo:
+ {transaction.report_memo}
+ }
+
+
+ );
+ }
+}
+
+class TransactionPrint extends React.Component {
+ render() {
+ const transaction = this.props.transaction;
+ const user = this.props.user;
+
+ return (
+
+
Protospace Transaction Receipt
+
Calgary Protospace Ltd.
+
Bay 108, 1530 - 27th Ave NE
Calgary, AB T2E 7S6
protospace.ca
+
+
Thank you!
+
+ );
+ }
+}
+
export function TransactionDetail(props) {
const { token, user } = props;
const { id } = useParams();
const ownTransaction = user.transactions.find(x => x.id == id);
const [transaction, setTransaction] = useState(ownTransaction || false);
const [error, setError] = useState(false);
+ const printRef = useRef();
useEffect(() => {
requester('/transactions/'+id+'/', 'GET', token)
@@ -336,67 +426,15 @@ export function TransactionDetail(props) {
-
-
-
- Member:
- {isAdmin(user) && transaction.member_id ?
-
-
- {transaction.member_name}
-
-
- :
- {transaction.member_name}
- }
-
-
- ID:
- {transaction.id}
-
-
- Date:
- {transaction.date}
-
-
- Amount:
- ${transaction.amount}
-
-
- Category:
- {transaction.category}
-
-
- Account:
- {transaction.account_type}
-
-
- Payment Method
- {transaction.payment_method}
-
-
- Info Source:
- {transaction.info_source}
-
-
- Reference:
- {transaction.reference_number}
-
-
- Memo:
- {transaction.memo}
-
+
- {!!transaction.report_type &&
- Report Type:
- {transaction.report_type}
- }
- {!!transaction.report_memo &&
- Report Memo:
- {transaction.report_memo}
- }
-
-
+
+
+
+ }
+ content={() => printRef.current}
+ />