Skip to content

Commit 88c0c05

Browse files
webdevstarwebdevstar
committed
finish orderStatus
1 parent f5f02f0 commit 88c0c05

11 files changed

Lines changed: 604 additions & 0 deletions

File tree

‎src/admin/client/orderStatuses/actionTypes.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export const STATUSES_REQUEST = 'STATUSES_REQUEST';
2+
export const STATUSES_RECEIVE = 'STATUSES_RECEIVE';
3+
export const STATUSES_FAILURE = 'STATUSES_FAILURE';
4+
5+
export const STATUSES_SELECT = 'STATUSES_SELECT';
6+
export const STATUSES_DESELECT = 'STATUSES_DESELECT';
7+
8+
export const STATUS_UPDATE_REQUEST = 'STATUS_UPDATE_REQUEST';
9+
export const STATUS_UPDATE_SUCCESS = 'STATUS_UPDATE_SUCCESS';
10+
export const STATUS_UPDATE_FAILURE = 'STATUS_UPDATE_FAILURE';
11+
12+
export const STATUS_CREATE_SUCCESS = 'STATUS_CREATE_SUCCESS';
13+
export const STATUS_DELETE_SUCCESS = 'STATUS_DELETE_SUCCESS';

‎src/admin/client/orderStatuses/actions.js‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import * as t from './actionTypes';
2+
import api from 'lib/api';
3+
import messages from 'lib/text';
4+
5+
function requestStatuses() {
6+
return {
7+
type: t.STATUSES_REQUEST
8+
};
9+
}
10+
11+
function receiveStatuses(items) {
12+
return {
13+
type: t.STATUSES_RECEIVE,
14+
items
15+
};
16+
}
17+
18+
function receiveErrorStatuses(error) {
19+
return {
20+
type: t.STATUSES_FAILURE,
21+
error
22+
};
23+
}
24+
25+
export function selectStatus(id) {
26+
return {
27+
type: t.STATUSES_SELECT,
28+
selectedId: id
29+
};
30+
}
31+
32+
export function deselectStatus() {
33+
return {
34+
type: t.STATUSES_DESELECT
35+
};
36+
}
37+
38+
function requestUpdateStatus(id) {
39+
return {
40+
type: t.STATUS_UPDATE_REQUEST
41+
};
42+
}
43+
44+
function receiveUpdateStatus() {
45+
return {
46+
type: t.STATUS_UPDATE_SUCCESS
47+
};
48+
}
49+
50+
function errorUpdateStatus(error) {
51+
return {
52+
type: t.STATUS_UPDATE_FAILURE,
53+
error
54+
};
55+
}
56+
57+
function successCreateStatus(id) {
58+
return {
59+
type: t.STATUS_CREATE_SUCCESS
60+
};
61+
}
62+
63+
function successDeleteStatus(id) {
64+
return {
65+
type: t.STATUS_DELETE_SUCCESS
66+
};
67+
}
68+
69+
function fetchStatuses() {
70+
return dispatch => {
71+
dispatch(requestStatuses());
72+
return api.orderStatuses
73+
.list()
74+
.then(({ status, json }) => {
75+
json = json.sort((a, b) => a.position - b.position);
76+
77+
json.forEach((element, index, theArray) => {
78+
if (theArray[index].name === '') {
79+
theArray[index].name = `<${messages.draft}>`;
80+
}
81+
});
82+
83+
dispatch(receiveStatuses(json));
84+
})
85+
.catch(error => {
86+
dispatch(receiveErrorStatuses(error));
87+
});
88+
};
89+
}
90+
91+
function shouldFetchStatuses(state) {
92+
const statuses = state.orderStatuses;
93+
if (statuses.isFetched || statuses.isFetching) {
94+
return false;
95+
} else {
96+
return true;
97+
}
98+
}
99+
100+
export function fetchStatusesIfNeeded() {
101+
return (dispatch, getState) => {
102+
if (shouldFetchStatuses(getState())) {
103+
return dispatch(fetchStatuses());
104+
}
105+
};
106+
}
107+
108+
export function updateStatus(data) {
109+
return (dispatch, getState) => {
110+
dispatch(requestUpdateStatus(data.id));
111+
return api.orderStatuses
112+
.update(data.id, data)
113+
.then(({ status, json }) => {
114+
dispatch(receiveUpdateStatus());
115+
dispatch(fetchStatuses());
116+
})
117+
.catch(error => {
118+
dispatch(errorUpdateStatus(error));
119+
});
120+
};
121+
}
122+
123+
export function createStatus(data) {
124+
return (dispatch, getState) => {
125+
return api.orderStatuses
126+
.create(data)
127+
.then(({ status, json }) => {
128+
dispatch(successCreateStatus(json.id));
129+
dispatch(fetchStatuses());
130+
dispatch(selectStatus(json.id));
131+
})
132+
.catch(error => {
133+
//dispatch error
134+
console.log(error);
135+
});
136+
};
137+
}
138+
139+
export function deleteStatus(id) {
140+
return (dispatch, getState) => {
141+
return api.orderStatuses
142+
.delete(id)
143+
.then(({ status, json }) => {
144+
if (status === 200) {
145+
dispatch(successDeleteStatus(id));
146+
dispatch(deselectStatus());
147+
dispatch(fetchStatuses());
148+
} else {
149+
throw status;
150+
}
151+
})
152+
.catch(error => {
153+
//dispatch error
154+
console.log(error);
155+
});
156+
};
157+
}

