Skip to content

Commit

Permalink
Implemented adding Sales with unit quantity and whole quantity and ye…
Browse files Browse the repository at this point in the history 
…t to link fully to database
  • Loading branch information
@godfredcs
godfredcs committed May 20, 2018
1 parent 87ef861 commit adf9bbe
Show file tree
Hide file tree
Showing 11 changed files with 320 additions and 67 deletions.
4 changes: 2 additions & 2 deletions src/actions/itemActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ export const renderToEdit = item => {
};
};

export const editItem = (id, { name, unit_price}, refreshItemsList) => async dispatch => {
export const editItem = (id, data, refreshItemsList) => async dispatch => {
dispatch({ type: SHOW_ITEM_LOADER });

try {
const item = await Item.update(id, { name, unit_price });
const item = await Item.update(id, data);

if (item) {
dispatch({ type: ITEM_EDIT_SUCCESS });
Expand Down
8 changes: 8 additions & 0 deletions src/actions/usersActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,14 @@ export const login = ({ email, password }, _clearCredentials) => async dispatch
}
};

export const updateUser = (id, data) => async dispatch => {
try {
const user = await User.update(id, data);
} catch (error) {
console.log(error);
}
};

// Action creator for getting all users.
export const getUsers = () => async dispatch => {
try {
Expand Down
4 changes: 3 additions & 1 deletion src/components/CustomInput/CustomInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ class CustomInput extends React.Component {
render() {
const {
classes, formControlProps, labelText, id, labelProps, inputProps, error, success,
onChange, defaultValue, type="text"
onChange, value, defaultValue, type="text", disabled
} = this.props;

return (
Expand All @@ -33,8 +33,10 @@ class CustomInput extends React.Component {
id={id}
{...inputProps}
onChange={onChange}
value={value}
defaultValue={defaultValue}
type={type}
disabled={disabled}
/>
{
error
Expand Down
10 changes: 7 additions & 3 deletions src/components/CustomSelect/CustomSelect.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,13 @@ class CustomInput extends Component {
value={value}
>
{
items.map(item => (
<MenuItem value={item} key={item}>{ item }</MenuItem>
))
typeof items[0] === "object"
? items.map((item, index) => (
<MenuItem value={index} key={item.id}>{ item.name }</MenuItem>
))
: items.map(item => (
<MenuItem value={item} key={item}>{ item }</MenuItem>
))
}
</Select>
{
Expand Down
3 changes: 3 additions & 0 deletions src/components/Table/Items.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ class ItemsTable extends Component {
<TableCell className={classes.tableCell}>
{ prop.unit_price }
</TableCell>
<TableCell className={classes.tableCell}>
{ prop.whole_price }
</TableCell>
<TableCell className={classes.tableCell}>
{ this._renderDate(prop.created_at) }
</TableCell>
Expand Down
6 changes: 6 additions & 0 deletions src/services/User.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ export default {
.catch(error => Promise.reject(error.response.data));
},

update(id, data) {
return axios.put(`users/${id}`, data)
.then(response => Promise.resolve(response.data))
.catch(error => Promise.reject(error.response.data));
},

register(user) {
return axios.post('users/register', user)
.then(response => Promise.resolve(response.data))
Expand Down
2 changes: 1 addition & 1 deletion src/views/Items/Modals/AddItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class AddItem extends Component {
};

getModalStyle() {
const top = 30;
const top = 50;
const left = 50;

return {
Expand Down
26 changes: 22 additions & 4 deletions src/views/Items/Modals/EditItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ class EditItem extends Component {
id: '',
name: '',
unit_price: '',
whole_price: '',
};

getModalStyle() {
const top = 30;
const top = 50;
const left = 50;

return {
Expand All @@ -32,14 +33,19 @@ class EditItem extends Component {
this.setState({ unit_price: event.target.value });
};

_setWholePrice = event => {
this.setState({ whole_price: event.target.value });
};

_editItem = () => {
const
id = this.props.edit_item.id,
name = this.state.name || this.props.edit_item.name,
unit_price = this.state.unit_price || this.props.edit_item.unit_price;
unit_price = this.state.unit_price || this.props.edit_item.unit_price,
whole_price = this.state.whole_price || this.props.edit_item.whole_price;

if (name && Number(unit_price)) {
this.props.editItem(id, {name, unit_price}, this.props.refresh);
if (name && Number(unit_price) && Number(whole_price)) {
this.props.editItem(id, {name, unit_price, whole_price}, this.props.refresh);
}
};

Expand Down Expand Up @@ -84,6 +90,18 @@ class EditItem extends Component {
/>
</ItemGrid>
</Grid>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<CustomInput
labelText="Whole price"
id="whole-price"
formControlProps={{ fullWidth: true }}
type="text"
onChange={ this._setWholePrice }
defaultValue={ edit_item.whole_price }
/>
</ItemGrid>
</Grid>
</div>
}

Expand Down
131 changes: 113 additions & 18 deletions src/views/Sales/Modals/AddSale.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,59 @@
import React, { Component } from 'react';
import { withStyles, Grid, Button, Modal } from 'material-ui';

import { RegularCard, ItemGrid, CustomInput } from 'components';
import { RegularCard, ItemGrid, CustomInput, CustomSelect } from 'components';

class AddItem extends Component {
state = {
name: '',
unit_price: null,
item_index: '',
unit_quantity: 0.00,
whole_quantity: 0.00,
}

_setItemName = event => {
this.setState({ name: event.target.value });
};
calculate = type => {
if (!this.state.item_index && this.state.item_index !== 0) {
console.log("id is not set")
return () => 0.00;
}

let item = this.props.items[this.state.item_index];

return () => {
switch(type) {
case "unit_price":
return Number(item.unit_price);

case "whole_price":
return Number(item.whole_price);

case "unit_amount":
return Number(this.state.unit_quantity) * Number(item.unit_price);

case "whole_amount":
return Number(this.state.whole_quantity) * Number(item.whole_price);

_setUnitPrice = event => {
this.setState({ unit_price: event.target.value });
case "total_amount":
let unit_price = Number(this.state.unit_quantity) * Number(item.unit_price);
let whole_price = Number(this.state.whole_quantity) * Number(item.whole_price);

return unit_price + whole_price;

default:
return 0.00;
}
}
};



// Function for adding sales to database.
_addSale = () => {
const { name, unit_price } = this.state;
this.props.addItemFunc({name, unit_price});
};

getModalStyle() {
const top = 30;
const top = 50;
const left = 50;

return {
Expand Down Expand Up @@ -54,25 +84,89 @@ class AddItem extends Component {
<div>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<CustomInput
<CustomSelect
labelText="Item name"
id="item-name"
formControlProps={{ fullWidth: true }}
type="text"
onChange={ this._setItemName }
defaultValue={ this.state.name }
onChange={event => this.setState({ item_index: event.target.value })}
value={this.state.item_index}
items={this.props.items}
/>
</ItemGrid>
</Grid>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<ItemGrid xs={12} sm={12} md={4}>
<CustomInput
labelText="Unit quantity"
id="unit-quantity"
formControlProps={{ fullWidth: true }}
type="number"
onChange={event => this.setState({ unit_quantity: event.target.value })}
defaultValue={ this.state.unit_quantity }
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<CustomInput
disabled
labelText="Unit price"
id="unit-price"
formControlProps={{ fullWidth: true }}
type="text"
onChange={ this._setUnitPrice }
defaultValue={ this.state.unit_price }
type="number"
value={ this.calculate("unit_price")() }
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<CustomInput
disabled
labelText="Unit amount"
id="unit-amount"
formControlProps={{ fullWidth: true }}
type="number"
value={ this.calculate("unit_amount")() }
/>
</ItemGrid>
</Grid>
<Grid container>
<ItemGrid xs={12} sm={12} md={4}>
<CustomInput
labelText="Whole quantity"
id="whole-quantity"
formControlProps={{ fullWidth: true }}
type="number"
onChange={event => this.setState({ whole_quantity: event.target.value })}
defaultValue={ this.state.whole_quantity }
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<CustomInput
disabled
labelText="Whole price"
id="whole-price"
formControlProps={{ fullWidth: true }}
type="number"
value={ this.calculate("whole_price")() }
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<CustomInput
disabled
labelText="Whole amount"
id="whole-amount"
formControlProps={{ fullWidth: true }}
type="number"
value={ this.calculate("whole_amount")() }
/>
</ItemGrid>
</Grid>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<CustomInput
disabled
labelText="Total amount"
id="total-amount"
formControlProps={{ fullWidth: true }}
type="number"
value={ this.calculate("total_amount")() }
/>
</ItemGrid>
</Grid>
Expand All @@ -83,7 +177,8 @@ class AddItem extends Component {
<Button
variant="raised"
style={{ backgroundColor: 'purple', color: 'white' }}
onClick={this._addItem}
//onClick={this._addItem}
onClick={()=>console.log(this.state)}
>Add</Button>
}
/>
Expand Down
17 changes: 13 additions & 4 deletions src/views/Sales/Sales.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import moment from 'moment';

import 'react-datepicker/dist/react-datepicker.css';

import { getSalesByDate, addSale } from '../../actions';
import { getSalesByDate, addSale, getAllItems } from '../../actions';

import { RegularCard, SalesTable, ItemGrid } from 'components';

Expand All @@ -26,6 +26,10 @@ class Sales extends Component {
this.props.getSalesByDate(this.state.from, this.state.from);
}

componentDidMount() {
this.props.getAllItems();
}

_handleFromChange = date => {
this.setState({ from: date });
}
Expand Down Expand Up @@ -80,7 +84,7 @@ class Sales extends Component {
content={
<SalesTable
tableHeaderColor="primary"
tableHead={['No.', 'Name', 'Unit Price', 'Quantity', 'Amount', 'Date Added', 'Date Updated', '']}
tableHead={['No.', 'Name', 'Unit Price', 'Qty.', 'Whole Price', 'Qty.', 'Amount', 'Date Added', 'Date Updated', '']}
tableData={this.props.sales}
updateSale={() => this.setState({ openUpdateSaleModal: true })}
/>
Expand All @@ -91,6 +95,7 @@ class Sales extends Component {
<AddSaleModal
open={this.state.openAddSaleModal}
close={() => this.setState({ openAddSaleModal: false })}
items={this.props.items}
/>
</Grid>
);
Expand All @@ -111,7 +116,11 @@ const styles = {

const mapStateToProps = state => {
const { sales } = state.sales;
return { sales };
const { items } = state.items;

return { sales, items };
}

export default connect(mapStateToProps, { getSalesByDate, addSale })(Sales);
export default connect(mapStateToProps, {
getSalesByDate, addSale, getAllItems
})(Sales);
Loading

0 comments on commit adf9bbe

Please sign in to comment.