From a1d950672ae266120e52f543452450aaeef7906e Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Thu, 23 May 2024 15:34:13 -0700
Subject: [PATCH 01/14] Format launchpad process list for mobile

---
 ProcessMaker/Helpers/MobileHelper.php         |   5 +
 .../ProcessesCatalogueController.php          |  14 +-
 .../components/CardProcess.vue                |   8 +-
 .../components/ProcessesCatalogue.vue         | 164 +++++++++++++++---
 .../components/menuCatologue.vue              |  19 ++
 .../components/utils/Card.vue                 |  53 ++++--
 resources/sass/_variables.scss                |   3 +
 .../views/layouts/navbarMobile.blade.php      |   7 +-
 .../processes-catalogue/mobile.blade.php      |  30 ++++
 webpack.mix.js                                |   1 +
 10 files changed, 268 insertions(+), 36 deletions(-)
 create mode 100644 resources/views/processes-catalogue/mobile.blade.php

diff --git a/ProcessMaker/Helpers/MobileHelper.php b/ProcessMaker/Helpers/MobileHelper.php
index f577f4284f..2d8254f763 100644
--- a/ProcessMaker/Helpers/MobileHelper.php
+++ b/ProcessMaker/Helpers/MobileHelper.php
@@ -13,4 +13,9 @@ public static function isMobile($userAgent)
 
         return false;
     }
+
+    public static function detectMobile()
+    {
+        return isset($_SERVER['HTTP_USER_AGENT']) && self::isMobile($_SERVER['HTTP_USER_AGENT']);
+    }
 }
diff --git a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
index 7e333e24a7..4c394861f8 100644
--- a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
+++ b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
@@ -5,12 +5,13 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Helpers\MobileHelper;
 use ProcessMaker\Http\Controllers\Controller;
 use ProcessMaker\Managers\ScreenBuilderManager;
-use ProcessMaker\Models\Process;
 use ProcessMaker\Models\Bookmark;
-use ProcessMaker\Models\ProcessLaunchpad;
+use ProcessMaker\Models\Process;
 use ProcessMaker\Models\ProcessCategory;
