Feature/FOUR-11993:Preview Process - Carousel

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

@@ -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/js/processes-catalogue/components/ProcessesCarousel.vue

@@ -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>

webpack.mix.js

@@ -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")