‎src/admin/client/orderStatuses/components/list.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import messages from 'lib/text';
4+
import { List, ListItem } from 'material-ui/List';
5+
import FontIcon from 'material-ui/FontIcon';
6+
7+
const styles = {
8+
selectedItem: {
9+
backgroundColor: 'rgba(0, 0, 0, 0.1)'
10+
},
11+
innerItem: {
12+
paddingLeft: 55
13+
}
14+
};
15+
16+
const FolderIcon = <FontIcon className="material-icons">folder</FontIcon>;
17+
18+
export default class StatusesList extends React.Component {
19+
constructor(props) {
20+
super(props);
21+
}
22+
23+
componentDidMount() {
24+
this.props.onLoad();
25+
}
26+
27+
render() {
28+
const { onSelect, selectedId, items, showAll, showManage } = this.props;
29+
30+
const rows = items.map(item => (
31+
<ListItem
32+
key={item.id}
33+
className="treeItem"
34+
style={item.id === selectedId ? styles.selectedItem : null}
35+
innerDivStyle={styles.innerItem}
36+
primaryText={item.name}
37+
leftIcon={FolderIcon}
38+
onClick={() => {
39+
this.props.onSelect(item.id);
40+
}}
41+
/>
42+
));
43+
44+
return (
45+
<List>
46+
{showAll && (
47+
<ListItem
48+
className="treeItem"
49+
primaryText={messages.allOrderStatuses}
50+
style={'all' === selectedId ? styles.selectedItem : null}
51+
innerDivStyle={styles.innerItem}
52+
leftIcon={FolderIcon}
53+
onClick={() => {
54+
onSelect('all');
55+
}}
56+
/>
57+
)}
58+
59+
{rows}
60+
61+
{showManage && (
62+
<Link to="/admin/orders/statuses" style={{ textDecoration: 'none' }}>
63+
<ListItem
64+
className="treeItem"
65+
primaryText={messages.manageOrderStatuses}
66+
innerDivStyle={styles.innerItem}
67+
leftIcon={
68+
<FontIcon className="material-icons">settings</FontIcon>
69+
}
70+
/>
71+
</Link>
72+
)}
73+
</List>
74+
);
75+
}
76+
}

