-
Notifications
You must be signed in to change notification settings - Fork 4
/
AddReserve.js
84 lines (74 loc) · 2.37 KB
/
AddReserve.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { TextField, Button, Callout } from '@folio/stripes/components';
import { stripesConnect } from '@folio/stripes/core';
class AddReserve extends React.Component {
static propTypes = {
courseListingId: PropTypes.string.isRequired,
mutator: PropTypes.shape({
reserves: PropTypes.shape({
POST: PropTypes.func.isRequired,
}).isRequired,
}),
};
static manifest = {
reserves: {
type: 'okapi',
path: 'coursereserves/courselistings/!{courseListingId}/reserves',
fetch: false,
shouldRefresh: () => false,
throwErrors: false,
},
};
constructor() {
super();
this.callout = React.createRef();
}
showCallout(type, message) {
this.callout.current.sendCallout({ type, message });
}
addItem(e, courseListingId) {
e.preventDefault();
const barcode = document.getElementById('add-item-barcode').value;
if (!barcode) {
this.showCallout('error', 'Please enter a barcode before selecting "Add item"');
return;
}
this.props.mutator.reserves.POST({ courseListingId, copiedItem: { barcode } })
.then(rec => {
// XXX We never see this callout due to the re-render. Oh well.
this.showCallout('success', `Added item "${rec.copiedItem.title}"`);
})
.catch(exception => {
exception.text().then(text => {
this.showCallout('error', `Failed to add item ${barcode}: ${text}`);
});
});
}
render() {
return (
<React.Fragment>
<hr />
<form id="form-course-item" onSubmit={e => this.addItem(e, this.props.courseListingId)}>
<TextField label="Enter or scan barcode" id="add-item-barcode" />
<FormattedMessage id="ui-courses.addItem">
{ariaLabel => (
<Button
aria-label={ariaLabel}
buttonStyle="primary"
id="clickable-add-item"
onClick={e => this.addItem(e, this.props.courseListingId)}
marginBottom0
>
<FormattedMessage id="ui-courses.button.addItem" />
</Button>
)}
</FormattedMessage>
</form>
<Callout ref={this.callout} />
</React.Fragment>
);
}
}
export default stripesConnect(AddReserve);