@processmaker/modeler 1.32.0 → 1.33.0

package/src/components/nodes/baseStartEvent/index.js

@@ -33,7 +33,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-start-event',
           },

package/src/components/nodes/boundaryEvent/index.js

@@ -34,7 +34,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-boundary-event',
           },

package/src/components/nodes/dataInputAssociation/index.js

@@ -15,7 +15,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-data-input-association',
           },

package/src/components/nodes/dataObject/index.js

@@ -40,7 +40,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-data-object',
           },

package/src/components/nodes/dataOutputAssociation/index.js

@@ -15,7 +15,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-data-output-association',
           },

package/src/components/nodes/dataStore/index.js

@@ -40,7 +40,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-data-store',
           },

package/src/components/nodes/endEvent/index.js

@@ -76,7 +76,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-end-event',
           },

package/src/components/nodes/eventBasedGateway/index.js

@@ -34,7 +34,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-event-based-gateway',
           },

package/src/components/nodes/exclusiveGateway/index.js

@@ -67,7 +67,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-exlcusive-gateway',
           },

package/src/components/nodes/gateway/index.js

@@ -32,7 +32,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-gateway',
           },

package/src/components/nodes/inclusiveGateway/index.js

@@ -37,7 +37,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-inclusive-gateway-config',
           },

package/src/components/nodes/intermediateEvent/index.js

@@ -34,7 +34,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-intermediate-gateway-config',
           },

package/src/components/nodes/intermediateMessageEvent/index.js

@@ -37,7 +37,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-intermediate-message-event',
           },

package/src/components/nodes/intermediateTimerEvent/index.js

@@ -135,7 +135,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-intermediate-timer-config',
           },

package/src/components/nodes/manualTask/index.js

@@ -41,7 +41,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-manual-task',
           },

package/src/components/nodes/messageFlow/index.js

@@ -26,7 +26,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-message-flow',
           },

package/src/components/nodes/parallelGateway/index.js

@@ -34,7 +34,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-parallel-gateway-config',
           },

package/src/components/nodes/pool/index.js

@@ -36,7 +36,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-pool',
           },

package/src/components/nodes/pool/pool.vue

@@ -121,12 +121,18 @@ export default {
     moveEmbeddedElements(currentElement, toPool) {
       this.getElementsUnderArea(currentElement, this.graph)
         .filter(element => element.isEmbeddedIn(currentElement))
-        .map(element => element.component.node.definition)
-        .forEach((elementDefinition) => {
-          pull(this.containingProcess.get('flowElements'), elementDefinition);
-          toPool.component.containingProcess.get('flowElements').push(elementDefinition);
+        .forEach((child) => {
+          child.component.node.pool = toPool;
+          pull(this.containingProcess.get('flowElements'), child.component.node.definition);
+          toPool.component.containingProcess.get('flowElements').push(child.component.node.definition);
         });
     },
+    moveFlow(element, toPool){
+      const elementDefinition = element.component.node.definition;
+      /* Remove references to the element from the current process */
+      pull(this.containingProcess.get('flowElements'), elementDefinition);
+      toPool.component.containingProcess.get('flowElements').push(elementDefinition);
+    },
     moveElement(element, toPool) {
       const elementDefinition = element.component.node.definition;
 

package/src/components/nodes/poolLane/index.js

@@ -33,7 +33,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-pool-lane',
           },

package/src/components/nodes/scriptTask/index.js

@@ -40,7 +40,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-script-task',
           },

package/src/components/nodes/sequenceFlow/index.js

@@ -66,7 +66,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-sequence-flow',
           },

package/src/components/nodes/serviceTask/index.js

@@ -23,7 +23,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-service-task',
           },

package/src/components/nodes/subProcess/index.js

@@ -59,7 +59,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-subprocess',
           },

package/src/components/nodes/task/index.js

@@ -87,7 +87,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-task',
           },

package/src/components/nodes/textAnnotation/index.js

@@ -51,7 +51,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-text-annotation',
           },

package/src/components/railBottom/controls/Controls.vue

@@ -9,6 +9,7 @@
       :id="item.id"
       :key="item.id"
       @click.stop="onClickHandler($event, item)"
+      :data-test="`${item.type}-main`"
     >
       <SubmenuPopper
         :data="item"
