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

Add printable transaction receipt

Browse Source
This commit is contained in:
Tanner Collin 2020-07-23 00:09:44 +00:00
parent 570c5f2aeb
commit 1e5250eb70
1 changed files with 100 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
webclient/src/Transactions.js
View File

@ -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 { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import ReactToPrint from 'react-to-print';
import './light.css'; 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 { MembersDropdown } from './Members.js';
import { isAdmin, BasicTable, requester } from './utils.js'; import { isAdmin, BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
@ -308,34 +309,12 @@ export function Transactions(props) {
); );
}; };
export function TransactionDetail(props) { class TransactionTable extends React.Component {
const { token, user } = props; render() {
const { id } = useParams(); const transaction = this.props.transaction;
const ownTransaction = user.transactions.find(x => x.id == id); const user = this.props.user;
const [transaction, setTransaction] = useState(ownTransaction || false);
const [error, setError] = useState(false);
useEffect(() => {
requester('/transactions/'+id+'/', 'GET', token)
.then(res => {
setTransaction(res);
setError(false);
})
.catch(err => {
console.log(err);
setError(true);
});
}, [ownTransaction]);
return ( return (
<Container>
{!error ?
transaction ?
<div>
<Header size='large'>Transaction Receipt</Header>
<Grid stackable columns={2}>
<Grid.Column>
<BasicTable> <BasicTable>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
@ -351,7 +330,7 @@ export function TransactionDetail(props) {
} }
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell>ID:</Table.Cell> <Table.Cell>Number:</Table.Cell>
<Table.Cell>{transaction.id}</Table.Cell> <Table.Cell>{transaction.id}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
@ -371,7 +350,7 @@ export function TransactionDetail(props) {
<Table.Cell>{transaction.account_type}</Table.Cell> <Table.Cell>{transaction.account_type}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell>Payment Method</Table.Cell> <Table.Cell>Payment Method:</Table.Cell>
<Table.Cell>{transaction.payment_method}</Table.Cell> <Table.Cell>{transaction.payment_method}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
@ -397,6 +376,65 @@ export function TransactionDetail(props) {
</Table.Row>} </Table.Row>}
</Table.Body> </Table.Body>
</BasicTable> </BasicTable>
);
}
}
class TransactionPrint extends React.Component {
render() {
const transaction = this.props.transaction;
const user = this.props.user;
return (
<div style={{padding: '1in'}}>
<Header size='large'>Protospace Transaction Receipt</Header>
<p>Calgary Protospace Ltd.</p>
<p>Bay 108, 1530 - 27th Ave NE<br />Calgary, AB T2E 7S6<br />protospace.ca</p>
<TransactionTable user={user} transaction={transaction} />
<p>Thank you!</p>
</div>
);
}
}
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)
.then(res => {
setTransaction(res);
setError(false);
})
.catch(err => {
console.log(err);
setError(true);
});
}, [ownTransaction]);
return (
<Container>
{!error ?
transaction ?
<div>
<Header size='large'>Transaction Receipt</Header>
<Grid stackable columns={2}>
<Grid.Column>
<TransactionTable user={user} transaction={transaction} />
<div style={{ display: 'none' }}>
<TransactionPrint ref={printRef} user={user} transaction={transaction} />
</div>
<ReactToPrint
trigger={() => <Button>Print Receipt</Button>}
content={() => printRef.current}
/>
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column>