From 77df7d04a84c8a15fec25fb3bfcc90ca26420f30 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 28 May 2024 16:30:51 +0000
Subject: [PATCH 1/3] Ready for Pull Request

---
 .../components/ProcessCollapseInfo.vue        |  45 ++-
 .../components/ProcessOptions.vue             |  20 +-
 .../components/ProcessesCarousel.vue          | 271 ++++++++++++++----
 .../components/ProcessesCatalogue.vue         |   6 +
 .../optionsMenu/ChartSaveSearch.vue           |  10 +
 .../optionsMenu/ProcessDescription.vue        |  70 +++++
 6 files changed, 340 insertions(+), 82 deletions(-)
 create mode 100644 resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue

diff --git a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
index a56527e5fa..eaf550c0da 100644
--- a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
@@ -64,30 +64,6 @@
       >
         <div class="info-collapse">
           <div class="row">
-            <div class="col-sm-9">
-              <p class="title-process">
-                {{ process.name }}
-              </p>
-              <p
-                v-if="readActivated || !largeDescription"
-                class="description"
-              >
-                {{ process.description }}
-              </p>
-              <p
-                v-if="!readActivated && largeDescription"
-                class="description"
-              >
-                {{ process.description.slice(0,300) }}
-                <a
-                  v-if="!readActivated"
-                  class="read-more"
-                  @click="activateReadMore"
-                >
-                  ...
-                </a>
-              </p>
-            </div>
             <div class="wizard-container col-sm-3">
               <div class="wizard">
                 <b-button
@@ -106,12 +82,12 @@
             </div>
           </div>
           <b-row>
-            <b-col class="process-carousel col-sm-12 col-md-12 col-lg-12 col-xl-9 col-pm-9 col-9">
+            <b-col class="process-carousel col-12">
               <processes-carousel
                 :process="process"
               />
             </b-col>
-            <b-col class="process-options col-sm-12 col-md-12 col-lg-12 col-xl-3 col-pm-3 col-2">
+            <b-col class="process-options col-12">
               <process-options :process="process" />
             </b-col>
           </b-row>
@@ -285,4 +261,21 @@ export default {
     max-width: 100%;
   }
 }
+.prev,
+.next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #333;
+  color: #fff;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+}
+.prev {
+  left: 0;
+}
+.next {
+  right: 0;
+}
 </style>
diff --git a/resources/js/processes-catalogue/components/ProcessOptions.vue b/resources/js/processes-catalogue/components/ProcessOptions.vue
index 8b028937da..016d9073b5 100644
--- a/resources/js/processes-catalogue/components/ProcessOptions.vue
+++ b/resources/js/processes-catalogue/components/ProcessOptions.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="section-options">
-    <process-counter :process="process" />
+    <div class="left-column">
+      <process-description :process="process" />
+      <process-counter :process="process" />
+    </div>
     <chart-save-search :process="process" />
   </div>
 </template>
@@ -8,9 +11,10 @@
 <script>
 import ProcessCounter from "./optionsMenu/ProcessCounter.vue";
 import ChartSaveSearch from "./optionsMenu/ChartSaveSearch.vue";
+import ProcessDescription from "./optionsMenu/ProcessDescription.vue";
 
 export default {
-  components: { ProcessCounter, ChartSaveSearch },
+  components: { ProcessCounter, ChartSaveSearch, ProcessDescription },
   props: ["process"],
 };
 </script>
