PIMS-1597 PID Formatting & Map Adjustments (#2402)

Co-authored-by: GrahamS-Quartech <112989452+GrahamS-Quartech@users.noreply.github.com>

react-app/src/components/form/TextFormField.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
 import { Controller, FieldValues, RegisterOptions, useFormContext } from 'react-hook-form';
+import { pidFormatter } from '@/utilities/formatters';
 
 type TextFormFieldProps = {
   defaultVal?: string;
   name: string;
   label: string;
   numeric?: boolean;
+  isPid?: boolean;
   rules?: Omit<
     RegisterOptions<FieldValues, string>,
     'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'
@@ -15,7 +17,7 @@ type TextFormFieldProps = {
 
 const TextFormField = (props: TextFormFieldProps) => {
   const { control, setValue } = useFormContext();
-  const { name, label, rules, numeric, defaultVal, ...restProps } = props;
+  const { name, label, rules, numeric, isPid, defaultVal, ...restProps } = props;
   return (
     <Controller
       control={control}
@@ -24,19 +26,24 @@ const TextFormField = (props: TextFormFieldProps) => {
       render={({ field: { onChange, value }, fieldState: { error } }) => {
         return (
           <TextField
-            {...restProps}
             onBlur={(event) => {
               if (numeric && parseFloat(event.currentTarget.value)) {
                 setValue(name, parseFloat(event.currentTarget.value));
               }
             }}
             onChange={(event) => {
-              if (numeric === undefined) {
+              if (isPid) {
+                event.target.value = pidFormatter(parseInt(event.target.value.replace(/-/g, '')));
                 onChange(event);
                 return;
-              }
-              if (event.target.value === '' || /^[0-9]*\.?[0-9]{0,2}$/.test(event.target.value)) {
+              } else if (
+                numeric &&
+                (event.target.value === '' || /^[0-9]*\.?[0-9]{0,2}$/.test(event.target.value))
+              ) {
+                onChange(event);
+              } else if (numeric === undefined) {
                 onChange(event);
+                return;
               }
             }}
             value={value ?? defaultVal}
@@ -45,6 +52,7 @@ const TextFormField = (props: TextFormFieldProps) => {
             type={'text'}
             error={!!error && !!error.message}
             helperText={error?.message}
+            {...restProps}
           />
         );
       }}

react-app/src/components/map/ParcelMap.tsx

@@ -17,6 +17,8 @@ type ParcelMapProps = {
   loadProperties?: boolean;
   popupSize?: 'small' | 'large';
   scrollOnClick?: boolean;
+  zoomOnScroll?: boolean;
+  hideControls?: boolean;
 } & PropsWithChildren;
 
 export const SelectedMarkerContext = createContext(null);
@@ -60,6 +62,8 @@ const ParcelMap = (props: ParcelMapProps) => {
     loadProperties = false,
     popupSize,
     scrollOnClick,
+    zoomOnScroll = true,
+    hideControls = false,
   } = props;
 
   return (
@@ -72,9 +76,13 @@ const ParcelMap = (props: ParcelMapProps) => {
       <Box height={height}>
         <LoadingCover show={loading} />
         {/* All map controls fit here */}
-        <ControlsGroup position="topleft">
-          <FilterControl setFilter={setFilter} />
-        </ControlsGroup>
+        {hideControls ? (
+          <></>
+        ) : (
+          <ControlsGroup position="topleft">
+            <FilterControl setFilter={setFilter} />
+          </ControlsGroup>
+        )}
         <MapPropertyDetails property={selectedMarker} />
         <MapContainer
           style={{ height: '100%' }}
@@ -85,7 +93,7 @@ const ParcelMap = (props: ParcelMapProps) => {
           ]}
           dragging={movable}
           zoomControl={zoomable}
-          scrollWheelZoom={zoomable}
+          scrollWheelZoom={zoomOnScroll}
           touchZoom={zoomable}
           boxZoom={zoomable}
           doubleClickZoom={zoomable}

react-app/src/components/projects/DisposalPropertiesSearchTable.tsx

@@ -8,6 +8,7 @@ import { GridColDef, DataGrid } from '@mui/x-data-grid';
 import { useState, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import React from 'react';
+import { pidFormatter } from '@/utilities/formatters';
 
 interface IDisposalProjectSearch {
   rows: any[];
@@ -36,7 +37,7 @@ const DisposalProjectSearch = (props: IDisposalProjectSearch) => {
     }
 
     if (input.PID) {
-      return `${input.Type} - PID: ${input.PID}`;
+      return `${input.Type} - PID: ${pidFormatter(input.PID)}`;
     } else if (input.PIN) {
       return `${input.Type} - PIN: ${input.PIN}`;
     } else if (input.Address1) {
@@ -67,7 +68,7 @@ const DisposalProjectSearch = (props: IDisposalProjectSearch) => {
           >
             {params.row.Type === 'Building' && params.row.Address1
               ? params.row.Address1
-              : params.row.PID}
+              : pidFormatter(params.row.PID)}
           </Link>
         ) as ReactNode;
       },

react-app/src/components/projects/DisposalPropertiesSimpleTable.tsx

@@ -1,4 +1,6 @@
+import { PropertyTypes } from '@/constants/propertyTypes';
 import { Agency } from '@/hooks/api/useAgencyApi';
+import { pidFormatter } from '@/utilities/formatters';
 import { Box, Typography } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import React from 'react';
@@ -17,7 +19,10 @@ const DisposalPropertiesTable = (props: IDisposalPropertiesTable) => {
       field: 'PID/Address',
       headerName: 'PID/Address',
       flex: 1,
-      valueGetter: (value, row) => row.PID ?? row.PIN ?? row.Address1,
+      valueGetter: (value, row) =>
+        row.PropertyTypeId === PropertyTypes.BUILDING && row.Address1
+          ? row.Address1
+          : pidFormatter(row.PID) ?? row.PIN,
     },
     {
       field: 'Agency',

react-app/src/components/property/AddProperty.tsx

@@ -171,7 +171,7 @@ const AddProperty = () => {
               const addParcel: ParcelAdd = {
                 ...formValues,
                 LandArea: parseFloatOrNull(formValues.LandArea),
-                PID: parseIntOrNull(formValues.PID),
+                PID: parseIntOrNull(formValues.PID.replace(/-/g, '')),
                 PIN: parseIntOrNull(formValues.PIN),
                 PropertyTypeId: 0,
                 AgencyId: userContext.pimsUser.data.AgencyId,
@@ -190,7 +190,7 @@ const AddProperty = () => {
               const formValues = formMethods.getValues();
               const addBuilding: BuildingAdd = {
                 ...formValues,
-                PID: parseIntOrNull(formValues.PID),
+                PID: parseIntOrNull(formValues.PID.replace(/-/g, '')),
                 PIN: parseIntOrNull(formValues.PIN),
                 RentableArea: parseFloatOrNull(formValues.RentableArea),
                 TotalArea: parseFloatOrNull(formValues.TotalArea),

react-app/src/components/property/PropertyDetail.tsx

@@ -21,7 +21,7 @@ import {
 } from './PropertyDialog';
 import { PropertyType } from './PropertyForms';
 import MetresSquared from '@/components/text/MetresSquared';
-import { zeroPadPID } from '@/utilities/formatters';
+import { pidFormatter, zeroPadPID } from '@/utilities/formatters';
 import ParcelMap from '../map/ParcelMap';
 import { Map } from 'leaflet';
 import { Room } from '@mui/icons-material';
@@ -146,6 +146,8 @@ const PropertyDetail = (props: IPropertyDetail) => {
 
   const customFormatter = (key: any, val: any) => {
     switch (key) {
+      case 'PID':
+        return <Typography>{pidFormatter(val)}</Typography>;
       case 'Agency':
         return <Typography>{val.Name}</Typography>;
       case 'Classification':
@@ -265,7 +267,9 @@ const PropertyDetail = (props: IPropertyDetail) => {
           mapRef={setMap}
           movable={false}
           zoomable={false}
+          zoomOnScroll={false}
           popupSize="small"
+          hideControls
         >
           <Box display={'flex'} alignItems={'center'} justifyContent={'center'} height={'100%'}>
             <Room

react-app/src/components/property/PropertyDialog.tsx

@@ -15,7 +15,7 @@ import {
   PropertyType,
   NetBookValue,
 } from './PropertyForms';
-import { parseFloatOrNull, parseIntOrNull, zeroPadPID } from '@/utilities/formatters';
+import { parseFloatOrNull, parseIntOrNull, pidFormatter } from '@/utilities/formatters';
 import useDataSubmitter from '@/hooks/useDataSubmitter';
 
 interface IParcelInformationEditDialog {
@@ -60,7 +60,7 @@ export const ParcelInformationEditDialog = (props: IParcelInformationEditDialog)
     infoFormMethods.reset({
       NotOwned: initialValues?.NotOwned,
       Address1: initialValues?.Address1,
-      PID: initialValues?.PID ? zeroPadPID(initialValues.PID) : '',
+      PID: initialValues?.PID ? pidFormatter(initialValues.PID) : '',
       PIN: String(initialValues?.PIN ?? ''),
       Postal: initialValues?.Postal,
       AdministrativeAreaId: initialValues?.AdministrativeAreaId,
@@ -80,7 +80,7 @@ export const ParcelInformationEditDialog = (props: IParcelInformationEditDialog)
         const isValid = await infoFormMethods.trigger();
         if (isValid) {
           const formValues: any = { ...infoFormMethods.getValues(), Id: initialValues.Id };
-          formValues.PID = parseIntOrNull(formValues.PID);
+          formValues.PID = parseIntOrNull(formValues.PID.replace(/-/g, ''));
           formValues.PIN = parseIntOrNull(formValues.PIN);
           formValues.LandArea = parseFloatOrNull(formValues.LandArea);
           submit(initialValues.Id, formValues).then(() => postSubmit());
@@ -167,7 +167,7 @@ export const BuildingInformationEditDialog = (props: IBuildingInformationEditDia
     infoFormMethods.reset({
       Address1: initialValues?.Address1,
       PIN: String(initialValues?.PIN ?? ''),
-      PID: initialValues?.PID ? zeroPadPID(initialValues.PID) : '',
+      PID: initialValues?.PID ? pidFormatter(initialValues.PID) : '',
       Postal: initialValues?.Postal,
       AdministrativeAreaId: initialValues?.AdministrativeAreaId,
       IsSensitive: initialValues?.IsSensitive,
@@ -195,7 +195,7 @@ export const BuildingInformationEditDialog = (props: IBuildingInformationEditDia
         const isValid = await infoFormMethods.trigger();
         if (isValid) {
           const formValues: any = { ...infoFormMethods.getValues(), Id: initialValues.Id };
-          formValues.PID = parseIntOrNull(formValues.PID);
+          formValues.PID = parseIntOrNull(formValues.PID.replace(/-/g, ''));
           formValues.PIN = parseIntOrNull(formValues.PIN);
           formValues.TotalArea = parseFloatOrNull(formValues.TotalArea);
           formValues.RentableArea = parseFloatOrNull(formValues.RentableArea);

react-app/src/components/property/PropertyForms.tsx

@@ -182,16 +182,19 @@ export const GeneralInformationForm = (props: IGeneralInformationForm) => {
             fullWidth
             name={'PID'}
             label={'PID'}
-            numeric
+            isPid
             onBlur={(event) => {
-              map.closePopup();
-              api.parcelLayer
-                .getParcelByPid(event.target.value)
-                .then(handleFeatureCollectionResponse);
+              // Only do this if there's a value here
+              if (event.target.value) {
+                map.closePopup();
+                api.parcelLayer
+                  .getParcelByPid(event.target.value)
+                  .then(handleFeatureCollectionResponse);
+              }
             }}
             rules={{
               validate: (val, formVals) =>
-                (String(val).length <= 9 &&
+                (String(val.replace(/-/g, '')).length <= 9 &&
                   (String(val).length > 0 ||
                     String(formVals['PIN']).length > 0 ||
                     propertyType === 'Building')) ||
@@ -206,10 +209,13 @@ export const GeneralInformationForm = (props: IGeneralInformationForm) => {
             name={'PIN'}
             label={'PIN'}
             onBlur={(event) => {
-              map.closePopup();
-              api.parcelLayer
-                .getParcelByPin(event.target.value)
-                .then(handleFeatureCollectionResponse);
+              // Only do this if there's a value here
+              if (event.target.value) {
+                map.closePopup();
+                api.parcelLayer
+                  .getParcelByPin(event.target.value)
+                  .then(handleFeatureCollectionResponse);
+              }
             }}
             rules={{
               validate: (val, formVals) =>
@@ -244,9 +250,11 @@ export const GeneralInformationForm = (props: IGeneralInformationForm) => {
           <ParcelMap
             height={'500px'}
             mapRef={setMap}
-            movable={false}
-            zoomable={false}
+            movable={true}
+            zoomable={true}
+            zoomOnScroll={false}
             popupSize="small"
+            hideControls
           >
             <Box display={'flex'} alignItems={'center'} justifyContent={'center'} height={'100%'}>
               <Room

react-app/src/utilities/formatters.tsx

@@ -96,9 +96,10 @@ export const parseFloatOrNull = (flt: string | number) => {
 };
 
 export const zeroPadPID = (pid: number | string): string => {
-  return String(pid).padStart(9, '0');
+  return String(pid).replace(/[^\d]/g, '').padStart(9, '0');
 };
 
 export const pidFormatter = (pid: number | string): string => {
+  if (pid == null) return '';
   return zeroPadPID(pid).match(/\d{3}/g).join('-');
 };