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

Add UI so users can report transactions

Browse Source
This commit is contained in:
Tanner Collin 2020-02-01 08:56:22 +00:00
parent 59d495b91d
commit f5cfc9a1d6
1 changed files with 74 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
webclient/src/Transactions.js
View File

@ -147,11 +147,6 @@ function EditTransaction(props) {
const [success, setSuccess] = useState(false);
const { id } = useParams();
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
const handleSubmit = (e) => {
setLoading(true);
setSuccess(false);
@ -182,7 +177,70 @@ function EditTransaction(props) {
<TransactionEditor token={token} input={input} setInput={setInput} error={error} />
<Form.Button loading={loading} error={error.non_field_errors}>
Save
{transaction.report_type ? 'Save & Unreport' : 'Save'}
</Form.Button>
{success && <div>Success!</div>}
</Form>
</div>
);
};
function ReportTransaction(props) {
const { transaction, setTransaction, token, refreshUser } = props;
const [input, setInput] = useState(transaction);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const { id } = useParams();
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
const handleSubmit = (e) => {
setLoading(true);
setSuccess(false);
requester('/transactions/'+id+'/report/', 'POST', token, input)
.then(res => {
setLoading(false);
setSuccess(true);
setError(false);
if (refreshUser) {
refreshUser();
}
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
const makeProps = (name) => ({
name: name,
onChange: handleChange,
value: input[name] || '',
error: error[name],
});
return (
<div>
<Header size='medium'>Report Transaction</Header>
<p>If this transaction was made in error or there is anything incorrect about it, please report it using this form.</p>
<p>A staff member will review the report as soon as possible.</p>
<p>Follow up with <a href='mailto:directors@protospace.ca' target='_blank' rel='noopener noreferrer'>directors@protospace.ca</a>.</p>
<Form onSubmit={handleSubmit}>
<Form.TextArea
label='Reason'
fluid
{...makeProps('report_memo')}
/>
<Form.Button loading={loading} error={error.non_field_errors}>
Submit Report
</Form.Button>
{success && <div>Success!</div>}
</Form>
@ -254,7 +312,7 @@ export function TransactionDetail(props) {
console.log(err);
setError(true);
});
}, []);
}, [ownTransaction]);
return (
<Container>
@ -329,9 +387,15 @@ export function TransactionDetail(props) {
</Grid.Column>
<Grid.Column>
{isAdmin(user) && <Segment padded>
{isAdmin(user) ?
<Segment padded>
<EditTransaction transaction={transaction} setTransaction={setTransaction} {...props} />
</Segment>}
</Segment>
:
<Segment padded>
<ReportTransaction transaction={transaction} setTransaction={setTransaction} {...props} />
</Segment>
}
</Grid.Column>
</Grid>