@processmaker/modeler 1.31.0 → 1.33.0

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

@@ -2,29 +2,16 @@
 import pinIcon from '@/assets/pin-angle.svg';
 import pinFillIcon from '@/assets/pin-angle-fill.svg';
 import nodeTypesStore from '@/nodeTypesStore';
+import clickAndDrop from '@/mixins/clickAndDrop';
 
 export default {
   name: 'NodeTypesLoop',
+  mixins: [clickAndDrop],
   data() {
     return {
       pinIcon,
       pinFillIcon,
       showPin: false,
-      wasClicked: false,
-      element: null,
-      selectedItem: null,
-      xOffset: 0,
-      yOffset: 0,
-      movedElement: null,
-      helperStyles: {
-        backgroundColor:'#ffffff',
-        position: 'absolute',
-        height: '40px',
-        width: '40px',
-        zIndex: '10',
-        opacity: '0.5',
-        pointerEvents: 'none',
-      },
     };
   },
   created() {
@@ -35,68 +22,13 @@ 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);
     },
-    onClickHandler(event, control) {
-      this.createDraggingHelper(event, control);
-      document.addEventListener('mousemove', this.setDraggingPosition);
-      this.setDraggingPosition(event);
-      // Deselect control on click if same control is already selected
-      if (this.selectedItem === control.type) {
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        document.body.removeChild(this.movedElement);
-        this.$emit('onSetCursor', 'none');
-        this.selectedItem = null;
-        this.movedElement = null;
-        this.wasClicked = false;
-        return;
-      }
-      this.wasClicked = true;
-      this.element = control;
-      this.$emit('onSetCursor', 'crosshair');
-      this.selectedItem = control.type;
-      window.ProcessMaker.EventBus.$on('custom-pointerclick', message => {
-        window.ProcessMaker.EventBus.$off('custom-pointerclick');
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        if (this.movedElement) {
-          document.body.removeChild(this.movedElement);
-        }
-        this.selectedItem = null;
-        this.movedElement = null;
-        this.onCreateElement(message);
-      });
-    },
-    createDraggingHelper(event, control) {
-      if (this.movedElement) {
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        document.body.removeChild(this.movedElement);
-        this.movedElement = null;
-      }
-      const sourceElement = event.target;
-      this.movedElement = document.createElement('img');
-      Object.keys(this.helperStyles).forEach((property) => {
-        this.movedElement.style[property] = this.helperStyles[property];
-      });
-      this.movedElement.src = control.icon;
-      document.body.appendChild(this.movedElement);
-      this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
-      this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
-    },
-    setDraggingPosition({ pageX, pageY }) {
-      this.movedElement.style.left = pageX  + 'px';
-      this.movedElement.style.top = pageY + 'px';
-    },
-    onCreateElement(event){
-      if (this.wasClicked && this.element) {
-        this.$emit('onCreateElement', { event, control: this.element });
-        this.$emit('onSetCursor', 'none');
-        event.preventDefault();
-        this.wasClicked = false;
-      }
-    },
   },
   computed: {
     pinnedObjects() {
@@ -125,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>
@@ -155,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"
@@ -176,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;
   }

package/src/components/toolbar/ToolBar.vue

@@ -4,49 +4,53 @@
       aria-label="Toolbar" :class="{ 'ignore-pointer': canvasDragPosition }"
     >
       <breadcrumb :breadcrumb-data="breadcrumbData" />
-      <div class="mr-3">
-        <align-buttons @save-state="$emit('save-state')" />
+      <div class="d-flex mr-3">
+        <TopRail
+          :validation-errors="validationErrors"
+          :warnings="warnings"
+        >
+          <component
+            :is="component.button"
+            v-for="(component, index) in validationBar"
+            :key="`validation-status-${index}`"
+          />
+        </TopRail>
 
-
-        <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Additional controls">
-          <b-button
-            class="btn btn-sm btn-secondary ml-auto"
-            data-test="panels-btn"
-            @click="$emit('toggle-panels-compressed')"
-            v-b-tooltip.hover
-            :title="panelsCompressed ? $t('Show Menus') : $t('Hide Menus')"
-          >
-            <font-awesome-icon :icon="panelsCompressed ? expandIcon : compressIcon" />
-          </b-button>
-        </div>
-        <div class="btn-group btn-group-sm" role="group" aria-label="Publish controls">
+        <div
+          class="d-flex align-items-center btn-group btn-group-sm"
+          role="group"
+          aria-label="Publish controls"
+          data-cy="publish-control"
+        >
           <template v-if="isVersionsInstalled">
-            <div class="d-flex justify-content-center align-items-center text-black text-capitalize" :style="{ width: '65px' }">
-              <span class="toolbar-item mr-1" :style="{ fontWeight: 600 }">
-                {{ versionStatus }}
-              </span>
+            <div
+              class="toolbar-item toolbar-version-status"
+              data-cy="publish-version-status"
+            >
+              {{ versionStatus }}
             </div>
-            <div class="d-flex justify-content-center align-items-center text-black text-capitalize mx-2" :style="{ width: '60px' }">
-              <span class="toolbar-item mr-1" :style="{ fontWeight: 400 }">
-                {{ loadingStatus }}
-              </span>
+            <div
+              class="toolbar-item toolbar-loading-status"
+              data-cy="publish-loading-status"
+            >
               <span>
-                <font-awesome-icon class="text-success" :icon="loadingIcon" :spin="isLoading" />
+                {{ loadingStatus }}
               </span>
+              <font-awesome-icon class="text-success" :icon="loadingIcon" :spin="isLoading" />
             </div>
             <a
-              class="btn btn-sm btn-primary btn-autosave text-uppercase mx-2"
-              data-test="publish-btn"
               :title="$t('Publish')"
               @click="$emit('saveBpmn')"
+              class="toolbar-item toolbar-publish"
+              data-cy="publish-btn"
             >
               {{ $t('Publish') }}
             </a>
             <a
-              class="btn btn-sm btn-link toolbar-item btn-autosave text-black text-uppercase"
-              data-test="close-btn"
               :title="$t('Close')"
               @click="$emit('close')"
+              class="toolbar-item toolbar-close"
+              data-cy="close-btn"
             >
               {{ $t('Close') }}
             </a>
@@ -56,18 +60,9 @@
               @navigate="onNavigate"
               @show="onShow"
               @hide="onHide"
+              data-cy="ellipsis-menu"
             />
           </template>
-          <b-button
-            v-else
-            class="btn btn-sm btn-secondary mini-map-btn mx-1"
-            data-test="mini-map-btn"
-            v-b-tooltip.hover
-            :title="$t('Save')"
-            @click="$emit('saveBpmn')"
-          >
-            <font-awesome-icon :icon="saveIcon" />
-          </b-button>
         </div>
       </div>
     </div>
@@ -78,23 +73,27 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faCompress, faExpand, faMapMarked, faMinus, faPlus, faRedo, faUndo, faSave, faCheckCircle, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import undoRedoStore from '@/undoRedoStore';
 import Breadcrumb from '@/components/toolbar/breadcrumb/Breadcrumb';
-import AlignButtons from '@/components/toolbar/alignButtons/AlignButtons';
+import TopRail from '@/components/topRail/TopRail.vue';
 
 export default {
   name: 'tool-bar',
-  components: { Breadcrumb, FontAwesomeIcon, AlignButtons },
-  props: {
-    canvasDragPosition: {},
-    cursor: {},
-    paperManager: {},
-    isRendering: {
-      type: Boolean,
-    },
-    breadcrumbData: {
-      type: Array,
-    },
-    panelsCompressed: Boolean,
+  components: {
+    Breadcrumb,
+    TopRail,
+    FontAwesomeIcon,
   },
+  props: [
+    'canvasDragPosition',
+    'cursor',
+    'paperManager',
+    'isRendering',
+    'breadcrumbData',
+    'panelsCompressed',
+    'validationErrors',
+    'warnings',
+    'xmlManager',
+    'validationBar',
+  ],
   watch: {
     miniMapOpen(isOpen) {
       this.$emit('toggle-mini-map-open', isOpen);
@@ -154,13 +153,18 @@ export default {
       spinner: faSpinner,
       ellipsisMenuActions: [
         {
-          value: 'discard-draft',
-          content: this.$t('Discard Draft'),
+          value: 'save-template',
+          content: this.$t('Save as Template'),
           icon: '',
         },
         {
-          value: 'save-template',
-          content: this.$t('Save as Template'),
+          value: 'save-pm-block',
+          content: this.$t('Save as PM Block'),
+          icon: '',
+        },
+        {
+          value: 'discard-draft',
+          content: this.$t('Discard Draft'),
           icon: '',
         },
       ],
@@ -193,6 +197,9 @@ export default {
         case 'save-template':
           this.$emit('publishTemplate');
           break;
+        case 'save-pm-block':
+          this.$emit('publishPmBlock');
+          break;
         default:
           break;
       }

package/src/components/toolbar/toolbar.scss

@@ -1,7 +1,7 @@
 $toolbar-background-color: #fff;
 
 .toolbar {
-  z-index: 2;
+  z-index: 3;
   height: $toolbar-height;
   cursor: auto;
   width: 100%;
@@ -10,14 +10,61 @@ $toolbar-background-color: #fff;
   > button {
     cursor: pointer;
   }
-}
 
-.toolbar-item {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-size: 14px;
-  letter-spacing: -0.02em;
-  line-height: 21px;
+  &-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: "Open Sans";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    color: #000000;
+    text-transform: capitalize;
+  }
+
+  &-version-status {
+    margin: 0 12px;
+    padding-left: 12px;
+    border-left: 1px solid #ADB3B8;
+    font-weight: 600;
+    color: #6C757D;
+  }
+
+  &-loading-status {
+    margin-right: 21px;
+
+    > svg {
+      margin-left: 5px;
+    }
+  }
+
+  &-publish {
+    width: 72px;
+    height: 30px;
+    margin-right: 21px;
+    background-color: #1572C2;
+    border-radius: 4px;
+    color: #FFFFFF !important;
+    text-transform: uppercase;
+    text-decoration: none !important;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #065c9d;
+    }
+  }
+
+  &-close {
+    width: 42px;
+    height: 22px;
+    margin-right: 21px;
+    color: #000000 !important;
+    cursor: pointer;
+    text-transform: uppercase;
+    text-decoration: none !important;
+  }
 }
 
 .text-black {
@@ -28,13 +75,6 @@ $toolbar-background-color: #fff;
   cursor: default !important;
 }
 
-.btn-autosave {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px !important;
-}
-
 .btn-ellipsis {
   border-top-left-radius: 4px !important;
   border-bottom-left-radius: 4px !important;

package/src/components/topRail/TopRail.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="top-rail-container">
+    <ValidateIssue
+      v-show="isOpenIssue"
+      :number-of-errors="numberOfErrors"
+      @openPanel="handleOpenPanel"
+    />
+
+    <ValidateButton @openIssue="handleOpenIssue" />
+
+    <ValidatePanel
+      v-show="isOpenIssue && isOpenPanel"
+      :error-list="errorList"
+      :warnings="warnings"
+    />
+    <slot />
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+import { ValidateButton, ValidateIssue, ValidatePanel } from '@/components/topRail/validateControl';
+
+export default {
+  components: {
+    ValidateButton,
+    ValidateIssue,
+    ValidatePanel,
+  },
+  props: {
+    validationErrors: {
+      type: Object,
+      required: true,
+    },
+    warnings: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpenIssue: false,
+      isOpenPanel: false,
+    };
+  },
+  computed: {
+    errorList() {
+      // Get a formatted error list to show in the issue panel
+      return Object.entries(this.validationErrors)
+        .flatMap(([errorKey, errors]) => (
+          errors.flatMap(error => ({
+            ...error,
+            errorKey,
+            ...{ 'errorId': `${error.id}_${error.message.split(' ').join('_')}` },
+          }))
+        ));
+    },
+    numberOfErrors() {
+      // Get the number of errors
+      return this.errorList.length + this.warnings.length;
+    },
+  },
+  watch: {
+    numberOfErrors(newValue) {
+      // Checks the number of errors, if it is "0" hides the panel errors
+      if (newValue === 0) {
+        this.isOpenPanel = false;
+      }
+    },
+  },
+  methods: {
+    /**
+     * Show/hide the issue button
+     * @param {boolean} value
+     */
+    handleOpenIssue(value) {
+      this.isOpenIssue = value;
+      // Set the auto-validate value store
+      store.commit('setAutoValidate', this.isOpenIssue);
+    },
+    /**
+     * Show/hide the issue panel
+     * @param {boolean} value
+     */
+    handleOpenPanel(value) {
+      this.isOpenPanel = value;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./topRail.scss"></style>

package/src/components/topRail/topRail.scss

@@ -0,0 +1,6 @@
+.top-rail-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0px 8px;
+}

package/src/components/topRail/validateControl/index.js

@@ -0,0 +1,3 @@
+export { default as ValidateButton } from './validateButton/ValidateButton.vue';
+export { default as ValidateIssue } from './validateIssue/ValidateIssue.vue';
+export { default as ValidatePanel } from './validatePanel/ValidatePanel.vue';