Repository: ProcessMaker/modeler (js)

Issue:
Update intermediate message catch event
Update the intermediate message catch event to include the following text field in the inspector, to specify the name of the message it it listening for ("catching"):

<img width="284" alt="Screen Shot 2019-10-15 at 1 26 34 PM" src="https://user-images.githubusercontent.com/7561061/66854528-7bcd0780-ef4f-11e9-96c6-2287bfbe3c93.png">

Pull request description:
Add messages dropdown to intermediate message catch event
Fixes #745.

**To test:** Since there's currently no way to add message elements, upload the following BPMN process which contains two messages: https://www.dropbox.com/s/rgqqtmrtrhkmyyi/process_with_messages.bpmn?dl=0. Or, you can create your own process with messages and upload that.

<img width="558" alt="Screen Shot 2019-10-17 at 10 39 33 AM" src="https://user-images.githubusercontent.com/7561061/67019288-6d572b00-f0ca-11e9-8368-59961bbb440b.png">

**Note:** The `messageRef` attribute is currently being ignored. The functionality to actually implement it will have to come after https://github.com/ProcessMaker/modeler/issues/746.


Patch:
diff --git a/src/components/nodes/intermediateMessageCatchEvent/CatchEventMessageSelect.vue b/src/components/nodes/intermediateMessageCatchEvent/CatchEventMessageSelect.vue
new file mode 100644
index 00000000..089813eb
--- /dev/null
+++ b/src/components/nodes/intermediateMessageCatchEvent/CatchEventMessageSelect.vue
@@ -0,0 +1,24 @@
+<template>
+  <form-select
+    v-bind="$attrs"
+    v-on="$listeners"
+    :disabled="messagesList.length === 0"
+    :options="messagesList"
+    class="p-0 mb-2"
+  />
+</template>
+
+<script>
+import store from '@/store';
+import { getMessagesList } from './intermediateMessageCatchEventUtils';
+
+export default {
+  inheritAttrs: false,
+  props: ['value'],
+  computed: {
+    messagesList() {
+      return getMessagesList(store);
+    },
+  },
+};
+</script>
diff --git a/src/components/nodes/intermediateMessageCatchEvent/index.js b/src/components/nodes/intermediateMessageCatchEvent/index.js
index dd827278..3c0254a0 100644
--- a/src/components/nodes/intermediateMessageCatchEvent/index.js
+++ b/src/components/nodes/intermediateMessageCatchEvent/index.js
@@ -3,6 +3,7 @@ import omit from 'lodash/omit';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
 import nameConfigSettings from '@/components/inspectors/nameConfigSettings';
 import MessageEventIdGenerator from '../../../MessageEventIdGenerator';
+import CatchEventMessageSelect from './CatchEventMessageSelect';
 
 const messageEventIdGenerator = new MessageEventIdGenerator();
 
@@ -51,7 +52,7 @@ export default {
     }, {});
   },
   inspectorHandler(value, node, setNodeProp, moddle) {
-    for (const key in omit(value, ['$type', 'eventDefinitionId', 'variableName'])) {
+    for (const key in omit(value, ['$type', 'eventDefinitionId', 'variableName', 'messageRef'])) {
       if (node.definition[key] === value[key]) {
         continue;
       }
@@ -141,6 +142,13 @@ export default {
                 name: 'whitelist',
               },
             },
+            {
+              component: CatchEventMessageSelect,
+              config: {
+                label: 'Listen For Message',
+                name: 'messageRef',
+              },
+            },
           ],
         },
         {
diff --git a/src/components/nodes/intermediateMessageCatchEvent/intermediateMessageCatchEventUtils.js b/src/components/nodes/intermediateMessageCatchEvent/intermediateMessageCatchEventUtils.js
new file mode 100644
index 00000000..0c9d1fa5
--- /dev/null
+++ b/src/components/nodes/intermediateMessageCatchEvent/intermediateMessageCatchEventUtils.js
@@ -0,0 +1,16 @@
+function isMessageElement(element) {
+  return element.$type === 'bpmn:Message';
+}
+
+function toDropdownFormat(element) {
+  return {
+    value: element.get('id'),
+    content: element.get('name'),
+  };
+}
+
+export function getMessagesList(store) {
+  return store.getters.rootElements
+    .filter(isMessageElement)
+    .map(toDropdownFormat);
+}
diff --git a/src/store.js b/src/store.js
index 54dcdfbc..cfbd0351 100644
--- a/src/store.js
+++ b/src/store.js
@@ -52,7 +52,6 @@ export default new Vuex.Store({
     updateNodeProp(state, { node, key, value }) {
       node.definition.set(key, value);
 
-
       makeDefinitionPropertyReactive(node.definition, key, value);
     },
     clearNodes(state) {


Test patch:
diff --git a/tests/unit/intermediateMessageCatchEventUtils.spec.js b/tests/unit/intermediateMessageCatchEventUtils.spec.js
new file mode 100644
index 00000000..fe3d2d5b
--- /dev/null
+++ b/tests/unit/intermediateMessageCatchEventUtils.spec.js
@@ -0,0 +1,46 @@
+import {
+  getMessagesList,
+} from '@/components/nodes/intermediateMessageCatchEvent/intermediateMessageCatchEventUtils.js';
+
+function MessageFactory(id, name) {
+  return {
+    id,
+    name,
+    $type: 'bpmn:Message',
+    get(key) {
+      return this[key];
+    },
+  };
+}
+
+function NotMessageFactory() {
+  return { $type: 'bpmn:NotMessage' };
+}
+
+function StoreFactory(rootElements) {
+  return {
+    getters: { rootElements },
+  };
+}
+
+describe('intermediateMessageCatchEventUtils', () => {
+  it('getMessagesList returns an options list of messages', () => {
+    const store = StoreFactory([
+      MessageFactory('message_1', 'Message 1'),
+      NotMessageFactory(),
+      MessageFactory('message_2', 'Message 2'),
+      NotMessageFactory(),
+    ]);
+
+    expect(getMessagesList(store)).toEqual([
+      { value: 'message_1', content: 'Message 1' },
+      { value: 'message_2', content: 'Message 2' },
+    ]);
+  });
+
+  it('getMessagesList returns empty list when there are no elements', () => {
+    const store = StoreFactory([]);
+
+    expect(getMessagesList(store)).toEqual([]);
+  });
+});