Skip to content

Commit 1d66e71

Browse files
webdevstarwebdevstar
committed
upload
1 parent 7ee88a6 commit 1d66e71

5 files changed

Lines changed: 234 additions & 0 deletions

File tree

‎src/admin/client/modules/apps/list/components/head.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import Subheader from 'material-ui/Subheader';
3+
import Checkbox from 'material-ui/Checkbox';
4+
import messages from 'lib/text';
5+
6+
export default ({ onSelectAll }) => (
7+
<Subheader style={{ paddingRight: 16 }}>
8+
<div className="row middle-xs">
9+
<div className="col-xs-1">
10+
<Checkbox
11+
onCheck={(event, isInputChecked) => {
12+
onSelectAll(isInputChecked);
13+
}}
14+
/>
15+
</div>
16+
<div className="col-xs-5">{messages.customers_name}</div>
17+
<div className="col-xs-3">{messages.customers_location}</div>
18+
<div className="col-xs-1">{messages.customers_orders}</div>
19+
<div
20+
className="col-xs-2"
21+
style={{ textAlign: 'right', paddingRight: 16 }}
22+
>
23+
{messages.customers_totalSpent}
24+
</div>
25+
</div>
26+
</Subheader>
27+
);

‎src/admin/client/modules/apps/list/components/item.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import Checkbox from 'material-ui/Checkbox';
4+
import { ListItem } from 'material-ui/List';
5+
import Divider from 'material-ui/Divider';
6+
import FontIcon from 'material-ui/FontIcon';
7+
import messages from 'lib/text';
8+
import * as helper from 'lib/helper';
9+
import style from './style.css';
10+
11+
const CustomersListItem = ({ customer, onSelect, selected, settings }) => {
12+
const checked = selected.includes(customer.id);
13+
let totalSpentFormatted = helper.formatCurrency(
14+
customer.total_spent,
15+
settings
16+
);
17+
18+
return (
19+
<div className={'customers-item' + (checked === true ? ' selected' : '')}>
20+
<ListItem
21+
style={{ cursor: 'normal' }}
22+
primaryText={
23+
<div className="row middle-xs">
24+
<div className="col-xs-1">
25+
<Checkbox
26+
checked={checked}
27+
onCheck={(event, isInputChecked) => {
28+
onSelect(customer.id, isInputChecked);
29+
}}
30+
/>
31+
</div>
32+
<div className="col-xs-5">
33+
<Link
34+
to={'/admin/customer/' + customer.id}
35+
className={style.customerName}
36+
>
37+
{customer.full_name}
38+
<br />
39+
<small>{customer.group_name}</small>
40+
</Link>
41+
</div>
42+
<div className={'col-xs-3 ' + style.location}>
43+
{customer.shipping &&
44+
customer.shipping.city && (
45+
<span>
46+
<FontIcon
47+
style={{
48+
color: 'rgba(0, 0, 0, 0.4)',
49+
fontSize: 16,
50+
marginRight: 6
51+
}}
52+
className="material-icons"
53+
>
54+
place
55+
</FontIcon>
56+
{customer.shipping.city}
57+
</span>
58+
)}
59+
</div>
60+
<div className="col-xs-1">{customer.orders_count || 0}</div>
61+
<div className="col-xs-2">
62+
<div className={style.price}>{totalSpentFormatted}</div>
63+
</div>
64+
</div>
65+
}
66+
/>
67+
<Divider />
68+
</div>
69+
);
70+
};
71+
72+
export default CustomersListItem;

‎src/admin/client/modules/apps/list/components/list.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import { List } from 'material-ui/List';
3+
import Divider from 'material-ui/Divider';
4+
import Head from './head';
5+
import CustomersListItem from './item';
6+
import RaisedButton from 'material-ui/RaisedButton';
7+
import FontIcon from 'material-ui/FontIcon';
8+
import messages from 'lib/text';
9+
import style from './style.css';
10+
11+
export default class CustomersList extends React.Component {
12+
constructor(props) {
13+
super(props);
14+
}
15+
16+
componentDidMount() {
17+
this.props.onLoad();
18+
}
19+
20+
render() {
21+
const {
22+
items,
23+
selected,
24+
loadingItems,
25+
hasMore,
26+
onSelect,
27+
onSelectAll,
28+
loadMore,
29+
settings
30+
} = this.props;
31+
const rows = items.map((item, index) => (
32+
<CustomersListItem
33+
key={index}
34+
customer={item}
35+
selected={selected}
36+
onSelect={onSelect}
37+
settings={settings}
38+
/>
39+
));
40+
41+
return (
42+
<div>
43+
<List>
44+
<Head onSelectAll={onSelectAll} />
45+
<Divider />
46+
{rows}
47+
<div className={style.more}>
48+
<RaisedButton
49+
disabled={loadingItems || !hasMore}
50+
label={messages.actions_loadMore}
51+
labelPosition="before"
52+
primary={false}
53+
icon={<FontIcon className="material-icons">refresh</FontIcon>}
54+
onClick={loadMore}
55+
/>
56+
</div>
57+
</List>
58+
</div>
59+
);
60+
}
61+
}

‎src/admin/client/modules/apps/list/components/style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.customerName {
2+
text-decoration: none;
3+
font-weight: 400;
4+
color: rgb(0,142,180);
5+
}
6+
7+
.customerName small {
8+
color: rgba(0, 0, 0, 0.4);
9+
}
10+
11+
.location {
12+
color: rgba(0, 0, 0, 0.4);
13+
}
14+
15+
.price {
16+
word-break: break-all;
17+
text-align: right;
18+
margin-right: 10px;
19+
}
20+
21+
.more {
22+
padding: 40px 0;
23+
text-align: center;
24+
}

‎src/admin/client/modules/apps/list/index.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { connect } from 'react-redux';
2+
import {
3+
fetchCustomers,
4+
selectCustomer,
5+
deselectCustomer,
6+
selectAllCustomer,
7+
deselectAllCustomer,
8+
fetchMoreCustomers
9+
} from '../actions';
10+
import List from './components/list';
11+
12+
const mapStateToProps = state => {
13+
return {
14+
settings: state.settings.settings,
15+
items: state.customers.items,
16+
selected: state.customers.selected,
17+
loadingItems: state.customers.loadingItems,
18+
hasMore: state.customers.hasMore
19+
};
20+
};
21+
22+
const mapDispatchToProps = dispatch => {
23+
return {
24+
onLoad: () => {
25+
dispatch(fetchCustomers());
26+
},
27+
onSelect: (customerId, checked) => {
28+
if (checked) {
29+
dispatch(selectCustomer(customerId));
30+
} else {
31+
dispatch(deselectCustomer(customerId));
32+
}
33+
},
34+
onSelectAll: checked => {
35+
if (checked) {
36+
dispatch(selectAllCustomer());
37+
} else {
38+
dispatch(deselectAllCustomer());
39+
}
40+
},
41+
loadMore: () => {
42+
dispatch(fetchMoreCustomers());
43+
}
44+
};
45+
};
46+
47+
export default connect(
48+
mapStateToProps,
49+
mapDispatchToProps
50+
)(List);

0 commit comments

Comments
 (0)