wip

bpmn-io · Jul 8, 2024 · 2b26917 · 2b26917
1 parent 7924661
commit 2b26917
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 39 deletions.
diff --git a/src/provider/zeebe/ZeebePropertiesProvider.js b/src/provider/zeebe/ZeebePropertiesProvider.js
@@ -306,11 +306,13 @@ function ExecutionListenersGroup(element, injector) {
   const group = {
     label: translate('Execution listeners'),
     id: 'Zeebe__ExecutionListeners',
-    component: ListGroup,
-    ...ExecutionListenersProps({ element, injector })
+    component: Group,
+    entries: [
+      ...ExecutionListenersProps({ element, injector })
+    ]
   };
 
-  if (group.items) {
+  if (group.entries) {
     return group;
   }
 

diff --git a/src/provider/zeebe/properties/ExecutionListener.js b/src/provider/zeebe/properties/ExecutionListener.js
@@ -15,12 +15,13 @@ export default function ExecutionListener(props) {
   } = props;
 
   const entries = [
-    {
-      id: idPrefix + '-eventType',
-      component: EventType,
-      idPrefix,
-      listener
-    },
+
+    // {
+    //   id: idPrefix + '-eventType',
+    //   component: EventType,
+    //   idPrefix,
+    //   listener
+    // },
     {
       id: idPrefix + '-listenerType',
       component: ListenerType,

diff --git a/src/provider/zeebe/properties/ExecutionListenersProps.js b/src/provider/zeebe/properties/ExecutionListenersProps.js
@@ -4,9 +4,11 @@ import {
   isAny
 } from 'bpmn-js/lib/util/ModelUtil';
 
-import { without } from 'min-dash';
+import { CollapsibleEntry, ListEntry } from '@bpmn-io/properties-panel';
 
-import ExecutionListenerProperty from './ExecutionListener';
+import { groupBy, without } from 'min-dash';
+
+import ExecutionListenerEntries from './ExecutionListener';
 
 import {
   createElement
@@ -50,33 +52,62 @@ export function ExecutionListenersProps({ element, injector }) {
         modeling = injector.get('modeling'),
         translate = injector.get('translate');
 
-  const items = listeners.map((listener, index) => {
-    const id = element.id + '-executionListener-' + index;
-    const type = listener.get('type') || '<no type>';
+  const grouped = groupBy(listeners, 'eventType');
+
+  const startListeners = grouped.start,
+        endListeners = grouped.end;
+
+  // const items = listeners.map((listener, index) => {
+  //   const id = element.id + '-executionListener-' + index;
+  //   const type = listener.get('type') || '<no type>';
+
+  //   return {
+  //     id,
+  //     label: translate(`${EVENT_TO_LABEL[listener.get('eventType')]}: {type}`, { type }),
+  //     entries: ExecutionListenerProperty({
+  //       idPrefix: id,
+  //       element,
+  //       listener
+  //     }),
+  //     autoFocusEntry: id + '-eventType',
+  //     remove: removeFactory({ modeling, element, listener })
+  //   };
+  // });
+
+  const onRemove = removeFactory({ modeling, element });
+
+  const entries = [
+    {
+      id: element.id + '-startExecutionListeners-',
+      component: Listeners,
+      label: translate('Start'),
+      items: startListeners,
+      onAdd: addFactory('start', { bpmnFactory, commandStack, element }),
+      onRemove
+    },
+    {
+      id: element.id + '-endExecutionListeners-',
+      component: Listeners,
+      label: translate('End'),
+      items: endListeners,
+      onAdd: addFactory('end', { bpmnFactory, commandStack, element }),
+      onRemove
+    }
+  ];
 
-    return {
-      id,
-      label: translate(`${EVENT_TO_LABEL[listener.get('eventType')]}: {type}`, { type }),
-      entries: ExecutionListenerProperty({
-        idPrefix: id,
-        element,
-        listener
-      }),
-      autoFocusEntry: id + '-eventType',
-      remove: removeFactory({ modeling, element, listener })
-    };
-  });
-
-  return {
-    items,
-    add: addFactory({ bpmnFactory, commandStack, element })
-  };
+  return entries;
+}
+
+function Listeners(props) {
+  return <ListEntry
+    { ...props }
+    component={ ExecutionListener }
+  />;
 }
 
-function removeFactory({ modeling, element, listener }) {
-  return function(event) {
-    event.stopPropagation();
 
+function removeFactory({ modeling, element }) {
+  return function(listener) {
     const businessObject = getRelevantBusinessObject(element);
     const container = getExecutionListenersContainer(businessObject);
 
@@ -90,10 +121,8 @@ function removeFactory({ modeling, element, listener }) {
   };
 }
 
-function addFactory({ bpmnFactory, commandStack, element }) {
-  return function(event) {
-    event.stopPropagation();
-
+function addFactory(eventType, { bpmnFactory, commandStack, element }) {
+  return function() {
     let commands = [];
 
     const businessObject = getRelevantBusinessObject(element);
@@ -142,7 +171,7 @@ function addFactory({ bpmnFactory, commandStack, element }) {
     }
 
     // (3) create zeebe:ExecutionListener
-    const executionListener = createElement('zeebe:ExecutionListener', DEFAULT_LISTENER_PROPS, executionListeners, bpmnFactory);
+    const executionListener = createElement('zeebe:ExecutionListener', { eventType }, executionListeners, bpmnFactory);
 
     // (4) add executionListener to list
     commands.push({
@@ -161,6 +190,31 @@ function addFactory({ bpmnFactory, commandStack, element }) {
   };
 }
 
+function ExecutionListener(props) {
+  const {
+    element,
+    id: idPrefix,
+    index,
+    item: listener,
+    open
+  } = props;
+  const listenerId = `${ idPrefix }-listener-${ index }`;
+
+  return (
+    <CollapsibleEntry
+      id={ listenerId }
+      element={ element }
+      entries={ ExecutionListenerEntries({
+        element,
+        listener,
+        idPrefix: listenerId
+      }) }
+      label={ listener.get('type') || '<no type>' }
+      open={ open }
+    />
+  );
+}
+
 
 // helper //////////////////