feat(administrativelevels): add list and allow crud actions

Author: BenMaruchu

src/GeographicalFeatures/AdministrativeLevels/Filters/index.js

@@ -0,0 +1,235 @@
+import {
+  clearFocalPersonFilters,
+  Connect,
+  filterFocalPeople,
+} from '@codetanzania/ewea-api-states';
+import { httpActions } from '@codetanzania/ewea-api-client';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Button } from 'antd';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import SearchableSelectInput from '../../../components/SearchableSelectInput';
+
+/* declarations */
+const {
+  getPartyGroups,
+  getAdministrativeAreas,
+  getPartyRoles,
+  getAgencies,
+} = httpActions;
+
+/**
+ * @class
+ * @name EventStatusesFilters
+ * @description Filter modal component for filtering contacts
+ *
+ * @version 0.1.0
+ * @since 0.1.0
+ */
+class EventStatusesFilters extends Component {
+  /**
+   * @function
+   * @name handleSubmit
+   * @description Handle filter action
+   *
+   * @param {object} event onSubmit event object
+   * @returns {undefined}
+   *
+   * @version 0.1.0
+   * @since 0.1.0
+   */
+  handleSubmit = (event) => {
+    event.preventDefault();
+    const {
+      form: { validateFields },
+      onCancel,
+    } = this.props;
+
+    validateFields((error, values) => {
+      if (!error) {
+        filterFocalPeople(values);
+        onCancel();
+      }
+    });
+  };
+
+  /**
+   * @function
+   * @name handleClearFilter
+   * @description Action handle when clear
+   *
+   * @version 0.1.0
+   * @since 0.1.0
+   */
+  handleClearFilter = () => {
+    const { onCancel, onClearCache } = this.props;
+    clearFocalPersonFilters();
+
+    onClearCache();
+    onCancel();
+  };
+
+  /**
+   * @function
+   * @name cacheFilters
+   * @description cache lazy loaded value from filters
+   *
+   * @param {object} values Object with key value of what is to be cached
+   *
+   * @version 0.1.0
+   * @since 0.1.0
+   */
+  cacheFilters = (values) => {
+    const { onCache } = this.props;
+    onCache(values);
+  };
+
+  render() {
+    const {
+      form: { getFieldDecorator },
+      onCancel,
+      filter,
+      cached,
+    } = this.props;
+
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 24 },
+        md: { span: 24 },
+        lg: { span: 24 },
+        xl: { span: 24 },
+        xxl: { span: 24 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 24 },
+        md: { span: 24 },
+        lg: { span: 24 },
+        xl: { span: 24 },
+        xxl: { span: 24 },
+      },
+    };
+
+    return (
+      <Form onSubmit={this.handleSubmit} autoComplete="off">
+        {/* start contact group filters */}
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <Form.Item {...formItemLayout} label="By Area(s)">
+          {getFieldDecorator('area', {
+            initialValue: filter ? filter.area : [],
+          })(
+            <SearchableSelectInput
+              onSearch={getAdministrativeAreas}
+              optionLabel={(area) => area.strings.name.en}
+              optionValue="_id"
+              mode="multiple"
+              onCache={(areas) => {
+                this.cacheFilters({ areas });
+              }}
+              initialValue={cached && cached.areas ? cached.areas : []}
+            />
+          )}
+        </Form.Item>
+        {/* end contact group filters */}
+
+        {/* start contact group filters */}
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <Form.Item {...formItemLayout} label="By Group(s)">
+          {getFieldDecorator('group', {
+            initialValue: filter ? filter.group : [],
+          })(
+            <SearchableSelectInput
+              onSearch={getPartyGroups}
+              optionLabel={(group) => group.strings.name.en}
+              optionValue="_id"
+              mode="multiple"
+              onCache={(groups) => this.cacheFilters({ groups })}
+              initialValue={cached && cached.groups ? cached.groups : []}
+            />
+          )}
+        </Form.Item>
+        {/* end contact group filters */}
+
+        {/* start contact group filters */}
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <Form.Item {...formItemLayout} label="By Role(s)">
+          {getFieldDecorator('role', {
+            initialValue: filter ? filter.role : [],
+          })(
+            <SearchableSelectInput
+              onSearch={getPartyRoles}
+              optionLabel={(role) => role.strings.name.en}
+              optionValue="_id"
+              mode="multiple"
+              onCache={(roles) => this.cacheFilters({ roles })}
+              initialValue={cached && cached.roles ? cached.roles : []}
+            />
+          )}
+        </Form.Item>
+        {/* end contact group filters */}
+
+        {/* start contact group filters */}
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <Form.Item {...formItemLayout} label="By Agencies">
+          {getFieldDecorator('party', {
+            initialValue: filter ? filter.party : [],
+          })(
+            <SearchableSelectInput
+              onSearch={getAgencies}
+              optionLabel="name"
+              optionValue="_id"
+              mode="multiple"
+              onCache={(agencies) => this.cacheFilters({ agencies })}
+              initialValue={cached && cached.agencies ? cached.agencies : []}
+            />
+          )}
+        </Form.Item>
+        {/* end contact group filters */}
+
+        {/* form actions */}
+        <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button style={{ marginLeft: 8 }} onClick={this.handleClearFilter}>
+            Clear
+          </Button>
+          <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
+            Filter
+          </Button>
+        </Form.Item>
+        {/* end form actions */}
+      </Form>
+    );
+  }
+}
+
+EventStatusesFilters.propTypes = {
+  filter: PropTypes.objectOf(
+    PropTypes.shape({
+      groups: PropTypes.arrayOf(PropTypes.string),
+    })
+  ),
+  form: PropTypes.shape({
+    getFieldDecorator: PropTypes.func,
+    validateFields: PropTypes.func,
+  }).isRequired,
+  onCancel: PropTypes.func.isRequired,
+  cached: PropTypes.shape({
+    groups: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
+    areas: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
+    roles: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
+    agencies: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
+  }),
+  onCache: PropTypes.func.isRequired,
+  onClearCache: PropTypes.func.isRequired,
+};
+
+EventStatusesFilters.defaultProps = {
+  filter: null,
+  cached: null,
+};
+
+export default Connect(Form.create()(EventStatusesFilters), {
+  filter: 'eventStatuses.filter',
+});

