|
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 |
}); |