@processmaker/modeler 1.25.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",

package/src/components/modeler/Modeler.vue

@@ -11,6 +11,7 @@
       @toggle-panels-compressed="panelsCompressed = !panelsCompressed"
       @toggle-mini-map-open="miniMapOpen = $event"
       @saveBpmn="saveBpmn"
+      @close="close"
       @save-state="pushToUndoStack"
       @clearSelection="clearSelection"
     />
@@ -314,6 +315,9 @@ export default {
       clonedNode.diagram.bounds.y += yOffset;
       this.addNode(clonedNode);
     },
+    async close() {
+      this.$emit('close');
+    },
     async saveBpmn() {
       const svg = document.querySelector('.mini-paper svg');
       const css = 'text { font-family: sans-serif; }';
@@ -975,6 +979,18 @@ export default {
       this.previouslyStackedShape = shape;
       this.paperManager.performAtomicAction(() => ensureShapeIsNotCovered(shape, this.graph));
     },
+    showSavedNotification() {
+      undoRedoStore.dispatch('saved');
+    },
+    enableVersions() {
+      undoRedoStore.dispatch('enableVersions');
+    },
+    setVersionIndicator(isDraft) {
+      undoRedoStore.dispatch('setVersionIndicator', isDraft);
+    },
+    setLoadingState(isLoading) {
+      undoRedoStore.dispatch('setLoadingState', isLoading);
+    },
     clearSelection(){
       this.$refs.selector.clearSelection();
     },

package/src/components/toolbar/ToolBar.vue

@@ -85,23 +85,61 @@
             <font-awesome-icon :icon="miniMapOpen ? minusIcon : mapIcon" />
           </b-button>
         </div>
-
-        <b-button
-          class="btn btn-sm btn-secondary mini-map-btn ml-auto"
-          data-test="mini-map-btn"
-          @click="$emit('saveBpmn')"
-          v-b-tooltip.hover
-          :title="$t('Save')"
-        >
-          <font-awesome-icon :icon="saveIcon" />
-        </b-button>
+        <div class="btn-group btn-group-sm" role="group" aria-label="Publish controls">
+          <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>
+            <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>
+              <span>
+                <font-awesome-icon class="text-success" :icon="loadingIcon" :spin="isLoading" />
+              </span>
+            </div>
+            <a
+              class="btn btn-sm btn-primary mini-map-btn text-uppercase mx-2"
+              data-test="publish-btn"
+              :title="$t('Publish')"
+              @click="$emit('saveBpmn')"
+            >
+              {{ $t('Publish') }}
+            </a>
+            <a
+              class="btn btn-sm btn-link toolbar-item mini-map-btn text-black text-uppercase"
+              data-test="close-btn"
+              :title="$t('Close')"
+              @click="$emit('close')"
+            >
+              {{ $t('Close') }}
+            </a>
+            <EllipsisMenu
+              @navigate="onNavigate"
+              :actions="ellipsisMenuActions"
+              :divider="false"
+            />
+          </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>
   </b-row>
 </template>
 <script>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faCompress, faExpand, faMapMarked, faMinus, faPlus, faRedo, faSave, faUndo } from '@fortawesome/free-solid-svg-icons';
+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';
@@ -143,6 +181,26 @@ export default {
     canRedo() {
       return undoRedoStore.getters.canRedo;
     },
+    saved() {
+      return undoRedoStore.getters.saved;
+    },
+    versionStatus() {
+      const status = undoRedoStore.getters.isDraft ? 'Draft' : 'Published';
+      return this.$t(status);
+    },
+    isVersionsInstalled() {
+      return undoRedoStore.getters.isVersionsInstalled;
+    },
+    isLoading() {
+      return undoRedoStore.getters.isLoading;
+    },
+    loadingStatus() {
+      const status = this.isLoading ? 'Saving' : 'Saved';
+      return this.$t(status);
+    },
+    loadingIcon() {
+      return this.isLoading ? this.spinner : this.savedIcon;
+    },
   },
   data() {
     return {
@@ -159,6 +217,15 @@ export default {
       undoIcon: faUndo,
       redoIcon: faRedo,
       saveIcon: faSave,
+      savedIcon: faCheckCircle,
+      spinner: faSpinner,
+      ellipsisMenuActions: [
+        {
+          value: 'discard-draft',
+          content: this.$t('Discard Draft'),
+          icon: '',
+        },
+      ],
     };
   },
   methods: {
@@ -182,6 +249,15 @@ export default {
         .then(() => this.$emit('load-xml'))
         .then(() => window.ProcessMaker.EventBus.$emit('modeler-change'));
     },
+    onNavigate(action) {
+      switch (action.value) {
+        case 'discard-draft':
+          window.ProcessMaker.EventBus.$emit('open-versions-discard-modal');
+          break;
+        default:
+          break;
+      }
+    },
   },
 };
 </script>

package/src/components/toolbar/toolbar.scss

@@ -1,4 +1,4 @@
-$toolbar-background-color: #FFF;
+$toolbar-background-color: #fff;
 
 .toolbar {
   z-index: 2;
@@ -11,3 +11,19 @@ $toolbar-background-color: #FFF;
     cursor: pointer;
   }
 }
+
+.toolbar-item {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-size: 14px;
+  letter-spacing: -0.02em;
+  line-height: 21px;
+}
+
+.text-black {
+  color: #000000 !important;
+}
+
+.cursor-default {
+  cursor: default !important;
+}

package/src/undoRedoStore.js

@@ -8,6 +8,10 @@ export default new Vuex.Store({
     stack: [],
     position: null,
     disabled: false,
+    saved: false,
+    isVersionsInstalled: false,
+    isDraft: false,
+    isLoading: false,
   },
   getters: {
     canUndo(state) {
@@ -19,6 +23,18 @@ export default new Vuex.Store({
     currentState(state) {
       return state.stack[state.position];
     },
+    saved(state) {
+      return state.saved;
+    },
+    isVersionsInstalled(state) {
+      return state.isVersionsInstalled;
+    },
+    isDraft(state) {
+      return state.isDraft;
+    },
+    isLoading(state) {
+      return state.isLoading;
+    },
   },
   mutations: {
     setPosition(state, position) {
@@ -37,6 +53,18 @@ export default new Vuex.Store({
     enableSavingState(state) {
       state.disabled = false;
     },
+    savedState(state, payload) {
+      state.saved = payload;
+    },
+    isVersionsInstalled(state, payload) {
+      state.isVersionsInstalled = payload;
+    },
+    isDraft(state, payload) {
+      state.isDraft = payload;
+    },
+    isLoading(state, payload) {
+      state.isLoading = payload;
+    },
   },
   actions: {
     pushState({ state, getters, commit }, newState) {
@@ -61,5 +89,22 @@ export default new Vuex.Store({
 
       commit('setPosition', state.position + 1);
     },
+    saved({ commit }) {
+      commit('savedState', true);
+
+      // Automatically remove the notification after 2 seconds.
+      setTimeout(() => {
+        commit('savedState', false);
+      }, 2000);
+    },
+    enableVersions({ commit }) {
+      commit('isVersionsInstalled', true);
+    },
+    setVersionIndicator({ commit }, newState) {
+      commit('isDraft', newState);
+    },
+    setLoadingState({ commit }, newState) {
+      commit('isLoading', newState);
+    },
   },
 });