From 50ae17ab957b0283a5700492a7d0db57943658e1 Mon Sep 17 00:00:00 2001 From: Barrett Falk Date: Mon, 30 Oct 2023 12:59:01 -0700 Subject: [PATCH] CE-199-Refactoring of edit and geocoding functionality (#181) --- .../bc_geo_coder/bc_geo_coder.service.ts | 8 +- frontend/cypress/e2e/allegation-details.cy.ts | 8 +- .../common/bc-geocoder-autocomplete.tsx | 4 +- .../details/complaint-details-edit.tsx | 874 +++++++++--------- .../complaints/details/complaint-location.tsx | 59 +- .../mapping/leaflet-map-with-point.tsx | 10 +- frontend/src/app/store/reducers/complaints.ts | 12 +- 7 files changed, 507 insertions(+), 468 deletions(-) diff --git a/backend/src/external_api/bc_geo_coder/bc_geo_coder.service.ts b/backend/src/external_api/bc_geo_coder/bc_geo_coder.service.ts index a8166f0b5..2c25d52ed 100644 --- a/backend/src/external_api/bc_geo_coder/bc_geo_coder.service.ts +++ b/backend/src/external_api/bc_geo_coder/bc_geo_coder.service.ts @@ -12,7 +12,7 @@ export class BcGeoCoderService { // given a localityName (community, for example) and an address, return the Feature given by BC Geocoder async findAll(localityName: string, addressString: string): Promise { - const maxResults = 10; + const maxResults = 1; // will need to update this for the purposes of autocomplete. let apiUrl: string; this.logger.debug( `Calling BC Geocoder. Parameters sent to backend were localityName: ${localityName} and addressString: ${addressString}` @@ -21,13 +21,13 @@ export class BcGeoCoderService { this.logger.debug( `Calling BC Geocoder with address ${addressString} and community ${localityName}` ); - apiUrl = `${process.env.BC_GEOCODER_API_URL}/addresses.json?addressString=${addressString}&locationDescriptor=any&maxResults=${maxResults}&interpolation=adaptive&echo=true&brief=false&autoComplete=true&setBack=0&outputSRS=4326&minScore=2&localityName=${localityName}&provinceCode=BC`; + apiUrl = `${process.env.BC_GEOCODER_API_URL}/addresses.json?addressString=${addressString}&locationDescriptor=any&maxResults=${maxResults}&interpolation=adaptive&echo=true&brief=false&autoComplete=true&setBack=0&outputSRS=4326&minScore=1&localityName=${localityName}&provinceCode=BC`; } else if (localityName) { this.logger.debug(`Calling BC Geocoder with community ${localityName}`); - apiUrl = `${process.env.BC_GEOCODER_API_URL}/addresses.json?locationDescriptor=any&maxResults=${maxResults}&interpolation=adaptive&echo=true&brief=false&autoComplete=true&setBack=0&outputSRS=4326&minScore=2&localityName=${localityName}&provinceCode=BC`; + apiUrl = `${process.env.BC_GEOCODER_API_URL}/addresses.json?locationDescriptor=any&maxResults=${maxResults}&interpolation=adaptive&echo=true&brief=false&autoComplete=false&setBack=0&outputSRS=4326&minScore=1&localityName=${localityName}&provinceCode=BC`; } else if (addressString && addressString.length > 0) { this.logger.debug(`Calling BC Geocoder with address ${addressString}`); - apiUrl = `${process.env.BC_GEOCODER_API_URL}/addresses.json?addressString=${addressString}&locationDescriptor=any&maxResults=${maxResults}&interpolation=adaptive&echo=true&brief=false&autoComplete=true&setBack=0&outputSRS=4326&minScore=2&provinceCode=BC`; + apiUrl = `${process.env.BC_GEOCODER_API_URL}/addresses.json?addressString=${addressString}&locationDescriptor=any&maxResults=${maxResults}&interpolation=adaptive&echo=true&brief=false&autoComplete=true&setBack=0&outputSRS=4326&minScore=1&provinceCode=BC`; } if (apiUrl) { const apiKey = process.env.BC_GEOCODER_API_URL; diff --git a/frontend/cypress/e2e/allegation-details.cy.ts b/frontend/cypress/e2e/allegation-details.cy.ts index d5dbfc21a..6a965cb6b 100644 --- a/frontend/cypress/e2e/allegation-details.cy.ts +++ b/frontend/cypress/e2e/allegation-details.cy.ts @@ -67,14 +67,8 @@ describe("COMPENF-37 Display ECR Details", () => { cy.get('span[id="comp-details-region"]').contains(callDetails.region); }); - it("it has a map on screen with a marker at the correct location", function () { - cy.navigateToEditScreen(COMPLAINT_TYPES.ERS,"23-006888"); - cy.verifyMapMarkerExists(true); - cy.get(".comp-complaint-details-alert").should("not.exist"); - }); - it("it has a map on screen with no marker", function () { - cy.navigateToEditScreen(COMPLAINT_TYPES.ERS,"23-032528"); + cy.navigateToDetailsScreen(COMPLAINT_TYPES.ERS,"23-032528"); cy.verifyMapMarkerExists(false); cy.get(".comp-complaint-details-alert").should("exist"); }); diff --git a/frontend/src/app/components/common/bc-geocoder-autocomplete.tsx b/frontend/src/app/components/common/bc-geocoder-autocomplete.tsx index f1f8fd813..0b933eac1 100644 --- a/frontend/src/app/components/common/bc-geocoder-autocomplete.tsx +++ b/frontend/src/app/components/common/bc-geocoder-autocomplete.tsx @@ -3,7 +3,7 @@ import CreatableSelect from "react-select/creatable"; import { useAppDispatch, useAppSelector } from "../../hooks/hooks"; import { getComplaintLocationByAddress, - selectComplaintLocation, + selectGeocodedComplaintCoordinates, } from "../../store/reducers/complaints"; interface Props { @@ -40,7 +40,7 @@ export const BCGeocoderAutocomplete: FC = ({ }; const dispatch = useAppDispatch(); - const complaintLocation = useAppSelector(selectComplaintLocation); + const complaintLocation = useAppSelector(selectGeocodedComplaintCoordinates); useEffect(() => { const fetchAddresses = async (inputValue: string) => { diff --git a/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx b/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx index 8b3e558f2..ca882fc90 100644 --- a/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx +++ b/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx @@ -13,7 +13,7 @@ import { selectComplaintSuspectWitnessDetails, selectComplaint, setComplaint, - setComplaintLocation, + setGeocodedComplaintCoordinates, updateWildlifeComplaint, getWildlifeComplaintByComplaintIdentifierSetUpdate, updateAllegationComplaint, @@ -83,7 +83,7 @@ export const ComplaintDetailsEdit: FC = () => { //-- when the component unmounts clear the complaint from redux return () => { dispatch(setComplaint(null)); - dispatch(setComplaintLocation(null)); + dispatch(setGeocodedComplaintCoordinates(null)); }; }, [dispatch]); @@ -347,17 +347,22 @@ export const ComplaintDetailsEdit: FC = () => { return ""; } - let result = type === Coordinates.Latitude ? input[0] : input[1]; + let result = type === Coordinates.Longitude ? input[0] : input[1]; return result === 0 || result === "0" ? "" : result.toString(); }; const [latitude, setLatitude] = useState( - getEditableCoordinates(coordinates, Coordinates.Longitude), + '0' ); const [longitude, setLongitude] = useState( - getEditableCoordinates(coordinates, Coordinates.Latitude), + '0' ); + useEffect(() => { + setLongitude(getEditableCoordinates(coordinates, Coordinates.Longitude)); + setLatitude(getEditableCoordinates(coordinates, Coordinates.Latitude)); + },[coordinates]); + const handleMarkerMove = async (lat: number, lng: number) => { await updateCoordinates(lat, lng); await updateValidation(lat, lng); @@ -1012,25 +1017,36 @@ export const ComplaintDetailsEdit: FC = () => { /> {readOnly && } {readOnly && ( - + )} {readOnly && } {readOnly && complaintType === COMPLAINT_TYPES.ERS && ( )} {!readOnly && ( - <>{/* edit header block */} -
- error - {/* - */} - Errors in form -
-
+ <> + {/* edit header block */} +
+ error + {/* + */} + Errors in form +
+
{complaintType === COMPLAINT_TYPES.HWCR && ( @@ -1049,7 +1065,8 @@ export const ComplaintDetailsEdit: FC = () => { classNamePrefix="comp-select" defaultValue={selectedNatureOfComplaint} onChange={(e) => handleNOCChange(e)} - errMsg={nocErrorMsg} /> + errMsg={nocErrorMsg} + />
)} {complaintType === COMPLAINT_TYPES.HWCR && ( @@ -1068,7 +1085,8 @@ export const ComplaintDetailsEdit: FC = () => { id="species-select-id" classNamePrefix="comp-select" onChange={(e) => handleSpeciesChange(e)} - errMsg={speciesErrorMsg} /> + errMsg={speciesErrorMsg} + />
)} {complaintType === COMPLAINT_TYPES.ERS && ( @@ -1086,10 +1104,14 @@ export const ComplaintDetailsEdit: FC = () => { placeholder="Select" id="violation-type-select-id" onChange={(e) => handleViolationTypeChange(e)} - classNamePrefix="comp-select" /> + classNamePrefix="comp-select" + />
)} -
+
@@ -1101,7 +1123,8 @@ export const ComplaintDetailsEdit: FC = () => { id="status-select-id" classNamePrefix="comp-select" onChange={(e) => handleStatusChange(e)} - errMsg={statusErrorMsg} /> + errMsg={statusErrorMsg} + />
{ defaultOption={{ label: "None", value: "Unassigned" }} placeholder="Select" enableValidation={false} - value={selectedAssignedOfficer} /> + value={selectedAssignedOfficer} + />
@@ -1127,7 +1151,9 @@ export const ComplaintDetailsEdit: FC = () => { className="comp-details-label-input-pair" id="date-time-pair-id" > - +
{formatDate(loggedDate)} @@ -1160,419 +1186,437 @@ export const ComplaintDetailsEdit: FC = () => {
- {/* edit details block */} -
-
Call Details
-
-
-
-
- - -
-
- - -
- {complaintType === COMPLAINT_TYPES.HWCR && ( -
- -
- +
Call Details
+
+
+
+
+ +
-
- )} - {complaintType === COMPLAINT_TYPES.ERS && ( -
- -
- handleViolationInProgessChange(e)} + /> +
+
+ )} + {complaintType === COMPLAINT_TYPES.ERS && ( +
+ +
+ handleViolationObservedChange(e)} +
+
+ +
+ handleLocationChange(e.target.value)} + /> +
+
+
+ +