feature/FOUR-11536: Process Launchpad - Start Buttons

ProcessMaker/Http/Controllers/ProcessesCatalogueController.php

@@ -22,9 +22,6 @@ public function index(Request $request)
      */
     public function open(Process $process, $id)
     {
-        return view('processes-catalogue.open', [
-            'process' => $process,
-            'processId' => $id,
-        ]);
+        return view('processes-catalogue.open', compact('id'));
     }
 }

resources/js/processes-catalogue/components/Breadcrumbs.vue

@@ -32,31 +32,11 @@ export default {
   props: ["process", "categoryRoute", "category"],
   data() {
     return {
-      list: [],
-      loading: false,
     };
   },
   mounted() {
-    this.list = this.transform(this.routes);
   },
   methods: {
-    isActive(index) {
-      return index == (this.list.length - 1);
-    },
-    updateRoutes(routes) {
-      this.list = routes;
-    },
-    transform(routes) {
-      let list = [];
-      Object.entries(routes).forEach(([title, link]) => {
-        list.push({
-          title: title,
-          link: link,
-          router: false
-        });
-      });
-      return list;
-    }
   },
 };
 </script>

resources/js/processes-catalogue/components/ProcessInfo.vue

@@ -1,35 +1,42 @@
 <template>
-  <b-row>
-    <b-col cols="2">
-      <h4> {{ $t('Processes Browser') }} </h4>
-      <!--
-      Menu Catalogue FOUR-12111
-      <MenuCatologue
-        :data="listCategories"
-        :select="selectCategorie"
-        class="mt-3"
-      />
-      -->
-    </b-col>
-    <b-col cols="10">
-      <div class="d-flex">
-        <b-col cols="9">
-          Process Map
-        </b-col>
-        <b-col cols="3">
-          Process Options
+  <div>
+    <breadcrumbs />
+    <b-row>
+      <b-col cols="2">
+        <h4> {{ $t('Processes Browser') }} </h4>
+        <!--
+        Menu Catalogue FOUR-12111
+        <MenuCatologue
+          :data="listCategories"
+          :select="selectCategorie"
+          class="mt-3"
+        />
+        -->
+      </b-col>
+      <b-col cols="10">
+        <div class="d-flex">
+          <b-col cols="9">
+            Process Map
+          </b-col>
+          <b-col cols="3">
+            <process-options :process-id="processId" />
+          </b-col>
+        </div>
+        <b-col cols="12">
+          Process Tab
         </b-col>
-      </div>
-      <b-col cols="12">
-        Process Tab
       </b-col>
-    </b-col>
-  </b-row>
+    </b-row>
+  </div>
 </template>
 
 <script>
+import ProcessOptions from "./ProcessOptions.vue";
+import Breadcrumbs from "./Breadcrumbs.vue";
 
 export default {
+  components: { ProcessOptions, Breadcrumbs },
+  props: ["processId"],
   data() {
     return {
       fields: [],

resources/js/processes-catalogue/components/ProcessOptions.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="start-events btn-group">
+    <button
+      class="btn btn-success btn-lg dropdown-toggle start-button p-3"
+      type="button"
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false"
+    >
+      <span class="pl-3 pr-4"> {{ $t('Start this process') }} </span>
+    </button>
+    <div class="dropdown-menu scrollable-menu p-3 pb-0 mt-2">
+      <p
+        class="font-weight-bold px-1"
+        style="font-size: 14px"
+      >
+        {{ $t('Starting events') }}
+      </p>
+      <div
+        v-for="event in processEvents"
+        :key="event.id"
+        class="mt-2"
+      >
+        <p
+          class="text-capitalize mb-1"
+          style="font-weight: 600"
+        >
+          {{ event.name }}
+        </p>
+        <button
+          type="button"
+          class="btn btn-outline-success border-0 p-1"
+          @click="goToNewRequest(event.id)"
+        >
+          <i class="fas fa-play-circle p-1" />
+          {{ $t('Start') }}
+        </button>
+        <hr class="mt-2 mb-0">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: ["processId"],
+  data() {
+    return {
+      processEvents: [],
+    };
+  },
+  mounted() {
+    this.getStartEvents();
+  },
+  methods: {
+    /**
+     * get start events for dropdown Menu
+     */
+    getStartEvents() {
+      window.ProcessMaker.apiClient
+        .get(`processes/${this.processId}`)
+        .then((response) => {
+          const startEvents = response.data.start_events;
+          startEvents.forEach((event) => {
+            if (event.eventDefinitions.length === 0) {
+              this.processEvents.push(event);
+            }
+          });
+        });
+    },
+    /**
+     * Start new request
+     */
+    goToNewRequest(event) {
+      ProcessMaker.apiClient
+        .post(`/process_events/${this.processId}?event=${event}`)
+        .then((response) => {
+          this.spin = 0;
+          let instance = response.data;
+          this.$cookies.set("fromTriggerStartEvent", true, "1min");
+          window.location = `/requests/${instance.id}`;
+        }).catch((err) => {
+          const data = err.response.data;
+          if (data.message) {
+            ProcessMaker.alert(data.message, "danger");
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.start-button {
+  background: #4EA075;
+  border: 0px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.scrollable-menu {
+    height: auto;
+    max-height: 280px;
+    overflow-x: hidden;
+    width: 248px;
+    border-radius: 5px;
+}
+</style>

resources/views/processes-catalogue/open.blade.php

@@ -10,7 +10,7 @@
 
 @section('content')
   <div id="open-process" class="px-3 page-content mb-0">
-    <process-info :processId={{$processId}}></process-info>
+    <process-info :process-id={{$id}}></process-info>
   </div>
 @endsection