feat: Enhance location handling in forms and components with incident coordinates

Author: jbouse

src/components/AssignmentBoard.tsx

@@ -64,7 +64,7 @@ const AssignmentBoard: React.FC<AssignmentBoardProps> = ({ unitId, orgId, readOn
   function markerSvg(color: string, label: string) {
     const initial = label ? label.toUpperCase() : '';
     const len = initial.length;
-    let width = 32, height = 28, rectX = 0, rectY = 0, rectRx = 6, fontSize = 16, textX = 16, textY = 16;
+    let width = 32, height = 28, rectX = 0, rectY = 0, rectRx = 6, fontSize = 16, textX = 16;
     if (len === 2) {
       width = 40; textX = 20;
     } else if (len === 3) {

src/components/fields/LocationField.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Form, FloatingLabel, InputGroup } from 'react-bootstrap';
-
 import LocationPickerModal from './LocationPickerModal';
 
 interface LocationFieldProps {
@@ -9,6 +8,8 @@ interface LocationFieldProps {
   address: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   readOnly?: boolean;
+  incidentLat?: number;
+  incidentLng?: number;
 }
 
 
@@ -18,6 +19,8 @@ const LocationField: React.FC<LocationFieldProps> = ({
   address,
   onChange,
   readOnly = false,
+  incidentLat,
+  incidentLng,
 }) => {
   const [showPicker, setShowPicker] = useState(false);
 
@@ -102,6 +105,8 @@ const LocationField: React.FC<LocationFieldProps> = ({
         onPick={handlePick}
         initialLat={hasCoords ? latNum : undefined}
         initialLng={hasCoords ? lngNum : undefined}
+        incidentLat={incidentLat}
+        incidentLng={incidentLng}
       />
     </>
   );

src/components/fields/LocationPickerModal.tsx

@@ -8,12 +8,17 @@ interface LocationPickerModalProps {
   onPick: (lat: number, lng: number) => void;
   initialLat?: number;
   initialLng?: number;
+  incidentLat?: number;
+  incidentLng?: number;
 }
 
 const mapContainerStyle = { width: '100%', height: '300px' };
-const defaultCenter = { lat: 28.5383, lng: -81.3792 }; // Orlando, FL
 
-const LocationPickerModal: React.FC<LocationPickerModalProps> = ({ show, onHide, onPick, initialLat, initialLng }) => {
+// Default fallback center (Orlando, FL)
+const defaultCenter = { lat: 28.5383, lng: -81.3792 };
+
+
+const LocationPickerModal: React.FC<LocationPickerModalProps> = ({ show, onHide, onPick, initialLat, initialLng, incidentLat, incidentLng }) => {
   const [marker, setMarker] = useState<{ lat: number; lng: number } | null>(
     initialLat != null && initialLng != null
       ? { lat: Number(initialLat), lng: Number(initialLng) }
@@ -43,6 +48,14 @@ const LocationPickerModal: React.FC<LocationPickerModalProps> = ({ show, onHide,
     }
   };
 
+  // Determine the map center: marker > incident location > default
+  let mapCenter = defaultCenter;
+  if (marker) {
+    mapCenter = marker;
+  } else if (incidentLat != null && incidentLng != null) {
+    mapCenter = { lat: Number(incidentLat), lng: Number(incidentLng) };
+  }
+
   return (
     <Modal show={show} onHide={onHide} centered>
       <Modal.Header closeButton>
@@ -51,8 +64,8 @@ const LocationPickerModal: React.FC<LocationPickerModalProps> = ({ show, onHide,
       <Modal.Body>
         <GoogleMap
           mapContainerStyle={mapContainerStyle}
-          center={marker || defaultCenter}
-          zoom={marker ? 16 : 4}
+          center={mapCenter}
+          zoom={marker ? 18 : (incidentLat && incidentLng) ?  15 : 10}
           mapTypeId="hybrid"
           onClick={handleMapClick}
         >

src/pages/Incidents/IncidentForm.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Form, Button, Modal } from 'react-bootstrap';
 import NoteField from '../../components/fields/NoteField';
 import DescriptorField from '../../components/fields/DescriptorField';
+import LocationField from '../../components/fields/LocationField';
 
 interface IncidentFormProps {
   show: boolean;
@@ -15,6 +16,9 @@ const IncidentForm: React.FC<IncidentFormProps> = ({ show, onHide, onSubmit, ini
     name: initial?.name || '',
     description: initial?.description || '',
     notes: initial?.notes || '',
+    latitude: initial?.latitude || '',
+    longitude: initial?.longitude || '',
+    address: initial?.address || '',
   });
 
   React.useEffect(() => {
@@ -23,12 +27,24 @@ const IncidentForm: React.FC<IncidentFormProps> = ({ show, onHide, onSubmit, ini
         name: initial?.name || '',
         description: initial?.description || '',
         notes: initial?.notes || '',
+        latitude: initial?.latitude || '',
+        longitude: initial?.longitude || '',
+        address: initial?.address || '',
       });
     }
   }, [initial, show]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setForm({ ...form, [e.target.name]: e.target.value });
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | any) => {
+    // Support batched lat/lng event from map picker
+    if (e.target.name === 'latitude-longitude' && e.target.value) {
+      setForm(f => ({
+        ...f,
+        latitude: e.target.value.latitude,
+        longitude: e.target.value.longitude,
+      }));
+    } else {
+      setForm({ ...form, [e.target.name]: e.target.value });
+    }
   };
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -48,6 +64,14 @@ const IncidentForm: React.FC<IncidentFormProps> = ({ show, onHide, onSubmit, ini
             description={form.description}
             onChange={handleChange}
           />
+          <LocationField
+            latitude={form.latitude}
+            longitude={form.longitude}
+            address={form.address}
+            onChange={handleChange}
+            incidentLat={form.latitude !== '' ? Number(form.latitude) : undefined}
+            incidentLng={form.longitude !== '' ? Number(form.longitude) : undefined}
+          />
           <NoteField
             notes={form.notes}
             onChange={handleChange}

src/pages/Locations/LocationForm.tsx

@@ -13,9 +13,11 @@ interface LocationFormProps {
   initial?: any;
   units: Unit[];
   unitsLoading?: boolean;
+  incidentLat?: number;
+  incidentLng?: number;
 }
 
-const LocationForm: React.FC<LocationFormProps> = ({ show, onHide, onSubmit, initial, units, unitsLoading }) => {
+const LocationForm: React.FC<LocationFormProps> = ({ show, onHide, onSubmit, initial, units, unitsLoading, incidentLat, incidentLng }) => {
   const [form, setForm] = useState({
     name: initial?.name || '',
     label: initial?.label || '',
@@ -87,6 +89,8 @@ const LocationForm: React.FC<LocationFormProps> = ({ show, onHide, onSubmit, ini
             longitude={form.longitude}
             address={form.address}
             onChange={handleChange}
+            incidentLat={incidentLat}
+            incidentLng={incidentLng}
           />
           <ContextSelect
             label='Unit'

src/pages/Locations/LocationsPage.tsx

@@ -7,6 +7,7 @@ import { Container, Card, Table, Button, Alert, Placeholder, Row, Col, Spinner }
 import { ArchiveFill, CheckCircleFill, DashCircleFill } from 'react-bootstrap-icons';
 import { Location, LocationStatus } from '../../types/Location';
 import LocationForm from './LocationForm';
+import { useIncident } from '../../context/IncidentContext';
 import LocationViewModal from './LocationViewModal';
 import { ALERT_NOT_LOGGED_IN } from '../../constants/messages';
 import { useUnit } from '../../context/UnitContext';
@@ -30,6 +31,7 @@ const LocationsPage: React.FC = () => {
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
   const [selectedLocation, setSelectedLocation] = useState<Location | null>(null);
   const { units, loading: unitsLoading } = useUnit();
+  const { selectedIncident } = useIncident();
 
   const handleAdd = () => {
     setEditLocation(null);
@@ -190,7 +192,9 @@ const LocationsPage: React.FC = () => {
         onSubmit={handleFormSubmit}
         initial={editLocation}
         units={units}
-        unitsLoading={unitsLoading}  // Assuming unitsLoading is passed as a prop
+        unitsLoading={unitsLoading}
+        incidentLat={selectedIncident?.latitude}
+        incidentLng={selectedIncident?.longitude}
       />
       <LocationViewModal
         show={showView}

src/types/Incident.ts

@@ -4,5 +4,8 @@ export interface Incident {
   name: string;
   description?: string;
   notes?: string;
+  latitude?: number;
+  longitude?: number;
+  address?: string;
   // ...other fields as needed
 }