Skip to content

Commit

Permalink
Small bug fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnuberbacher
johnuberbacher committed Sep 14, 2021
1 parent e08bdc3 commit 87b5eb5
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 27 deletions.
27 changes: 17 additions & 10 deletions src/components/InvoiceForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ class InvoiceForm extends React.Component {
notes: '',
total: '0.00',
subTotal: '0.00',
taxRate: '0.00',
taxRate: '',
taxAmmount: '0.00',
discountRate: '0.00',
discountRate: '',
discountAmmount: '0.00',
};
this.state.items = [
Expand Down Expand Up @@ -73,9 +73,6 @@ class InvoiceForm extends React.Component {
this.setState({ subTotal: parseFloat(subTotal).toFixed(2) }, () => {
this.setState({ taxAmmount: parseFloat(parseFloat(subTotal) * (this.state.taxRate / 100)).toFixed(2) },() => {
this.setState({ discountAmmount: parseFloat(parseFloat(subTotal) * (this.state.discountRate / 100)).toFixed(2) },() => {
console.log('subtotal: ' + this.state.subtotal)
console.log('discountRate: ' + this.state.discountAmmount)
console.log('taxAmmount: ' + this.state.taxAmmount)
this.setState({
total: ((subTotal - this.state.discountAmmount) + parseFloat(this.state.taxAmmount))
});
Expand Down Expand Up @@ -129,7 +126,7 @@ class InvoiceForm extends React.Component {
<span className="fw-bold">Date:&nbsp;</span><span className="current-date">{new Date().toLocaleDateString()}</span>
</div>
<div className="d-flex flex-row align-items-center">
<span className="fw-bold d-block me-2">Due&nbsp;Date:&nbsp;</span><Form.Control type="date" value={this.state.dateOfIssue} name={"dateOfIssue"} onChange={(event)=>this.editField(event)} style={{maxWidth: '150px'}} required/>
<span className="fw-bold d-block me-2">Due&nbsp;Date:</span><Form.Control type="date" value={this.state.dateOfIssue} name={"dateOfIssue"} onChange={(event)=>this.editField(event)} style={{maxWidth: '150px'}} required/>
</div>
</div>
<div className="w-100 text-left text-lg-center mt-5 mt-lg-0 mb-5 d-none">
Expand Down Expand Up @@ -224,13 +221,23 @@ class InvoiceForm extends React.Component {
</Row>
<hr className="my-4"/>
<Form.Label className="fw-bold">Notes:</Form.Label>
<Form.Control placeholder="Thanks for your business!" onChange={(event)=>this.editField(event)} as="textarea" className="my-2" rows={1}/>
<Form.Control placeholder="Thanks for your business!" name="notes" value={this.state.notes} onChange={(event)=>this.editField(event)} as="textarea" className="my-2" rows={1}/>
</Card>
</Col>
<Col md={4} lg={3}>
<div className="sticky-top pt-md-3 pt-xl-4">
<Button variant="primary" type="submit" className="d-block w-100">Review Invoice</Button>
<InvoiceModal showModal={this.state.isOpen} closeModal={this.closeModal} info={this.state} items={this.state.items} currency={this.state.currency} total={this.state.total} taxAmmount={this.state.taxAmmount} subTotal={this.state.subTotal}></InvoiceModal>
<InvoiceModal
showModal={this.state.isOpen}
closeModal={this.closeModal}
info={this.state}
items={this.state.items}
currency={this.state.currency}
subTotal={this.state.subTotal}
taxAmmount={this.state.taxAmmount}
discountAmmount={this.state.discountAmmount}
total={this.state.total}
/>
<Form.Group className="mb-3">
<Form.Label className="fw-bold">Currency:</Form.Label>
<Form.Select onChange={event => this.onCurrencyChange({ currency: event.target.value })} className="btn btn-light my-1" aria-label="Change Currency">
Expand All @@ -247,7 +254,7 @@ class InvoiceForm extends React.Component {
<Form.Group className="my-3">
<Form.Label className="fw-bold">Tax rate:</Form.Label>
<InputGroup className="my-1 flex-nowrap">
<Form.Control name="taxRate" type="number" value={this.state.taxRate} onChange={(event)=>this.editField(event)} className="bg-white border" placeholder="0.0" min="0.0" max="100.00"/>
<Form.Control name="taxRate" type="number" value={this.state.taxRate} onChange={(event)=>this.editField(event)} className="bg-white border" placeholder="0.0" min="0.00" step="0.01" max="100.00"/>
<InputGroup.Text
className="bg-light fw-bold text-secondary small">
%
Expand All @@ -257,7 +264,7 @@ class InvoiceForm extends React.Component {
<Form.Group className="my-3">
<Form.Label className="fw-bold">Discount rate:</Form.Label>
<InputGroup className="my-1 flex-nowrap">
<Form.Control name="discountRate" type="number" value={this.state.discountRate} onChange={(event)=>this.editField(event)} className="bg-white border" placeholder="0.0" min="0.0" max="100.00"/>
<Form.Control name="discountRate" type="number" value={this.state.discountRate} onChange={(event)=>this.editField(event)} className="bg-white border" placeholder="0.0" min="0.00" step="0.01" max="100.00"/>
<InputGroup.Text
className="bg-light fw-bold text-secondary small">
%
Expand Down
2 changes: 1 addition & 1 deletion src/components/InvoiceItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ class ItemRow extends React.Component {
id: this.props.item.id,
}}/>
</td>
<td style={{minWidth: '110px'}}>
<td style={{minWidth: '130px'}}>
<EditableField
onItemizedItemEdit={this.props.onItemizedItemEdit}
cellData={{
Expand Down
36 changes: 20 additions & 16 deletions src/components/InvoiceModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ class InvoiceModal extends React.Component {
<tr>
<th>QTY</th>
<th>DESCRIPTION</th>
<th>PRICE</th>
<th>AMOUNT</th>
<th className="text-end">PRICE</th>
<th className="text-end">AMOUNT</th>
</tr>
</thead>
<tbody>
Expand All @@ -84,8 +84,8 @@ class InvoiceModal extends React.Component {
<td>
{item.name} - {item.description}
</td>
<td style={{width: '100px'}}>{this.props.currency} {item.price}</td>
<td style={{width: '100px'}}>{this.props.currency} {item.price * item.quantity}</td>
<td className="text-end" style={{width: '100px'}}>{this.props.currency} {item.price}</td>
<td className="text-end" style={{width: '100px'}}>{this.props.currency} {item.price * item.quantity}</td>
</tr>
);
})}
Expand All @@ -98,28 +98,32 @@ class InvoiceModal extends React.Component {
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr className="text-right">
<tr className="text-end">
<td></td>
<td className="fw-bold" style={{width: '100px'}}>SUBTOTAL</td>
<td className="text-right" style={{width: '100px'}}>{this.props.currency} {this.props.subTotal}</td>
<td className="text-end" style={{width: '100px'}}>{this.props.currency} {this.props.subTotal}</td>
</tr>
<tr className="text-right">
<tr className="text-end">
<td></td>
<td className="fw-bold" style={{width: '100px'}}>TAX</td>
<td className="text-right" style={{width: '100px'}}>{this.props.currency} 0.00</td>
<td className="text-end" style={{width: '100px'}}>{this.props.currency} {this.props.taxAmmount}</td>
</tr>
<tr className="text-end">
<td></td>
<td className="fw-bold" style={{width: '100px'}}>DISCOUNT</td>
<td className="text-end" style={{width: '100px'}}>{this.props.currency} {this.props.discountAmmount}</td>
</tr>
<tr className="text-end">
<td></td>
<td className="fw-bold" style={{width: '100px'}}>TOTAL</td>
<td className="text-end" style={{width: '100px'}}>{this.props.currency} {this.props.total}</td>
</tr>
<tr>
<td></td>
<td className="fw-bold" style={{width: '100px'}}>TOTAL</td>
<td align="right" style={{width: '100px'}}>{this.props.currency} {this.props.total}</td>
</tr>
</tbody>
</Table>
{this.props.info.notes.trim() !== "" && (
{this.props.info.notes &&
<div className="bg-light py-3 px-4 rounded">
{this.props.info.notes}
</div>
)}
</div>}
</div>
</div>
<div className="pb-4 px-4">
Expand Down

0 comments on commit 87b5eb5

Please sign in to comment.