add ability to focus on task in TaskPropertiesWidget (#2652)

* add map.setView useEffect in TaskMap

* format

Author: jschwarz2030

src/components/TaskPane/TaskMap/TaskMap.jsx

@@ -73,6 +73,7 @@ const shortcutGroup = "layers";
  * @author [Neil Rotstan](https://github.com/nrotstan)
  */
 export const TaskMapContent = (props) => {
+  const { workspaceContext } = props;
   const map = useMap();
   const [showTaskFeatures, setShowTaskFeatures] = useState(true);
   const [osmData, setOsmData] = useState(null);
@@ -88,6 +89,22 @@ export const TaskMapContent = (props) => {
   const [directionalityIndicators, setDirectionalityIndicators] = useState({});
   const [showMapControlsDrawer, setShowMapControlsDrawer] = useState(true);
 
+  useEffect(() => {
+    if (workspaceContext?.taskMapBounds) {
+      const isTaskInBundle =
+        props.taskBundle?.tasks?.some((t) => t.id === workspaceContext.taskMapTask?.id) ||
+        workspaceContext.taskMapTask?.id === props.task?.id;
+
+      if (isTaskInBundle) {
+        map.setView(workspaceContext.taskMapBounds.getCenter(), workspaceContext.taskMapZoom);
+      }
+    }
+  }, [
+    workspaceContext?.taskMapBounds,
+    workspaceContext?.taskMapZoom,
+    workspaceContext?.taskMapTask?.id,
+  ]);
+
   const taskFeatures = () => {
     if ((props.taskBundle?.tasks?.length ?? 0) > 0) {
       return featureCollection(

src/components/Widgets/TaskPropertiesWidget/TaskPropertiesWidget.jsx

@@ -7,6 +7,8 @@ import PropertyList from "../../EnhancedMap/PropertyList/PropertyList";
 import QuickWidget from "../../QuickWidget/QuickWidget";
 import messages from "./Messages";
 import "./TaskPropertiesWidget.scss";
+import bbox from "@turf/bbox";
+import { toLatLngBounds } from "../../../services/MapBounds/MapBounds";
 
 const descriptor = {
   widgetKey: "TaskPropertiesWidget",
@@ -19,6 +21,8 @@ const descriptor = {
 };
 
 const TaskPropertiesWidget = (props) => {
+  const { setWorkspaceContext } = props;
+
   const taskList = props.taskBundle?.tasks || [props.task];
   const [collapsed, setCollapsed] = useState();
 
@@ -49,6 +53,23 @@ const TaskPropertiesWidget = (props) => {
                   </span>
                 </div>
               </summary>
+              {!props.getUserAppSetting(props.user, "isEditMode") && (
+                <button
+                  className="mr-button mr-button--blue-fill mr-mb-2 mr-mr-2 mr-mt-2"
+                  onClick={() => {
+                    const bounds = toLatLngBounds(bbox(feature.geometry));
+
+                    setWorkspaceContext({
+                      taskMapBounds: bounds,
+                      taskMapZoom: 18,
+                      taskMapTask: task,
+                      taskMapBoundsUpdate: Date.now(),
+                    });
+                  }}
+                >
+                  Go to feature on map
+                </button>
+              )}
               <PropertyList
                 featureProperties={feature.properties}
                 hideHeader