+use ProcessMaker\Models\ProcessLaunchpad;
 use ProcessMaker\Traits\HasControllerAddons;
 
 /**
@@ -22,7 +23,7 @@
 class ProcessesCatalogueController extends Controller
 {
     use HasControllerAddons;
-    
+
     public function index(Request $request, Process $process = null)
     {
         $manager = app(ScreenBuilderManager::class);
@@ -33,6 +34,13 @@ public function index(Request $request, Process $process = null)
             $process->launchpad = ProcessLaunchpad::getLaunchpad(true, $process->id);
             $process->bookmark_id = Bookmark::getBookmarked(true, $process->id, $currentUser['id']);
         }
+
+        if (MobileHelper::detectMobile()) {
+            $title = __('Process Browser');
+
+            return view('processes-catalogue.mobile', compact('title', 'process', 'currentUser', 'manager'));
+        }
+
         return view('processes-catalogue.index', compact('process', 'currentUser', 'manager'));
     }
 }
diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index f8ad2b7dac..49111e1425 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -154,10 +154,16 @@ export default {
 };
 </script>
 
-<style>
+<style scoped lang="scss">
+
+@import '~styles/variables';
 .processList {
   display: flex;
   flex-wrap: wrap;
+  
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
 }
 .text-custom {
   color: #1572C2;
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 4cee707da8..275300c8c8 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -6,24 +6,37 @@
       :process="selectedProcess ? selectedProcess.name : ''"
       :template="guidedTemplates ? 'Guided Templates' : ''"
     />
-    <div class="d-flex">
-      <div class="menu">
-        <span class="pl-3 menu-title"> {{ $t('Process Browser') }} </span>
-        <MenuCatologue
-          ref="categoryList"
-          title="Available Processes"
-          preicon="fas fa-play-circle"
-          class="mt-3"
-          show-bookmark="true"
-          :category-count="categoryCount"
-          :data="listCategories"
-          :from-process-list="fromProcessList"
-          :select="selectCategorie"
-          :filter-categories="filterCategories"
-          :permission="permission"
-          @wizardLinkSelect="wizardTemplatesSelected"
-          @addCategories="addCategories"
-        />
+    <div class="main">
+      <div class="menu" :class="{ 'menu-open' : showMenu }">
+        <div class="container-1">
+          <div class="container-2">
+            <span class="pl-3 menu-title"> {{ $t('Process Browser') }} </span>
+            <MenuCatologue
+              ref="categoryList"
+              title="Available Processes"
+              preicon="fas fa-play-circle"
+              class="mt-3"
+              show-bookmark="true"
+              :category-count="categoryCount"
+              :data="listCategories"
+              :from-process-list="fromProcessList"
+              :select="selectCategorie"
+              :filter-categories="filterCategories"
+              :permission="permission"
+              @wizardLinkSelect="wizardTemplatesSelected"
+              @addCategories="addCategories"
+              @selectedCategoryName="selectedCategoryName = $event"
+            />
+          </div>
+          <div class="mobile-slide-close" v-if="showMenu">
+            <b-button variant="secondary" @click="showMenu = false">
+              <i class="fa fa-times"></i>
+            </b-button>
+          </div>
+        </div>
+      </div>
+      <div class="slide-control">
+        <a href="#" @click="showMenu = !showMenu">M</a>
       </div>
       <div class="processes-info">
         <div
@@ -33,6 +46,13 @@
           <CatalogueEmpty />
         </div>
         <div v-else>
+          <div class="mobile-menu-control">
+            <span @click="showMenu = !showMenu">
+              <i class="fa fa-bars"></i>
+              {{ selectedCategoryName }}
+            </span>
+          </div>
+
           <CardProcess
             v-if="showCardProcesses && !showWizardTemplates && !showProcess"
             :key="key"
@@ -83,6 +103,9 @@ export default {
   props: ["permission", "isDocumenterInstalled", "currentUserId", "process", "currentUser"],
   data() {
     return {
+      showMenu: false,
+      selectedCategoryName: '',
+      isMobile: window.screen.width < 650,
       listCategories: [],
       defaultOptions: [
         {
@@ -126,6 +149,19 @@ export default {
         this.$refs.categoryList.selectTemplateItem();
       }
     }, 500);
+
+    // Show the menu by default when not on mobile
+    if (!this.isMobile) {
+      this.showMenu = true;
+    }
+  },
+  watch: {
+    selectedCategoryName() {
+      // Only hide the menu automatically if we are on mobile
+      if (this.isMobile) {
+        this.showMenu = false;
+      }
+    }
   },
   methods: {
     /**
@@ -295,12 +331,90 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '~styles/variables';
+
+
+@media (max-width: $lp-breakpoint) {
+  .breadcrum-main {
+    display: none;
+  }
+}
+
+.main {
+  display: flex;
+
+  @media (max-width: $lp-breakpoint) {
+      display: block;
+  }
+}
+
 .menu {
-  min-width: 304px;
+  width: 0px;
+  flex: 0 0 0px;
   height: calc(100vh - 145px);
-  overflow-y: auto;
+  overflow: hidden;
   margin-top: 15px;
+  transition: width 0.2s, flex 0.2s;
+
+  @media (max-width: $lp-breakpoint) {
+    position: absolute;
+    z-index: 4; // above pagination
+    display: flex;
+    margin-top: 0;
+  }
+  
+  .container-1 {
+    // width: 315px;
+    display: flex;
+    .container-2 {
+      background-color: #F7F9FB;
+      border-right: 2px solid rgba(0, 0, 0, 0.1);
+      flex: 0 0 315px;
+    }
+
+    .mobile-slide-close {
+      display: none;
+      padding-left: 10px;
+      padding-top: 10px;
+      @media (max-width: $lp-breakpoint) {
+        display: block;
+      }
+    }
+      
+  }
+}
+.slide-control {
+  flex: 0 0 10px;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: pink;
+  
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
+
+.mobile-menu-control {
+  display: none;
+  color: #6A7887;
+  font-size: 1.3em;
+  margin-top: 10px;
+  i {
+    margin-right: 3px;
+  }
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
+}
+
+.menu-open {
+  width: 315px;
+  flex: 0 0 315px;
+
+  @media (max-width: $lp-breakpoint) {
+    width: 365px;
+    flex: 0 0 365px;
+  }
 }
 .menu-title {
   color: #556271;
@@ -309,11 +423,19 @@ export default {
   font-weight: 600;
   line-height: 46.08px;
   letter-spacing: -0.44px;
+
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
 }
 .processes-info {
   width: 100%;
   margin-right: 16px;
   height: calc(100vh - 145px);
   padding-left: 32px;
+  
+  @media (max-width: $lp-breakpoint) {
+    padding-left: 0;
+  }
 }
 </style>
diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue
index 83a4aec20f..103bafa69f 100644
--- a/resources/js/processes-catalogue/components/menuCatologue.vue
+++ b/resources/js/processes-catalogue/components/menuCatologue.vue
@@ -3,6 +3,7 @@
     <SearchCategories
       ref="searchCategory"
       :filter-pmql="onFilter"
+      class="hide-on-mobile"
     />
     <div
       v-b-toggle.category-menu
@@ -48,6 +49,7 @@
         </p>
       </b-list-group>
     </b-collapse>
+    <div class="hide-on-mobile">
     <hr class="my-12">
     <div
       v-b-toggle.collapse-3
@@ -74,6 +76,7 @@
     <b-collapse
       id="collapse-3"
       visible
+      class="hide-on-mobile"
     >
       <b-list-group>
         <b-list-group-item
@@ -88,6 +91,7 @@
         </b-list-group-item>
       </b-list-group>
     </b-collapse>
+    </div>
 
     <select-template-modal
       ref="addProcessModal"
@@ -168,6 +172,14 @@ export default {
       this.selectDefault();
     }
   },
+  watch: {
+    selectedProcessItem: {
+      deep: true,
+      handler: function () {
+        this.$emit('selectedCategoryName', this.selectedProcessItem?.name);
+      },
+    }
+  },
   methods: {
     /**
      * Adding categories
@@ -256,6 +268,7 @@ export default {
 
 <style lang="scss" scoped>
 @import url("../../../sass/_scrollbar.scss");
+@import "~styles/variables";
 i {
   font-size: 20px;
   color: #6a7888;
@@ -313,4 +326,10 @@ i {
   padding: 12px 18px;
   gap: 16px;
 }
+
+.hide-on-mobile {
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
 </style>
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index bd6731d64a..8afd51b6f0 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -4,15 +4,6 @@
     class="card-process"
   >
     <b-card-text>
-      <div class="card-bookmark">
-        <i
-          :ref="`bookmark-${process.id}`"
-          v-b-tooltip.hover.bottom
-          :title="$t(labelTooltip)"
-          :class="bookmarkIcon()"
-          @click="checkBookmark(process)"
-        />
-      </div>
       <div
         class="card-info"
         @click="openInfo(process)"
@@ -37,6 +28,15 @@
           variant="custom"
         />
       </div>
+      <div class="card-bookmark">
+        <i
+          :ref="`bookmark-${process.id}`"
+          v-b-tooltip.hover.bottom
+          :title="$t(labelTooltip)"
+          :class="bookmarkIcon()"
+          @click="checkBookmark(process)"
+        />
+      </div>
     </b-card-text>
   </b-card>
 </template>
@@ -101,7 +101,10 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+
+@import '~styles/variables';
+
 .card-process {
   max-width: 343px;
   min-width: 296px;
@@ -111,6 +114,14 @@ export default {
   margin-right: 1rem;
   border-radius: 16px;
   background-image: url("/img/launchpad-images/process_background.svg");
+
+  @media (max-width: $lp-breakpoint) {
+    width: 100%;
+    max-width: none;
+    min-width: none;
+    border-radius: 8px;
+    height: 150px;
+  }
 }
 .card-process:hover {
   box-shadow: 0px 3px 16px 2px #acbdcf75;
@@ -119,6 +130,10 @@ export default {
   padding: 32px;
   height: 100%;
   width: 100%;
+
+  @media (max-width: $lp-breakpoint) {
+    padding: 16px;
+  }
 }
 .card-img {
   border-radius: 16px;
@@ -132,19 +147,37 @@ export default {
 }
 .card-text {
   height: 100%;
+  display: flex;
+  width: 100%;
+  
+  @media (max-width: $lp-breakpoint) {
+    align-items: center;
+  }
 }
 .card-info {
   cursor: pointer;
   height: 100%;
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: baseline;
   justify-content: flex-end;
+
+  @media (max-width: $lp-breakpoint) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: normal;
+  }
 }
 .icon-process {
   width: 48px;
   height: 48px;
   margin-bottom: 16px;
+
+  @media (max-width: $lp-breakpoint) {
+    margin-bottom: 0;
+    margin-right: 10px;
+  }
 }
 .marked {
   color: #f5bC00;
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index daf3e789fb..140d115001 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -140,3 +140,6 @@ $alertZIndex: 1051;
 $darkneutral: #42526E;
 $dangerlight: #FFEBE9;
 $successlight: #E6FFEB;
+
+// Launchpad Mobile Breakpoint
+$lp-breakpoint: 650px;
\ No newline at end of file
diff --git a/resources/views/layouts/navbarMobile.blade.php b/resources/views/layouts/navbarMobile.blade.php
index 96a56a88ea..54dc3eff4b 100644
--- a/resources/views/layouts/navbarMobile.blade.php
+++ b/resources/views/layouts/navbarMobile.blade.php
@@ -1,7 +1,7 @@
 @php
   $showPrincipalNavbar = 1;
 
-  if (Request::path() !== 'tasks' && Request::path() !== 'requests') {
+  if (Request::path() !== 'tasks' && Request::path() !== 'requests' && Request::path() !== 'process-browser') {
     $showPrincipalNavbar = 0;
   }
 @endphp
@@ -67,6 +67,11 @@ class="dropdown-item"
             'url' => route('requests.index'),
             'isActive' => Request::path() === 'requests',
           ],
+          [
+            'name' => __('Processes'),
+            'url' => route('process.browser.index'),
+            'isActive' => Request::path() === 'process-browser',
+          ],
         ];
       @endphp
       <!-- Nav tabs -->
diff --git a/resources/views/processes-catalogue/mobile.blade.php b/resources/views/processes-catalogue/mobile.blade.php
new file mode 100644
index 0000000000..c7a188f705
--- /dev/null
+++ b/resources/views/processes-catalogue/mobile.blade.php
@@ -0,0 +1,30 @@
+@extends('layouts.mobile')
+@section('title')
+{{__($title)}}
+@endsection
+@section('content_mobile')
+  <div class="px-3 page-content mb-0" id="processes-catalogue">
+    <processes-catalogue
+      :process="{{$process ?? 0}}"
+      :current-user-id="{{ \Auth::user()->id }}"
+      :permission="{{ \Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks', 'projects') }}"
+      :current-user="{{ \Auth::user() }}"
+      is-documenter-installed="{{\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled()}}"
+    >
+    </processes-catalogue>
+  </div>
+@endsection
+
+@section('js')
+  @foreach($manager->getScripts() as $script)
+    <script src="{{$script}}"></script>
+  @endforeach
+  <script src="{{mix('js/processes-catalogue/index.js')}}"></script>
+  <script>
+    window.Processmaker.user = @json($currentUser);
+  </script>
+@endsection
+
+@section('css')
+
+@endsection
diff --git a/webpack.mix.js b/webpack.mix.js
index 811935b1a2..b9343235ac 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -22,6 +22,7 @@ mix.webpackConfig({
     symlinks: false,
     alias: {
       "vue-monaco": path.resolve(__dirname, "resources/js/vue-monaco-amd.js"),
+      "styles": path.resolve(__dirname, "resources/sass"),
     },
   },
 });

From 45d3b65a8afbaf11691b3c6e9b3d6726615db5c6 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 23 May 2024 09:40:38 -0400
Subject: [PATCH 02/14] First progress on responsive images

---
 .../components/ProcessesCarousel.vue          | 201 +++++++++++++++---
 1 file changed, 170 insertions(+), 31 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index 603ebbaf6f..8b406bd790 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -1,35 +1,46 @@
 <template>
-  <div class="carousel-container">
-    <b-carousel
-      id="processes-carousel"
-      v-model="slide"
-      no-animation
-      :interval="interval"
-      indicators
-      @sliding-start="onSlideStart"
-      @sliding-end="onSlideEnd"
-    >
-      <b-carousel-slide
-        v-for="(image, index) in images.length > 0 ? images : defaultImage"
-        :key="index"
-      >
-        <template #img>
-          <iframe
-            v-if="image.type === 'embed'"
-            class="d-block iframe-carousel"
-            :src="image.url"
-            title="embed media"
-          />
-          <img
-            v-else
-            :src="image.url"
-            :alt="process.name"
-            class="d-block img-carousel"
-          >
-        </template>
-      </b-carousel-slide>
-    </b-carousel>
-  </div>
+    <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']}%`,
+        }">
+        <div
+            class="slides"
+            :style="{ transform: 'translateX(' + translateX + 'px)' }">
+            <div
+                class="slide"
+                v-for="(image, index) in images.length > 0 ? images : defaultImage"
+               :key="index">
+                <!-- <div
+                    ref="slides"
+                    class="content">
+                    {{ image.url }}
+                </div> -->
+                <img
+                  ref="slides"
+                  :src="image.url"
+                  :alt="process.name"
+                  class="content"
+                >
+            </div>
+        </div>
+        <button
+            class="prev"
+            @click="prevSlide">
+            Prev
+        </button>
+        <button
+            class="next"
+            @click="nextSlide">
+            Next
+        </button>
+    </div>
 </template>
 
 <script>
@@ -47,8 +58,39 @@ export default {
       images: [],
       defaultImage: Array(4).fill({ url: "/img/launchpad-images/defaultImage.svg" }),
       interval: 0,
+      resizeObserver: null,
+      items: [
+        { id: 1, text: "Slide 1" },
+        { id: 2, text: "Slide 2" },
+        { id: 3, text: "Slide 3" },
+        { id: 1, text: "Slide 4" },
+        { id: 2, text: "Slide 5" },
+        { id: 3, text: "Slide 6" },
+        { id: 1, text: "Slide 7" },
+        { id: 2, text: "Slide 8" },
+        { id: 3, text: "Slide 9" },
+        { id: 1, text: "Slide 10" },
+        { id: 2, text: "Slide 11" },
+        { id: 3, text: "Slide 12" },
+        // Add more items as needed
+      ],
+      currentIndex: 0,
+      slideWidth: 0,
+      translateX: 0,
+      sizes: {
+        sm: 1,
+        md: 2,
+        lg: 3,
+        xl: 3,
+        "2xl": 3,
+      },
     };
   },
+  computed: {
+    slideCount() {
+      return this.items.length;
+    },
+  },
   mounted() {
     this.getLaunchpadImages();
     ProcessMaker.EventBus.$on("getLaunchpadImagesEvent", ({ indexImage, type }) => {
@@ -59,6 +101,12 @@ export default {
         this.getLaunchpadImages();
       }
     });
+    this.slideWidth = this.$refs.slides[0].offsetWidth;
+    this.resizeObserver = new ResizeObserver(this.updateSlideWidth);
+    this.resizeObserver.observe(this.$refs.containercarousel);
+  },
+  destroyed() {
+    this.resizeObserver.unobserve(this.$refs.containercarousel);
   },
   methods: {
     onSlideStart(slide) {
@@ -96,6 +144,22 @@ export default {
           console.error(error);
         });
     },
+    updateSlideWidth() {
+      this.slideWidth = this.$refs.slides[0].offsetWidth;
+      this.translateX = this.slideWidth*(-this.currentIndex);
+    },
+    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>
@@ -142,3 +206,78 @@ export default {
   }
 }
 </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%;
+}
+
+.content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px; /* Adjust height as needed */
+    background-color: #ccc;
+}
+
+.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;
+}
+
+@container (min-width: 640px) {
+    .slide {
+        width: var(--var-sizes-sm);
+    }
+}
+
+@container (min-width: 768px) {
+    .slide {
+        width: var(--var-sizes-md);
+    }
+}
+
+@container (min-width: 1024px) {
+    .slide {
+        width: var(--var-sizes-lg);
+    }
+}
+
+@container (min-width: 1280px) {
+    .slide {
+        width: var(--var-sizes-xl);
+    }
+}
+
+@container (min-width: 1536px) {
+    .slide {
+        width: var(--var-sizes-2xl);
+    }
+}
+</style>