src/GeographicalFeatures/AdministrativeLevels/Form/index.js

@@ -0,0 +1,140 @@
+import {
+  putAdministrativeLevel,
+  postAdministrativeLevel,
+} from '@codetanzania/ewea-api-states';
+import { Button, Input, Form } from 'antd';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { notifyError, notifySuccess } from '../../../util';
+
+/* constants */
+const { TextArea } = Input;
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 24 },
+    md: { span: 24 },
+    lg: { span: 24 },
+    xl: { span: 24 },
+    xxl: { span: 24 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 24 },
+    md: { span: 24 },
+    lg: { span: 24 },
+    xl: { span: 24 },
+    xxl: { span: 24 },
+  },
+};
+
+/**
+ * @function
+ * @name AdministrativeLevelForm
+ * @description Administrative Level Form
+ * @param {object} props React props
+ * @returns {object} React Component
+ * @version 0.1.0
+ * @since 0.1.0
+ */
+const AdministrativeLevelForm = ({
+  administrativeLevel,
+  isEditForm,
+  posting,
+  onCancel,
+}) => {
+  const onFinish = (values) => {
+    if (isEditForm) {
+      const updatedEventStatus = { ...administrativeLevel, ...values };
+      putAdministrativeLevel(
+        updatedEventStatus,
+        () => {
+          notifySuccess('Administrative level was updated successfully');
+        },
+        () => {
+          notifyError(
+            'Something occurred while updating administrative level, please try again!'
+          );
+        }
+      );
+    } else {
+      postAdministrativeLevel(
+        values,
+        () => {
+          notifySuccess('Administrative level was created successfully');
+        },
+        () => {
+          notifyError(
+            'Something occurred while saving administrative level, please try again!'
+          );
+        }
+      );
+    }
+  };
+
+  return (
+    <Form
+      onFinish={onFinish}
+      {...formItemLayout} // eslint-disable-line
+      initialValues={{
+        ...administrativeLevel,
+      }}
+      autoComplete="off"
+    >
+      {/* administrative level name */}
+      <Form.Item
+        label="Name"
+        name={['strings', 'name', 'en']}
+        rules={[
+          { required: true, message: 'Administrative level name is required' },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      {/* end administrative level name */}
+
+      {/* administrative level description */}
+      <Form.Item
+        {...formItemLayout} // eslint-disable-line
+        label="Description"
+        name={['strings', 'description', 'en']}
+      >
+        <TextArea autoSize={{ minRows: 3, maxRows: 10 }} />
+      </Form.Item>
+      {/* end administrative level description */}
+
+      {/* form actions */}
+      <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
+        <Button onClick={onCancel}>Cancel</Button>
+        <Button
+          style={{ marginLeft: 8 }}
+          type="primary"
+          htmlType="submit"
+          loading={posting}
+        >
+          Save
+        </Button>
+      </Form.Item>
+      {/* end form actions */}
+    </Form>
+  );
+};
+
+AdministrativeLevelForm.propTypes = {
+  isEditForm: PropTypes.bool.isRequired,
+  administrativeLevel: PropTypes.shape({
+    strings: PropTypes.shape({
+      name: PropTypes.shape({ en: PropTypes.string }),
+      abbreviation: PropTypes.shape({ en: PropTypes.string }),
+      description: PropTypes.shape({ en: PropTypes.string }),
+    }),
+  }),
+  onCancel: PropTypes.func.isRequired,
+  posting: PropTypes.bool.isRequired,
+};
+
+AdministrativeLevelForm.defaultProps = {
+  administrativeLevel: null,
+};
+
+export default AdministrativeLevelForm;