Skip to content

Instantly share code, notes, and snippets.

@phumberdroz phumberdroz/productsreact.js Secret
Created Apr 17, 2016

Embed
What would you like to do?
React Customer Table
// components
// SearchableProductTable
// SearchBar
// ProductTable
// ProductRow
var ProductRow = React.createClass({
render: function () {
var deletebutton = this.props.product.deleted ?
<td>
<form id="undelete-form" action={"/products/"+ this.props.product._id +"?_method=PUT"} method="POST">
<input type="hidden" value="false" name="product[deleted]"/>
<button className="btn">undelete</button>
</form>
</td>
:
<td>
<form id="delete-form" action={"/products/"+ this.props.product._id + "?_method=DELETE" }method="POST">
<button className="btn btn-danger">Delete</button>
</form>
</td>;
var editbutton = this.props.product.deleted ?
<td></td>
:
<td>
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#editproduct" data-product-id={this.props.product._id}>Edit</button>
</td>;
var trClass = this.props.product.deleted ? "disabled":"";
return (
<tr className={trClass}>
<td>{this.props.product.ordernumber}</td>
<td>{this.props.product.name}</td>
<td>{this.props.product.description}</td>
<td>{this.props.product.price}</td>
{editbutton}
{deletebutton}
</tr>
);
}
});
var ProductaddButton = React.createClass ({
render: function (){
return (
<div className="col-lg-2">
<button type="button" className="btn btn-primary center-block" data-toggle="modal" data-target="#newproduct">
Add product
</button>
</div>
)
}
})
var SearchBar = React.createClass({
handleSearch: function () {
$.ajax({
url: "/api/products?search=" + this.refs.filterTextInput.value,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({products: data});
}.bind(this),
error: function(xhr, status, err) {
console.error("api/products/", status, err.toString());
}.bind(this)
});
console.log(this.state)
},
render: function (){
return (
<div className="col-lg-10">
<input type="text" className="form-control" placeholder="Search" value={this.props.filterText} ref="filterTextInput" onChange={this.handleSearch}/>
</div>
)
}
})
var ProductTable = React.createClass({
render: function () {
var rows = [];
this.props.products.forEach (function (product) {
rows.push (<ProductRow product={product} key={product._id}/>)
});
return (
<table className="table" id="productstable">
<thead>
<tr>
<th>#</th>
<th>Product name</th>
<th>description</th>
<th>price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
)
}
});
var FilterableProductTable = React.createClass({
getInitialState: function() {
return {products: []};
},
componentDidMount: function() {
$.ajax({
url: "/api/products/",
dataType: 'json',
cache: false,
success: function(data) {
this.setState({products: data});
}.bind(this),
error: function(xhr, status, err) {
console.error("api/products/", status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div>
<div className="row">
<SearchBar/>
<ProductaddButton />
</div>
<ProductTable products={this.state.products} />
</div>
);
}
});
ReactDOM.render(
<FilterableProductTable />,
document.getElementById('content')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.