From 9609dd80435dc208d92fc92766a00cdc300f560e Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Mon, 27 May 2024 16:39:57 -0400
Subject: [PATCH 03/14] Saving progress 1

---
 .../components/ProcessCollapseInfo.vue        |  25 +-
 .../components/ProcessOptions.vue             |  20 +-
 .../components/ProcessesCarousel.vue          | 306 +++++++++---------
 .../optionsMenu/ChartSaveSearch.vue           |  10 +
 .../optionsMenu/ProcessDescription.vue        |  81 +++++
 5 files changed, 288 insertions(+), 154 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..6b35486343 100644
--- a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
@@ -64,7 +64,7 @@
       >
         <div class="info-collapse">
           <div class="row">
-            <div class="col-sm-9">
+            <!-- <div class="col-sm-9">
               <p class="title-process">
                 {{ process.name }}
               </p>
@@ -87,7 +87,7 @@
                   ...
                 </a>
               </p>
-            </div>
+            </div> -->
             <div class="wizard-container col-sm-3">
               <div class="wizard">
                 <b-button
@@ -106,12 +106,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 +285,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 8b406bd790..d118d31126 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -1,48 +1,59 @@
 <template>
+  <div class="h-100 w-100">
+    <button
+      class="prev"
+      @click="prevSlide"
+    >
+      <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']}%`,
-        }">
+      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)' }"
+      >
         <div
-            class="slides"
-            :style="{ transform: 'translateX(' + translateX + 'px)' }">
-            <div
-                class="slide"
-                v-for="(image, index) in images.length > 0 ? images : defaultImage"
-               :key="index">
-                <!-- <div
-                    ref="slides"
-                    class="content">
-                    {{ image.url }}
-                </div> -->
-                <img
-                  ref="slides"
-                  :src="image.url"
-                  :alt="process.name"
-                  class="content"
-                >
-            </div>
+          class="slide"
+          v-for="(image, index) in images.length > 0 ? images : defaultImage"
+          :key="index"
+        >
+          <iframe
+            v-if="image.type === 'embed'"
+            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"
+          />
         </div>
-        <button
-            class="prev"
-            @click="prevSlide">
-            Prev
-        </button>
-        <button
-            class="next"
-            @click="nextSlide">
-            Next
-        </button>
+      </div>
     </div>
+  </div>
 </template>
