diff --git a/src/provider/zeebe/ZeebePropertiesProvider.js b/src/provider/zeebe/ZeebePropertiesProvider.js index c552c81d..625d2bc2 100644 --- 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 index 3716f59e..f075b0cb 100644 --- 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 index fb0eb176..d3e390cb 100644 --- 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') || ''; + 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') || ''; + + // 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 ; } -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 ( + ' } + open={ open } + /> + ); +} + // helper //////////////////