Last active
August 19, 2018 16:02
-
-
Save IchrakMansour/e47ea024b76dd6e2f6018ff0e9bcf3b7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class AjouterFacture extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
rowData: [], | |
Produits: [], | |
QuantiteF: "", | |
Prix: [], | |
id: 0, | |
}; | |
this.handleSubmit = this.handleSubmit.bind(this); | |
this.handleRowDelete = this.handleRowDelete.bind(this); | |
this.handleRowAdd = this.handleRowAdd.bind(this); | |
this.handleselectChange = this.handleselectChange.bind(this); | |
this.PrixDisplay = this.PrixDisplay.bind(this); | |
} | |
componentWillReceiveProps(nextProps) { | |
console.log("nextProps", nextProps); | |
} | |
componentDidMount() { | |
axios({ | |
method: "get", | |
url: "/app/getNomprod/", | |
withCredentials: true, | |
}).then(response => { | |
if (response && response.data) { | |
this.setState({ | |
Produits: response.data | |
}); | |
} | |
}).catch(error => console.log(error)); | |
} | |
handleQuantiteChange(index, value) { | |
const rowDataCopy = this.state.rowData.slice(0); | |
rowDataCopy[index] = Object.assign({}, rowDataCopy[index], { | |
QuantiteF: parseInt(value, 10) | |
}); | |
this.setState({ | |
rowData: rowDataCopy | |
}); | |
} | |
handleselectprdtChange(index, value) { | |
const rowDataCopy = this.state.rowData.slice(0); | |
rowDataCopy[index] = Object.assign({}, rowDataCopy[index], { | |
selectprdt: value | |
}); | |
this.setState({ | |
rowData: rowDataCopy, | |
}); | |
render() { | |
let { | |
Clients | |
} = this.state.Clients; | |
var Cd = { | |
pointerEvents: 'none' | |
} | |
let { | |
Produits | |
} = this.state; | |
let { | |
rowData | |
} = this.state.rowData; | |
let { | |
Prix | |
} = this.state.Prix; | |
return (<div className="animated fadeIn"> | |
<h6> <Label ><strong>Veuillez ajouter au moins un produit : </strong></Label></h6> | |
<Table responsive style={items} > | |
<thead style={back}> | |
<tr> | |
<th>PRODUIT</th> | |
<th>QUANTITE</th> | |
<th>PRIX UNITAIRE</th> | |
<th>TOTAL</th> | |
<th></th> | |
</tr> | |
</thead> | |
<tbody> | |
{this.state.rowData.map((data, index) => ( | |
<tr key={index} id={index}> | |
<td> | |
{" "} <Input type="select" name="selectprdt" id="selectprdt" | |
placeholder="Veuillez sélectionner un produit" value={data.selectprdt} | |
onChange={(e) => this.handleselectprdtChange(index, e.target.value)} > | |
<option key={-1} hidden>Choisisr un produit</option> | |
{ this.state.Produits.map((pdt, i) => | |
<option key={i}>{pdt.Nomp}</option> | |
)} | |
</Input> | |
</td> | |
<td><Input type="number" | |
value={data.QuantiteF || 0} onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/></td> | |
<td> | |
{ this.state.Prix.map(pr => | |
<p key={index} >{pr.PrixV} </p> | |
)} | |
</td> | |
<td > | |
<p key={index} className='pa2 mr2 f6'>{(data.QuantiteF || 0) * (parseInt(this.PrixDisplay(data.selectprdt)|| 0))} </p> | |
</td> | |
<td> | |
<Button onClick={(e) => this.handleRowDelete(index)} active style={center} size="sm" color="danger" className="btn-pill" aria-pressed="true">Effacer</Button> | |
</td>{" "} | |
</tr> | |
))} | |
<tr> | |
<td/> | |
<td/> | |
<td/> | |
<td/> | |
<td><Button onClick={this.handleRowAdd} active style={center} size="sm" color="info" className="btn-pill" aria-pressed="true">Ajouter une ligne</Button></td> | |
</tr> | |
</tbody> | |
</Table> | |
</div> | |
); | |
} | |
PrixDisplay(selectprdt) { | |
return axios.get("/app/getPrixprod/" + selectprdt).then(response => { | |
if (response && response.data) { | |
this.setState({ | |
Prix: response.data | |
}); | |
} | |
}).catch(error => { | |
console.error(error); | |
}); | |
} | |
handleRowDelete(row) { | |
const rowDataCopy = this.state.rowData.slice(0); | |
rowDataCopy.splice(row, 1); | |
this.setState({ | |
rowData: rowDataCopy | |
}); | |
} | |
handleRowAdd() { | |
let id = this.state.id; | |
id = id++; | |
const rowDataCopy = this.state.rowData.slice(0); | |
rowDataCopy.push({ | |
selectprdt: "", | |
QuantiteF: 0, | |
Prix: "" | |
}); | |
this.setState({ | |
rowData: rowDataCopy, | |
id: id | |
}); | |
} | |
} | |
export default AjouterFacture; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment