export default class InvoiceCreate extends Component {
constructor(props) {
super(props);
this.state = {
products: [],
customers:[],
valueCustomer:'',
valueProducts:'',
dataTable: [],
total:0
};
this.loadData = this.loadData.bind(this);
this.add = this.add.bind(this);
this.changeStateCustomer = this.changeStateCustomer.bind(this);
this.changeStateProduct = this.changeStateProduct.bind(this);
this.funcCustomers = this.funcCustomers.bind(this);
this.funcProducts = this.funcProducts.bind(this);
this.price = this.price.bind(this);
this.changeDiscount =this.changeDiscount.bind(this);
this.sendForm = this.sendForm.bind(this);
this.nameAutoFocus = true;
}
componentDidMount() {
this.loadData();
this.nameAutoFocus = false;
}
sendForm() {
let content
}
changeDiscount(e) {
if (e.target.value==='') return null;
if ((e.target.value!=='')&&(e.target.value)) {
let discount_id = e.target.parentElement.parentElement.parentElement.dataset.id;
let dataTable=this.state.dataTable;
dataTable[discount_id].qty = e.target.value;
let total=0;
for (let i=0;i<dataTable.length;i++) {
total += dataTable[i].price*(1-dataTable[i].qty/100);
}
this.setState({
total:total,
dataTable:dataTable
});
console.log('test0');
}
}
price(data) {
let name = this.state.valueProducts.value;
for(let i=0;i<data.length;i++) if (name===data[i].name) return (data[i].price);
}
funcCustomers () {
let props = {
properties: this.state.customers
};
selectCustomers(props);
console.log('test1');
return selectCustomers(props);
}
funcProducts () {
let props = {
properties: this.state.products
};
selectProducts(props);
console.log('test2');
return selectProducts(props);
}
add(e) {
e.preventDefault();
e.persist();
let dataTable = this.state.dataTable ;
fetch('/api/products')
.then((response) => {
return response.json()
.then((data) => {
dataTable.push({
name: this.state.valueProducts.value,
price: this.price(data),
qty: document.getElementById('formControlText').value,
});
let discount = document.getElementById('formControlText').value / 100;
let total = 0;
for (let i = 0; i < dataTable.length; i++) {
total += dataTable[i].price
}
total = total * (1 - discount);
this.setState({
total: total
});
});
});
}
changeStateCustomer = (valueCustomer) => {
this.setState({valueCustomer:valueCustomer});
};
changeStateProduct = (valueProduct) => {
this.setState({valueProducts:valueProduct});
};
loadData() {
let customers=[],
products = [];
fetch('/api/products')
.then((response) =>
response.json()
.then((data) =>{
for(let i=0; i<data.length;i++) products[i] = data[i].name
this.setState({products:products})
})
);
fetch('/api/customers')
.then((response) =>
response.json()
.then((data) =>{
for(let i=0; i<data.length;i++) customers[i] = data[i].name;
this.setState({customers:customers})
})
)
}
render() {
return (
<div className='container'>
<PageHeader>Create Invoice</PageHeader>
<form onSubmit={this.add}>
<FormGroup controlId='formControlText' style={{width:20+'%'}}>
<ControlLabel>Discount (%)</ControlLabel>
<FormControl/>
</FormGroup>
<label>Customer</label>
<Select
name="form-field-name"
style={{width:40+'%'}}
value={this.state.valueCustomer}
onChange={this.changeStateCustomer}
options={this.funcCustomers()}
/>
<label>Add products</label>
<Select
name="form-field-name"
style={{width:40+'%'}}
value={this.state.valueProducts}
onChange={this.changeStateProduct}
options={this.funcProducts()}
/>
<Button type="submit" bsStyle="primary">Add</Button>
</form>
<Table responsive>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Qty</th>
</tr>
</thead>
<LoadTableData focus={this.nameAutoFocus} discount={this.changeDiscount} data={this.state.dataTable} />
</Table>
<PageHeader>Total:
<NumberFormat displayType={'text'} value={this.state.total} decimalSeparator={'.'} decimalScale={2}/>
</PageHeader>
<Button bsStyle="success" onClick={this.sendForm}>
Submit
</Button>
</div>
)
}
}import React from 'react';
import ModalDelete from './modals/modal_delete';
import { FormGroup,FormControl } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
export default function (props) {
let datas = props.data;
let count=-1;
let listDatas = datas.map((data) => {
count++;
return <tr data-id={count} key={data.toString()+Math.random()*1000}>{transform(data, props.discount, props.focus)}</tr>;
});
return (
<tbody>{listDatas}</tbody>
);
}
function transform(mass, discount, focus) {
let props = [];
let count=0;
for (let key in mass) {
props.push(mass[key])
}
// props.push(<ModalDelete loadData={loadData} />);
return props.map((prop) => {
if (count===2) return (
<td key={prop.toString()}>
<FormGroup controlId='formControlText' style={{width:20+'%'}}>
<FormControl
type="text"
defaultValue={prop}
bsClass="lg"
onChange={discount}
autoFocus={focus}
key={1000}
/>
</FormGroup>
</td>
); console.log('test4');
count++;
return <td key={prop.toString()}>{prop}</td>;
});
}