Skip to content

Commit 0977e1b

Browse files
BenMaruchuBenMaruchu
committed
feat(settings): add feature types list
1 parent c7184fc commit 0977e1b

File tree

6 files changed

+835
-0
lines changed

6 files changed

+835
-0
lines changed

‎src/GeographicalFeatures/FeatureTypes/Filters/index.js

+235
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import {
2+
clearFocalPersonFilters,
3+
Connect,
4+
filterFocalPeople,
5+
} from '@codetanzania/ewea-api-states';
6+
import { httpActions } from '@codetanzania/ewea-api-client';
7+
import { Form } from '@ant-design/compatible';
8+
import '@ant-design/compatible/assets/index.css';
9+
import { Button } from 'antd';
10+
import PropTypes from 'prop-types';
11+
import React, { Component } from 'react';
12+
import SearchableSelectInput from '../../../components/SearchableSelectInput';
13+
14+
/* declarations */
15+
const {
16+
getPartyGroups,
17+
getAdministrativeAreas,
18+
getPartyRoles,
19+
getAgencies,
20+
} = httpActions;
21+
22+
/**
23+
* @class
24+
* @name EventStatusesFilters
25+
* @description Filter modal component for filtering contacts
26+
*
27+
* @version 0.1.0
28+
* @since 0.1.0
29+
*/
30+
class EventStatusesFilters extends Component {
31+
/**
32+
* @function
33+
* @name handleSubmit
34+
* @description Handle filter action
35+
*
36+
* @param {object} event onSubmit event object
37+
* @returns {undefined}
38+
*
39+
* @version 0.1.0
40+
* @since 0.1.0
41+
*/
42+
handleSubmit = (event) => {
43+
event.preventDefault();
44+
const {
45+
form: { validateFields },
46+
onCancel,
47+
} = this.props;
48+
49+
validateFields((error, values) => {
50+
if (!error) {
51+
filterFocalPeople(values);
52+
onCancel();
53+
}
54+
});
55+
};
56+
57+
/**
58+
* @function
59+
* @name handleClearFilter
60+
* @description Action handle when clear
61+
*
62+
* @version 0.1.0
63+
* @since 0.1.0
64+
*/
65+
handleClearFilter = () => {
66+
const { onCancel, onClearCache } = this.props;
67+
clearFocalPersonFilters();
68+
69+
onClearCache();
70+
onCancel();
71+
};
72+
73+
/**
74+
* @function
75+
* @name cacheFilters
76+
* @description cache lazy loaded value from filters
77+
*
78+
* @param {object} values Object with key value of what is to be cached
79+
*
80+
* @version 0.1.0
81+
* @since 0.1.0
82+
*/
83+
cacheFilters = (values) => {
84+
const { onCache } = this.props;
85+
onCache(values);
86+
};
87+
88+
render() {
89+
const {
90+
form: { getFieldDecorator },
91+
onCancel,
92+
filter,
93+
cached,
94+
} = this.props;
95+
96+
const formItemLayout = {
97+
labelCol: {
98+
xs: { span: 24 },
99+
sm: { span: 24 },
100+
md: { span: 24 },
101+
lg: { span: 24 },
102+
xl: { span: 24 },
103+
xxl: { span: 24 },
104+
},
105+
wrapperCol: {
106+
xs: { span: 24 },
107+
sm: { span: 24 },
108+
md: { span: 24 },
109+
lg: { span: 24 },
110+
xl: { span: 24 },
111+
xxl: { span: 24 },
112+
},
113+
};
114+
115+
return (
116+
<Form onSubmit={this.handleSubmit} autoComplete="off">
117+
{/* start contact group filters */}
118+
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
119+
<Form.Item {...formItemLayout} label="By Area(s)">
120+
{getFieldDecorator('area', {
121+
initialValue: filter ? filter.area : [],
122+
})(
123+
<SearchableSelectInput
124+
onSearch={getAdministrativeAreas}
125+
optionLabel={(area) => area.strings.name.en}
126+
optionValue="_id"
127+
mode="multiple"
128+
onCache={(areas) => {
129+
this.cacheFilters({ areas });
130+
}}
131+
initialValue={cached && cached.areas ? cached.areas : []}
132+
/>
133+
)}
134+
</Form.Item>
135+
{/* end contact group filters */}
136+
137+
{/* start contact group filters */}
138+
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
139+
<Form.Item {...formItemLayout} label="By Group(s)">
140+
{getFieldDecorator('group', {
141+
initialValue: filter ? filter.group : [],
142+
})(
143+
<SearchableSelectInput
144+
onSearch={getPartyGroups}
145+
optionLabel={(group) => group.strings.name.en}
146+
optionValue="_id"
147+
mode="multiple"
148+
onCache={(groups) => this.cacheFilters({ groups })}
149+
initialValue={cached && cached.groups ? cached.groups : []}
150+
/>
151+
)}
152+
</Form.Item>
153+
{/* end contact group filters */}
154+
155+
{/* start contact group filters */}
156+
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
157+
<Form.Item {...formItemLayout} label="By Role(s)">
158+
{getFieldDecorator('role', {
159+
initialValue: filter ? filter.role : [],
160+
})(
161+
<SearchableSelectInput
162+
onSearch={getPartyRoles}
163+
optionLabel={(role) => role.strings.name.en}
164+
optionValue="_id"
165+
mode="multiple"
166+
onCache={(roles) => this.cacheFilters({ roles })}
167+
initialValue={cached && cached.roles ? cached.roles : []}
168+
/>
169+
)}
170+
</Form.Item>
171+
{/* end contact group filters */}
172+
173+
{/* start contact group filters */}
174+
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
175+
<Form.Item {...formItemLayout} label="By Agencies">
176+
{getFieldDecorator('party', {
177+
initialValue: filter ? filter.party : [],
178+
})(
179+
<SearchableSelectInput
180+
onSearch={getAgencies}
181+
optionLabel="name"
182+
optionValue="_id"
183+
mode="multiple"
184+
onCache={(agencies) => this.cacheFilters({ agencies })}
185+
initialValue={cached && cached.agencies ? cached.agencies : []}
186+
/>
187+
)}
188+
</Form.Item>
189+
{/* end contact group filters */}
190+
191+
{/* form actions */}
192+
<Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
193+
<Button onClick={onCancel}>Cancel</Button>
194+
<Button style={{ marginLeft: 8 }} onClick={this.handleClearFilter}>
195+
Clear
196+
</Button>
197+
<Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
198+
Filter
199+
</Button>
200+
</Form.Item>
201+
{/* end form actions */}
202+
</Form>
203+
);
204+
}
205+
}
206+
207+
EventStatusesFilters.propTypes = {
208+
filter: PropTypes.objectOf(
209+
PropTypes.shape({
210+
groups: PropTypes.arrayOf(PropTypes.string),
211+
})
212+
),
213+
form: PropTypes.shape({
214+
getFieldDecorator: PropTypes.func,
215+
validateFields: PropTypes.func,
216+
}).isRequired,
217+
onCancel: PropTypes.func.isRequired,
218+
cached: PropTypes.shape({
219+
groups: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
220+
areas: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
221+
roles: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
222+
agencies: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
223+
}),
224+
onCache: PropTypes.func.isRequired,
225+
onClearCache: PropTypes.func.isRequired,
226+
};
227+
228+
EventStatusesFilters.defaultProps = {
229+
filter: null,
230+
cached: null,
231+
};
232+
233+
export default Connect(Form.create()(EventStatusesFilters), {
234+
filter: 'eventStatuses.filter',
235+
});

