Feature/four 12645: Update Breadcrumbs with Categories and process

ProcessMaker/Http/Controllers/ProcessesCatalogueController.php

@@ -20,8 +20,9 @@ public function index(Request $request)
      *
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
-    public function open(Process $process)
+    public function open(Process $process, Request $request)
     {
-        return view('processes-catalogue.open', compact('process'));
+        $category = $request->input('category') ?? 0;
+        return view('processes-catalogue.open', compact('process', 'category'));
     }
 }

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

@@ -14,8 +14,8 @@
       </li>
 
       <li v-if="category" class="breadcrumb-item">
-        <a :href="categoryRoute" :aria-label="category">
-          {{ category }}
+        <a :aria-label="categoryName">
+          {{ categoryName }}
         </a>
       </li>
 
@@ -29,14 +29,27 @@
 <script>
 export default {
   router: window.ProcessMaker.Router,
-  props: ["process", "categoryRoute", "category"],
+  props: ["process", "category"],
   data() {
     return {
+      categoryName: "",
     };
   },
   mounted() {
+    this.getCategory();
   },
   methods: {
+    getCategory(value = "") {
+      if (value) {
+        this.categoryName = value;
+      } else if (this.category) {
+        ProcessMaker.apiClient
+          .get(`process_categories/${this.category}`)
+          .then((response) => {
+            this.categoryName = response.data.name;
+          });
+      }
+    },
   },
 };
 </script>

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

@@ -1,17 +1,18 @@
 <template>
   <div>
-    <breadcrumbs />
+    <breadcrumbs
+      ref="breadcrumb"
+      :category="selectCategory"
+      :process="process.name"
+    />
     <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">
@@ -37,18 +38,49 @@
 </template>
 
 <script>
+import MenuCatologue from "./menuCatologue.vue";
 import ProcessesCarousel from "../components/ProcessesCarousel.vue";
 import ProcessMap from "./ProcessMap.vue";
 import ProcessOptions from "./ProcessOptions.vue";
 import Breadcrumbs from "./Breadcrumbs.vue";
 
 export default {
-  components: { ProcessOptions, Breadcrumbs, ProcessMap, ProcessesCarousel },
-  props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
+  components: {
+    ProcessOptions,
+    Breadcrumbs,
+    ProcessMap,
+    MenuCatologue,
+    ProcessesCarousel,
+  },
+  props: ["process", "permission", "isDocumenterInstalled", "currentUserId", "category"],
   data() {
     return {
-      fields: [],
+      listCategories: [],
+      selectCategory: 0,
     };
   },
+  created() {
+    this.selectCategory = this.selectedCategory();
+    this.getCategories();
+  },
+  methods: {
+    selectedCategory() {
+      if (this.category) {
+        return this.category;
+      }
+      const categories = this.process.process_category_id;
+      return typeof categories === "string" ? categories.split(",")[0] : categories;
+    },
+    getCategories() {
+      ProcessMaker.apiClient
+        .get("process_categories")
+        .then((response) => {
+          this.listCategories = response.data.data;
+        });
+    },
+    selectCategorie(value) {
+      // TODO Flow from processInfo to ProcessesCtalogue
+    },
+  },
 };
 </script>

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

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <breadcrumbs />
+    <breadcrumbs
+      ref="breadcrumb"
+      :category="category ? category.id : ''"
+    />
     <b-row>
       <b-col cols="2">
         <h4> {{ $t('Processes Browser') }} </h4>
@@ -74,6 +77,7 @@ export default {
     },
     selectCategorie(value) {
       this.category = value;
+      this.$refs.breadcrumb.getCategory(value.name);
       this.showCardProcesses = true;
       this.showWizardTemplates = false;
     },

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

@@ -12,6 +12,7 @@
   <div id="open-process" class="px-3 page-content mb-0">
     <process-info
       :process="{{$process}}"
+      :category="{{$category}}"
       :current-user-id="{{ \Auth::user()->id }}"
       :permission="{{ \Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks') }}"
       is-documenter-installed="{{\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled()}}"