263 backsearch ownership panel allow selecting multiple properties

src/actions/LandOwnershipActions.js

@@ -56,9 +56,29 @@ export const setProprietorName = (proprietorName) => {
   return {
     type: "SET_PROPRIETOR_NAME",
     payload: proprietorName,
+  }
+};
+
+export const setActivePropertyId = (propertyId) => { }
+
+export const setSelectedProperty = (property) => {
+  return (dispatch) => {
+    dispatch({
+      type: "SET_SELECTED_PROPERTY",
+      payload: property,
+    });
   };
 };
 
+export const clearSelectedProperty = (property) => {
+  return (dispatch) => {
+    dispatch({
+      type: "CLEAR_SELECTED_PROPERTY",
+      payload: property
+    })
+  }
+}
+
 export const showPropertyPolygon = (propertyCoordinates) => {
   return (dispatch) => {
     dispatch({

src/components/left-pane/LeftPaneInfo.js

@@ -4,17 +4,25 @@ import LeftPaneTray from "./LeftPaneTray";
 import MarkerSection from "./MarkerSection";
 import PolygonSection from "./PolygonSection";
 import PropertySection from "./PropertySection";
+import RelatedPropertySection from "./RelatedPropertySection";
 
 const LeftPaneInfo = ({ onClose, open }) => {
   const markers = useSelector((state) => state.markers.markers);
   const polygons = useSelector((state) => state.drawings.polygons);
   const properties = useSelector(
     (state) => state.landOwnership.highlightedProperties
   );
+  const selectedProperties = useSelector(
+    (state) => state.relatedProperties.selectedProperty
+  );
+
 
   return (
     <LeftPaneTray title="Land Information" open={open} onClose={onClose}>
-      {polygons.length || markers.length || properties.length ? (
+      {polygons.length ||
+        markers.length ||
+        properties.length ||
+        selectedProperties.length > 0 ? (
         <>
           {markers.map((marker, i) => (
             <MarkerSection marker={marker} key={`marker-${i}`} />
@@ -25,6 +33,9 @@ const LeftPaneInfo = ({ onClose, open }) => {
           {properties.map((property, i) => (
             <PropertySection property={property} key={`property-${i}`} />
           ))}
+          {selectedProperties.map((property, i) => (
+            <RelatedPropertySection property={property} key={`selected-property-${i}`} />
+          ))}
         </>
       ) : (
         <div

src/components/left-pane/LeftPaneRelatedProperties.js

@@ -12,7 +12,9 @@ const LeftPaneRelatedProperties = ({ onClose, open, itemsPerPage }) => {
   // Set loading state
   const loading = useSelector((state) => state.relatedProperties.loading);
 
-  const [activeProperty, setActiveProperty] = useState(null);
+  // Move to nested component - to allow multiple properties to be selected
+  // const [activeProperty, setActiveProperty] = useState(null);
+
   // Use a Set to store unique properties
   const uniqueProperties = new Set();
 
@@ -36,10 +38,11 @@ const LeftPaneRelatedProperties = ({ onClose, open, itemsPerPage }) => {
     indexOfLastProperty
   );
 
+  // Remove this function and move to nested component
   // Pass down the active property to the RelatedProperties component
-  const handlePropertyClick = (property) => {
-    setActiveProperty(property);
-  };
+  // const handlePropertyClick = (property) => {
+  //   setActiveProperty(property);
+  // };
 
   return (
     <LeftPaneTray title="Ownership Search" open={open} onClose={onClose}>
@@ -65,8 +68,8 @@ const LeftPaneRelatedProperties = ({ onClose, open, itemsPerPage }) => {
               <RelatedProperties
                 key={property.title_no}
                 property={property}
-                isActive={property === activeProperty}
-                onPropertyClick={() => handlePropertyClick(property)}
+                // isActive={property === activeProperty}
+                // onPropertyClick={() => handlePropertyClick(property)}
               />
             ))}
             {noOfPages > 1 && (

src/components/left-pane/PropertySection.js

@@ -48,8 +48,10 @@ const PropertySection = ({ property, active }) => {
     if (property.proprietor_name_1 === proprietorName) {
       dispatch({ type: "CLEAR_PROPERTIES_AND_PROPRIETOR_NAME" });
     }
+    console.log("handleClear Property", property);
   };
 
+
   return (
     <div className="left-pane-tray-section">
       <div

src/components/left-pane/RelatedProperties.js

@@ -1,29 +1,39 @@
 import React, { useState } from "react";
-import { useDispatch } from "react-redux";
-import { showPropertyPolygon } from "../../actions/LandOwnershipActions";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  setSelectedProperty,
+  clearSelectedProperty
+} from "../../actions/LandOwnershipActions";
 import { setLngLat } from "../../actions/MapActions";
 
-const RelatedProperties = ({ property, isActive, onPropertyClick }) => {
+const RelatedProperties = ({ property }) => {
   const dispatch = useDispatch();
+  const [active, setActive] = useState(false);
+  const { selectedProperty } = useSelector(state => state.relatedProperties);
 
   const lng = property.geom.coordinates[0][0][1];
   const lat = property.geom.coordinates[0][0][0];
 
   const handlePropertyClick = () => {
-    onPropertyClick();
-    dispatch(showPropertyPolygon(property.geom.coordinates[0]));
+    const propertyIsSelected = selectedProperty.find(item => item[0].id === property.id);
+
+    if (propertyIsSelected)
+      dispatch(clearSelectedProperty([property]));
+    else
+      dispatch(setSelectedProperty([property]));
+
+    setActive(!active);
   };
 
   const gotoProperty = () => {
     dispatch(setLngLat(lng, lat));
   }
 
   return <div
-    className={`search-result ${isActive && "active"}`}
+    className={`search-result ${active && "active"}`}
     key={property.title_no}
-    onClick={handlePropertyClick}
   >
-    <i>
+    <i onClick={handlePropertyClick}>
       <svg
         className="icon-property"
         xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +45,7 @@ const RelatedProperties = ({ property, isActive, onPropertyClick }) => {
         />
       </svg>
     </i>
-    <div className="search-result__property">
+    <div className="search-result__property" onClick={handlePropertyClick}>
       <h4 className="search-result__property-address">
         {property.property_address}
       </h4>

src/components/left-pane/RelatedPropertySection.js

@@ -0,0 +1,203 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { setActiveProperty } from "../../actions/LandOwnershipActions";
+import Button from "../common/Button";
+import { getRelatedProperties } from "../../actions/LandOwnershipActions";
+
+const RelatedPropertySection = ({ property, active }) => {
+  const dispatch = useDispatch();
+  const activePropertyId = useSelector(
+    (state) => state.landOwnership.activePropertyId
+  );
+
+  const {
+    poly_id,
+    title_no,
+    proprietor_category_1,
+    property_address,
+    proprietor_name_1,
+    proprietor_1_address_1,
+    tenure,
+    date_proprietor_added,
+  } = property[0];
+
+  const open = poly_id === activePropertyId;
+
+  const openTray = (tray) => {
+    active === tray
+      ? dispatch({ type: "CLOSE_TRAY" })
+      : dispatch({ type: "SET_ACTIVE", payload: tray });
+  };
+
+  const handleSearch = () => {
+    dispatch({ type: "CLEAR_PROPERTIES" });
+    dispatch(getRelatedProperties(proprietor_name_1));
+    openTray("Ownership Search");
+  };
+
+  const handleClear = () => {
+    // dispatch({ type: "CLEAR_HIGHLIGHT", payload: property[0] });
+    // Clear properties if the property being cleared is the searched property
+    // if (property.proprietor_name_1 === proprietorName) {
+    //   dispatch({ type: "CLEAR_PROPERTIES_AND_PROPRIETOR_NAME" });
+    // }
+    dispatch({
+      type: "CLEAR_SELECTED_PROPERTY",
+      payload: activePropertyId,
+    });
+    console.log("handleClear RelatedProperty", property[0]);
+  };
+
+
+  return (
+    <div className="left-pane-tray-section">
+      <div
+        className="left-pane-tray-section-title property-section"
+        onClick={() => {
+          if (open) {
+            dispatch({ type: "CLEAR_ACTIVE_PROPERTY" });
+          } else {
+            dispatch(setActiveProperty(poly_id));
+          }
+        }}
+      >
+        <h4
+          style={{
+            marginLeft: "48px",
+            fontWeight: "bold",
+            width: "140px",
+          }}
+        >
+          Related Property {poly_id}
+        </h4>
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            transform: "translateY(-50%)",
+            right: "12px",
+            width: "24px",
+            height: "24px",
+            textAlign: "center",
+          }}
+        >
+          <img
+            src={require("../../assets/img/icon-chevron.svg")}
+            alt=""
+            style={{
+              transformOrigin: "center",
+              transform: open ? "rotate(180deg)" : "rotate(0deg)",
+            }}
+          />
+        </div>
+      </div>
+      {open && (
+        <div className="property-details">
+          {proprietor_category_1 && (
+            <>
+              <div className="property-details-title">{property_address}</div>
+              <div className="property-details-section">
+                <div className="property-details-section__title">
+                  Proprietor Name:
+                </div>
+                <div className="property-details-section__value">
+                  {proprietor_name_1}
+                </div>
+              </div>
+              <div className="property-details-section">
+                <div className="property-details-section__title">
+                  Proprietor Address:
+                </div>
+                <div className="property-details-section__value">
+                  {proprietor_1_address_1}
+                </div>
+              </div>
+              <div className="property-details-section">
+                <div className="property-details-section__inner">
+                  <div className="property-details-section__title">
+                    Proprietor Category:
+                  </div>
+                  <div className="property-details-section__value">
+                    {proprietor_category_1}
+                  </div>
+                </div>
+                <div className="property-details-section__inner">
+                  <div className="property-details-section__title">Tenure:</div>
+                  <div className="property-details-section__value">
+                    {tenure}
+                  </div>
+                </div>
+                <div className="property-details-section__inner">
+                  <div className="property-details-section__title">
+                    Date Proprietor Added:
+                  </div>
+                  <div className="property-details-section__value">
+                    {date_proprietor_added}
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+          <div className="property-details-section">
+            <div className="property-details-section__inner">
+              <div
+                className="property-details-section__title"
+                title="The Title Register gives information on who owns the property or land, and any rights of way"
+              >
+                INSPIRE ID:
+              </div>
+              <div className="property-details-section__value">{poly_id}</div>
+            </div>
+            <div
+              className="property-details-section__inner"
+              title="The Title Plan includes the property or land's location and boundaries"
+            >
+              <div className="property-details-section__title">
+                Title Number:
+              </div>
+              <div className="property-details-section__value">{title_no}</div>
+            </div>
+            <div className="property-details-section__small-print">
+              <p>
+                You can access these documents for a small fee by visiting the{" "}
+                <a
+                  href="https://search-property-information.service.gov.uk/search/search-by-inspire-id"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Land Registry website
+                </a>{" "}
+                using the above IDs.
+              </p>
+            </div>
+          </div>
+
+          <div className="property__check-for-properties">
+            <Button
+              buttonClass={"button-new green full-width"}
+              type={"button"}
+              buttonAction={handleSearch}
+            >
+              Check for other properties
+            </Button>
+          </div>
+          <div className="property__clear-property">
+            <button
+              className="button-new blue full-width"
+              onClick={() =>
+                dispatch({
+                  type: "CLEAR_HIGHLIGHT",
+                  payload: property,
+                })
+              }
+            >
+              Clear property
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RelatedPropertySection;