From 1e5250eb706233bf244b47b6d4c6f084e0776f34 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Thu, 23 Jul 2020 00:09:44 +0000 Subject: [PATCH] Add printable transaction receipt --- webclient/src/Transactions.js | 162 +++++++++++++++++++++------------- 1 file changed, 100 insertions(+), 62 deletions(-) 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} + />