-
 <script>
 export default {
   props: {
@@ -56,51 +67,42 @@ export default {
       slide: 0,
       sliding: null,
       images: [],
-      defaultImage: Array(4).fill({ url: "/img/launchpad-images/defaultImage.svg" }),
+      defaultImage: Array(4).fill({
+        url: "/img/launchpad-images/defaultImage.svg",
+      }),
       interval: 0,
       resizeObserver: null,
-      items: [
-        { id: 1, text: "Slide 1" },
-        { id: 2, text: "Slide 2" },
-        { id: 3, text: "Slide 3" },
-        { id: 1, text: "Slide 4" },
-        { id: 2, text: "Slide 5" },
-        { id: 3, text: "Slide 6" },
-        { id: 1, text: "Slide 7" },
-        { id: 2, text: "Slide 8" },
-        { id: 3, text: "Slide 9" },
-        { id: 1, text: "Slide 10" },
-        { id: 2, text: "Slide 11" },
-        { id: 3, text: "Slide 12" },
-        // Add more items as needed
-      ],
       currentIndex: 0,
       slideWidth: 0,
       translateX: 0,
       sizes: {
         sm: 1,
-        md: 2,
-        lg: 3,
-        xl: 3,
-        "2xl": 3,
+        md: 1,
+        lg: 2,
+        xl: 2,
+        "2xl": 2,
+        "3xl": 3,
       },
     };
   },
   computed: {
     slideCount() {
-      return this.items.length;
+      return this.images.length;
     },
   },
   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.slideWidth = this.$refs.slides[0].offsetWidth;
     this.resizeObserver = new ResizeObserver(this.updateSlideWidth);
     this.resizeObserver.observe(this.$refs.containercarousel);
@@ -109,12 +111,6 @@ export default {
     this.resizeObserver.unobserve(this.$refs.containercarousel);
   },
   methods: {
-    onSlideStart(slide) {
-      this.sliding = true;
-    },
-    onSlideEnd(slide) {
-      this.sliding = false;
-    },
     /**
      * Get images from Media library related to process.
      */
@@ -145,8 +141,8 @@ export default {
         });
     },
     updateSlideWidth() {
-      this.slideWidth = this.$refs.slides[0].offsetWidth;
-      this.translateX = this.slideWidth*(-this.currentIndex);
+      this.slideWidth = this.$refs.slides[0].offsetWidth + 11;
+      this.translateX = this.slideWidth * -this.currentIndex - 10;
     },
     prevSlide() {
       if (this.currentIndex > 0) {
@@ -167,117 +163,137 @@ 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 {
+ 
+    border: 2px solid red;
+  }
+}
+@media (width <= 1920px) {
+  .img-carousel {
+  
+    border: 2px solid teal;
+  }
+}
+@media (width <= 1440px) {
   .img-carousel {
-    max-width: 700px;
+   
+    border: 2px solid chartreuse;
   }
 }
-@media (width <= 1366px) {
+@media (width <= 1280px) {
   .img-carousel {
-    max-width: 590px;
+   
+    height: auto;
+    border: 2px solid blueviolet;
+  }
+}
+@media (width <= 1024px) {
+  .img-carousel {
+  
+    height: auto;
+    border: 2px solid turquoise;
   }
 }
-@media (width <= 1200px) {
+@media (width <= 768px) {
   .img-carousel {
-    max-width: 513px;
+  
     height: auto;
+    border: 2px solid gold;
   }
 }
-@media (width <= 992px) {
+@media (width <= 640px) {
   .img-carousel {
-    max-width: 486px;
+  
     height: auto;
+    border: 2px solid green;
   }
 }
 </style>
 <style>
 .carousel {
-    position: relative;
-    overflow: hidden;
-    container-type: inline-size;
+  position: relative;
+  overflow: hidden;
+  container-type: inline-size;
 }
-
 .slides {
-    display: flex;
-    transition: transform 0.3s ease;
+  display: flex;
+  transition: transform 0.3s ease;
 }
-
 .slide {
-    flex: 0 0 auto;
-    width: 100%;
+  flex: 0 0 auto;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
 }
-
 .content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 200px; /* Adjust height as needed */
-    background-color: #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ccc;
 }
 
 .prev,
 .next {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: #333;
-    color: #fff;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  color: #556271;
 }
-
 .prev {
-    left: 0;
+  left: -10px;
+  background-color: #fff;
 }
-
 .next {
-    right: 0;
+  right: 10px;
+  background-color: #fff;
 }
-
-@container (min-width: 640px) {
-    .slide {
-        width: var(--var-sizes-sm);
-    }
+@media (min-width: 640px) {
+  .slide {
+    width: var(--var-sizes-sm);
+  }
 }
-
-@container (min-width: 768px) {
-    .slide {
-        width: var(--var-sizes-md);
-    }
+@media (min-width: 768px) {
+  .slide {
+    width: var(--var-sizes-md);
+  }
 }
-
-@container (min-width: 1024px) {
-    .slide {
-        width: var(--var-sizes-lg);
-    }
+@media (min-width: 1024px) {
+  .slide {
+    width: var(--var-sizes-lg);
+  }
 }
-
-@container (min-width: 1280px) {
-    .slide {
-        width: var(--var-sizes-xl);
-    }
+@media (min-width: 1280px) {
+  .slide {
+    width: var(--var-sizes-xl);
+  }
 }
-
-@container (min-width: 1536px) {
-    .slide {
-        width: var(--var-sizes-2xl);
-    }
+@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/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..f444643ce5
--- /dev/null
+++ b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="process-description">
+    <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>
+  </div>
+</template>
+<script>
+export default {
+  props: ["process"],
+  data() {
+    return {
+      count: 0,
+    };
+  },
+  mounted() {
+    //this.fetch();
+  },
+  methods: {
+    fetch() {
+      ProcessMaker.apiClient
+        .get(`requests/${this.process.id}/count`)
+        .then((response) => {
+          this.count = response.data.meta.total;
+        })
+        .catch(() => {
+          this.count = 0;
+        });
+    },
+  },
+};
+</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 a129d217f3b1ab09da73b61fd2e384928415e525 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 28 May 2024 11:54:02 -0400
Subject: [PATCH 04/14] ready for PR

---
 .../components/ProcessesCarousel.vue          | 62 +++++++++-------
 .../components/ProcessesCatalogue.vue         |  6 ++
 .../optionsMenu/ProcessDescription.vue        | 71 ++++++++-----------
 3 files changed, 74 insertions(+), 65 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index d118d31126..e38e4a5fa9 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="h-100 w-100">
+  <div
+    v-show="imagesLoaded"
+    class="h-100 w-100"
+  >
     <button
       class="prev"
       @click="prevSlide"
@@ -67,6 +70,7 @@ export default {
       slide: 0,
       sliding: null,
       images: [],
+      imagesLoaded: true,
       defaultImage: Array(4).fill({
         url: "/img/launchpad-images/defaultImage.svg",
       }),
@@ -87,7 +91,7 @@ export default {
   },
   computed: {
     slideCount() {
-      return this.images.length;
+      return this.images.length - 1;
     },
   },
   mounted() {
@@ -103,12 +107,21 @@ export default {
         }
       }
     );
-    this.slideWidth = this.$refs.slides[0].offsetWidth;
-    this.resizeObserver = new ResizeObserver(this.updateSlideWidth);
-    this.resizeObserver.observe(this.$refs.containercarousel);
+    this.$nextTick(() => {
+      this.updateSlideWidth();
+      this.resizeObserver = new ResizeObserver(this.updateSlideWidth);
+      if (this.$refs.containercarousel) {
+        this.resizeObserver.observe(this.$refs.containercarousel);
+      }
+    });
   },
-  destroyed() {
-    this.resizeObserver.unobserve(this.$refs.containercarousel);
+  beforeDestroy() {
+    if (this.resizeObserver && this.$refs.containercarousel) {
+      this.resizeObserver.unobserve(this.$refs.containercarousel);
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   },
   methods: {
     /**
@@ -135,14 +148,29 @@ 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() {
-      this.slideWidth = this.$refs.slides[0].offsetWidth + 11;
-      this.translateX = this.slideWidth * -this.currentIndex - 10;
+      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) {
@@ -180,48 +208,34 @@ export default {
 
 @media (width <= 2560px) {
   .img-carousel {
- 
-    border: 2px solid red;
   }
 }
 @media (width <= 1920px) {
   .img-carousel {
-  
-    border: 2px solid teal;
   }
 }
 @media (width <= 1440px) {
   .img-carousel {
-   
-    border: 2px solid chartreuse;
   }
 }
 @media (width <= 1280px) {
   .img-carousel {
-   
     height: auto;
-    border: 2px solid blueviolet;
   }
 }
 @media (width <= 1024px) {
   .img-carousel {
-  
     height: auto;
-    border: 2px solid turquoise;
   }
 }
 @media (width <= 768px) {
   .img-carousel {
-  
     height: auto;
-    border: 2px solid gold;
   }
 }
 @media (width <= 640px) {
   .img-carousel {
-  
     height: auto;
-    border: 2px solid green;
   }
 }
 </style>
@@ -263,7 +277,7 @@ export default {
   background-color: #fff;
 }
 .next {
-  right: 10px;
+  right: 4px;
   background-color: #fff;
 }
 @media (min-width: 640px) {
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/ProcessDescription.vue b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
index f444643ce5..5186553335 100644
--- a/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
+++ b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
@@ -1,55 +1,44 @@
 <template>
-  <div class="process-description">
     <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>
-  </div>
+      <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 {
-      count: 0,
+      readActivated: false,
+      largeDescription: false,
     };
   },
-  mounted() {
-    //this.fetch();
-  },
   methods: {
-    fetch() {
-      ProcessMaker.apiClient
-        .get(`requests/${this.process.id}/count`)
-        .then((response) => {
-          this.count = response.data.meta.total;
-        })
-        .catch(() => {
-          this.count = 0;
-        });
+    activateReadMore() {
+      this.readActivated = true;
     },
   },
 };

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 05/14] 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 06/14] 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 07/14] 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;

From aeb79b6440e95a924d6874a2759af0b416559a44 Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Tue, 28 May 2024 16:05:36 -0700
Subject: [PATCH 08/14] Add recent cases and active case count

---
 .../Api/ProcessLaunchpadController.php        | 12 +++---
 ProcessMaker/Models/Process.php               | 39 ++++++++++++++---
 .../components/ProcessesCatalogue.vue         | 43 ++++++++++++++++---
 .../components/utils/Card.vue                 | 23 +++++++++-
 resources/lang/en.json                        |  3 +-
 5 files changed, 99 insertions(+), 21 deletions(-)

diff --git a/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php b/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
index a25e7452e6..6346f0486f 100644
--- a/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
+++ b/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
@@ -24,7 +24,9 @@ public function getProcesses(Request $request)
         $processes = Process::nonSystem()->active();
         // Filter by category
         $category = $request->input('category', null);
-        if (!empty($category)) {
+        if ($category === 'recent') {
+            $processes->orderByRecentRequests();
+        } elseif (!empty($category)) {
             $processes->processCategory($category);
         }
         // Filter pmql
@@ -44,6 +46,7 @@ public function getProcesses(Request $request)
         // Get the processes
         $processes = $processes
             ->select('processes.*')
+            ->withRequestCount()
             ->orderBy('processes.name', 'asc')
             ->paginate($perPage);
 
@@ -120,9 +123,9 @@ public function destroy(ProcessLaunchpad $launch)
         return response([], 204);
     }
 
-   /**
-    * Store the elements related to the carousel [IMAGE, EMBED URL]
-    */
+    /**
+     * Store the elements related to the carousel [IMAGE, EMBED URL]
+     */
     public function saveContentCarousel(Request $request, Process $process)
     {
         $contentCarousel = $request->input('imagesCarousel');
@@ -144,7 +147,6 @@ public function saveContentCarousel(Request $request, Process $process)
                         // Nothing
                         break;
                 }
-
             }
         }
     }
diff --git a/ProcessMaker/Models/Process.php b/ProcessMaker/Models/Process.php
index efa6d91c04..a4769090d3 100644
--- a/ProcessMaker/Models/Process.php
+++ b/ProcessMaker/Models/Process.php
@@ -1175,7 +1175,7 @@ public function manageCustomRoutes()
                                         'params' => $webentryRouteConfig->parameters,
                                     ]
                                 );
-                            } catch (\Exception $e) {
+                            } catch (Exception $e) {
                                 \Log::info('*** Error: ' . $e->getMessage());
                             }
                         }
@@ -1250,7 +1250,7 @@ private function getStartEventPermissions(User $user)
     /**
      * Process events relationship.
      *
-     * @return \ProcessMaker\Models\ProcessEvents
+     * @return ProcessEvents
      */
     public function events()
     {
@@ -1287,7 +1287,7 @@ public function launchpad()
     /**
      * Assignments of the process.
      *
-     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     * @return HasMany
      */
     public function assignments()
     {
@@ -1616,7 +1616,7 @@ private function validateSchema(BpmnDocument $document)
     private function deleteUnusedCustomRoutes($url, $processId, $nodeId)
     {
         // Delete unused custom routes
-        $customRoute = webentryRoute::where('process_id', $processId)->where('node_id', $nodeId)->first();
+        $customRoute = WebentryRoute::where('process_id', $processId)->where('node_id', $nodeId)->first();
         if ($customRoute) {
             $customRoute->delete();
         }
@@ -1751,9 +1751,9 @@ public function scopeFilter($query, $filterStr)
                  ->orWhere('processes.description', 'like', $filter)
                  ->orWhere('processes.status', '=', $filterStr)
                  ->orWhereHas('user', function ($query) use ($filter) {
-                    $query->where('firstname', 'like', $filter)
-                        ->orWhere('lastname', 'like', $filter);
-                })
+                     $query->where('firstname', 'like', $filter)
+                         ->orWhere('lastname', 'like', $filter);
+                 })
                  ->orWhereIn('processes.id', function ($qry) use ($filter) {
                      $qry->select('assignable_id')
                          ->from('category_assignments')
@@ -1797,4 +1797,29 @@ public function hasAlternative()
     {
         return true;
     }
+
+    public function scopeOrderByRecentRequests($query)
+    {
+        return $query->orderByDesc(
+            ProcessRequest::select('id')
+                // User has participated
+                ->whereHas('tokens', function ($q) {
+                    $q->where('user_id', Auth::user()->id);
+                })
+                ->whereColumn('process_id', 'processes.id')
+                ->orderByDesc('id') // using ID because created_at is not indexed
+                ->limit(1)
+        );
+    }
+
+    public function scopeWithRequestCount($query)
+    {
+        return $query->withCount(['requests' => function ($query) {
+            return $query->where('status', 'ACTIVE')
+                // User has participated
+                ->whereHas('tokens', function ($q) {
+                    $q->where('user_id', Auth::user()->id);
+                });
+        }]);
+    }
 }
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 275300c8c8..fff9a48e08 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -35,8 +35,10 @@
           </div>
         </div>
       </div>
-      <div class="slide-control">
-        <a href="#" @click="showMenu = !showMenu">M</a>
+      <div class="slide-control" :class="{ 'slide-control-open' : showMenu }">
+        <a href="#" @click="showMenu = !showMenu">
+          <i class="fa" :class="{ 'fa-caret-right' : !showMenu, 'fa-caret-left' : showMenu }"></i>
+        </a>
       </div>
       <div class="processes-info">
         <div
@@ -108,15 +110,17 @@ export default {
       isMobile: window.screen.width < 650,
       listCategories: [],
       defaultOptions: [
+        {
+          id: 'recent',
+          name: this.$t("Recent Cases"),
+        },
         {
           id: -1,
           name: this.$t("All Processes"),
-          status: "ACTIVE",
         },
         {
           id: 0,
           name: this.$t("My Bookmarks"),
-          status: "ACTIVE",
         },
       ],
       fields: [],
@@ -369,7 +373,6 @@ export default {
     display: flex;
     .container-2 {
       background-color: #F7F9FB;
-      border-right: 2px solid rgba(0, 0, 0, 0.1);
       flex: 0 0 315px;
     }
 
@@ -386,12 +389,38 @@ export default {
 }
 .slide-control {
   flex: 0 0 10px;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: pink;
+  border-left: 0;
+  border-right: 1px solid #DEE0E1;
   
   @media (max-width: $lp-breakpoint) {
     display: none;
   }
+
+  a {
+    position: relative;
+    left: 6px;
+    top: 40px;
+    z-index: 5;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 40px;
+    background-color: #ffffff;
+    border-radius: 6px;
+    border: 1px solid #DEE0E1;
+  }
+}
+
+.slide-control-open {
+  border-right: 0;
+  border-left: 1px solid #DEE0E1;
+
+  a {
+    left: -6px;
+  }
+  
 }
 
 .mobile-menu-control {
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index 8afd51b6f0..31fc32815b 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -28,6 +28,9 @@
           variant="custom"
         />
       </div>
+      <div class="requests-count" v-if="process.requests_count">
+        {{ process.requests_count }}
+      </div>
       <div class="card-bookmark">
         <i
           :ref="`bookmark-${process.id}`"
@@ -120,7 +123,7 @@ export default {
     max-width: none;
     min-width: none;
     border-radius: 8px;
-    height: 150px;
+    height: 100px;
   }
 }
 .card-process:hover {
@@ -138,6 +141,24 @@ export default {
 .card-img {
   border-radius: 16px;
 }
+.requests-count {
+  display: none;
+  float: right;
+  font-size: 14px;
+  font-weight: bold;
+  background-color: #F9E7C3;
+  margin-right: 8px;
+  
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  justify-content: center;
+  align-items: center;
+
+  @media (max-width: $lp-breakpoint) {
+    display: flex;
+  }
+}
 .card-bookmark {
   float: right;
   font-size: 24px;
diff --git a/resources/lang/en.json b/resources/lang/en.json
index 0c29908269..ac7e6ba2bd 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -2259,5 +2259,6 @@
   "Your In-Progress tasks in the saved search {{title}}": "Your In-Progress tasks in the saved search {{title}}",
   "Choose a saved search to see the tasks that you can use with an Inbox Rule.": "Choose a saved search to see the tasks that you can use with an Inbox Rule.",
   "No tasks to show.": "No tasks to show.",
-  "But that's OK. You can still create this this Inbox Rule to apply to future tasks that match the above filters.": "But that's OK. You can still create this this Inbox Rule to apply to future tasks that match the above filters."
+  "But that's OK. You can still create this this Inbox Rule to apply to future tasks that match the above filters.": "But that's OK. You can still create this this Inbox Rule to apply to future tasks that match the above filters.",
+  "Recent Cases": "Recent Cases"
 }

From da4ddb50a2d8c63daf3434dda55d90ac2586341c Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 29 May 2024 17:27:29 -0400
Subject: [PATCH 09/14] Saving Progress

---
 .../components/ProcessCollapseInfo.vue        | 41 ++++++--------
 .../components/ProcessInfo.vue                | 38 +++++++++++++
 .../components/ProcessesCarousel.vue          | 54 ++++++++++++++++++-
 .../components/ProcessesCatalogue.vue         |  6 ++-
 4 files changed, 112 insertions(+), 27 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
index 6b35486343..cadb37b7eb 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
@@ -109,6 +85,7 @@
             <b-col class="process-carousel col-12">
               <processes-carousel
                 :process="process"
+                :full-carousel="{ url: null, hideLaunchpad: false }"
               />
             </b-col>
             <b-col class="process-options col-12">
@@ -118,6 +95,22 @@
         </div>
       </div>
     </div>
+    
+    <!-- <div w-90 h-90 v-show="false">
+      <div class="card card-body">
+      <div class="d-flex justify-content-between">
+        <div class="d-flex align-items-center">
+          <i class="fas fa-angle-left"
+          @click="goBack"/>
+          <span style="margin-left: 10px;">Process Name 1 of 4</span>
+        </div>
+      </div>
+      </div>
+      <processes-carousel
+        :process="process"
+        :full-carousel="true"
+      />
+    </div> -->
     <create-template-modal
       id="create-template-modal"
       ref="create-template-modal"
diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index a4699a9fcb..f4311eee2a 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="process-info-main">
     <process-collapse-info
+      v-show="hideLaunchpad"
       :process="process"
       :permission="permission"
       :current-user-id="currentUserId"
@@ -8,20 +9,41 @@
       @goBackCategory="goBackCategory"
     />
     <process-tab
+      v-show="hideLaunchpad"
       :current-user="currentUser"
       :process="process"
     />
+
+    <div w-100 h-100 v-show="!hideLaunchpad">
+      <div class="card card-body">
+      <div class="d-flex justify-content-between">
+        <div class="d-flex align-items-center">
+          <i class="fas fa-angle-left"
+          @click="closeFullCarousel"
+          />
+          <span style="margin-left: 10px;">{{ process.name }} {{ this.firstImage }} of {{ this.lastImage }}</span>
+        </div>
+      </div>
+      </div>
+      <processes-carousel
+        :process="process"
+        :full-carousel="{ url: null, hideLaunchpad: true }"
+        :index-selected-image="indexSelectedImage"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import ProcessCollapseInfo from "./ProcessCollapseInfo.vue";
 import ProcessTab from "./ProcessTab.vue";
+import ProcessesCarousel from "./ProcessesCarousel.vue";
 
 export default {
   components: {
     ProcessCollapseInfo,
     ProcessTab,
+    ProcessesCarousel,
   },
   props: ["process", "permission", "isDocumenterInstalled", "currentUserId", "currentUser"],
   data() {
@@ -29,6 +51,10 @@ export default {
       listCategories: [],
       selectCategory: 0,
       dataOptions: {},
+      hideLaunchpad: true,
+      firstImage: 1,
+      lastImage: null,
+      indexSelectedImage: 0,
     };
   },
   mounted() {
@@ -36,6 +62,11 @@ export default {
       id: this.process.id.toString(),
       type: "Process",
     };
+    this.$root.$on("clickCarouselImage", (val) => {
+      this.hideLaunchpad = !val.hideLaunchpad;
+      this.lastImage = val.objectImages.length;
+      this.indexSelectedImage = val.imagePosition;
+    });
   },
   methods: {
     /**
@@ -44,6 +75,13 @@ export default {
     goBackCategory() {
       this.$emit("goBackCategory");
     },
+    closeFullCarousel() {
+      const data = {
+        "url" : null,
+        "hideLaunchpad" : false,
+      };
+      this.$root.$emit("clickCarouselImage", false);
+    }
   },
 };
 </script>
diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index e38e4a5fa9..91a497fc85 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -41,9 +41,10 @@
           <iframe
             v-if="image.type === 'embed'"
             ref="slides"
-            class="content d-block iframe-carousel"
+            class="content iframe-carousel"
             :src="image.url"
             title="embed media"
+            @click="handleClick(image.url, index)"
           />
           <img
             v-else
@@ -51,6 +52,7 @@
             class="content img-carousel"
             :src="image.url"
             :alt="process.name"
+            @click="handleClick(image.url, index)"
           />
         </div>
       </div>
@@ -64,9 +66,18 @@ export default {
       type: Object,
       required: true,
     },
+    fullCarousel: {
+      type: Object,
+      default: null,
+    },
+    indexSelectedImage: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
+      discountSlide: 1,
       slide: 0,
       sliding: null,
       images: [],
@@ -89,9 +100,39 @@ export default {
       },
     };
   },
+  watch: {
+    'fullCarousel.hideLaunchpad': {
+      immediate: true,
+      handler(value) {
+        if (value) {
+          this.sizes = {
+            sm: 1,
+            md: 1,
+            lg: 1,
+            xl: 1,
+            "2xl": 1,
+            "3xl": 1,
+          };
+          this.discountSlide = 0;
+        } 
+      }
+    },
+    indexSelectedImage() {
+      console.log("Indice de la imagen selecionada: ", this.indexSelectedImage);
+      console.log("Indice actual en pantalla: ", this.currentIndex);
+      if (this.indexSelectedImage > this.currentIndex) {
+        this.currentIndex = this.indexSelectedImage - 1;
+        this.nextSlide();
+      }
+      if (this.indexSelectedImage < this.currentIndex) {
+        this.currentIndex--;
+        this.prevSlide();
+      }
+    },
+  },
   computed: {
     slideCount() {
-      return this.images.length - 1;
+      return this.images.length - this.discountSlide;
     },
   },
   mounted() {
@@ -124,6 +165,15 @@ export default {
     }
   },
   methods: {
+    handleClick(url, index) {
+      const data = {
+        "url" : url,
+        "hideLaunchpad" : true,
+        "objectImages" : this.images,
+        "imagePosition" : index,
+      };
+      this.$root.$emit("clickCarouselImage", data);
+    },
     /**
      * Get images from Media library related to process.
      */
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 2dc584ce27..efaee8e18c 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -7,7 +7,7 @@
       :template="guidedTemplates ? 'Guided Templates' : ''"
     />
     <div class="d-flex">
-      <div class="menu">
+      <div class="menu" v-show="hideLaunchpad">
         <span class="pl-3 menu-title"> {{ $t('Process Browser') }} </span>
         <MenuCatologue
           ref="categoryList"
@@ -113,6 +113,7 @@ export default {
       markCategory: false,
       fromProcessList: false,
       categoryCount: 0,
+      hideLaunchpad: true,
     };
   },
   mounted() {
@@ -126,6 +127,9 @@ export default {
         this.$refs.categoryList.selectTemplateItem();
       }
     }, 500);
+    this.$root.$on("clickCarouselImage", (val) => {
+        this.hideLaunchpad = !val.hideLaunchpad;
+    });
   },
   methods: {
     /**

From e96a71c9ad0b0db0a5ebd6fab7a629ea2f7ac15c Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Wed, 29 May 2024 14:45:31 -0700
Subject: [PATCH 10/14] Update slide out menus

---
 .../components/ProcessesCatalogue.vue         | 145 ++++++++++--------
 .../components/menuCatologue.vue              |   2 -
 2 files changed, 82 insertions(+), 65 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index fff9a48e08..ab5c6c7a2c 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -6,36 +6,33 @@
       :process="selectedProcess ? selectedProcess.name : ''"
       :template="guidedTemplates ? 'Guided Templates' : ''"
     />
-    <div class="main">
-      <div class="menu" :class="{ 'menu-open' : showMenu }">
-        <div class="container-1">
-          <div class="container-2">
-            <span class="pl-3 menu-title"> {{ $t('Process Browser') }} </span>
-            <MenuCatologue
-              ref="categoryList"
-              title="Available Processes"
-              preicon="fas fa-play-circle"
-              class="mt-3"
-              show-bookmark="true"
-              :category-count="categoryCount"
-              :data="listCategories"
-              :from-process-list="fromProcessList"
-              :select="selectCategorie"
-              :filter-categories="filterCategories"
-              :permission="permission"
-              @wizardLinkSelect="wizardTemplatesSelected"
-              @addCategories="addCategories"
-              @selectedCategoryName="selectedCategoryName = $event"
-            />
-          </div>
-          <div class="mobile-slide-close" v-if="showMenu">
-            <b-button variant="secondary" @click="showMenu = false">
-              <i class="fa fa-times"></i>
-            </b-button>
-          </div>
+    <div class="menu-mask" :class="{ 'menu-open' : showMenu }"></div>
+    <div class="main" :class="{ 'menu-open' : showMenu }">
+      <div class="menu">
+        <span class="pl-3 menu-title"> {{ $t('Process Browser') }} </span>
+        <MenuCatologue
+          ref="categoryList"
+          title="Available Processes"
+          preicon="fas fa-play-circle"
+          class="pt-3 menu-catalog"
+          show-bookmark="true"
+          :category-count="categoryCount"
+          :data="listCategories"
+          :from-process-list="fromProcessList"
+          :select="selectCategorie"
+          :filter-categories="filterCategories"
+          :permission="permission"
+          @wizardLinkSelect="wizardTemplatesSelected"
+          @addCategories="addCategories"
+          @selectedCategoryName="selectedCategoryName = $event"
+        />
+        <div class="mobile-slide-close">
+          <b-button variant="light" @click="showMenu = false" size="lg">
+            <i class="fa fa-times"></i>
+          </b-button>
         </div>
       </div>
-      <div class="slide-control" :class="{ 'slide-control-open' : showMenu }">
+      <div class="slide-control">
         <a href="#" @click="showMenu = !showMenu">
           <i class="fa" :class="{ 'fa-caret-right' : !showMenu, 'fa-caret-left' : showMenu }"></i>
         </a>
@@ -354,43 +351,72 @@ export default {
 }
 
 .menu {
-  width: 0px;
-  flex: 0 0 0px;
+  left: -100%;
   height: calc(100vh - 145px);
   overflow: hidden;
   margin-top: 15px;
-  transition: width 0.2s, flex 0.2s;
+  transition: flex 0.3s;
+  flex: 0 0 315px;
+
+  .menu-catalog {
+    background-color: #F7F9FB;
+    flex: 1;
+    width: 315px;
+  }
 
   @media (max-width: $lp-breakpoint) {
     position: absolute;
     z-index: 4; // above pagination
     display: flex;
     margin-top: 0;
+    width: 85%;
+    transition: left 0.3s;
   }
+}
+
+.menu-mask {
+  display: none;
+  position: absolute;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 3;
+  transition: background-color 0.3s;
   
-  .container-1 {
-    // width: 315px;
-    display: flex;
-    .container-2 {
-      background-color: #F7F9FB;
-      flex: 0 0 315px;
-    }
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
+}
 
-    .mobile-slide-close {
-      display: none;
-      padding-left: 10px;
-      padding-top: 10px;
-      @media (max-width: $lp-breakpoint) {
-        display: block;
-      }
-    }
-      
+.menu-mask.menu-open {
+  @media (max-width: $lp-breakpoint) {
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: block;
   }
 }
+
+.menu-open .menu {
+  flex: 0 0 0px;
+  @media (max-width: $lp-breakpoint) {
+    left: 0%;
+  }
+}
+
+.mobile-slide-close {
+  display: none;
+  padding-left: 10px;
+  padding-top: 10px;
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
+}
+
 .slide-control {
-  flex: 0 0 10px;
   border-left: 0;
   border-right: 1px solid #DEE0E1;
+  margin-left: 10px;
   
   @media (max-width: $lp-breakpoint) {
     display: none;
@@ -398,27 +424,27 @@ export default {
 
   a {
     position: relative;
-    left: 6px;
+    left: 10px;
     top: 40px;
     z-index: 5;
 
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 12px;
-    height: 40px;
+    width: 20px;
+    height: 60px;
     background-color: #ffffff;
-    border-radius: 6px;
+    border-radius: 10px;
     border: 1px solid #DEE0E1;
   }
 }
 
-.slide-control-open {
+.menu-open .slide-control {
   border-right: 0;
   border-left: 1px solid #DEE0E1;
 
   a {
-    left: -6px;
+    left: -10px;
   }
   
 }
@@ -436,15 +462,6 @@ export default {
   }
 }
 
-.menu-open {
-  width: 315px;
-  flex: 0 0 315px;
-
-  @media (max-width: $lp-breakpoint) {
-    width: 365px;
-    flex: 0 0 365px;
-  }
-}
 .menu-title {
   color: #556271;
   font-size: 22px;
@@ -452,6 +469,8 @@ export default {
   font-weight: 600;
   line-height: 46.08px;
   letter-spacing: -0.44px;
+  display: block;
+  width: 315px;
 
   @media (max-width: $lp-breakpoint) {
     display: none;
diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue
index 103bafa69f..12042c38f2 100644
--- a/resources/js/processes-catalogue/components/menuCatologue.vue
+++ b/resources/js/processes-catalogue/components/menuCatologue.vue
@@ -274,8 +274,6 @@ i {
   color: #6a7888;
 }
 #category-menu > .list-group {
-  max-height: 37vh;
-  min-height: 37vh;
   overflow-y: auto;
 }
 .list-group-item {

From f32f94e900cb6c8827c094716434ecfe696ec17d Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Fri, 31 May 2024 10:50:22 -0700
Subject: [PATCH 11/14] Fix sonar qube

---
 ProcessMaker/Models/Process.php | 39 +++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/ProcessMaker/Models/Process.php b/ProcessMaker/Models/Process.php
index a4769090d3..111b637904 100644
--- a/ProcessMaker/Models/Process.php
+++ b/ProcessMaker/Models/Process.php
@@ -1162,29 +1162,34 @@ public function manageCustomRoutes()
                         break;
 
                     default:
-                        if ($webEntryProperties->webentryRouteConfig->firstUrlSegment !== '') {
-                            $webentryRouteConfig = $webEntryProperties->webentryRouteConfig;
-                            try {
-                                WebentryRoute::updateOrCreate(
-                                    [
-                                        'process_id' => $this->id,
-                                        'node_id' => $webentryRouteConfig->nodeId,
-                                    ],
-                                    [
-                                        'first_segment' => $webentryRouteConfig->firstUrlSegment,
-                                        'params' => $webentryRouteConfig->parameters,
-                                    ]
-                                );
-                            } catch (Exception $e) {
-                                \Log::info('*** Error: ' . $e->getMessage());
-                            }
-                        }
+                        $this->manageWebentryRoute($webEntryProperties);
                         break;
                 }
             }
         }
     }
 
+    private function manageWebentryRoute($webEntryProperties)
+    {
+        if ($webEntryProperties->webentryRouteConfig->firstUrlSegment !== '') {
+            $webentryRouteConfig = $webEntryProperties->webentryRouteConfig;
+            try {
+                WebentryRoute::updateOrCreate(
+                    [
+                        'process_id' => $this->id,
+                        'node_id' => $webentryRouteConfig->nodeId,
+                    ],
+                    [
+                        'first_segment' => $webentryRouteConfig->firstUrlSegment,
+                        'params' => $webentryRouteConfig->parameters,
+                    ]
+                );
+            } catch (Exception $e) {
+                \Log::info('*** Error: ' . $e->getMessage());
+            }
+        }
+    }
+
     /**
      * Get node element attributes
      *

From 4efdbf4a1fc8198f145404dec377c1ba2b068e3c Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Fri, 31 May 2024 10:54:06 -0700
Subject: [PATCH 12/14] WIP

---
 resources/js/app-layout.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/resources/js/app-layout.js b/resources/js/app-layout.js
index fd51785742..0eb36d34ae 100644
--- a/resources/js/app-layout.js
+++ b/resources/js/app-layout.js
@@ -222,6 +222,17 @@ if (isMobileNavbar === "true") {
       return {
       };
     },
+    computed: {
+      visible() {
+
+
+
+// wont work because of replaceState. Maybe replace state listener???
+
+        // Do not show on process details page
+        return !(/process-browser\/\d+/.test(window.location.href));
+      }
+    },
     mounted() {
       if (this.$cookies.get("firstMounted") === "true") {
         $("#welcomeModal").modal("show");

From 883f9ca3099a49d887b71dfe0c5ea69dc804ea32 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Fri, 31 May 2024 14:45:45 -0400
Subject: [PATCH 13/14] Ready for PR 1

---
 .../components/ProcessInfo.vue                |  12 +-
 .../components/ProcessesCarousel.vue          | 107 +++++++++---------
 2 files changed, 62 insertions(+), 57 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index f4311eee2a..f7f2f09157 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -52,7 +52,7 @@ export default {
       selectCategory: 0,
       dataOptions: {},
       hideLaunchpad: true,
-      firstImage: 1,
+      firstImage: 0,
       lastImage: null,
       indexSelectedImage: 0,
     };
@@ -64,8 +64,12 @@ export default {
     };
     this.$root.$on("clickCarouselImage", (val) => {
       this.hideLaunchpad = !val.hideLaunchpad;
-      this.lastImage = val.objectImages.length;
+      this.lastImage = val.countImages;
       this.indexSelectedImage = val.imagePosition;
+      this.firstImage = this.indexSelectedImage + 1;
+    });
+    this.$root.$on("carouselImageSelected", (pos) => {
+      this.firstImage = pos + 1;
     });
   },
   methods: {
@@ -76,10 +80,6 @@ export default {
       this.$emit("goBackCategory");
     },
     closeFullCarousel() {
-      const data = {
-        "url" : null,
-        "hideLaunchpad" : false,
-      };
       this.$root.$emit("clickCarouselImage", false);
     }
   },
diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index 91a497fc85..8616f678e7 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -4,13 +4,13 @@
     class="h-100 w-100"
   >
     <button
-      class="prev"
+      :class="[fullPage ? 'prev-full' : 'prev']"
       @click="prevSlide"
     >
       <i class="fas fa-caret-left"></i>
     </button>
     <button
-      class="next"
+      :class="[fullPage ? 'next-full' : 'next']"
       @click="nextSlide"
     >
       <i class="fas fa-caret-right"></i>
@@ -41,7 +41,7 @@
           <iframe
             v-if="image.type === 'embed'"
             ref="slides"
-            class="content iframe-carousel"
+            :class="['content', fullPage ? 'iframe-carousel-full' : 'iframe-carousel']"
             :src="image.url"
             title="embed media"
             @click="handleClick(image.url, index)"
@@ -49,7 +49,7 @@
           <img
             v-else
             ref="slides"
-            class="content img-carousel"
+            :class="['content', fullPage ? 'img-carousel-full' : 'img-carousel']"
             :src="image.url"
             :alt="process.name"
             @click="handleClick(image.url, index)"
@@ -90,6 +90,7 @@ export default {
       currentIndex: 0,
       slideWidth: 0,
       translateX: 0,
+      fullPage: false,
       sizes: {
         sm: 1,
         md: 1,
@@ -114,20 +115,14 @@ export default {
             "3xl": 1,
           };
           this.discountSlide = 0;
+          this.fullPage = true;
         } 
       }
     },
     indexSelectedImage() {
-      console.log("Indice de la imagen selecionada: ", this.indexSelectedImage);
-      console.log("Indice actual en pantalla: ", this.currentIndex);
-      if (this.indexSelectedImage > this.currentIndex) {
+        this.currentIndex = 0;
         this.currentIndex = this.indexSelectedImage - 1;
         this.nextSlide();
-      }
-      if (this.indexSelectedImage < this.currentIndex) {
-        this.currentIndex--;
-        this.prevSlide();
-      }
     },
   },
   computed: {
@@ -166,13 +161,15 @@ export default {
   },
   methods: {
     handleClick(url, index) {
-      const data = {
-        "url" : url,
-        "hideLaunchpad" : true,
-        "objectImages" : this.images,
-        "imagePosition" : index,
-      };
-      this.$root.$emit("clickCarouselImage", data);
+      if(!this.fullPage) {
+        const data = {
+          "url" : url,
+          "hideLaunchpad" : true,
+          "countImages" : this.images.length,
+          "imagePosition" : index,
+          };
+        this.$root.$emit("clickCarouselImage", data);
+      }
     },
     /**
      * Get images from Media library related to process.
@@ -226,12 +223,14 @@ export default {
       if (this.currentIndex > 0) {
         this.currentIndex--;
         this.translateX += this.slideWidth;
+        this.$root.$emit("carouselImageSelected", this.currentIndex);
       }
     },
     nextSlide() {
       if (this.currentIndex < this.slideCount - 1) {
         this.currentIndex++;
         this.translateX -= this.slideWidth;
+        this.$root.$emit("carouselImageSelected", this.currentIndex);
       }
     },
   },
@@ -246,48 +245,34 @@ export default {
   width: 100%;
   height: auto;
   aspect-ratio: 16/9;
-  object-fit: fill;
+  object-fit: cover;
   border-radius: 16px;
 }
 .iframe-carousel {
   width: 100%;
   aspect-ratio: 16/9;
-  object-fit: fill;
+  object-fit: cover;
   border-radius: 16px;
 }
 
-@media (width <= 2560px) {
-  .img-carousel {
-  }
-}
-@media (width <= 1920px) {
-  .img-carousel {
-  }
-}
-@media (width <= 1440px) {
-  .img-carousel {
-  }
-}
-@media (width <= 1280px) {
-  .img-carousel {
-    height: auto;
-  }
-}
-@media (width <= 1024px) {
-  .img-carousel {
-    height: auto;
-  }
-}
-@media (width <= 768px) {
-  .img-carousel {
-    height: auto;
-  }
+.img-carousel-full {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
+  margin-top: 2%;
+  margin-bottom: 2%;
 }
-@media (width <= 640px) {
-  .img-carousel {
-    height: auto;
-  }
+.iframe-carousel-full {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
+  margin-top: 2%;
+  margin-bottom: 2%;
 }
+
 </style>
 <style>
 .carousel {
@@ -330,6 +315,26 @@ export default {
   right: 4px;
   background-color: #fff;
 }
+
+.prev-full,
+.next-full {
+  position: absolute;
+  top: 60%;
+  transform: translateY(-50%);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  color: #556271;
+}
+
+.prev-full {
+  left: 80px;
+  background-color: #f7f9fb;
+}
+.next-full {
+  right: 16px;
+  background-color: #f7f9fb;
+}
 @media (min-width: 640px) {
   .slide {
     width: var(--var-sizes-sm);

From b674833271ea470b9cb87cdcc4f2b84b29ab96c7 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Fri, 31 May 2024 15:39:28 -0400
Subject: [PATCH 14/14] Solving sonarqube observations

---
 .../js/processes-catalogue/components/ProcessesCarousel.vue   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index d22480e749..4511de3101 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -245,7 +245,7 @@ export default {
   width: 100%;
   height: auto;
   aspect-ratio: 16/9;
-  object-fit: fill;
+  object-fit: cover;
   border-radius: 16px;
 }
 .iframe-carousel {
@@ -302,7 +302,6 @@ export default {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  color: #fff;
   border: none;
   cursor: pointer;
   color: #556271;
@@ -321,7 +320,6 @@ export default {
   position: absolute;
   top: 60%;
   transform: translateY(-50%);
-  color: #fff;
   border: none;
   cursor: pointer;
   color: #556271;