Line 0
Link Here
|
0 |
- |
1 |
var React = require('react'); |
|
|
2 |
var ReactDOM = require('react-dom'); |
3 |
|
4 |
var av_descriptions = []; |
5 |
$( document ).ready(function() { |
6 |
for (var i = 0; i < authorised_values.length; i++) { |
7 |
var av = authorised_values[i]; |
8 |
av_descriptions[av.authorised_value] = av.lib; |
9 |
} |
10 |
|
11 |
$('.item-messages').each(function() { |
12 |
var itemnumber = parseInt( $(this).attr('id').split('item-messages-')[1] ); |
13 |
ReactDOM.render( |
14 |
<ItemMessages itemnumber={itemnumber} messages={item_messages[itemnumber]}/>, |
15 |
this |
16 |
); |
17 |
}); |
18 |
}); |
19 |
|
20 |
var ItemMessages = React.createClass({ |
21 |
propTypes: { |
22 |
messages: React.PropTypes.array.isRequired, |
23 |
itemnumber: React.PropTypes.number.isRequired, |
24 |
}, |
25 |
getInitialState: function() { |
26 |
return { messages: this.props.messages }; |
27 |
}, |
28 |
addMessage: function(message) { |
29 |
this.setState(function(state) { |
30 |
var newData = state.messages.slice(); |
31 |
newData.push( message ); |
32 |
return {messages: newData}; |
33 |
}); |
34 |
}, |
35 |
removeMessage: function(index) { |
36 |
var message = this.state.messages[index]; |
37 |
var itemMessage = this; |
38 |
$.ajax({ |
39 |
url: '/api/v1/items/' + message.itemnumber + '/messages/' + message.item_message_id, |
40 |
type: 'DELETE', |
41 |
success: function( result ) { |
42 |
itemMessage.setState(function(state) { |
43 |
var newData = state.messages.slice(); |
44 |
newData.splice(index, 1); |
45 |
return {messages: newData}; |
46 |
}); |
47 |
} |
48 |
}); |
49 |
}, |
50 |
render: function () { |
51 |
var item_messages = this; |
52 |
return <div className="listgroup"> |
53 |
<h4>Messages</h4> |
54 |
<ol className="bibliodetails"> |
55 |
{this.state.messages.map(function(message, index) { |
56 |
return <ItemMessage key={message.item_message_id} message={message} index={index} onRemove={item_messages.removeMessage} /> |
57 |
})} |
58 |
<ItemMessageCreator itemnumber={this.props.itemnumber} onAdd={item_messages.addMessage}/> |
59 |
</ol> |
60 |
</div>; |
61 |
} |
62 |
}); |
63 |
|
64 |
var ItemMessage = React.createClass({ |
65 |
propTypes: { |
66 |
message: React.PropTypes.object.isRequired, |
67 |
index: React.PropTypes.number.isRequired, |
68 |
onRemove: React.PropTypes.func.isRequired, |
69 |
}, |
70 |
removeMessage: function() { |
71 |
if ( confirm( ARE_YOU_SURE + this.props.message.message ) ) { |
72 |
this.props.onRemove(this.props.index); |
73 |
} |
74 |
}, |
75 |
render: function () { |
76 |
return <li> |
77 |
<span className="label"> |
78 |
<i className="fa fa-minus-circle" onClick={this.removeMessage}></i> |
79 |
{av_descriptions[this.props.message.type]} |
80 |
</span> |
81 |
{this.props.message.message} |
82 |
</li> |
83 |
} |
84 |
}); |
85 |
|
86 |
var ItemMessageCreator = React.createClass({ |
87 |
propTypes: { |
88 |
itemnumber: React.PropTypes.number.isRequired, |
89 |
onAdd: React.PropTypes.func.isRequired, |
90 |
}, |
91 |
getInitialState: function () { |
92 |
return { |
93 |
message: "", |
94 |
type: authorised_values[0].authorised_value, |
95 |
}; |
96 |
}, |
97 |
addMessage: function() { |
98 |
var self = this; |
99 |
var item_message = { |
100 |
type: this.state.type, |
101 |
message: this.state.message, |
102 |
}; |
103 |
$.ajax({ |
104 |
type: 'POST', |
105 |
url: '/api/v1/items/' + this.props.itemnumber + '/messages', |
106 |
data: JSON.stringify(item_message), |
107 |
success: function(data) { |
108 |
self.cancelMessage(); |
109 |
self.props.onAdd(data); |
110 |
}, |
111 |
error: function (xhr, ajaxOptions, thrownError) { |
112 |
console.log(xhr.responseText); |
113 |
console.log(thrownError); |
114 |
}, |
115 |
}); |
116 |
}, |
117 |
cancelMessage: function() { |
118 |
this.setState( this.getInitialState ); |
119 |
return false; |
120 |
}, |
121 |
handleTypeChange: function(e) { |
122 |
this.setState({ type: e.target.value }); |
123 |
}, |
124 |
handleContentChange: function(e) { |
125 |
this.setState({ message: e.target.value }); |
126 |
}, |
127 |
render: function () { |
128 |
var options = []; |
129 |
for (var i = 0; i < authorised_values.length; i++) { |
130 |
var av = authorised_values[i]; |
131 |
options.push( |
132 |
<option key={i} value={av.authorised_value}>{av.lib}</option> |
133 |
); |
134 |
} |
135 |
|
136 |
return <li> |
137 |
<span className="label"> |
138 |
<select value={this.state.type} onChange={this.handleTypeChange}> |
139 |
{options} |
140 |
</select> |
141 |
</span> |
142 |
<input className="input-xlarge" type="text" value={this.state.message} onChange={this.handleContentChange} /> |
143 |
<button className="submit" onClick={this.addMessage}> |
144 |
<i className="fa fa-plus-circle"></i> |
145 |
{ADD_MESSAGE} |
146 |
</button> |
147 |
<a href="javascript:void(0);" onClick={this.cancelMessage}>{CANCEL}</a> |
148 |
</li> |
149 |
} |
150 |
}); |