137 lines
4.3 KiB
JavaScript
137 lines
4.3 KiB
JavaScript
|
/*** @jsx React.DOM */
|
||
|
|
|
||
|
|
var card_management = React.createClass({
|
||
|
|
getInitialState: function(props) {
|
||
|
|
return {
|
||
|
|
users: window.users,
|
||
|
|
user_search: {
|
||
|
|
card: '',
|
||
|
|
},
|
||
|
|
searching: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
searchUsers: function(event) {
|
||
|
|
this.setState({searching: true});
|
||
|
|
AJAX.post(
|
||
|
|
Link.get('searchusers'),
|
||
|
|
{user_search: this.state.user_search},
|
||
|
|
function(response) {
|
||
|
|
this.setState({
|
||
|
|
users: response.users,
|
||
|
|
searching: false,
|
||
|
|
});
|
||
|
|
}.bind(this)
|
||
|
|
);
|
||
|
|
event.preventDefault();
|
||
|
|
},
|
||
|
|
|
||
|
|
renderID: function(user) {
|
||
|
|
return <span>{user.id}</span>;
|
||
|
|
},
|
||
|
|
|
||
|
|
sortID: function(a, b) {
|
||
|
|
return a.id - b.id;
|
||
|
|
},
|
||
|
|
|
||
|
|
renderUsername: function(user) {
|
||
|
|
return user.username ?
|
||
|
|
<span>{user.username}</span> :
|
||
|
|
<span className="placeholder">anonymous account</span>;
|
||
|
|
},
|
||
|
|
|
||
|
|
sortUsername: function(a, b) {
|
||
|
|
var au = a.username ? a.username : '';
|
||
|
|
var bu = b.username ? b.username : '';
|
||
|
|
return au.localeCompare(bu);
|
||
|
|
},
|
||
|
|
|
||
|
|
renderEmail: function(user) {
|
||
|
|
return user.email ?
|
||
|
|
<span>{user.email}</span> :
|
||
|
|
<span className="placeholder">no email</span>;
|
||
|
|
},
|
||
|
|
|
||
|
|
sortEmail: function(a, b) {
|
||
|
|
var ae = a.email ? a.email : '';
|
||
|
|
var be = b.email ? b.email : '';
|
||
|
|
return ae.localeCompare(be);
|
||
|
|
},
|
||
|
|
|
||
|
|
renderEditButton: function(user) {
|
||
|
|
return (
|
||
|
|
<Nav
|
||
|
|
title="view/edit"
|
||
|
|
onClick={function(event) {
|
||
|
|
window.location=Link.get('viewuser', user.id);
|
||
|
|
}.bind(this)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="section">
|
||
|
|
<h3>User Search</h3>
|
||
|
|
<form onSubmit={this.searchUsers}>
|
||
|
|
<label htmlFor="card">Card Number:</label>
|
||
|
|
<br />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="inline"
|
||
|
|
value={this.state.user_search.card}
|
||
|
|
onChange={function(event) {
|
||
|
|
var user = this.state.user_search;
|
||
|
|
user.card = event.target.value;
|
||
|
|
this.setState({user_search: user});
|
||
|
|
}.bind(this)}
|
||
|
|
name="card"
|
||
|
|
/>
|
||
|
|
<input type="submit" value="search" />
|
||
|
|
{ this.state.searching ?
|
||
|
|
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
|
||
|
|
null
|
||
|
|
}
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div className="section">
|
||
|
|
<h3>User List</h3>
|
||
|
|
<Table
|
||
|
|
className="list users"
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
name: 'ID',
|
||
|
|
render: this.renderID,
|
||
|
|
sort: this.sortID,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Username',
|
||
|
|
render: this.renderUsername,
|
||
|
|
sort: this.sortUsername,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Email',
|
||
|
|
render: this.renderEmail,
|
||
|
|
sort: this.sortEmail,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '',
|
||
|
|
action: true,
|
||
|
|
render: this.renderEditButton,
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
rows={this.state.users}
|
||
|
|
emptymessage="There are no users to display."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
ReactDOM.render(
|
||
|
|
React.createElement(card_management, null),
|
||
|
|
document.getElementById('content')
|
||
|
|
);
|