@@ -71,8 +72,15 @@ export default ({
       this.onClickHandler(data.event, data.control);
     },
     toggleExplorer() {
+      // Remove control click & drop selection when the Add button is clicked
+      this.deselect();
+      this.popperType = null;
+      this.selectedSubmenuItem = null;
+
+      // Toggle left explorer
       nodeTypesStore.commit('toggleExplorer');
       nodeTypesStore.commit('clearFilteredNodes');
+      nodeTypesStore.commit('clearFilteredPmBlockNodes');
     },
   },
 });

package/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue

@@ -15,6 +15,7 @@
           :class="['control-submenu-list', {'active': selectedItem === item.type}]"
           :key="key"
           @click="onClickHandler($event, item)"
+          :data-test="item.type"
         >
           <inline-svg :src="item.icon" :alt=item.label />
           <div class="control-submenu-list-label">
@@ -84,10 +85,10 @@ export default ({
   flex-direction: column;
   align-items: flex-start;
   padding: 10px;
-  width: 255px;
+  width: max-content;
   left: 616px;
   background: #FFFFFF;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   list-style: none;
   &-item {
@@ -105,12 +106,12 @@ export default ({
     align-items: center;
     padding: 12px 5px;
     gap: 8px;
-    width: 235px;
     height: 40px;
     flex: none;
     order: 0;
     align-self: stretch;
     flex-grow: 0;
+    border-radius: 4px;
 
     &.active {
       background-color: #DEEBFF;
@@ -128,7 +129,6 @@ export default ({
       height: 24px;
     }
     &-label{
-      font-family: 'Open Sans';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -166,7 +166,7 @@ export default ({
   color: $primary-white;
   position: absolute;
   z-index: 10;
-  box-shadow: 5px 5px 8px 0px #0000004a;
+  box-shadow: 5px 5px 8px 0 #0000004a;
   padding: 0.5rem;
   pointer-events: none;
   width: 40px;

package/src/components/rails/explorer-rail/explorer-rail.scss

@@ -53,3 +53,14 @@ $secondary-color-nav: #6c757d;
 	}
 }
 
+.pm-blocks {
+	&__container {
+		padding: 0.5rem 1rem;
+		p {
+			font-size: 13px;
+			line-height: 19px;
+			color: #000;
+		}
+	}
+}
+

package/src/components/rails/explorer-rail/explorer.vue

@@ -4,6 +4,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import nodeTypesStore from '@/nodeTypesStore';
 import FilterNodeTypes from '@/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue';
 import NodeTypesLoop from '@/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue';
+import PmBlocksLoop from '@/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue';
 
 export default {
   name: 'ExplorerRail',
@@ -14,11 +15,15 @@ export default {
     nodeTypes: {
       type: Array,
     },
+    pmBlockNodes: {
+      type: Array,
+    },
   },
   components: {
     FontAwesomeIcon,
     FilterNodeTypes,
     NodeTypesLoop,
+    PmBlocksLoop,
   },
   data() {
     return {
@@ -59,6 +64,7 @@ export default {
     },
     clearFilteredObjects() {
       nodeTypesStore.commit('clearFilteredNodes');
+      nodeTypesStore.commit('clearFilteredPmBlockNodes');
     },
   },
 };
@@ -79,13 +85,16 @@ export default {
       </div>
     </div>
     <div class="node-types__container" v-if="tabIndex === 0">
-      <filter-node-types />
+      <filter-node-types :type="'object'"/>
       <node-types-loop
         v-on="$listeners"
       />
     </div>
-    <div class="pm-blocks__container">
-      <!--   Here goes the PM Blocks   -->
+    <div class="pm-blocks__container"  v-if="tabIndex === 1">
+      <filter-node-types :type="'pmBlock'"/>
+      <pm-blocks-loop
+        v-on="$listeners"
+      />
     </div>
   </div>
 </template>

package/src/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue

@@ -2,16 +2,21 @@
 import nodeTypesStore from '@/nodeTypesStore';
 export default {
   name: 'FilterNodeTypes',
+  props: ['type'],
   data() {
     return {
       searchTerm: '',
-      placeholder: this.$t('Seach Objects'),
     };
   },
   watch: {
     searchTerm(value) {
-      if (value.length === 0) nodeTypesStore.commit('clearFilteredNodes');
-      if (value.length > 0) nodeTypesStore.commit('setFilteredNodeTypes', value);
+      if (this.type === 'pmBlock') {
+        if (value.length === 0) nodeTypesStore.commit('clearFilteredPmBlockNodes');
+        if (value.length > 0) nodeTypesStore.commit('setFilteredPmBlockNodeTypes', value);
+      } else  {
+        if (value.length === 0) nodeTypesStore.commit('clearFilteredNodes');
+        if (value.length > 0) nodeTypesStore.commit('setFilteredNodeTypes', value);
+      }
     },
   },
   computed: {
@@ -20,6 +25,13 @@ export default {
       const nodeTypes = nodeTypesStore.getters.getNodeTypes;
       return [...pinnedNodeTypes, ...nodeTypes];
     },
+    pmBlockNodes() {
+      const pmBlockNodeTypes = nodeTypesStore.getters.getPmBlockNodeTypes;
+      return [...pmBlockNodeTypes];
+    },
+    placeholder() {
+      return this.type === 'pmBlock' ? this.$t('Search PM Blocks') : this.$t('Search Objects');
+    },
   },
 };
 </script>

package/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue

@@ -22,9 +22,11 @@ export default {
       return !!this.pinnedObjects.find(obj => obj.type === type);
     },
     unPin(object) {
+      this.deselect();
       return nodeTypesStore.dispatch('removeUserPinnedObject', object);
     },
     addPin(object) {
+      this.deselect();
       return nodeTypesStore.dispatch('addUserPinnedObject', object);
     },
   },
@@ -55,10 +57,11 @@ export default {
       <template v-for="object in filteredNodes">
         <div
           class="node-types__item"
+          :data-test="object.type"
           :key="object.id"
           @mouseover="showPin = true"
           @mouseleave="showPin = false"
-          @click.stop="onClickHandler($event, object)"
+          @click.self="onClickHandler($event, object)"
         >
           <img class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
           <span>{{ $t(object.label) }}</span>
@@ -85,6 +88,7 @@ export default {
         <template v-for="pinnedObject in pinnedObjects">
           <div
             class="node-types__item"
+            :data-test="pinnedObject.type"
             :key="pinnedObject.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
@@ -106,6 +110,7 @@ export default {
         <template v-for="nodeType in unpinnedObjects">
           <div
             class="node-types__item"
+            :data-test="nodeType.type"
             :key="nodeType.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"

package/src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue

@@ -0,0 +1,76 @@
+<script>
+import nodeTypesStore from '@/nodeTypesStore';
+import clickAndDrop from '@/mixins/clickAndDrop';
+
+export default {
+  name: 'PmBlocksLoop',
+  mixins: [clickAndDrop],
+  computed: {
+    pmBlockNodeTypes() {
+      return nodeTypesStore.getters.getPmBlockNodeTypes;
+    },
+    filteredPmBlockNodes() {
+      return nodeTypesStore.getters.getFilteredPmBlockNodeTypes;
+    },
+    searchTerm() {
+      return nodeTypesStore.getters.getSearchTerm;
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="pmBlockNodeTypesList">
+    <div id="filteredPmBlockNodes-container" v-if="filteredPmBlockNodes.length > 0">
+      <template v-for="object in filteredPmBlockNodes">
+        <div
+          class="node-types__item"
+          :key="object.id"
+          @click.stop="onClickHandler($event, object)"
+        >
+          <img class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
+          <span>{{ $t(object.label) }}</span>
+        </div>
+      </template>
+    </div>
+    <template v-if="filteredPmBlockNodes.length === 0 && !searchTerm">
+      <div class="pmBlocksContainer p-2">
+        <template v-for="nodeType in pmBlockNodeTypes">
+          <div
+            class="pm-block-node-types__item p-2 d-block"
+            :key="nodeType.id"
+            @click.stop="onClickHandler($event, nodeType)"
+          >
+            <label>{{ $t(nodeType.label) }}</label>
+            <span class="d-block">{{ nodeType.description }}</span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss">
+.pm-block-node-types {
+  &__item {
+    display: block;
+    border-radius: 4px;
+    user-select: none;
+    margin-bottom: 8px;
+    border: 1px solid #b6bfc6;
+    &:hover {
+      background-color: #EBEEF2;
+    }
+    label {
+      font-size: 14px;
+      line-height: 8px;
+      font-weight: 600;
+      color: #104A75;
+    }
+    span {
+      font-size: 12px;
+      color:#6C757D;
+    }
+  }
+}
+</style>

package/src/components/shapeStackUtils.js

@@ -26,7 +26,7 @@ function isNotLane(shape) {
 function bringPoolToFront(poolShape) {
   bringShapeToFront(poolShape);
 
-  const hasLanes = poolShape.component.node.definition.processRef.laneSets[0];
+  const hasLanes = poolShape.component.node.definition.processRef && poolShape.component.node.definition.processRef.laneSets[0];
   if (!hasLanes) {
     return;
   }