‎src/GeographicalFeatures/FeatureTypes/Form/index.js

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { putFeatureType, postFeatureType } from '@codetanzania/ewea-api-states';
2+
// import { Form } from '@ant-design/compatible';
3+
// import '@ant-design/compatible/assets/index.css';
4+
import { Button, Input, Form } from 'antd';
5+
import PropTypes from 'prop-types';
6+
import React from 'react';
7+
import { notifyError, notifySuccess } from '../../../util';
8+
9+
/* constants */
10+
const { TextArea } = Input;
11+
const formItemLayout = {
12+
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+
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+
30+
const FeatureTypeForm = ({ featureType, isEditForm, posting, onCancel }) => {
31+
const onFinish = (values) => {
32+
if (isEditForm) {
33+
const updatedEventStatus = { ...featureType, ...values };
34+
putFeatureType(
35+
updatedEventStatus,
36+
() => {
37+
notifySuccess('Feature type was updated successfully');
38+
},
39+
() => {
40+
notifyError(
41+
'Something occurred while updating feature type, please try again!'
42+
);
43+
}
44+
);
45+
} else {
46+
postFeatureType(
47+
values,
48+
() => {
49+
notifySuccess('Feature type was created successfully');
50+
},
51+
() => {
52+
notifyError(
53+
'Something occurred while saving feature type, please try again!'
54+
);
55+
}
56+
);
57+
}
58+
};
59+
60+
return (
61+
<Form
62+
onFinish={onFinish}
63+
{...formItemLayout} // eslint-disable-line
64+
initialValues={{
65+
...featureType,
66+
}}
67+
autoComplete="off"
68+
>
69+
{/* feature type name */}
70+
<Form.Item
71+
label="Name"
72+
name={['strings', 'name', 'en']}
73+
rules={[{ required: true, message: 'Feature type name is required' }]}
74+
>
75+
<Input />
76+
</Form.Item>
77+
{/* end feature type name */}
78+
79+
{/* feature type description */}
80+
<Form.Item
81+
{...formItemLayout} // eslint-disable-line
82+
label="Description"
83+
name={['strings', 'description', 'en']}
84+
>
85+
<TextArea autoSize={{ minRows: 3, maxRows: 10 }} />
86+
</Form.Item>
87+
{/* end feature type description */}
88+
89+
{/* form actions */}
90+
<Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
91+
<Button onClick={onCancel}>Cancel</Button>
92+
<Button
93+
style={{ marginLeft: 8 }}
94+
type="primary"
95+
htmlType="submit"
96+
loading={posting}
97+
>
98+
Save
99+
</Button>
100+
</Form.Item>
101+
{/* end form actions */}
102+
</Form>
103+
);
104+
};
105+
106+
FeatureTypeForm.propTypes = {
107+
isEditForm: PropTypes.bool.isRequired,
108+
featureType: PropTypes.shape({
109+
strings: PropTypes.shape({
110+
name: PropTypes.shape({ en: PropTypes.string }),
111+
abbreviation: PropTypes.shape({ en: PropTypes.string }),
112+
description: PropTypes.shape({ en: PropTypes.string }),
113+
}),
114+
}),
115+
onCancel: PropTypes.func.isRequired,
116+
posting: PropTypes.bool.isRequired,
117+
};
118+
119+
FeatureTypeForm.defaultProps = {
120+
featureType: null,
121+
};
122+
123+
export default FeatureTypeForm;

0 commit comments

Comments
 (0)