make tasks in task properties widget collapsible

src/components/Widgets/TaskPropertiesWidget/Messages.js

@@ -18,4 +18,14 @@ export default defineMessages({
     id: "Widgets.TaskPropertiesWidget.task.label",
     defaultMessage: "Task {taskId}",
   },
+
+  expandAll: {
+    id: "Widgets.TaskPropertiesWidget.expandAll",
+    defaultMessage: "Expand All",
+  },
+
+  collapseAll: {
+    id: "Widgets.TaskPropertiesWidget.collapseAll",
+    defaultMessage: "Collapse All",
+  },
 })

src/components/Widgets/TaskPropertiesWidget/TaskPropertiesWidget.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react'
+import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import _get from 'lodash/get'
 import _map from 'lodash/map'
@@ -19,45 +19,91 @@ const descriptor = {
   defaultHeight: 6,
 }
 
-export default class TaskPropertiesWidget extends Component {
-  render() {
-    const taskList = _get(this.props.taskBundle, 'tasks') || [this.props.task]
-    const propertyLists = _map(taskList, (task) => {
-      const featurePropertiesList = AsMappableTask(task).osmFeatureProperties(this.props.osmElements)
-
-      return (
-        <div key={task.id} className="mr-mb-6">
-          <div className="mr-text-yellow">
-            <FormattedMessage {...messages.taskLabel} values={{taskId: task.id}}/>
-          </div>
-          {
-            featurePropertiesList.map((feature, index) => {
-              return (
-                <div key={index}>
-                  <div className="mr-text-yellow mr-ml-2">
-                    {feature.properties?.id || feature.geometry?.type}
-                  </div>
-                  <PropertyList featureProperties={feature.properties} hideHeader
-                    lightMode={false} {...this.props} />
-                </div>
-              )
-            })
-          }
-        </div>
-      )
-    })
+const TaskPropertiesWidget = (props) => {
+  const taskList = _get(props.taskBundle, 'tasks') || [props.task];
+  const initialCollapsedState = {};
+
+  taskList.forEach((task) => {
+    const featurePropertiesList = AsMappableTask(task).osmFeatureProperties(props.osmElements);
+    featurePropertiesList.forEach((_, index) => {
+      initialCollapsedState[`${task.id}-${index}`] = true;
+    });
+  });
+
+  const [collapsed, setCollapsed] = useState(initialCollapsedState); 
+  const [allCollapsed, setAllCollapsed] = useState(true); 
+
+  const toggleCollapseAll = () => {
+    const newCollapsedState = {};
+    taskList.forEach((task) => {
+      const featurePropertiesList = AsMappableTask(task).osmFeatureProperties(props.osmElements);
+      featurePropertiesList.forEach((_, index) => {
+        newCollapsedState[`${task.id}-${index}`] = !allCollapsed;
+      });
+    });
+    setCollapsed(newCollapsedState);
+    setAllCollapsed(!allCollapsed); 
+  }
+
+  const toggleCollapse = (index) => {
+    setCollapsed(prevState => ({
+      ...prevState,
+      [index]: !prevState[index], 
+    }));
+  }
 
+  const propertyLists = _map(taskList, (task) => {
+    const featurePropertiesList = AsMappableTask(task).osmFeatureProperties(props.osmElements)
 
     return (
-      <QuickWidget
-        {...this.props}
-        className="task-properties-widget"
-        widgetTitle={<FormattedMessage {...messages.title} />}
-      >
-        {propertyLists}
-      </QuickWidget>
+      <div key={task.id} className="mr-mb-4 border-b mr-border-gray-300 pb-2">
+        {
+          featurePropertiesList.map((feature, index) => {
+            const featureIndex = `${task.id}-${index}`; 
+            const isCollapsed = collapsed[featureIndex]; 
+            return (
+              <div key={featureIndex} className="mr-pb-2 mr-border-b mr-bg-gray-100">
+                <div className="mr-text-yellow mr-cursor-pointer mr-p-1 mr-rounded mr-flex mr-justify-between mr-items-center" onClick={() => toggleCollapse(featureIndex)}>
+                  <div className="mr-flex mr-items-center">
+                    <div className="mr-text-yellow mr-font-bold mr-text-lg">
+                      <FormattedMessage {...messages.taskLabel} values={{taskId: task.id}}/>
+                    </div>
+                    <span className="mr-text-grey-lighter mr-mx-2 mr-mt-1">
+                      {feature.properties?.id || feature.geometry?.type}
+                    </span>
+                  </div>
+                  <div className="mr-cursor-pointer">
+                    {isCollapsed ? '▼' : '▲'}
+                  </div>
+                </div>
+                {!isCollapsed && ( 
+                  <PropertyList featureProperties={feature.properties} hideHeader
+                    lightMode={false} {...props} />
+                )}
+              </div>
+            )
+          })
+        }
+      </div>
     )
-  }
+  })
+
+  return (
+    <QuickWidget
+      {...props}
+      className="task-properties-widget"
+      widgetTitle={<FormattedMessage {...messages.title} />}
+      rightHeaderControls={
+        <div onClick={toggleCollapseAll} className="mr-cursor-pointer mr-button mr-button--small mr-text-sm mr-ml-4">
+          {allCollapsed ? <FormattedMessage {...messages.expandAll} /> : <FormattedMessage {...messages.collapseAll} />}
+        </div>
+      }
+    >
+      {propertyLists}
+    </QuickWidget>
+  )
 }
 
 registerWidgetType(TaskPropertiesWidget, descriptor)
+
+export default TaskPropertiesWidget;