Merge branch 'feature/FOUR-11531' of https://github.com/ProcessMaker/processmaker into feature/FOUR-12677

Author: luNunezProcessmaker

ProcessMaker/Http/Controllers/Api/ProcessController.php

@@ -107,6 +107,11 @@ public function index(Request $request)
         if (!empty($filter)) {
             $processes->filter($filter);
         }
+        // Filter by category
+        $category = $request->input('category', null);
+        if (!empty($category)) {
+            $processes->processCategory($category);
+        }
 
         if (!empty($pmql)) {
             try {

ProcessMaker/Models/Process.php

@@ -450,6 +450,14 @@ public function scopeArchived($query)
         return $query->where('processes.status', 'ARCHIVED');
     }
 
+    /**
+     * Scope a query to include a specific category
+     */
+    public function scopeProcessCategory($query, int $id)
+    {
+        return $query->where('processes.process_category_id', $id);
+    }
+
     public function getCollaborations()
     {
         $this->bpmnDefinitions = app(BpmnDocumentInterface::class, ['process' => $this]);

resources/img/launchpad-images/imageDefault.png

@@ -3,7 +3,7 @@
     <breadcrumbs />
     <b-row>
       <b-col cols="2">
-        <h4> {{ $t('Processes Browser') }} </h4>
+        <h4>{{ $t("Processes Browser") }}</h4>
         <!--
         Menu Catalogue FOUR-12111
         <MenuCatologue
@@ -22,33 +22,33 @@
               :current-user-id="currentUserId"
               :is-documenter-installed="isDocumenterInstalled"
             />
+            <processes-carousel
+              :process="process"
+            />
           </b-col>
           <b-col cols="3">
             <process-options :process="process" />
           </b-col>
         </div>
-        <b-col cols="12">
-          Process Tab
-        </b-col>
+        <b-col cols="12"> Process Tab </b-col>
       </b-col>
     </b-row>
   </div>
 </template>
 
 <script>
+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 },
+  components: { ProcessOptions, Breadcrumbs, ProcessMap, ProcessesCarousel },
   props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
   data() {
     return {
       fields: [],
     };
   },
-  methods: {
-  },
 };
 </script>

resources/img/launchpad-images/noImage.svg

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <b-carousel
+      id="carousel-1"
+      v-model="slide"
+      :interval="interval"
+      indicators
+      @sliding-start="onSlideStart"
+      @sliding-end="onSlideEnd"
+    >
+      <b-carousel-slide
+        v-for="(image, index) in images.length > 0 ? images : defaultImage"
+        :key="index"
+        class="custom-style"
+        :img-src="image.url"
+      ></b-carousel-slide>
+    </b-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    process: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      slide: 0,
+      sliding: null,
+      images: [
+        { url: "https://picsum.photos/1024/480/?image=55" },
+        { url: "https://picsum.photos/100/100/?image=54" },
+        { url: "https://picsum.photos/200/100/?image=53" },
+        { url: "https://picsum.photos/1024/800/?image=56" },
+      ],
+      defaultImage: Array(4).fill({ url: "/img/launchpad-images/imageDefault.png" }),
+      interval: 2000,
+    };
+  },
+  methods: {
+    onSlideStart(slide) {
+      this.sliding = true;
+    },
+    onSlideEnd(slide) {
+      this.sliding = false;
+    },
+    /**
+     * TO DO: This method gets information related to processes Launchpad Settings
+     */
+    getLaunchpadSettings() {
+      //Here call API to retrieve information
+      // ProcessMaker.apiClient
+      //   .get("query here")
+      //   .then((response) => {
+      //     this.carouselImages = response.data;
+      //   })
+      //   .catch((err) => {
+      //     console.log("Error", err);
+      //   });
+    },
+  },
+};
+</script>
+<style>
+.carousel-inner {
+  overflow: hidden;
+}
+
+.custom-style {
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 400px;
+}
+</style>

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

@@ -555,6 +555,29 @@ public function testSorting()
         ]);
     }
 
+    /**
+     * Test filter by Category
+     */
+    public function testFilterCategory()
+    {
+        // Create Category
+        $categoryA = ProcessCategory::factory()->create();
+        $categoryB = ProcessCategory::factory()->create();
+        // Now we create process related to this
+        Process::factory()->count(5)->create([
+            'process_category_id' => $categoryB->id,
+        ]);
+        // Get process without category
+        $response = $this->apiCall('GET', route('api.processes.index', ['per_page' => 5, 'page' => 1]));
+        $response->assertJsonCount(5, 'data');
+        // Get process related categoryA
+        $response = $this->apiCall('GET', route('api.processes.index', ['category' => $categoryA->id]));
+        $response->assertJsonCount(0, 'data');
+        // Get process related categoryB
+        $response = $this->apiCall('GET', route('api.processes.index', ['category' => $categoryB->id]));
+        $response->assertJsonCount(5, 'data');
+    }
+
     /**
      * Test pagination of process list
      */

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

@@ -54,6 +54,7 @@ mix.extract([
   "@fortawesome/vue-fontawesome"
 ])
   .copy("resources/img/*", "public/img")
+  .copy("resources/img/launchpad-images/*", "public/img/launchpad-images")
   .copy("resources/img/script_lang/*", "public/img/script_lang")
   .copy("node_modules/snapsvg/dist/snap.svg.js", "public/js")
   .copy("resources/js/components/CustomActions.vue", "public/js")