@processmaker/modeler 1.25.0 → 1.27.0

package/src/components/toolbar/ToolBar.vue

@@ -85,23 +85,63 @@
             <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 autosave-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 autosave-btn text-black text-uppercase"
+              data-test="close-btn"
+              :title="$t('Close')"
+              @click="$emit('close')"
+            >
+              {{ $t('Close') }}
+            </a>
+            <EllipsisMenu
+              :actions="ellipsisMenuActions"
+              :divider="false"
+              @navigate="onNavigate"
+              @show="onShow"
+              @hide="onHide"
+            />
+          </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 +183,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 +219,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 +251,27 @@ 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;
+      }
+    },
+    onShow() {
+      const inspectorDiv = document.getElementById('inspector');
+      if (inspectorDiv) {
+        inspectorDiv.style.zIndex = '1';
+      }
+    },
+    onHide() {
+      const inspectorDiv = document.getElementById('inspector');
+      if (inspectorDiv) {
+        inspectorDiv.style.zIndex = '2';
+      }
+    },
   },
 };
 </script>

package/src/components/toolbar/breadcrumb/Breadcrumb.vue

@@ -19,3 +19,10 @@ export default {
   },
 };
 </script>
+<style lang="css" scoped>
+@media screen and (max-width: 1365px) {
+  #breadcrumbs {
+    width: 290px;
+  }
+}
+</style>

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,30 @@ $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;
+}
+
+.autosave-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-ellipsis {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+}

package/src/store.js

@@ -35,6 +35,9 @@ export default new Vuex.Store({
     autoValidate: false,
     globalProcesses: [],
     allowSavingElementPosition: true,
+    copiedElements: [],
+    clientX: null,
+    clientY: null,
   },
   getters: {
     nodes: state => state.nodes,
@@ -52,6 +55,9 @@ export default new Vuex.Store({
     globalProcesses: state => state.globalProcesses,
     globalProcessEvents: (state, getters) => flatten(getters.globalProcesses.map(process => process.events)),
     allowSavingElementPosition: state => state.allowSavingElementPosition,
+    copiedElements: state => state.copiedElements,
+    clientX: state => state.clientX,
+    clientY: state => state.clientY,
   },
   mutations: {
     preventSavingElementPosition(state) {
@@ -138,6 +144,18 @@ export default new Vuex.Store({
     setGlobalProcesses(state, globalProcesses) {
       state.globalProcesses = globalProcesses;
     },
+    // Copy Nodes to the clipboard or in this case, to the state
+    setCopiedElements(state, elements) {
+      state.copiedElements = elements;
+    },
+    setClientMousePosition(state, position) {
+      const { clientX, clientY } = position;
+      state = { clientX, clientY };
+    },
+    clientLeftPaper(state) {
+      state.clientX = null;
+      state.clientY = null;
+    },
   },
   actions: {
     async fetchGlobalProcesses({ commit }) {

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);
+    },
   },
 });