@@ -19,12 +23,18 @@ export default {
 .section-options {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  width: 98.5%;
+  margin-top: 20px;
 }
-@media (width < 1200px) {
+.left-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+@media (max-width: 2560px) {
   .section-options {
-    align-items: flex-start;
     flex-direction: row;
+    justify-content: space-between;
   }
 }
 </style>
diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index 603ebbaf6f..e38e4a5fa9 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -1,37 +1,62 @@
 <template>
-  <div class="carousel-container">
-    <b-carousel
-      id="processes-carousel"
-      v-model="slide"
-      no-animation
-      :interval="interval"
-      indicators
-      @sliding-start="onSlideStart"
-      @sliding-end="onSlideEnd"
+  <div
+    v-show="imagesLoaded"
+    class="h-100 w-100"
+  >
+    <button
+      class="prev"
+      @click="prevSlide"
     >
-      <b-carousel-slide
-        v-for="(image, index) in images.length > 0 ? images : defaultImage"
-        :key="index"
+      <i class="fas fa-caret-left"></i>
+    </button>
+    <button
+      class="next"
+      @click="nextSlide"
+    >
+      <i class="fas fa-caret-right"></i>
+    </button>
+
+    <div
+      ref="containercarousel"
+      @resize="updateSlideWidth"
+      class="carousel"
+      :style="{
+        '--var-sizes-sm': `${100 / sizes.sm}%`,
+        '--var-sizes-md': `${100 / sizes.md}%`,
+        '--var-sizes-lg': `${100 / sizes.lg}%`,
+        '--var-sizes-xl': `${100 / sizes.xl}%`,
+        '--var-sizes-2xl': `${100 / sizes['2xl']}%`,
+        '--var-sizes-3xl': `${100 / sizes['3xl']}%`,
+      }"
+    >
+      <div
+        class="slides"
+        :style="{ transform: 'translateX(' + translateX + 'px)' }"
       >
-        <template #img>
+        <div
+          class="slide"
+          v-for="(image, index) in images.length > 0 ? images : defaultImage"
+          :key="index"
+        >
           <iframe
             v-if="image.type === 'embed'"
-            class="d-block iframe-carousel"
+            ref="slides"
+            class="content d-block iframe-carousel"
             :src="image.url"
             title="embed media"
           />
           <img
             v-else
+            ref="slides"
+            class="content img-carousel"
             :src="image.url"
             :alt="process.name"
-            class="d-block img-carousel"
-          >
-        </template>
-      </b-carousel-slide>
-    </b-carousel>
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
-
 <script>
 export default {
   props: {
@@ -45,28 +70,60 @@ export default {
       slide: 0,
       sliding: null,
       images: [],
-      defaultImage: Array(4).fill({ url: "/img/launchpad-images/defaultImage.svg" }),
+      imagesLoaded: true,
+      defaultImage: Array(4).fill({
+        url: "/img/launchpad-images/defaultImage.svg",
+      }),
       interval: 0,
+      resizeObserver: null,
+      currentIndex: 0,
+      slideWidth: 0,
+      translateX: 0,
+      sizes: {
+        sm: 1,
+        md: 1,
+        lg: 2,
+        xl: 2,
+        "2xl": 2,
+        "3xl": 3,
+      },
     };
   },
+  computed: {
+    slideCount() {
+      return this.images.length - 1;
+    },
+  },
   mounted() {
     this.getLaunchpadImages();
-    ProcessMaker.EventBus.$on("getLaunchpadImagesEvent", ({ indexImage, type }) => {
-      if (type === "delete") {
-        this.images.splice(indexImage, 1);
-      } else {
-        this.images = [];
-        this.getLaunchpadImages();
+    ProcessMaker.EventBus.$on(
+      "getLaunchpadImagesEvent",
+      ({ indexImage, type }) => {
+        if (type === "delete") {
+          this.images.splice(indexImage, 1);
+        } else {
+          this.images = [];
+          this.getLaunchpadImages();
+        }
+      }
+    );
+    this.$nextTick(() => {
+      this.updateSlideWidth();
+      this.resizeObserver = new ResizeObserver(this.updateSlideWidth);
+      if (this.$refs.containercarousel) {
+        this.resizeObserver.observe(this.$refs.containercarousel);
       }
     });
   },
+  beforeDestroy() {
+    if (this.resizeObserver && this.$refs.containercarousel) {
+      this.resizeObserver.unobserve(this.$refs.containercarousel);
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  },
   methods: {
-    onSlideStart(slide) {
-      this.sliding = true;
-    },
-    onSlideEnd(slide) {
-      this.sliding = false;
-    },
     /**
      * Get images from Media library related to process.
      */
@@ -91,11 +148,42 @@ export default {
               type: customProperties.type,
             });
           });
+          // If no images were loaded Carousel container is not shown
+          if (this.images.length === 0) {
+            this.imagesLoaded = false;
+          }
+          // If only one image is loaded, rest of carousel must be completed with default image
+          if (this.images.length === 1) {
+            for (let i = 1; i <= 3; i++) {
+              this.images[i] = {
+                url: "/img/launchpad-images/defaultImage.svg",
+                type: "image",
+              };
+            }
+          }
         })
         .catch((error) => {
           console.error(error);
         });
     },
+    updateSlideWidth() {
+      if (this.$refs.slides && this.$refs.slides[0]) {
+        this.slideWidth = this.$refs.slides[0].offsetWidth + 11;
+        this.translateX = this.slideWidth * -this.currentIndex - 10;
+      }
+    },
+    prevSlide() {
+      if (this.currentIndex > 0) {
+        this.currentIndex--;
+        this.translateX += this.slideWidth;
+      }
+    },
+    nextSlide() {
+      if (this.currentIndex < this.slideCount - 1) {
+        this.currentIndex++;
+        this.translateX -= this.slideWidth;
+      }
+    },
   },
 };
 </script>
