Skip to content

Commit 165846c

Browse files
lykmapipolykmapipo
committed
refactor(units): improve ui & migrate to antdv4
see #250
1 parent 5f99f83 commit 165846c

File tree

2 files changed

+394
-341
lines changed

2 files changed

+394
-341
lines changed

‎src/Units/Form/index.js

+149-164
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,170 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { Button, Input, Form, Row, Col } from 'antd';
34
import { reduxActions } from '@codetanzania/ewea-api-states';
4-
import { Form } from '@ant-design/compatible';
5-
import '@ant-design/compatible/assets/index.css';
6-
import { Button, Input } from 'antd';
75
import { notifyError, notifySuccess } from '../../util';
86

7+
/* state actions */
98
const { putUnit, postUnit } = reduxActions;
109

10+
/* ui */
11+
const { TextArea } = Input;
12+
const labelCol = {
13+
xs: { span: 24 },
14+
sm: { span: 24 },
15+
md: { span: 24 },
16+
lg: { span: 24 },
17+
xl: { span: 24 },
18+
xxl: { span: 24 },
19+
};
20+
const wrapperCol = {
21+
xs: { span: 24 },
22+
sm: { span: 24 },
23+
md: { span: 24 },
24+
lg: { span: 24 },
25+
xl: { span: 24 },
26+
xxl: { span: 24 },
27+
};
28+
29+
/* messages */
30+
const MESSAGE_POST_SUCCESS = 'Unit was created successfully';
31+
const MESSAGE_POST_ERROR =
32+
'Something occurred while saving Unit, please try again!';
33+
const MESSAGE_PUT_SUCCESS = 'Unit was updated successfully';
34+
const MESSAGE_PUT_ERROR =
35+
'Something occurred while updating Unit, please try again!';
36+
1137
/**
12-
* @class
38+
* @function UnitForm
1339
* @name UnitForm
14-
* @description Render form for creating a new unit
15-
*
16-
* @version 0.1.0
40+
* @description Form for create and edit unit of measure
41+
* @param {object} props Valid form properties
42+
* @param {object} props.unit Valid unit object
43+
* @param {boolean} props.isEditForm Flag wether form is on edit mode
44+
* @param {boolean} props.isPosting Flag whether form is posting data
45+
* @param {Function} props.onCancel Form cancel callback
46+
* @returns {object} UnitForm component
47+
* @author lally elias <lallyelias87@gmail.com>
48+
* @license MIT
1749
* @since 0.1.0
50+
* @version 0.1.0
51+
* @static
52+
* @public
53+
* @example
54+
*
55+
* <UnitForm
56+
* unit={unit}
57+
* isEditForm={isEditForm}
58+
* isPosting={isPosting}
59+
* onCancel={this.handleCloseUnitForm}
60+
* />
61+
*
1862
*/
19-
class UnitForm extends Component {
20-
/**
21-
* @function
22-
* @name handleSubmit
23-
* @description call back function to handle submit action
24-
*
25-
* @param {object} e event object
26-
*
27-
* @returns {undefined} does not return anything
28-
*
29-
* @version 0.1.0
30-
* @since 0.1.0
31-
*/
32-
handleSubmit = (e) => {
33-
e.preventDefault();
34-
const {
35-
form: { validateFieldsAndScroll },
36-
eventType,
37-
isEditForm,
38-
} = this.props;
39-
40-
validateFieldsAndScroll((error, values) => {
41-
if (!error) {
42-
const payload = {
43-
strings: {
44-
code: values.code,
45-
name: {
46-
en: values.name,
47-
},
48-
description: {
49-
en: values.description,
50-
},
51-
},
52-
};
53-
if (isEditForm) {
54-
const updatedContact = { ...eventType, ...payload };
55-
putUnit(
56-
updatedContact,
57-
() => {
58-
notifySuccess('Unit was updated successfully');
59-
},
60-
() => {
61-
notifyError(
62-
'Something occurred while updating Unit, please try again!'
63-
);
64-
}
65-
);
66-
} else {
67-
postUnit(
68-
payload,
69-
() => {
70-
notifySuccess('Unit was created successfully');
71-
},
72-
() => {
73-
notifyError(
74-
'Something occurred while saving Unit, please try again!'
75-
);
76-
}
77-
);
78-
}
79-
}
80-
});
63+
const UnitForm = ({ unit, isEditForm, isPosting, onCancel }) => {
64+
// form finish(submit) handler
65+
const onFinish = (values) => {
66+
if (isEditForm) {
67+
const updates = { ...unit, ...values };
68+
putUnit(
69+
updates,
70+
() => notifySuccess(MESSAGE_PUT_SUCCESS),
71+
() => notifyError(MESSAGE_PUT_ERROR)
72+
);
73+
} else {
74+
postUnit(
75+
values,
76+
() => notifySuccess(MESSAGE_POST_SUCCESS),
77+
() => notifyError(MESSAGE_POST_ERROR)
78+
);
79+
}
8180
};
8281

83-
render() {
84-
const {
85-
posting,
86-
onCancel,
87-
isEditForm,
88-
eventType,
89-
form: { getFieldDecorator },
90-
} = this.props;
91-
92-
const formItemLayout = {
93-
labelCol: {
94-
xs: { span: 24 },
95-
sm: { span: 24 },
96-
md: { span: 24 },
97-
lg: { span: 24 },
98-
xl: { span: 24 },
99-
xxl: { span: 24 },
100-
},
101-
wrapperCol: {
102-
xs: { span: 24 },
103-
sm: { span: 24 },
104-
md: { span: 24 },
105-
lg: { span: 24 },
106-
xl: { span: 24 },
107-
xxl: { span: 24 },
108-
},
109-
};
82+
return (
83+
<Form
84+
labelCol={labelCol}
85+
wrapperCol={wrapperCol}
86+
onFinish={onFinish}
87+
initialValues={{ ...unit }}
88+
autoComplete="off"
89+
>
90+
{/* start:name */}
91+
<Form.Item
92+
label="Name"
93+
title="Unit name e.g Kilogram"
94+
name={['strings', 'name', 'en']}
95+
rules={[
96+
{
97+
required: true,
98+
message: 'Unit name is required',
99+
},
100+
]}
101+
>
102+
<Input />
103+
</Form.Item>
104+
{/* end:name */}
110105

111-
return (
112-
<Form onSubmit={this.handleSubmit} autoComplete="off">
113-
{/* Unit name */}
114-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
115-
<Form.Item {...formItemLayout} label="Name">
116-
{getFieldDecorator('name', {
117-
initialValue: isEditForm ? eventType.strings.name.en : undefined,
118-
rules: [
106+
{/* start: abbreviation & symbol */}
107+
<Row justify="space-between">
108+
{/* start:abbreviation */}
109+
<Col span={11}>
110+
<Form.Item
111+
label="Abbreviation"
112+
title="Unit abbreviation e.g kg"
113+
name={['strings', 'abbreviation', 'en']}
114+
rules={[
119115
{
120116
required: true,
121-
message: ' Units name is required',
122-
},
123-
],
124-
})(<Input />)}
125-
</Form.Item>
126-
{/* end Unit name */}
127-
128-
{/* Unit code */}
129-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
130-
<Form.Item {...formItemLayout} label="Unit code">
131-
{getFieldDecorator('code', {
132-
initialValue: isEditForm ? eventType.strings.code : undefined,
133-
rules: [
134-
{
135-
required: false,
117+
message: 'Unit abbreviation is required',
136118
},
137-
],
138-
})(<Input />)}
139-
</Form.Item>
140-
{/* end Unit code */}
119+
]}
120+
>
121+
<Input />
122+
</Form.Item>
123+
</Col>
124+
{/* end:abbreviation */}
125+
{/* start:symbol */}
126+
<Col span={11}>
127+
<Form.Item
128+
label="Symbol"
129+
title="Unit symbol e.g $"
130+
name={['strings', 'symbol']}
131+
>
132+
<Input />
133+
</Form.Item>
134+
</Col>
135+
{/* end:symbol */}
136+
</Row>
137+
{/* end: abbreviation & symbol */}
141138

142-
{/* Unit Description */}
143-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
144-
<Form.Item {...formItemLayout} label="Description">
145-
{getFieldDecorator('description', {
146-
initialValue: isEditForm
147-
? eventType.strings.description.en
148-
: undefined,
149-
rules: [
150-
{
151-
required: true,
152-
message: 'Unit Description is required',
153-
},
154-
],
155-
})(<Input />)}
156-
</Form.Item>
157-
{/* end Unit */}
139+
{/* start:description */}
140+
<Form.Item
141+
label="Description"
142+
title="Unit usage description"
143+
name={['strings', 'description', 'en']}
144+
>
145+
<TextArea autoSize={{ minRows: 3, maxRows: 10 }} />
146+
</Form.Item>
147+
{/* end:description */}
158148

159-
{/* form actions */}
160-
<Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
161-
<Button onClick={onCancel}>Cancel</Button>
162-
<Button
163-
style={{ marginLeft: 8 }}
164-
type="primary"
165-
htmlType="submit"
166-
loading={posting}
167-
>
168-
Save
169-
</Button>
170-
</Form.Item>
171-
{/* end form actions */}
172-
</Form>
173-
);
174-
}
175-
}
149+
{/* start:form actions */}
150+
<Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
151+
<Button onClick={onCancel}>Cancel</Button>
152+
<Button
153+
style={{ marginLeft: 8 }}
154+
type="primary"
155+
htmlType="submit"
156+
loading={isPosting}
157+
>
158+
Save
159+
</Button>
160+
</Form.Item>
161+
{/* end:form actions */}
162+
</Form>
163+
);
164+
};
176165

177166
UnitForm.propTypes = {
178-
eventType: PropTypes.shape({
167+
unit: PropTypes.shape({
179168
strings: PropTypes.shape({
180169
code: PropTypes.string.isRequired,
181170
name: PropTypes.shape({
@@ -188,12 +177,8 @@ UnitForm.propTypes = {
188177
}),
189178
}).isRequired,
190179
isEditForm: PropTypes.bool.isRequired,
191-
posting: PropTypes.bool.isRequired,
180+
isPosting: PropTypes.bool.isRequired,
192181
onCancel: PropTypes.func.isRequired,
193-
form: PropTypes.shape({
194-
getFieldDecorator: PropTypes.func,
195-
validateFieldsAndScroll: PropTypes.func,
196-
}).isRequired,
197182
};
198183

199-
export default Form.create()(UnitForm);
184+
export default UnitForm;

0 commit comments

Comments
 (0)