From 25f6b2f1d3edd82dd8b16f52339c3bd86088197b Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 29 Nov 2023 12:43:54 -0400
Subject: [PATCH 1/5] feature/FOUR-11536

---
 .../ProcessesCatalogueController.php          |   5 +-
 .../components/ProcessInfo.vue                |   5 +-
 .../components/ProcessOptions.vue             | 102 ++++++++++++++++++
 .../views/processes-catalogue/open.blade.php  |   2 +-
 4 files changed, 108 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/processes-catalogue/components/ProcessOptions.vue

diff --git a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
index a17e35eb57..aaa67f593b 100644
--- a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
+++ b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
@@ -21,9 +21,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'));
     }
 }
diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index 94e210d00d..aac435aecc 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -17,7 +17,7 @@
           Process Map
         </b-col>
         <b-col cols="3">
-          Process Options
+          <process-options :process-id="processId" />
         </b-col>
       </div>
       <b-col cols="12">
@@ -28,8 +28,11 @@
 </template>
 
 <script>
+import ProcessOptions from "./ProcessOptions.vue";
 
 export default {
+  components: { ProcessOptions },
+  props: ["processId"],
   data() {
     return {
       fields: [],
diff --git a/resources/js/processes-catalogue/components/ProcessOptions.vue b/resources/js/processes-catalogue/components/ProcessOptions.vue
new file mode 100644
index 0000000000..9b12ad7cde
--- /dev/null
+++ b/resources/js/processes-catalogue/components/ProcessOptions.vue
@@ -0,0 +1,102 @@
+<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 p-3 pb-0 mt-2"
+      style="width: 248px; border-radius: 5px;"
+    >
+      <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: {
+    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);
+            }
+          });
+        });
+    },
+    goToNewRequest(event) {
+      window.ProcessMaker.apiClient
+        .post(`/process_events/${this.processId}?event=${event}`)
+        .then((response) => {
+          this.spin = 0;
+          let instance = response.data;
+          this.$cookies.set("fromTriggerStartEvent", true, "1min");
+          if (this.$cookies.get("isMobile") === "true") {
+            window.location = `/requests/mobile/${instance.id}`;
+          } else {
+            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;
+}
+</style>
diff --git a/resources/views/processes-catalogue/open.blade.php b/resources/views/processes-catalogue/open.blade.php
index 4532aea778..d617bad9ac 100644
--- a/resources/views/processes-catalogue/open.blade.php
+++ b/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
 

From 4adf90b3dfd83d8df039827108266e8e9a54af84 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 29 Nov 2023 13:29:52 -0400
Subject: [PATCH 2/5] feature/FOUR-11536

---
 .../components/ProcessOptions.vue                  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessOptions.vue b/resources/js/processes-catalogue/components/ProcessOptions.vue
index 9b12ad7cde..aa800dcfcb 100644
--- a/resources/js/processes-catalogue/components/ProcessOptions.vue
+++ b/resources/js/processes-catalogue/components/ProcessOptions.vue
@@ -57,6 +57,9 @@ export default {
     this.getStartEvents();
   },
   methods: {
+    /**
+     * get start events for dropdown Menu
+     */
     getStartEvents() {
       window.ProcessMaker.apiClient
         .get(`processes/${this.processId}`)
@@ -69,18 +72,17 @@ export default {
           });
         });
     },
+    /**
+     * Start new request
+     */
     goToNewRequest(event) {
-      window.ProcessMaker.apiClient
+      ProcessMaker.apiClient
         .post(`/process_events/${this.processId}?event=${event}`)
         .then((response) => {
           this.spin = 0;
           let instance = response.data;
           this.$cookies.set("fromTriggerStartEvent", true, "1min");
-          if (this.$cookies.get("isMobile") === "true") {
-            window.location = `/requests/mobile/${instance.id}`;
-          } else {
-            window.location = `/requests/${instance.id}`;
-          }
+          window.location = `/requests/${instance.id}`;
         }).catch((err) => {
           const data = err.response.data;
           if (data.message) {

From ca020b85f41e90acbeaf030c1774459f809d049f Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 29 Nov 2023 14:48:03 -0400
Subject: [PATCH 3/5] feature/FOUR-11536

---
 .../components/ProcessInfo.vue                | 54 +++++++-------
 .../components/ProcessOptions.vue             | 71 ++++++++++++++++++-
 2 files changed, 99 insertions(+), 26 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index aac435aecc..239dad1aba 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -1,37 +1,41 @@
 <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 :process-id="processId" />
+  <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 },
+  components: { ProcessOptions, Breadcrumbs },
   props: ["processId"],
   data() {
     return {
diff --git a/resources/js/processes-catalogue/components/ProcessOptions.vue b/resources/js/processes-catalogue/components/ProcessOptions.vue
index aa800dcfcb..443f11fbea 100644
--- a/resources/js/processes-catalogue/components/ProcessOptions.vue
+++ b/resources/js/processes-catalogue/components/ProcessOptions.vue
@@ -10,7 +10,7 @@
       <span class="pl-3 pr-4"> {{ $t('Start this process') }} </span>
     </button>
     <div
-      class="dropdown-menu p-3 pb-0 mt-2"
+      class="dropdown-menu scrollable-menu p-3 pb-0 mt-2"
       style="width: 248px; border-radius: 5px;"
     >
       <p
@@ -40,6 +40,69 @@
         </button>
         <hr class="mt-2 mb-0">
       </div>
+      <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
+        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
+        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>
@@ -101,4 +164,10 @@ export default {
   font-size: 16px;
   font-weight: 600;
 }
+
+.scrollable-menu {
+    height: auto;
+    max-height: 280px;
+    overflow-x: hidden;
+}
 </style>

From 3e84a03e7365f81889f354671f8dc278af01d89b Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 29 Nov 2023 14:53:06 -0400
Subject: [PATCH 4/5] feature/FOUR-11536

---
 .../components/ProcessOptions.vue             | 63 -------------------
 1 file changed, 63 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessOptions.vue b/resources/js/processes-catalogue/components/ProcessOptions.vue
index 443f11fbea..8756c51ad7 100644
--- a/resources/js/processes-catalogue/components/ProcessOptions.vue
+++ b/resources/js/processes-catalogue/components/ProcessOptions.vue
@@ -40,69 +40,6 @@
         </button>
         <hr class="mt-2 mb-0">
       </div>
-      <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
-        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
-        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>

From 232aea72b8dd13fd7a96ba813b319eab00175ea6 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 29 Nov 2023 15:04:52 -0400
Subject: [PATCH 5/5] feature/FOUR-11536

---
 .../components/Breadcrumbs.vue                | 20 -------------------
 .../components/ProcessOptions.vue             |  7 +++----
 2 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/resources/js/processes-catalogue/components/Breadcrumbs.vue b/resources/js/processes-catalogue/components/Breadcrumbs.vue
index dc3c014684..6b6a93ab38 100644
--- a/resources/js/processes-catalogue/components/Breadcrumbs.vue
+++ b/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>
diff --git a/resources/js/processes-catalogue/components/ProcessOptions.vue b/resources/js/processes-catalogue/components/ProcessOptions.vue
index 8756c51ad7..bca4b59279 100644
--- a/resources/js/processes-catalogue/components/ProcessOptions.vue
+++ b/resources/js/processes-catalogue/components/ProcessOptions.vue
@@ -9,10 +9,7 @@
     >
       <span class="pl-3 pr-4"> {{ $t('Start this process') }} </span>
     </button>
-    <div
-      class="dropdown-menu scrollable-menu p-3 pb-0 mt-2"
-      style="width: 248px; border-radius: 5px;"
-    >
+    <div class="dropdown-menu scrollable-menu p-3 pb-0 mt-2">
       <p
         class="font-weight-bold px-1"
         style="font-size: 14px"
@@ -106,5 +103,7 @@ export default {
     height: auto;
     max-height: 280px;
     overflow-x: hidden;
+    width: 248px;
+    border-radius: 5px;
 }
 </style>