@@ -103,42 +191,123 @@ export default {
 .carousel-inner {
   overflow: hidden;
 }
+
 .img-carousel {
-  max-width: 800px;
-  height: 410px;
+  width: 100%;
+  height: auto;
   aspect-ratio: 16/9;
+  object-fit: fill;
+  border-radius: 16px;
 }
 .iframe-carousel {
-  border: 0px;
-  width: 800px;
-  height: 400px;
-}
-.carousel-container {
-  display: flex;
-  justify-content: center;
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: fill;
   border-radius: 16px;
-  background-color: #edf1f6;
 }
-@media (width <= 1500px) {
+
+@media (width <= 2560px) {
+  .img-carousel {
+  }
+}
+@media (width <= 1920px) {
+  .img-carousel {
+  }
+}
+@media (width <= 1440px) {
   .img-carousel {
-    max-width: 700px;
   }
 }
-@media (width <= 1366px) {
+@media (width <= 1280px) {
   .img-carousel {
-    max-width: 590px;
+    height: auto;
+  }
+}
+@media (width <= 1024px) {
+  .img-carousel {
+    height: auto;
   }
 }
-@media (width <= 1200px) {
+@media (width <= 768px) {
   .img-carousel {
-    max-width: 513px;
     height: auto;
   }
 }
-@media (width <= 992px) {
+@media (width <= 640px) {
   .img-carousel {
-    max-width: 486px;
     height: auto;
   }
 }
 </style>
+<style>
+.carousel {
+  position: relative;
+  overflow: hidden;
+  container-type: inline-size;
+}
+.slides {
+  display: flex;
+  transition: transform 0.3s ease;
+}
+.slide {
+  flex: 0 0 auto;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ccc;
+}
+
+.prev,
+.next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  color: #556271;
+}
+.prev {
+  left: -10px;
+  background-color: #fff;
+}
+.next {
+  right: 4px;
+  background-color: #fff;
+}
+@media (min-width: 640px) {
+  .slide {
+    width: var(--var-sizes-sm);
+  }
+}
+@media (min-width: 768px) {
+  .slide {
+    width: var(--var-sizes-md);
+  }
+}
+@media (min-width: 1024px) {
+  .slide {
+    width: var(--var-sizes-lg);
+  }
+}
+@media (min-width: 1280px) {
+  .slide {
+    width: var(--var-sizes-xl);
+  }
+}
+@media (min-width: 1536px) {
+  .slide {
+    width: var(--var-sizes-2xl);
+  }
+}
+@media (min-width: 1920px) {
+  .slide {
+    width: var(--var-sizes-3xl);
+  }
+}
+</style>
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 4cee707da8..2dc584ce27 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -316,4 +316,10 @@ export default {
   height: calc(100vh - 145px);
   padding-left: 32px;
 }
+@media (width <= 1024px) {
+  .menu {
+    min-width: 0;
+    width: 0;
+  }
+}
 </style>
diff --git a/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue b/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
index 136a05eaf0..a9e3d00974 100644
--- a/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
+++ b/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
@@ -1,5 +1,8 @@
 <template>
   <div>
+    <span class="title">
+      {{ $t('Process Chart') }}
+    </span>
     <base-chart ref="baseChart" :process="process"></base-chart>
   </div>
 </template>
@@ -22,6 +25,13 @@ export default {
 </script>
 
 <style scoped>
+.title {
+  color: #1572C2;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
 .image-container {
   width: 100%;
   padding-top: 100%;
diff --git a/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
new file mode 100644
index 0000000000..5186553335
--- /dev/null
+++ b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="col-sm-9">
+      <span class="title">
+        {{ $t('Details') }}
+      </span>
+      <p class="title-process">
+        {{ process.name }}
+      </p>
+      <p
+        v-if="readActivated || !largeDescription"
+        class="description"
+      >
+        {{ process.description }}
+      </p>
+      <p
+        v-if="!readActivated && largeDescription"
+        class="description"
+      >
+        {{ process.description.slice(0,300) }}
+        <a
+          v-if="!readActivated"
+          class="read-more"
+          @click="activateReadMore"
+        >
+          ...
+        </a>
+      </p>
+    </div>
+</template>
+<script>
+export default {
+  props: ["process"],
+  data() {
+    return {
+      readActivated: false,
+      largeDescription: false,
+    };
+  },
+  methods: {
+    activateReadMore() {
+      this.readActivated = true;
+    },
+  },
+};
+</script>
+<style scoped>
+.title{
+  color: #1572C2;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.title-process {
+  color: #4C545C;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+.description {
+  color: #4f606d;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+</style>

From 477f6bbb3f5b7034c14727f851dd4169347a7bb6 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 28 May 2024 16:42:37 +0000
Subject: [PATCH 2/3] Solving SonrQube Observations

---
 .../js/processes-catalogue/components/ProcessesCarousel.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index e38e4a5fa9..e8e237ea55 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -167,7 +167,7 @@ export default {
         });
     },
     updateSlideWidth() {
-      if (this.$refs.slides && this.$refs.slides[0]) {
+      if (this.$refs.slides?.[0]) {
         this.slideWidth = this.$refs.slides[0].offsetWidth + 11;
         this.translateX = this.slideWidth * -this.currentIndex - 10;
       }

From 77e602de2c8112724485af6da77c2c22f3e353de Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 28 May 2024 16:52:36 +0000
Subject: [PATCH 3/3] Solving more SonarQube observations

---
 .../js/processes-catalogue/components/ProcessesCarousel.vue      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index e8e237ea55..df9e75a24e 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -267,7 +267,6 @@ export default {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  color: #fff;
   border: none;
   cursor: pointer;
   color: #556271;