From 6bba2e0a00f32c0c0bbd5ebda6500533914f84fa Mon Sep 17 00:00:00 2001 From: Graham Stewart Date: Fri, 8 Mar 2024 16:47:35 -0800 Subject: [PATCH 01/13] Added a findOneWhereContains hook to the main map to hopefully show the right information in the popup --- .../maps/leaflet/LayerPopup/constants/index.tsx | 2 ++ .../components/maps/leaflet/LayersControl/data.ts | 12 ++++++++++++ frontend/src/components/maps/leaflet/Map.tsx | 13 +++++++++++++ 3 files changed, 27 insertions(+) diff --git a/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx b/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx index e80f7ae92..646e04efe 100644 --- a/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx +++ b/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx @@ -4,6 +4,8 @@ export const MUNICIPALITY_LAYER_URL = 'https://openmaps.gov.bc.ca/geo/pub/WHSE_LEGAL_ADMIN_BOUNDARIES.ABMS_MUNICIPALITIES_SP/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=1.3.0&outputFormat=application/json&typeNames=pub:WHSE_LEGAL_ADMIN_BOUNDARIES.ABMS_MUNICIPALITIES_SP'; export const PARCELS_PUBLIC_LAYER_URL = 'https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/wfs?service=WFS&REQUEST=GetFeature&VERSION=1.3.0&outputFormat=application/json&typeNames=pub:WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW'; +export const BCA_PRIVATE_LAYER_URL = + 'https://test.apps.gov.bc.ca/ext/sgw/geo.bca?REQUEST=GetFeature&SERVICE=WFS&VERSION=2.0.0&typeName=geo.bca:WHSE_HUMAN_CULTURAL_ECONOMIC.BCA_FOLIO_GNRL_PROP_VALUES_SV&outputFormat=application/json'; export const parcelLayerPopupConfig = { PARCEL_NAME: { label: 'Parcel Name:', display: (data: any) => data.PARCEL_NAME }, diff --git a/frontend/src/components/maps/leaflet/LayersControl/data.ts b/frontend/src/components/maps/leaflet/LayersControl/data.ts index ba1724bc8..4cf3bcf03 100644 --- a/frontend/src/components/maps/leaflet/LayersControl/data.ts +++ b/frontend/src/components/maps/leaflet/LayersControl/data.ts @@ -58,6 +58,18 @@ export const layersTree: ILayerItem[] = [ id: 'regionalDistricts', opacity: 0.5, }, + { + key: 'bcAssessment', + label: 'BC Assessment', + on: false, + layers: 'WHSE_HUMAN_CULTURAL_ECONOMIC.BCA_FOLIO_GNRL_PROP_VALUES_SV', + url: 'https:/test.apps.gov.bc.ca/ext/sgw/geo.bca/ows?', + transparent: true, + format: 'image/png', + zIndex: 23, + id: 'bcAssessment', + opacity: 0.5, + }, ], }, { diff --git a/frontend/src/components/maps/leaflet/Map.tsx b/frontend/src/components/maps/leaflet/Map.tsx index 8fcc887e0..aeb0dd0c8 100644 --- a/frontend/src/components/maps/leaflet/Map.tsx +++ b/frontend/src/components/maps/leaflet/Map.tsx @@ -33,6 +33,7 @@ import FilterBackdrop from './FilterBackdrop'; import InfoSlideOut from './InfoSlideOut/InfoSlideOut'; import { InventoryLayer } from './InventoryLayer'; import { + BCA_PRIVATE_LAYER_URL, MUNICIPALITY_LAYER_URL, municipalityLayerPopupConfig, parcelLayerPopupConfig, @@ -186,6 +187,7 @@ const Map: React.FC = ({ const [triggerFilterChanged, setTriggerFilterChanged] = React.useState(true); const municipalitiesService = useLayerQuery(MUNICIPALITY_LAYER_URL); const parcelsService = useLayerQuery(PARCELS_PUBLIC_LAYER_URL); + const bcaWMSLayerService = useLayerQuery(BCA_PRIVATE_LAYER_URL); const { setChanged } = useFilterContext(); const popUpContext = React.useContext(PropertyPopUpContext); const parcelLayerFeature = useAppSelector((store) => store.parcelLayerData?.parcelLayerFeature); @@ -313,12 +315,16 @@ const Map: React.FC = ({ !!onMapClick && onMapClick(event); const municipality = await municipalitiesService.findOneWhereContains(event.latlng); const parcel = await parcelsService.findOneWhereContains(event.latlng); + const bca = await bcaWMSLayerService.findOneWhereContains(event.latlng); let properties = {}; let center: LatLng | undefined; let bounds: LatLngBounds | undefined; let displayConfig = {}; let title = 'Municipality Information'; let feature = {}; + let netvalue = undefined; + let grossvalue = undefined; + let folio_id = undefined; if (municipality.features.length === 1) { properties = municipality.features[0].properties!; displayConfig = municipalityLayerPopupConfig; @@ -337,6 +343,13 @@ const Map: React.FC = ({ center = bounds?.getCenter(); feature = parcel.features[0]; } + if (bca.features.length >= 1) { + const feature = bca.features[0]; + netvalue = feature.properties!.GEN_GROSS_IMPROVEMENT_VALUE; + grossvalue = feature.properties!.GEN_NET_IMPROVEMENT_VALUE; + folio_id = feature.properties!.FOLIO_ID; + properties = { ...properties, netvalue, grossvalue, folio_id} + } if (!isEmpty(properties)) { setLayerPopup({ From 718e87d11b0104949ec897724fc5c2a0baac1c60 Mon Sep 17 00:00:00 2001 From: Graham Stewart Date: Mon, 11 Mar 2024 10:50:43 -0700 Subject: [PATCH 02/13] Added additional fields to properties and configured the displayConfig for the new values --- .../leaflet/LayerPopup/constants/index.tsx | 26 +++++++++++++++++++ frontend/src/components/maps/leaflet/Map.tsx | 24 +++++++++++------ 2 files changed, 42 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx b/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx index 646e04efe..e089f37c8 100644 --- a/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx +++ b/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx @@ -34,6 +34,32 @@ export const parcelLayerPopupConfig = { ), }, + GEN_GROSS_LAND_VALUE: { + label: 'Gross Land Value:', + display: (data: any) => ( + <>{data.GEN_GROSS_LAND_VALUE ? `$${data.GEN_GROSS_LAND_VALUE}` : `N/A`} + ), + }, + GEN_GROSS_IMPROVEMENT_VALUE: { + label: 'Gross Improvement Value:', + display: (data: any) => ( + <>{data.GEN_GROSS_IMPROVEMENT_VALUE ? `$${data.GEN_GROSS_IMPROVEMENT_VALUE}` : `N/A`} + ), + }, + GEN_NET_LAND_VALUE: { + label: 'Net Land Value:', + display: (data: any) => <>{data.GEN_NET_LAND_VALUE ? `$${data.GEN_NET_LAND_VALUE}` : `N/A`}, + }, + GEN_NET_IMPROVEMENT_VALUE: { + label: 'Net Improvement Value:', + display: (data: any) => ( + <>{data.GEN_NET_IMPROVEMENT_VALUE ? `$${data.GEN_NET_IMPROVEMENT_VALUE}` : `N/A`} + ), + }, + FOLIO_ID: { + label: 'Folio ID:', + display: (data: any) => <>{data.FOLIO_ID ? `${data.FOLIO_ID}` : `N/A`}, + }, }; export const municipalityLayerPopupConfig = { diff --git a/frontend/src/components/maps/leaflet/Map.tsx b/frontend/src/components/maps/leaflet/Map.tsx index aeb0dd0c8..f9fc8fe63 100644 --- a/frontend/src/components/maps/leaflet/Map.tsx +++ b/frontend/src/components/maps/leaflet/Map.tsx @@ -322,9 +322,6 @@ const Map: React.FC = ({ let displayConfig = {}; let title = 'Municipality Information'; let feature = {}; - let netvalue = undefined; - let grossvalue = undefined; - let folio_id = undefined; if (municipality.features.length === 1) { properties = municipality.features[0].properties!; displayConfig = municipalityLayerPopupConfig; @@ -344,11 +341,22 @@ const Map: React.FC = ({ feature = parcel.features[0]; } if (bca.features.length >= 1) { - const feature = bca.features[0]; - netvalue = feature.properties!.GEN_GROSS_IMPROVEMENT_VALUE; - grossvalue = feature.properties!.GEN_NET_IMPROVEMENT_VALUE; - folio_id = feature.properties!.FOLIO_ID; - properties = { ...properties, netvalue, grossvalue, folio_id} + const bcaProps = bca.features[0].properties!; + const { + GEN_NET_IMPROVEMENT_VALUE, + GEN_NET_LAND_VALUE, + GEN_GROSS_LAND_VALUE, + GEN_GROSS_IMPROVEMENT_VALUE, + FOLIO_ID, + } = bcaProps; + properties = { + ...properties, + GEN_NET_IMPROVEMENT_VALUE, + GEN_NET_LAND_VALUE, + GEN_GROSS_LAND_VALUE, + GEN_GROSS_IMPROVEMENT_VALUE, + FOLIO_ID, + }; } if (!isEmpty(properties)) { From 4d07ca87547c5685bb6cf9f344f486d686a68da7 Mon Sep 17 00:00:00 2001 From: Graham Stewart Date: Mon, 11 Mar 2024 13:50:12 -0700 Subject: [PATCH 03/13] LTSA Info to be displayed in dialog --- .../src/components/bcAssessment/BCADialog.tsx | 124 ++++++++++++++++++ frontend/src/components/ltsa/TitleDetails.tsx | 26 +--- .../leaflet/LayerPopup/LayerPopupContent.tsx | 17 +++ .../leaflet/LayerPopup/constants/index.tsx | 52 ++++---- frontend/src/utils/formatCurrency.ts | 28 ++++ 5 files changed, 197 insertions(+), 50 deletions(-) create mode 100644 frontend/src/components/bcAssessment/BCADialog.tsx create mode 100644 frontend/src/utils/formatCurrency.ts diff --git a/frontend/src/components/bcAssessment/BCADialog.tsx b/frontend/src/components/bcAssessment/BCADialog.tsx new file mode 100644 index 000000000..32a58e759 --- /dev/null +++ b/frontend/src/components/bcAssessment/BCADialog.tsx @@ -0,0 +1,124 @@ +import { + Box, + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Grid, + Stack, + Typography, +} from '@mui/material'; +import { HeaderDivider } from 'features/mapSideBar/components/tabs/HeaderDivider'; +import { tabStyles } from 'features/mapSideBar/components/tabs/TabStyles'; +import React, { Dispatch, SetStateAction } from 'react'; +import formatCurrency from 'utils/formatCurrency'; + +export interface IBCAData { + GEN_NET_IMPROVEMENT_VALUE: number; + GEN_NET_LAND_VALUE: number; + GEN_GROSS_LAND_VALUE: number; + GEN_GROSS_IMPROVEMENT_VALUE: number; + FOLIO_ID: string; +} + +interface IBCADialogProps { + bcaInfoOpen: boolean; + setBcaInfoOpen: Dispatch>; + bcaData: IBCAData; +} + +export const BCADialog = (props: IBCADialogProps) => { + const { bcaInfoOpen, setBcaInfoOpen, bcaData } = props; + const { leftColumnWidth, rightColumnWidth, boldFontWeight, fontSize, headerColour } = tabStyles; + return ( + + BC Assessment Information + +
+ + {/* HEADER */} + + + Details + + + + + {/* CONTENT */} + + + Folio ID: + + + {bcaData?.FOLIO_ID} + + + + Net Improvement Value: + + + + {formatCurrency(bcaData.GEN_NET_IMPROVEMENT_VALUE)} + + + + + Net Land Value: + + + + {formatCurrency(bcaData?.GEN_NET_LAND_VALUE)} + + + + + Gross Improvement Value: + + + + {formatCurrency(bcaData?.GEN_GROSS_IMPROVEMENT_VALUE)} + + + + + Gross Land Value: + + + + {formatCurrency(bcaData?.GEN_GROSS_LAND_VALUE)} + + + + +
+ + + + + + ); +}; diff --git a/frontend/src/components/ltsa/TitleDetails.tsx b/frontend/src/components/ltsa/TitleDetails.tsx index c31122d8c..1fff57265 100644 --- a/frontend/src/components/ltsa/TitleDetails.tsx +++ b/frontend/src/components/ltsa/TitleDetails.tsx @@ -3,6 +3,7 @@ import { ILTSAOrderModel } from 'actions/parcelsActions'; import { HeaderDivider } from 'features/mapSideBar/components/tabs/HeaderDivider'; import { tabStyles } from 'features/mapSideBar/components/tabs/TabStyles'; import React from 'react'; +import formatCurrency from 'utils/formatCurrency'; interface ITitleDetailsProps { ltsa?: ILTSAOrderModel; @@ -12,27 +13,6 @@ export const TitleDetails = (props: ITitleDetailsProps) => { const { ltsa } = props; const { leftColumnWidth, rightColumnWidth, boldFontWeight, fontSize, headerColour } = tabStyles; - const calculateCurrency = (value: number | string | undefined) => { - if (!value) { - return ''; - } - - let cleanedValue = 0; - if (typeof value === 'string') { - cleanedValue = parseFloat(value.replace(',', '').replace('$', '')); - if (Number.isNaN(cleanedValue)) { - return ''; - } - } else if (typeof value === 'number') { - cleanedValue = value; - } - - return new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'CAD', - }).format(cleanedValue); - }; - return (
@@ -80,9 +60,7 @@ export const TitleDetails = (props: ITitleDetailsProps) => { - {calculateCurrency( - ltsa?.order.orderedProduct.fieldedData.tombstone.marketValueAmount, - )} + {formatCurrency(ltsa?.order.orderedProduct.fieldedData.tombstone.marketValueAmount)} diff --git a/frontend/src/components/maps/leaflet/LayerPopup/LayerPopupContent.tsx b/frontend/src/components/maps/leaflet/LayerPopup/LayerPopupContent.tsx index e943089c4..659d036a3 100644 --- a/frontend/src/components/maps/leaflet/LayerPopup/LayerPopupContent.tsx +++ b/frontend/src/components/maps/leaflet/LayerPopup/LayerPopupContent.tsx @@ -1,4 +1,5 @@ import { ILTSAOrderModel } from 'actions/parcelsActions'; +import { BCADialog, IBCAData } from 'components/bcAssessment/BCADialog'; import { LTSADialog } from 'components/ltsa/LTSADialog'; import { useApi } from 'hooks/useApi'; import { LatLng, LatLngBounds } from 'leaflet'; @@ -70,6 +71,7 @@ export const LayerPopupContent: React.FC = ({ data, config, // Get LTSA information const [ltsaInfoOpen, setLtsaInfoOpen] = React.useState(false); + const [bcaInfoOpen, setBcaInfoOpen] = React.useState(false); const [ltsa, setLtsa] = useState(undefined); const api = useApi(); @@ -121,6 +123,21 @@ export const LayerPopupContent: React.FC = ({ data, config, + + { + setBcaInfoOpen(true); + }} + > + BCA Info + + + ); diff --git a/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx b/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx index e089f37c8..62e66ee9a 100644 --- a/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx +++ b/frontend/src/components/maps/leaflet/LayerPopup/constants/index.tsx @@ -34,32 +34,32 @@ export const parcelLayerPopupConfig = { ), }, - GEN_GROSS_LAND_VALUE: { - label: 'Gross Land Value:', - display: (data: any) => ( - <>{data.GEN_GROSS_LAND_VALUE ? `$${data.GEN_GROSS_LAND_VALUE}` : `N/A`} - ), - }, - GEN_GROSS_IMPROVEMENT_VALUE: { - label: 'Gross Improvement Value:', - display: (data: any) => ( - <>{data.GEN_GROSS_IMPROVEMENT_VALUE ? `$${data.GEN_GROSS_IMPROVEMENT_VALUE}` : `N/A`} - ), - }, - GEN_NET_LAND_VALUE: { - label: 'Net Land Value:', - display: (data: any) => <>{data.GEN_NET_LAND_VALUE ? `$${data.GEN_NET_LAND_VALUE}` : `N/A`}, - }, - GEN_NET_IMPROVEMENT_VALUE: { - label: 'Net Improvement Value:', - display: (data: any) => ( - <>{data.GEN_NET_IMPROVEMENT_VALUE ? `$${data.GEN_NET_IMPROVEMENT_VALUE}` : `N/A`} - ), - }, - FOLIO_ID: { - label: 'Folio ID:', - display: (data: any) => <>{data.FOLIO_ID ? `${data.FOLIO_ID}` : `N/A`}, - }, + // GEN_GROSS_LAND_VALUE: { + // label: 'Gross Land Value:', + // display: (data: any) => ( + // <>{data.GEN_GROSS_LAND_VALUE ? `$${data.GEN_GROSS_LAND_VALUE}` : `N/A`} + // ), + // }, + // GEN_GROSS_IMPROVEMENT_VALUE: { + // label: 'Gross Improvement Value:', + // display: (data: any) => ( + // <>{data.GEN_GROSS_IMPROVEMENT_VALUE ? `$${data.GEN_GROSS_IMPROVEMENT_VALUE}` : `N/A`} + // ), + // }, + // GEN_NET_LAND_VALUE: { + // label: 'Net Land Value:', + // display: (data: any) => <>{data.GEN_NET_LAND_VALUE ? `$${data.GEN_NET_LAND_VALUE}` : `N/A`}, + // }, + // GEN_NET_IMPROVEMENT_VALUE: { + // label: 'Net Improvement Value:', + // display: (data: any) => ( + // <>{data.GEN_NET_IMPROVEMENT_VALUE ? `$${data.GEN_NET_IMPROVEMENT_VALUE}` : `N/A`} + // ), + // }, + // FOLIO_ID: { + // label: 'Folio ID:', + // display: (data: any) => <>{data.FOLIO_ID ? `${data.FOLIO_ID}` : `N/A`}, + // }, }; export const municipalityLayerPopupConfig = { diff --git a/frontend/src/utils/formatCurrency.ts b/frontend/src/utils/formatCurrency.ts new file mode 100644 index 000000000..a9d7ee9ff --- /dev/null +++ b/frontend/src/utils/formatCurrency.ts @@ -0,0 +1,28 @@ +/** + * formatCurrency - transform a string or number to the local Canadian currency string format. + * Ex: 1234: number -> CA$1,234: string + * @param value a number or string formatted number + * @returns {string} + */ +const formatCurrency = (value: number | string | undefined): string => { + if (value == null) { + return ''; + } + + let cleanedValue = 0; + if (typeof value === 'string') { + cleanedValue = parseFloat(value.replace(',', '').replace('$', '')); + if (Number.isNaN(cleanedValue)) { + return ''; + } + } else if (typeof value === 'number') { + cleanedValue = value; + } + + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'CAD', + }).format(cleanedValue); +}; + +export default formatCurrency; From a709f660e059f21621636a7b4114bc205e663490 Mon Sep 17 00:00:00 2001 From: Graham Stewart Date: Mon, 11 Mar 2024 14:17:55 -0700 Subject: [PATCH 04/13] Added placeholder text for when no BCA data present. --- .../src/components/bcAssessment/BCADialog.tsx | 122 ++++++++++-------- .../leaflet/LayerPopup/LayerPopupContent.tsx | 2 +- 2 files changed, 69 insertions(+), 55 deletions(-) diff --git a/frontend/src/components/bcAssessment/BCADialog.tsx b/frontend/src/components/bcAssessment/BCADialog.tsx index 32a58e759..4b2ae05be 100644 --- a/frontend/src/components/bcAssessment/BCADialog.tsx +++ b/frontend/src/components/bcAssessment/BCADialog.tsx @@ -31,6 +31,12 @@ interface IBCADialogProps { export const BCADialog = (props: IBCADialogProps) => { const { bcaInfoOpen, setBcaInfoOpen, bcaData } = props; const { leftColumnWidth, rightColumnWidth, boldFontWeight, fontSize, headerColour } = tabStyles; + const noInfoParagraphStyle = { + display: 'flex', + margin: '1em', + color: 'GrayText', + fontSize: '11pt', + }; return ( { > BC Assessment Information -
- - {/* HEADER */} - - - Details - - - + {bcaData.FOLIO_ID ? ( +
+ + {/* HEADER */} + + + Details + + + - {/* CONTENT */} - - - Folio ID: - - - {bcaData?.FOLIO_ID} - + {/* CONTENT */} + + + Folio ID: + + + {bcaData?.FOLIO_ID} + - - Net Improvement Value: - - - - {formatCurrency(bcaData.GEN_NET_IMPROVEMENT_VALUE)} - - + + Net Improvement Value: + + + + {formatCurrency(bcaData.GEN_NET_IMPROVEMENT_VALUE)} + + - - Net Land Value: - - - - {formatCurrency(bcaData?.GEN_NET_LAND_VALUE)} - - + + Net Land Value: + + + + {formatCurrency(bcaData?.GEN_NET_LAND_VALUE)} + + - - Gross Improvement Value: - - - - {formatCurrency(bcaData?.GEN_GROSS_IMPROVEMENT_VALUE)} - - + + Gross Improvement Value: + + + + {formatCurrency(bcaData?.GEN_GROSS_IMPROVEMENT_VALUE)} + + - - Gross Land Value: - - - - {formatCurrency(bcaData?.GEN_GROSS_LAND_VALUE)} - + + Gross Land Value: + + + + {formatCurrency(bcaData?.GEN_GROSS_LAND_VALUE)} + + - - -
+ +
+ ) : ( + <> +

+ No BC Assessment information available for this PID or information still loading. +

+ + )}