diff --git a/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js b/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js index 9f99f6f..643124a 100644 --- a/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js +++ b/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js @@ -1,26 +1,43 @@ -import scriptGroup, { SCRIPT_TYPE } from './SpiffScriptGroup'; +import { ListGroup } from '@bpmn-io/properties-panel'; import { is, isAny } from 'bpmn-js/lib/util/ModelUtil'; +import scriptGroup, { SCRIPT_TYPE } from './SpiffScriptGroup'; import { SpiffExtensionCalledDecision } from './SpiffExtensionCalledDecision'; import { SpiffExtensionTextInput } from './SpiffExtensionTextInput'; -import { SpiffExtensionServiceProperties, ServiceTaskOperatorSelect } from './SpiffExtensionServiceProperties'; +import { + ServiceTaskParameterArray, + ServiceTaskOperatorSelect, +} from './SpiffExtensionServiceProperties'; + const LOW_PRIORITY = 500; -export default function ExtensionsPropertiesProvider(propertiesPanel, translate, moddle, commandStack, elementRegistry) { - this.getGroups = function(element) { - return function(groups) { +export default function ExtensionsPropertiesProvider( + propertiesPanel, + translate, + moddle, + commandStack, + elementRegistry +) { + this.getGroups = function (element) { + return function (groups) { if (is(element, 'bpmn:ScriptTask')) { groups.push(createScriptGroup(element, translate, moddle)); - } else if (isAny(element, [ 'bpmn:Task', 'bpmn:CallActivity', 'bpmn:SubProcess' ])) { + } else if ( + isAny(element, ['bpmn:Task', 'bpmn:CallActivity', 'bpmn:SubProcess']) + ) { groups.push(preScriptPostScriptGroup(element, translate, moddle)); } if (is(element, 'bpmn:UserTask')) { groups.push(createUserGroup(element, translate, moddle, commandStack)); } if (is(element, 'bpmn:BusinessRuleTask')) { - groups.push(createBusinessRuleGroup(element, translate, moddle, commandStack)); + groups.push( + createBusinessRuleGroup(element, translate, moddle, commandStack) + ); } if (is(element, 'bpmn:ServiceTask')) { - groups.push(createServiceGroup(element, translate, moddle, commandStack)); + groups.push( + createServiceGroup(element, translate, moddle, commandStack) + ); } return groups; @@ -29,8 +46,13 @@ export default function ExtensionsPropertiesProvider(propertiesPanel, translate, propertiesPanel.registerProvider(LOW_PRIORITY, this); } -ExtensionsPropertiesProvider.$inject = [ 'propertiesPanel', 'translate', 'moddle', 'commandStack', 'elementRegistry' ]; - +ExtensionsPropertiesProvider.$inject = [ + 'propertiesPanel', + 'translate', + 'moddle', + 'commandStack', + 'elementRegistry', +]; /** * Adds a group to the properties panel for the script task that allows you @@ -42,7 +64,13 @@ function createScriptGroup(element, translate, moddle, commandStack) { return { id: 'spiff_script', label: translate('Script'), - entries: scriptGroup(element, moddle, SCRIPT_TYPE.bpmn, 'Script', 'Code to execute.') + entries: scriptGroup( + element, + moddle, + SCRIPT_TYPE.bpmn, + 'Script', + 'Code to execute.' + ), }; } @@ -59,21 +87,24 @@ function preScriptPostScriptGroup(element, translate, moddle) { id: 'spiff_pre_post_scripts', label: translate('SpiffWorkflow Scripts'), entries: [ - ...scriptGroup(element, + ...scriptGroup( + element, moddle, SCRIPT_TYPE.pre, 'Pre-Script', - 'code to execute prior to this task.'), - ...scriptGroup(element, + 'code to execute prior to this task.' + ), + ...scriptGroup( + element, moddle, SCRIPT_TYPE.post, 'Post-Script', - 'code to execute after this task.') - ] + 'code to execute after this task.' + ), + ], }; } - /** * Create a group on the main panel with a select box (for choosing the Data Object to connect) * @param element @@ -87,22 +118,24 @@ function createUserGroup(element, translate, moddle, commandStack) { label: translate('SpiffWorkflow Web Form'), entries: [ { - element: element, - moddle: moddle, - commandStack: commandStack, + element, + moddle, + commandStack, component: SpiffExtensionTextInput, label: translate('JSON Schema Filename'), description: translate('RJSF Json Data Structure Filename'), - name: 'formJsonSchemaFilename' }, + name: 'formJsonSchemaFilename', + }, { - element: element, - moddle: moddle, - commandStack: commandStack, + element, + moddle, + commandStack, component: SpiffExtensionTextInput, label: translate('UI Schema Filename'), description: translate('RJSF User Interface Filename'), - name: 'formUiSchemaFilename' } - ] + name: 'formUiSchemaFilename', + }, + ], }; } @@ -119,14 +152,14 @@ function createBusinessRuleGroup(element, translate, moddle, commandStack) { label: translate('Business Rule Properties'), entries: [ { - element: element, - moddle: moddle, - commandStack: commandStack, + element, + moddle, + commandStack, component: SpiffExtensionCalledDecision, label: translate('Decision Id'), description: translate('Id of the decision'), - } - ] + }, + ], }; } @@ -143,12 +176,22 @@ function createServiceGroup(element, translate, moddle, commandStack) { label: translate('Spiffworkflow Service Properties'), entries: [ { - element: element, - moddle: moddle, - commandStack: commandStack, + element, + moddle, + commandStack, component: ServiceTaskOperatorSelect, - translate - } - ] + translate, + }, + { + id: 'serviceTaskParameters', + label: translate('Parameters'), + component: ListGroup, + ...ServiceTaskParameterArray({ + element, + moddle, + translate, + }), + }, + ], }; } diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionServiceProperties.js b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionServiceProperties.js index 1d49fd0..315b387 100644 --- a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionServiceProperties.js +++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionServiceProperties.js @@ -1,11 +1,10 @@ -import {useService } from 'bpmn-js-properties-panel'; -import { TextFieldEntry } from '@bpmn-io/properties-panel'; -import { SelectEntry } from '@bpmn-io/properties-panel'; +import { useService } from 'bpmn-js-properties-panel'; +import { TextFieldEntry, SelectEntry } from '@bpmn-io/properties-panel'; -const SPIFF_PROP = "spiffworkflow:calledDecisionId" +const SPIFF_PROP = 'spiffworkflow:calledDecisionId'; // let optionList = [{label: 'hello1', value: "hello1"}, {label: 'hello2', value: "hello3"}] // let optionList = [] -let serviceTaskOperators = [] +let serviceTaskOperators = []; const LOW_PRIORITY = 500; /** @@ -15,151 +14,91 @@ const LOW_PRIORITY = 500; * needed. * * - + - my_id + + + + + + + - + * * @returns {string|null|*} */ -function testFiring(eventBus, element, commandStack) { +function requestServiceTaskOperators(eventBus, element, commandStack) { eventBus.fire('spiff.service_tasks.requested', { eventBus }); - eventBus.on('spiff.service_tasks.returned', ( event ) => { - serviceTaskOperators = event.serviceTaskOperators; - commandStack.execute('element.updateProperties', { - element, - properties: {} - }); + eventBus.on('spiff.service_tasks.returned', (event) => { + if (event.serviceTaskOperators.length > 0) { + serviceTaskOperators = event.serviceTaskOperators; + commandStack.execute('element.updateProperties', { + element, + properties: {}, + }); + } }); } -// export function SpiffExtensionServiceProperties( -// propertiesPanel, -// translate, -// moddle, -// commandStack, -// _elementRegistry -// ) { -// this.getGroups = function getGroupsCallback(element) { -// return function pushGroup(groups) { -// if (is(element, 'bpmn:ServiceTask')) { -// groups.push( -// createServicesGroup(element, translate, moddle, commandStack) -// ); -// } -// return groups; -// }; -// }; -// propertiesPanel.registerProvider(LOW_PRIORITY, this); -// } -// -// SpiffExtensionServiceProperties.$inject = [ -// 'propertiesPanel', -// 'translate', -// 'moddle', -// 'commandStack', -// 'elementRegistry', -// ]; -// // export function SpiffExtensionServiceProperties(element, translate, moddle, commandStack) { -// export function SpiffExtensionServiceProperties(props) { -// const {element, translate, moddle, commandStack } = props -// return { -// id: 'conditions', -// label: translate('Conditions'), -// entries: serviceGroupEntries( -// element, -// moddle, -// 'Condition Expression', -// 'Expression to Execute', -// commandStack -// ), -// }; -// } -// -// function serviceGroupEntries(element, moddle, label, description, commandStack) { -// console.log("WE HERE1") -// return [ -// { -// id: 'service_task_operator_select', -// element, -// component: ConditionExpressionTextField, -// moddle, -// label, -// description, -// commandStack, -// }, -// ]; -// } -// function ConditionExpressionTextField(props) { -// const { element } = props; -// const { moddle } = props; -// const { label } = props; -// -// const debounce = useService('debounceInput'); -// const getValue = () => { -// // const { conditionExpression } = element.businessObject; -// // if (conditionExpression) { -// // return conditionExpression.body; -// // } -// return ''; -// }; -// -// const setValue = (value) => { -// // let { conditionExpressionModdleElement } = element.businessObject; -// // if (!conditionExpressionModdleElement) { -// // conditionExpressionModdleElement = moddle.create('bpmn:Expression'); -// // } -// // conditionExpressionModdleElement.body = value; -// // element.businessObject.conditionExpression = -// // conditionExpressionModdleElement; -// }; -// -// return TextFieldEntry({ -// element, -// id: `the-id`, -// label, -// getValue, -// setValue, -// debounce, -// }); -// } +function getServiceTaskOperatorModdleElement(shapeElement) { + const { extensionElements } = shapeElement.businessObject; + if (extensionElements) { + for (const ee of extensionElements.values) { + if (ee.$type === 'spiffworkflow:serviceTaskOperator') { + return ee; + } + } + } + return null; +} + +function getServiceTaskParameterModdleElements(shapeElement) { + const serviceTaskModdleElement = + getServiceTaskOperatorModdleElement(shapeElement); + if (serviceTaskModdleElement) { + const { parameterList } = serviceTaskModdleElement; + if (parameterList) { + return parameterList.parameters; + } + } + return []; +} export function ServiceTaskOperatorSelect(props) { - console.log("WE HERE") - const element = props.element; - const commandStack = props.commandStack, moddle = props.moddle; - const label = props.label, description = props.description; + const { element } = props; + const { commandStack } = props; + const { translate } = props; + const { moddle } = props; const debounce = useService('debounceInput'); const eventBus = useService('eventBus'); if (serviceTaskOperators.length === 0) { - testFiring(eventBus, element, commandStack) + requestServiceTaskOperators(eventBus, element, commandStack); } const getPropertyObject = () => { const bizObj = element.businessObject; if (!bizObj.extensionElements) { return null; - } else { - return bizObj.extensionElements.get("values").filter(function (e) { - return e.$instanceOf(SPIFF_PROP) - })[0]; } - } + return bizObj.extensionElements.get('values').filter(function (e) { + return e.$instanceOf(SPIFF_PROP); + })[0]; + }; const getValue = () => { - // const property = getPropertyObject() - // if (property) { - // return property.decisionId; - // } - // debugger - return "" - } + const serviceTaskModdleElement = + getServiceTaskOperatorModdleElement(element); + if (serviceTaskModdleElement) { + return serviceTaskModdleElement.id; + } + return ''; + }; - const setValue = value => { + const setValue = (value) => { // let property = getPropertyObject() // let businessObject = element.businessObject; // let extensions = businessObject.extensionElements; @@ -187,32 +126,78 @@ export function ServiceTaskOperatorSelect(props) { if (serviceTaskOperators) { serviceTaskOperators.forEach((sto) => { optionList.push({ - label: sto.name, - value: sto.name, - }) - }) + label: sto.id, + value: sto.id, + }); + }); } - return optionList - } + return optionList; + }; - // return ; return SelectEntry({ - id: "selectOperatorId", - element, - description: "Select the operator id.", - label: "Which one?", - getValue, - setValue, - getOptions, - debounce, + id: 'selectOperatorId', + element, + label: translate('Operator ID'), + getValue, + setValue, + getOptions, + debounce, + }); +} + +export function ServiceTaskParameterArray(props) { + const { element, commandStack } = props; + + const serviceTaskParameterModdleElements = + getServiceTaskParameterModdleElements(element); + const items = serviceTaskParameterModdleElements.map( + (serviceTaskParameterModdleElement, index) => { + const id = `serviceTaskParameter-${index}`; + return { + id, + label: serviceTaskParameterModdleElement.name, + entries: serviceTaskParameterEntries({ + idPrefix: id, + element, + serviceTaskParameterModdleElement, + commandStack, + }), + autoFocusEntry: id, + }; + } + ); + return { items }; +} + +function serviceTaskParameterEntries(props) { + const { idPrefix, serviceTaskParameterModdleElement, commandStack } = props; + return [ + { + idPrefix: `${idPrefix}-parameter`, + component: ServiceTaskParameterTextField, + serviceTaskParameterModdleElement, + commandStack, + }, + ]; +} + +function ServiceTaskParameterTextField(props) { + const { idPrefix, element, serviceTaskParameterModdleElement } = props; + + const debounce = useService('debounceInput'); + const setValue = (value) => { + serviceTaskParameterModdleElement.value = value; + }; + + const getValue = () => { + return serviceTaskParameterModdleElement.value; + }; + + return TextFieldEntry({ + element, + id: `${idPrefix}-textField`, + getValue, + setValue, + debounce, }); - } diff --git a/app/spiffworkflow/moddle/spiffworkflow.json b/app/spiffworkflow/moddle/spiffworkflow.json index 3f59742..9924bbc 100644 --- a/app/spiffworkflow/moddle/spiffworkflow.json +++ b/app/spiffworkflow/moddle/spiffworkflow.json @@ -100,7 +100,7 @@ "type": "String" }, { - "name": "parameter_list", + "name": "parameterList", "type": "parameters" } ]