Display critical facility details and min map

package.json

@@ -36,6 +36,7 @@
     "echarts-for-react": "^3.0.1",
     "history": "^5.0.0",
     "inflection": "^1.13.1",
+    "leaflet": "^1.7.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
@@ -45,7 +46,7 @@
     "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
-    "react-map-gl": "^6.1.15",
+    "react-leaflet": "^3.2.0",
     "react-router-dom": "^5.2.0",
     "react-simple-maps": "^2.3.0",
     "react-to-print": "^2.12.4"

src/GeographicalFeatures/CriticalFacilities/DetailsView/Body.js

@@ -2,12 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { reduxActions } from '@codetanzania/ewea-api-states';
-import { Button, Col, Row } from 'antd';
+import { Button, Col, Row, Typography } from 'antd';
 import { EditOutlined, ReloadOutlined } from '@ant-design/icons';
 import { notifyError, notifySuccess } from '../../../util';
+import './styles.css';
+import BaseMap from '../../../components/BaseMap';
 
 /* redux actions */
 const { getFeature } = reduxActions;
+const { Text } = Typography;
 
 /**
  * @function
@@ -61,6 +64,108 @@ const CriticalFacilityToolbar = ({ criticalFacility, onEdit }) => {
   );
 };
 
+CriticalFacilityToolbar.propTypes = {
+  criticalFacility: PropTypes.shape({
+    _id: PropTypes.string,
+  }).isRequired,
+  onEdit: PropTypes.func.isRequired,
+};
+
+/**
+ * @function
+ * @name CriticalFacilityMapView
+ *  @param {object} props props object
+ * @param props.criticalFacility
+ * @description visualization of a critical facility on map
+ * @returns {object} React component
+ * @version 0.1.0
+ * @since 0.1.0
+ */
+const CriticalFacilityMapView = ({ criticalFacility }) => {
+  return criticalFacility?.geos?.point ? (
+    <BaseMap />
+  ) : (
+    `Sorry we can't show map, this critical facility doesn't have spatial data ${JSON.stringify(
+      criticalFacility.geos.point
+    )}`
+  );
+};
+
+CriticalFacilityMapView.propTypes = {
+  criticalFacility: PropTypes.shape({
+    _id: PropTypes.string,
+    strings: PropTypes.shape({
+      name: PropTypes.shape({
+        en: PropTypes.string,
+      }),
+      description: PropTypes.shape({
+        en: PropTypes.string,
+      }),
+    }),
+    geos: PropTypes.shape({
+      point: PropTypes.shape({
+        geometry: PropTypes.shape({
+          type: PropTypes.string.isRequired,
+          coordinates: PropTypes.arrayOf(PropTypes.any).isRequired,
+        }),
+      }),
+    }),
+  }).isRequired,
+};
+
+/**
+ * @function
+ * @name CriticalFacilityDetails
+ * @param {object} props Props
+ * @param {string} props.name critical facility name
+ * @param {string} props.code critical facility code
+ * @param {string} props.area critical facility area
+ * @param {string} props.abbreviation critical facility abbreviation
+ * @param {string} props.description critical facility description
+ * @param {Array} props.custodians critical facility custodians
+ * @description This is event critical facility details section which will be visible
+ * @returns {object} CriticalFacilityDetails Component
+ * @version 0.1.0
+ * @since 0.1.0
+ */
+const CriticalFacilityDetails = ({
+  name,
+  description,
+  code,
+  abbreviation,
+  custodians,
+  area,
+}) => (
+  <>
+    <p>
+      <Text strong>Code: </Text> {code}
+    </p>
+    <p>
+      <Text strong>Name: </Text> {`${name}(${abbreviation})`}
+    </p>
+    <p>
+      <Text strong>Description:</Text> {description} <br />
+    </p>
+    <p>
+      <Text strong>Custodian(s): </Text>
+      {custodians.map((custodian) => custodian.name).join(',')}
+      <br />
+    </p>
+    <p>
+      <Text strong>Area:</Text> {area} <br />
+    </p>
+  </>
+);
+
+CriticalFacilityDetails.propTypes = {
+  name: PropTypes.string.isRequired,
+  code: PropTypes.string.isRequired,
+  area: PropTypes.string.isRequired,
+  abbreviation: PropTypes.string.isRequired,
+  custodians: PropTypes.shape([]).isRequired,
+  description: PropTypes.string.isRequired,
+};
+
 /**
  * @function
  * @name CriticalFacilityDetailsViewBody
@@ -79,22 +184,54 @@ const CriticalFacilityDetailsViewBody = ({ criticalFacility, onEdit }) => {
         criticalFacility={criticalFacility}
         onEdit={onEdit}
       />
+      <div className="CriticalFacilityBodyContent">
+        <Row>
+          <Col xs={24} sm={24} md={24} lg={16}>
+            <CriticalFacilityDetails
+              description={criticalFacility.strings.description.en}
+              name={criticalFacility.strings.name.en}
+              code={criticalFacility.strings.code}
+              abbreviation={criticalFacility.strings.abbreviation.en}
+              area={criticalFacility.relations.area.strings.name.en}
+              custodians={criticalFacility.relations.custodians}
+            />
+          </Col>
+          <Col xs={24} sm={24} md={24} lg={8}>
+            <CriticalFacilityMapView criticalFacility={criticalFacility} />
+          </Col>
+        </Row>
+      </div>
     </div>
   );
 };
 
-export default CriticalFacilityDetailsViewBody;
 
 CriticalFacilityDetailsViewBody.propTypes = {
   criticalFacility: PropTypes.shape({
     _id: PropTypes.string,
+    relations: PropTypes.shape({
+      area: PropTypes.shape({
+        strings: PropTypes.shape({
+          name: PropTypes.shape({
+            en: PropTypes.string,
+          }),
+        }),
+      }),
+      custodians: PropTypes.shape([]),
+    }),
+    strings: PropTypes.shape({
+      name: PropTypes.shape({
+        en: PropTypes.string,
+      }),
+      description: PropTypes.shape({
+        en: PropTypes.string,
+      }),
+      code: PropTypes.string,
+      abbreviation: PropTypes.shape({
+        en: PropTypes.string,
+      }),
+    }),
   }).isRequired,
   onEdit: PropTypes.func.isRequired,
 };
-
-CriticalFacilityToolbar.propTypes = {
-  criticalFacility: PropTypes.shape({
-    _id: PropTypes.string,
-  }).isRequired,
-  onEdit: PropTypes.func.isRequired,
-};
+export default CriticalFacilityDetailsViewBody;

src/GeographicalFeatures/CriticalFacilities/DetailsView/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'antd';
+import get from 'lodash/get';
+import CriticalFacilityDetailsViewBody from './Body';
+import CriticalFacilityDetailsViewHeader from './Header';
+
+/**
+ * @function
+ * @name CriticalFacilityDetailsView
+ * @param {object} props React props
+ * @param {object} props.criticalFacility criticalFacility
+ * @param {boolean} props.showDetails
+ * @param {Function} props.handleCloseDetails close details modal
+ * @param {Function} props.handleItemEdit close details modal
+ * @description details of a critical facility
+ * @returns {object} React component
+ * @version 0.1.0
+ * @since 0.1.0
+ */
+const CriticalFacilityDetailsView = ({
+  criticalFacility,
+  handleCloseDetails,
+  handleItemEdit,
+  showDetails,
+}) => {
+  return (
+    <div className="CriticalFacilityDetailsView">
+      <Modal
+        title={
+          <CriticalFacilityDetailsViewHeader
+            name={get(criticalFacility, 'strings.name.en', 'N/A')}
+            description={get(criticalFacility, 'strings.description.en', 'N/A')}
+            onBack={handleCloseDetails}
+          />
+        }
+        width="100%"
+        closable={false}
+        visible={showDetails}
+        getContainer={false}
+        mask={false}
+        footer={null}
+        destroyOnClose
+      >
+        <CriticalFacilityDetailsViewBody
+          criticalFacility={criticalFacility}
+          onEdit={() => {
+            handleItemEdit(criticalFacility);
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default CriticalFacilityDetailsView;
+
+CriticalFacilityDetailsView.propTypes = {
+  criticalFacility: PropTypes.shape({
+    _id: PropTypes.string,
+    strings: PropTypes.shape({
+      name: PropTypes.shape({
+        en: PropTypes.string,
+      }),
+      description: PropTypes.shape({
+        en: PropTypes.string,
+      }),
+    }),
+  }).isRequired,
+  handleItemEdit: PropTypes.func.isRequired,
+  showDetails: PropTypes.bool.isRequired,
+  handleCloseDetails: PropTypes.func.isRequired,
+};

src/GeographicalFeatures/CriticalFacilities/DetailsView/styles.css

@@ -0,0 +1,37 @@
+.CriticalFacilityDetailsView .CriticalFacilityBody {
+  height: 100%;
+  overflow: hidden;
+}
+
+.CriticalFacilityDetailsView .CriticalFacilityBodyContent {
+  padding-top: 20px;
+  height: 90%;
+  overflow: auto;
+}
+
+.CriticalFacilityDetailsView .CriticalFacilityToolbar {
+  height: 50px;
+  border-bottom: 1px solid #ededed;
+}
+
+.CriticalFacilityDetailsView .CriticalFacilityFeed {
+  padding: 0 2px;
+}
+
+.CriticalFacilityDetailsView .LoadMoreButton {
+  display: block;
+  margin: 0 auto 50px;
+}
+
+.CriticalFacilityDetailsView .ant-modal-header {
+  padding: 0;
+}
+.CriticalFacilityDetailsView .ant-modal, .CriticalFacilityDetailsView .ant-modal-content {
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  top: 0;
+}
+.CriticalFacilityDetailsView .ant-modal-body {
+  height: calc(100vh - 110px);
+}

src/GeographicalFeatures/CriticalFacilities/Filters/index.js

@@ -162,16 +162,14 @@ const FeatureFiltersForm = ({
         name={['relations.ownership']}
       >
         <SearchableSelectInput
-          onSearch={(optns = {}) => {
-            return getPartyOwnerships(optns);
-          }}
+          onSearch={getPartyOwnerships}
           optionLabel={(ownership) => get(ownership, 'strings.name.en')}
           optionValue="_id"
           mode="multiple"
           onCache={(ownerships) =>
             onCache({ 'relations.ownerships': ownerships })
           }
-          initialValue={get(cached, 'relations.ownership', [])}
+          initialValue={get(cached, 'relations.ownerships', [])}
         />
       </Form.Item>
       {/* end:feature ownership filter */}

src/GeographicalFeatures/CriticalFacilities/Form/index.js

@@ -105,6 +105,7 @@ const FeatureForm = ({ feature, isEditForm, posting, onCancel }) => {
         relations: {
           ...get(feature, 'relations', {}),
           custodians: map(get(feature, 'relations.custodians', []), '_id'),
+          ownership: get(feature, 'relations.ownership._id'),
         },
       }}
       autoComplete="off"