COMPENF-430 view summary details of a complaint while in the map view

frontend/cypress/e2e/change-complaint-status-details-view.cy.ts

@@ -30,7 +30,7 @@ describe("Complaint Change Status spec - Details View", () => {
       cy.get(".comp-loader-overlay").should("exist");
       cy.get(".comp-loader-overlay").should("not.exist");
 
-      cy.get("#comp-details-status-text-id").contains("CLOSED").should("exist");
+      cy.get("#comp-details-status-text-id").contains("Closed").should("exist");
 
       cy.get("#details-screen-update-status-button").click({ force: true });
 
@@ -44,7 +44,7 @@ describe("Complaint Change Status spec - Details View", () => {
       cy.get(".comp-loader-overlay").should("exist");
       cy.get(".comp-loader-overlay").should("not.exist");
 
-      cy.get("#comp-details-status-text-id").contains("OPEN").should("exist");
+      cy.get("#comp-details-status-text-id").contains("Open").should("exist");
     });
   });
 });

frontend/cypress/e2e/complaints-on-map-view.cy.ts

@@ -2,39 +2,60 @@
 Test to verify that the status and assignment popover displays when clicking the vertical ellipsis on both the
 HWLC and Enforcement list screens
 */
-describe('Complaints on map tests', () => {
+describe("Complaints on map tests", () => {
+  const complaintTypes = ["#hwcr-tab","#ers-tab"];
 
-  const complaintTypes = ['#ers-tab','#hwcr-tab'];
-
-  beforeEach(function() {
+  beforeEach(function () {
     cy.viewport("macbook-16");
     cy.kcLogout().kcLogin();
   });
 
   // perform the same test on each of the tabs (HWCR and ERS)
-  Cypress._.times(complaintTypes.length, ((index) => {
-
-    it('Switch to map view', () => {
+  Cypress._.times(complaintTypes.length, (index) => {
+    it("Switch to map view", () => {
       cy.visit("/");
-
+      cy.wait(3000);
       cy.get(complaintTypes[index]).click({ force: true });
 
-
       cy.get(".comp-loader-overlay").should("exist");
       cy.get(".comp-loader-overlay").should("not.exist");
 
+      cy.get("#comp-status-filter").click({ force: true }); //clear status filter so this complaint is in the list view
 
-      cy.get('#list_toggle_id').should('exist');
-      cy.get('#map_toggle_id').should('exist'); //verifies that the list/map toggle button appears.  Click the map view
-      cy.get('#map_toggle_id').click({force: true});
+      cy.get(".comp-loader-overlay").should("exist");
+      cy.get(".comp-loader-overlay").should("not.exist");
+
+      cy.get("#list_toggle_id").should("exist");
+      cy.get("#map_toggle_id").should("exist"); //verifies that the list/map toggle button appears.  Click the map view
+      cy.get("#map_toggle_id").click({ force: true });
 
       // wait for the map to load
-      cy.get('.comp-loader-overlay').should('exist');
-      cy.get('.comp-loader-overlay').should('not.exist');
+      cy.get(".comp-loader-overlay").should("exist");
+      cy.get(".comp-loader-overlay").should("not.exist");
+
+      cy.get("div.leaflet-container").should("exist");
 
-      cy.get('div.leaflet-container').should('exist');
+      cy.get(".leaflet-popup").should("not.exist");
+      cy.wait(1000);
 
+      cy.get(".leaflet-marker-icon").each(($marker, index) => {
+        // Click the first marker (index 0)
+        if (index === 0) {
+          cy.wrap($marker).click({ force: true });
+        }
+      });
 
+      // wait for the popup to load
+      cy.get(".comp-loader-overlay").should("exist");
+      cy.get(".comp-loader-overlay").should("not.exist");
+
+      cy.get(".leaflet-popup").should("exist");
+
+      // click the "view details" button to navigate to the complaint
+      cy.get("#view-complaint-details-button-id").click({ force: true });
+
+      cy.get(".comp-loader-overlay").should("exist");
+      cy.get(".comp-loader-overlay").should("not.exist");
     });
-  }));
-})
+  });
+});

frontend/src/app/common/methods.tsx

@@ -5,6 +5,7 @@ import COMPLAINT_TYPES from "../types/app/complaint-types";
 type Coordinate = number[] | string[] | undefined;
 
 export const getAvatarInitials = (input: string): string => {
+
   const tokens = input.split(" ");
 
   if (tokens && tokens.length >= 1) {
@@ -18,6 +19,34 @@ export const getAvatarInitials = (input: string): string => {
   }
 };
 
+export const getFirstInitialAndLastName = (fullName: string): string => {
+
+  const NOT_ASSIGNED = "Not Assigned";
+
+  if (NOT_ASSIGNED === fullName) {
+    return NOT_ASSIGNED;
+  }
+
+
+  // Split the full name into an array of words
+  const words = fullName.trim().split(' ');
+
+  if (words.length === 0) {
+    // If there are no words, return an empty string
+    return '';
+  } else if (words.length === 1) {
+    // If there is only one word, return the entire word as the last name
+    return words[0];
+  } else {
+    // Extract the first initial and last name
+    const firstInitial = words[0].charAt(0).toUpperCase();
+    const lastName = words[words.length - 1];
+
+    // Concatenate the first initial and last name with a space
+    return `${firstInitial}. ${lastName}`;
+  }
+}
+
 export const formatDate = (input: string | undefined): string => {
   if (!input) {
     return "";
@@ -112,3 +141,14 @@ export const renderCoordinates = (
 
   return result === 0 ? <>{"Not Provided"}</> : <>{result}</>;
 };
+
+export const applyStatusClass = (state: string): string => {
+  switch (state.toLowerCase()) {
+    case "open":
+      return "comp-status-badge-open";
+      case "closed": 
+      return "comp-status-badge-closed";
+    default: 
+    return "";
+  }
+};

frontend/src/app/components/containers/complaints/complaint-map.tsx

@@ -6,11 +6,7 @@ import { ComplaintFilterContext } from "../../../providers/complaint-filter-prov
 import { ComplaintFilters } from "../../../types/complaints/complaint-filters/complaint-filters";
 import { ComplaintRequestPayload } from "../../../types/complaints/complaint-filters/complaint-reauest-payload";
 import LeafletMapWithMultiplePoints from "../../mapping/leaflet-map-with-multiple-points";
-import {
-  getComplaintsOnMap,
-  setComplaintsOnMap,
-  selectComplaintLocations,
-} from "../../../store/reducers/complaints";
+import { getComplaintsOnMap, selectComplaintLocations, setComplaintsOnMap } from "../../../store/reducers/complaint-locations";
 
 type Props = {
   type: string;
@@ -85,5 +81,5 @@ export const ComplaintMap: FC<Props> = ({ type }) => {
     };
   }, []);
 
-  return <LeafletMapWithMultiplePoints markers={coordinatesArray} />;
+  return <LeafletMapWithMultiplePoints complaint_type={type} markers={coordinatesArray} />;
 };

frontend/src/app/components/containers/complaints/complaints.tsx

@@ -5,7 +5,7 @@ import COMPLAINT_TYPES, {
   complaintTypeToName,
 } from "../../../types/app/complaint-types";
 import { useAppDispatch, useAppSelector } from "../../../hooks/hooks";
-import { selectTotalComplaintsByType, selectTotalComplaintsOnMapByType } from "../../../store/reducers/complaints";
+import { selectTotalComplaintsByType } from "../../../store/reducers/complaints";
 import { ComplaintFilter } from "./complaint-filter";
 import { ComplaintList } from "./complaint-list";
 
@@ -23,6 +23,7 @@ import { selectDefaultZone, getOfficerDefaultZone, profileZoneDescription, profi
 import { DropdownOption } from '../../../types/code-tables/option';
 import { ComplaintMap } from "./complaint-map";
 import { COMPLAINT_VIEW_TYPES } from "../../../constants/complaint-view-type";
+import { selectTotalComplaintsOnMapByType } from "../../../store/reducers/complaint-locations";
 
 type Props = {
   defaultComplaintType: string;

frontend/src/app/components/containers/complaints/details/call-details.tsx

@@ -8,7 +8,7 @@ import {
 } from "../../../../common/methods";
 import { Coordinates } from "../../../../types/app/coordinate-type";
 import { ComplaintDetailsAttractant } from "../../../../types/complaints/details/complaint-attactant";
-import { selectComplaintDeails } from "../../../../store/reducers/complaints";
+import { selectComplaintDetails } from "../../../../store/reducers/complaints";
 import COMPLAINT_TYPES from "../../../../types/app/complaint-types";
 import { ComplaintDetails } from "../../../../types/complaints/details/complaint-details";
 
@@ -32,7 +32,7 @@ export const CallDetails: FC<ComplaintHeaderProps> = ({
     attractants,
     violationInProgress,
     violationObserved,
-  } = useAppSelector(selectComplaintDeails(complaintType)) as ComplaintDetails;
+  } = useAppSelector(selectComplaintDetails(complaintType)) as ComplaintDetails;
 
   return (
     <div className="comp-complaint-details-block">

frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx

@@ -6,7 +6,7 @@ import {
 } from "../../../../common/methods";
 import { Coordinates } from "../../../../types/app/coordinate-type";
 import {
-  selectComplaintDeails,
+  selectComplaintDetails,
   selectComplaintHeader,
   selectComplaintCallerInformation,
   selectComplaintSuspectWitnessDetails,
@@ -135,7 +135,7 @@ export const ComplaintDetailsEdit: FC<ComplaintDetailsProps> = ({
     attractants,
     violationInProgress,
     violationObserved,
-  } = useAppSelector(selectComplaintDeails(complaintType)) as ComplaintDetails;
+  } = useAppSelector(selectComplaintDetails(complaintType)) as ComplaintDetails;
 
   const {
     loggedDate,

frontend/src/app/components/containers/complaints/details/complaint-header.tsx

@@ -6,6 +6,7 @@ import COMPLAINT_TYPES, {
 import { useAppDispatch, useAppSelector } from "../../../../hooks/hooks";
 import { selectComplaintHeader } from "../../../../store/reducers/complaints";
 import {
+  applyStatusClass,
   formatDate,
   formatTime,
   getAvatarInitials,
@@ -46,16 +47,7 @@ export const ComplaintHeader: FC<ComplaintHeaderProps> = ({
 
   const dispatch = useAppDispatch();
   const assignText = officerAssigned === 'Not Assigned' ? 'Assign' : 'Reassign';
-  const applyStatusClass = (state: string): string => {
-    switch (state.toLowerCase()) {
-      case "open":
-        return "comp-status-badge-open";
-        case "closed": 
-        return "comp-status-badge-closed";
-      default: 
-      return "";
-    }
-  };
+
 
   const openStatusChangeModal = () => {
     document.body.click();

frontend/src/app/components/containers/complaints/details/complaint-location.tsx

@@ -1,7 +1,8 @@
-import { FC } from "react";
-import { useAppSelector } from "../../../../hooks/hooks";
+import { FC, useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../../../hooks/hooks";
 import {
-  selectComplaintDeails,
+  getComplaintLocation,
+  selectComplaintDetails,
   selectComplaintLocation,
 } from "../../../../store/reducers/complaints";
 import LeafletMapWithPoint from "../../../mapping/leaflet-map-with-point";
@@ -20,18 +21,25 @@ type Props = {
  *
  */
 export const ComplaintLocation: FC<Props> = ({ complaintType, draggable, onMarkerMove }) => {
-
-  const { coordinates } = useAppSelector(
-    selectComplaintDeails(complaintType)
+  const dispatch = useAppDispatch();
+  const { coordinates, area, location } = useAppSelector(
+    selectComplaintDetails(complaintType)
   ) as ComplaintDetails;
+
+  useEffect(() => {
+    if (area) {
+      dispatch(getComplaintLocation(area, location));
+    }
+
+  }, [area, dispatch, location]);
+
   const complaintLocation = useAppSelector(selectComplaintLocation);
 
   // the lat and long of the marker we need to display on the map
   // Initialized to 0.  This will either be populated using the optionally supplied coordinates
   // or they'll be derived using the complaint's location and/or community.
   let lat = 0;
   let lng = 0;
-
   if (coordinates && isWithinBC(coordinates)) {
     lat = +coordinates[Coordinates.Latitude];
     lng = +coordinates[Coordinates.Longitude];