‎src/admin/client/orderStatuses/edit/components/form.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from 'react';
2+
import { Field, reduxForm } from 'redux-form';
3+
import { TextField } from 'redux-form-material-ui';
4+
5+
import messages from 'lib/text';
6+
import style from './style.css';
7+
8+
import Paper from 'material-ui/Paper';
9+
import FlatButton from 'material-ui/FlatButton';
10+
import RaisedButton from 'material-ui/RaisedButton';
11+
12+
const validate = values => {
13+
const errors = {};
14+
const requiredFields = ['name'];
15+
16+
requiredFields.forEach(field => {
17+
if (values && !values[field]) {
18+
errors[field] = messages.errors_required;
19+
}
20+
});
21+
22+
return errors;
23+
};
24+
25+
class Form extends React.Component {
26+
constructor(props) {
27+
super(props);
28+
}
29+
30+
render() {
31+
let {
32+
handleSubmit,
33+
pristine,
34+
submitting,
35+
isSaving,
36+
initialValues
37+
} = this.props;
38+
39+
let statusId = null;
40+
41+
if (initialValues) {
42+
statusId = initialValues.id;
43+
}
44+
45+
return (
46+
<Paper className="paper-box" zDepth={1}>
47+
<form onSubmit={handleSubmit}>
48+
<div className={style.innerBox}>
49+
<Field
50+
name="name"
51+
component={TextField}
52+
floatingLabelText={messages.orderStatusName + ' *'}
53+
fullWidth={true}
54+
/>
55+
<br />
56+
<Field
57+
name="description"
58+
component={TextField}
59+
floatingLabelText={messages.description}
60+
fullWidth={true}
61+
multiLine={true}
62+
rows={1}
63+
/>
64+
</div>
65+
<div className="buttons-box">
66+
<FlatButton
67+
label={messages.cancel}
68+
className={style.button}
69+
onClick={this.props.onCancel}
70+
/>
71+
<RaisedButton
72+
type="submit"
73+
label={statusId ? messages.save : messages.add}
74+
primary={true}
75+
className={style.button}
76+
disabled={pristine || submitting || isSaving}
77+
/>
78+
</div>
79+
</form>
80+
</Paper>
81+
);
82+
}
83+
}
84+
85+
export default reduxForm({
86+
form: 'FormOrderStatus',
87+
validate,
88+
enableReinitialize: true
89+
})(Form);

‎src/admin/client/orderStatuses/edit/components/style.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.shortBox {
2+
max-width: 300px;
3+
}
4+
5+
.button {
6+
margin-left: 12px;
7+
}
8+
9+
.toggle {
10+
margin-top: 12px;
11+
margin-bottom: 22px;
12+
}
13+
14+
.innerBox {
15+
padding: 30px;
16+
}
17+
18+
.error {
19+
color: rgb(244, 67, 54);
20+
}

‎src/admin/client/orderStatuses/edit/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { connect } from 'react-redux';
2+
import { reset } from 'redux-form';
3+
import { updateStatus, createStatus, deselectStatus } from '../actions';
4+
import Form from './components/form';
5+
6+
const mapStateToProps = state => {
7+
return {
8+
statusId: state.orderStatuses.selectedId,
9+
items: state.orderStatuses.items,
10+
initialValues: state.orderStatuses.items.find(
11+
item => item.id === state.orderStatuses.selectedId
12+
),
13+
isSaving: state.orderStatuses.isSaving
14+
};
15+
};
16+
17+
const mapDispatchToProps = dispatch => {
18+
return {
19+
onSubmit: values => {
20+
if (values.id) {
21+
dispatch(updateStatus(values));
22+
} else {
23+
dispatch(createStatus(values));
24+
}
25+
},
26+
onCancel: () => {
27+
dispatch(deselectStatus());
28+
dispatch(reset('FormOrderStatus'));
29+
}
30+
};
31+
};
32+
33+
export default connect(
34+
mapStateToProps,
35+
mapDispatchToProps
36+
)(Form);

0 commit comments

Comments
 (0)