<!DOCTYPE html>
<html>
<head>
<script data-require="react@0.12.2" data-semver="0.12.2" src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script data-require="react-jsx@*" data-semver="0.12.2" src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script src="script.js"></script>
</body>
</html>
var CompanyApp = React.createClass({
getInitialState: function() {
return {
companylist : this.props.companies
};
},
handleNewRowSubmit: function(newcompany) {
this.setState( {companylist: this.state.companylist.concat([newcompany])} );
},
onEdit: function(company){
this.setState({editMe: company})
console.log("The edited company has now been passed up"+company)
},
handleCompanyRemove: function( company ) {
var index = -1;
var clength = this.state.companylist.length;
for( var i = 0; i < clength; i++ ) {
if( this.state.companylist[i].cname === company.cname ) {
index = i;
break;
}
}
this.state.companylist.splice( index, 1 );
this.setState( {companylist: this.state.companylist} );
},
render: function() {
var tableStyle = {width: '100%'};
var leftTdStyle = {width: '50%',padding:'20px',verticalAlign: 'top'};
var rightTdStyle = {width: '50%',padding:'20px',verticalAlign: 'top'};
return (
<table style={tableStyle}>
<tr>
<td style={leftTdStyle}>
<CompanyList clist={this.state.companylist} onCompanyRemove={this.handleCompanyRemove} onEdit={this.onEdit}/>
</td>
<td style={rightTdStyle}>
<NewRow onRowSubmit={this.handleNewRowSubmit} editMe={this.state.editMe}/>
</td>
</tr>
</table>
);
}
});
var CompanyList = React.createClass({
handleCompanyRemove: function(company){
this.props.onCompanyRemove(company);
},
onEdit: function (company){
this.props.onEdit(company);
},
render: function() {
var companies = [];
var that = this;
// TODO: Needs to find out why that = this made it work; Was getting error that onCompanyDelete is not undefined
this.props.clist.forEach(function(company) {
companies.push(<Company company={company} onCompanyDelete={that.handleCompanyRemove} onEdit={that.onEdit} /> );
});
return (
<div>
<h3>List of Companies</h3>
<table className="table table-striped" id="tableId">
<thead><tr><th>Company Name</th><th>Employees</th><th>Head Office</th><th>Action</th></tr></thead>
<tbody>{companies}</tbody>
</table>
</div>
);
}
});
var Company = React.createClass({
getInitialState : function(){
return {
editing : false,
cname : this.props.company.cname,
ecount : this.props.company.ecount,
hoffice : this.props.company.hoffice,
};
},
_onchangeCname:function(event) {
this.setState({cname : event.target.value});
},
_onchangeEmpCount:function(event){
this.setState({ecount : event.target.value});
},
_onchangeCompHO:function(event){
this.setState({hoffice : event.target.value});
},
handleRemoveCompany: function() {
this.props.onCompanyDelete( this.props.company );
return false;
},
handleRowEdit:function() {
var getCName = this.state.cname.trim();
var getEmpCount = this.state.ecount;
var getCompHO = this.state.hoffice;
this.setState({
getCName : this.state.cname,
getEmpCount : this.state.ecount,
getCompHO : this.state.hoffice
})
this.setState({editing : true });
return false;
},
handleUpdateRow:function(){
var getCName = this.state.cname.trim();
var getEmpCount = this.state.ecount;
var getCompHO = this.state.hoffice;
this.setState({
getCName : this.state.cname,
getEmpCount : this.state.ecount,
getCompHO : this.state.hoffice
})
alert("updated vals "+ getCName+","+getEmpCount+","+getCompHO );
this.props.company.cname = getCName;
this.props.company.ecount = getEmpCount;
this.props.company.hoffice = getCompHO;
this.setState({editing : false });
return false;
},
handleCancelEdit : function(){
this.setState({editing : false });
return false;
},
render: function() {
var inputStyle = {padding:'-3px'};
var EditBtn = <input type ="button" className ="btn btn-primary"
value ="Edit" onClick ={this.handleRowEdit} />;
var UpdateBtn = <input type ="button" className ="btn btn-primary"
value ="Update" onClick ={this.handleUpdateRow} />;
var RemoveBtn = <input type ="button" className ="btn btn-primary"
value ="Remove" onClick ={this.handleRemoveCompany}/>;
var CancelEditBtn = <input type ="button" className ="btn btn-primary"
value ="Cancel" onClick = {this.handleCancelEdit}/>;
return(
<tr>
<td>{this.state.editing ? <input type="text" style={inputStyle} ref="CompName"
value={this.state.cname} onChange={this._onchangeCname} />
: this.props.company.cname}</td>
<td>{this.state.editing ? <input type="text" style={inputStyle} ref="EmpCount"
value={this.state.ecount} onChange={this._onchangeEmpCount} />
: this.props.company.ecount}</td>
<td>{this.state.editing ? <input type="text" style={inputStyle} ref="CompHO"
value={this.state.hoffice} onChange={this._onchangeCompHO}/>
: this.props.company.hoffice}</td>
<td>{this.state.editing ? UpdateBtn : EditBtn }</td>
<td>{this.state.editing ? CancelEditBtn : RemoveBtn}</td>
</tr>
)
}
});
var NewRow = React.createClass({
handleSubmit: function(cname) {
var cname = this.refs.cname.getDOMNode().value;
var ecount = this.refs.ecount.getDOMNode().value;
var hoffice = this.refs.hoffice.getDOMNode().value;
var newrow = {cname: cname, ecount: ecount, hoffice: hoffice };
this.props.onRowSubmit(newrow);
this.refs.cname.getDOMNode().value = '';
this.refs.ecount.getDOMNode().value = '';
this.refs.hoffice.getDOMNode().value = '';
return false;
},
componentDidMount: function(){
this.refs.cname.getDOMNode().focus();
},
render: function() {
var inputStyle = {padding:'12px'}
debugger;
console.log ("You now have the props in NewRow"+this.props.editMe)
return (
<div className="well">
<h3>Add A Company</h3>
<form onSubmit={this.handleSubmit}>
<div className="input-group input-group-lg" style={inputStyle}>
<input type="text" className="form-control col-md-8" placeholder="Company Name" ref="cname" required/>
</div>
<div className="input-group input-group-lg" style={inputStyle}>
<input type="text" className="form-control col-md-8" placeholder="Employee Count" ref="ecount" required/>
</div>
<div className="input-group input-group-lg" style={inputStyle}>
<input type="text" className="form-control col-md-8" placeholder="Headoffice" ref="hoffice" required/>
</div>
<div className="input-group input-group-lg" style={inputStyle}>
<input type="submit" className="btn btn-primary" value="Add Company" required/>
</div>
</form>
</div>
);
}
});
var defCompanies = [{cname:"Infosys Technologies",ecount:150000,hoffice:"Bangalore"},
{cname:"TCS",ecount:140000,hoffice:"Mumbai"}];
React.render( <CompanyApp companies={defCompanies} />, document.getElementById("app"));
/* Styles go here */