From bbb915fe07ce4b527fdf61f826ef4dd1f20530ae Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Fri, 14 Jun 2024 15:48:38 -0400
Subject: [PATCH 1/7] FOUR-14245 Update Task Table in Launchpad

---
 .../components/ProcessTab.vue                 |  96 ++++++++--
 .../tasks/components/TaskListRowButtons.vue   | 125 +++++++++++++
 resources/js/tasks/components/TasksList.vue   | 165 +++++++-----------
 resources/lang/en.json                        |  13 +-
 4 files changed, 286 insertions(+), 113 deletions(-)
 create mode 100644 resources/js/tasks/components/TaskListRowButtons.vue

diff --git a/resources/js/processes-catalogue/components/ProcessTab.vue b/resources/js/processes-catalogue/components/ProcessTab.vue
index c327460d78..57b0a3fc1d 100644
--- a/resources/js/processes-catalogue/components/ProcessTab.vue
+++ b/resources/js/processes-catalogue/components/ProcessTab.vue
@@ -4,23 +4,31 @@
       id="tabs-custom"
       pills
       lazy
-    >
+      @input="onTabChanged"
+      >
       <b-tab
         :title="$t('My Requests')"
         active
-      >
-        <request-tab
-          :currentUser="currentUser"
-          :process="process"
-        ></request-tab>
+        >
+        <requests-listing
+          ref="requestList"
+          :filter="filterRequest"
+          :columns="columnsRequest"
+          :pmql="fullPmqlRequest"
+          ></requests-listing>
       </b-tab>
       <b-tab
         :title="$t('My Tasks')"
-      >
-        <task-tab
-          :currentUser="currentUser"
-          :process="process"
-        ></task-tab>
+        >
+        <tasks-list
+          ref="taskList"
+          :filter="filterTask"
+          :pmql="fullPmqlTask" 
+          :columns="columnsTask"
+          :disable-tooltip="false"
+          :disable-quick-fill-tooltip="false"
+          :fetch-on-created="false"
+          ></tasks-list>
       </b-tab>
     </b-tabs>
   </div>
@@ -29,10 +37,14 @@
 <script>
 import RequestTab from "./RequestTab.vue";
 import TaskTab from "./TaskTab.vue";
+import RequestsListing from "../../requests/components/RequestsListing.vue";
+import TasksList from "../../tasks/components/TasksList.vue";
 export default {
   components: {
     RequestTab,
     TaskTab,
+      RequestsListing,
+      TasksList
   },
   props: {
     currentUser: {
@@ -42,6 +54,68 @@ export default {
       type: Object,
     },
   },
+  data() {
+    return {
+      filterRequest: "",
+      fullPmqlRequest: `(user_id = ${ProcessMaker.user.id}) AND (process_id = ${this.process.id})`,
+      columnsRequest: [
+        {
+          label: "Case #",
+          field: "case_number",
+          sortable: true,
+          default: true,
+          width: 80
+        },
+        {
+          label: "Case title",
+          field: "case_title",
+          sortable: true,
+          default: true,
+          truncate: true,
+          width: 220
+        },
+        {
+          label: "Status",
+          field: "status",
+          sortable: true,
+          default: true,
+          width: 100,
+          filter_subject: {type: 'Status'}
+        },
+        {
+          label: "Started",
+          field: "initiated_at",
+          format: "datetime",
+          sortable: true,
+          default: true,
+          width: 160
+        },
+        {
+          label: "Completed",
+          field: "completed_at",
+          format: "datetime",
+          sortable: true,
+          default: true,
+          width: 160
+        },
+      ],
+      filterTask: "",
+      fullPmqlTask: `(user_id = ${ProcessMaker.user.id}) AND (process_id = ${this.process.id})`,
+      columnsTask: window.Processmaker.defaultColumns || null
+    };
+  },
+  methods: {
+    onTabChanged(activeTabIndex) {
+      if (activeTabIndex === 0) {
+
+      }
+      if (activeTabIndex === 1) {
+        this.$nextTick(() => {
+          this.$refs.taskList.fetch();
+        });
+      }
+    }
+  }
 };
 </script>
 <style>
diff --git a/resources/js/tasks/components/TaskListRowButtons.vue b/resources/js/tasks/components/TaskListRowButtons.vue
new file mode 100644
index 0000000000..234f31066c
--- /dev/null
+++ b/resources/js/tasks/components/TaskListRowButtons.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <slot name="content"></slot>
+    <PMFloatingButtons ref="pmFloatingButtons">
+      <template v-slot:content>
+        <span v-for="(button, index) in buttons" :key="index">
+          <b-button :id="button.id + rowIndex"
+                    v-if="button.show"
+                    aria-label="button.title"
+                    @click="onClick(button)"
+                    variant="light"
+                    size="sm">
+            <i v-if="button.icon" 
+               :class="button.icon"/>
+            <img v-else-if="button.imgSrc"
+                 :src="button.imgSrc"
+                 :alt="button.title"/>
+          </b-button>
+          <b-tooltip
+            :target="button.id + rowIndex"
+            :title="button.title"
+            custom-class="task-hover-tooltip"
+            placement="bottom"
+            :delay="0"
+            boundary="viewport"
+            :no-fade="true"
+            />
+          <div v-if="index < buttons.length - 1 && button.show" 
+               class="task-vertical-separator">
+          </div>
+        </span>
+      </template>
+    </PMFloatingButtons>
+  </div>
+</template>
+
+<script>
+  import PMFloatingButtons from "../../components/PMFloatingButtons.vue";
+  import PMPopoverConfirmation from "../../components/PMPopoverConfirmation.vue";
+  export default {
+    components: {
+      PMFloatingButtons,
+      PMPopoverConfirmation
+    },
+    props: {
+      buttons: null,
+      row: null,
+      rowIndex: null,
+      colIndex: null,
+      showButtons: null
+    },
+    data() {
+      return {
+        idButtonRemove: "inbox-rule-row-button-" + Math.random().toString(36).substring(2, 9)
+      };
+    },
+    methods: {
+      show() {
+        this.triggerFloatingButtons(() => {
+          if (!this.showButtons) {
+            return;
+          }
+          this.$refs.pmFloatingButtons.show();
+        });
+      },
+      close() {
+        this.triggerFloatingButtons(() => {
+          this.$refs.pmFloatingButtons.close();
+        });
+      },
+      setMargin(size) {
+        this.$refs.pmFloatingButtons.$el.style.marginRight = size + "px";
+      },
+      disableFloatingButtons(state) {
+        this.$root["inbox-rule-row-button-floating-disable"] = state;
+      },
+      triggerFloatingButtons(callback) {
+        if (this.$root["inbox-rule-row-button-floating-disable"] === true) {
+          return;
+        }
+        callback();
+      },
+      onClick(button) {
+        this.disableFloatingButtons(false);
+        button.click(this.row);
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .task-vertical-separator {
+    display: inline;
+    border-left: 1px solid #ccc;
+    margin-left: 4px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+</style>
+<style>
+  .task-hover-tooltip {
+    opacity: 1 !important;
+  }
+  .task-hover-tooltip .tooltip-inner {
+    background-color: #F2F6F7;
+    color: #556271;
+    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
+    border-radius: 7px;
+    padding: 9px 12px 9px 12px;
+    border: 1px solid #CDDDEE
+  }
+  .task-hover-tooltip .arrow::before {
+    border-bottom-color: #CDDDEE !important;
+  }
+  .task-hover-tooltip .arrow::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    border-width: 0 .4rem .4rem;
+    transform: translateY(3px);
+    border-color: transparent;
+    border-style: solid;
+    border-bottom-color: #F2F6F7;
+  }
+</style>
\ No newline at end of file
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 955e406d6e..2835ce8e52 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -5,6 +5,7 @@
       data-cy="tasks-table"
     >
       <filter-table
+        ref="filterTable"
         :headers="tableHeaders"
         :data="data"
         :unread="unreadColumnName"
@@ -13,6 +14,7 @@
         :table-name="tableName"
         @table-row-click="handleRowClick"
         @table-row-mouseover="handleRowMouseover"
+        @table-tr-mouseleave="handleTrMouseleave"
         @table-row-mouseleave="handleRowMouseleave"
       >
         <!-- Slot Table Header -->
@@ -100,16 +102,26 @@
               </template>
               <template v-else>
                 <template v-if="header.field === 'due_at'">
-                  <span
-                    :class="[
-                      'badge',
-                      'badge-' + row['color_badge'],
-                      'due-' + row['color_badge'],
-                    ]"
-                  >
-                    {{ formatRemainingTime(row.due_at) }}
-                  </span>
-                  <span>{{ getNestedPropertyValue(row, header) }}</span>
+                  <TaskListRowButtons 
+                    :ref="'taskListRowButtons-'+rowIndex"
+                    :buttons="taskTooltipButtons"
+                    :row="row"
+                    :rowIndex="rowIndex"
+                    :colIndex="colIndex"
+                    :showButtons="isTooltipVisible">
+                    <template v-slot:content>
+                      <span
+                        :class="[
+                        'badge',
+                        'badge-' + row['color_badge'],
+                        'due-' + row['color_badge'],
+                        ]"
+                        >
+                        {{ formatRemainingTime(row.due_at) }}
+                      </span>
+                      <span>{{ getNestedPropertyValue(row, header) }}</span>
+                    </template>
+                  </TaskListRowButtons>
                 </template>
                 <template v-else-if="header.field === 'is_priority'">
                   <span>
@@ -150,50 +162,6 @@
           </td>
         </template>
       </filter-table>
-      <task-tooltip
-        :position="rowPosition"
-        v-show="isTooltipVisible"
-      >
-        <template v-slot:task-tooltip-body>
-          <div
-            @mouseover="clearHideTimer"
-            @mouseleave="hideTooltip"
-          >
-            <slot name="tooltip" v-bind:tooltipRowData="tooltipRowData" v-bind:previewTasks="previewTasks">
-              <span v-for="(item, index) in taskTooltipButtons" :key="index">
-                <span>
-                  <b-button
-                    v-if="!verifyURL('saved-searches') || item.savedSearch"
-                    :id="item.id"
-                    class="icon-button"
-                    :aria-label="item.title"
-                    variant="light"
-                    @click="item.click(tooltipRowData)"
-                  >
-                    <i v-if="item.icon" :class="item.icon" />
-                    <img
-                      v-else-if="item.imgSrc"
-                      :src="item.imgSrc"
-                      :alt="$t('No Image')"
-                    >
-                  </b-button>
-                </span>
-                <span
-                  v-if="(!verifyURL('saved-searches') || item.savedSearch) && item.separator"
-                  class="vertical-separator"
-                />
-                <b-tooltip
-                  :target="item.id"
-                  :title="item.title"
-                  custom-class="task-hover-tooltip"
-                  placement="bottom"
-                  :delay="0"
-                />
-              </span>
-            </slot>
-          </div>
-        </template>
-      </task-tooltip>
       <data-loading
         v-show="shouldShowLoader"
         :empty="$t('All clear')"
@@ -244,6 +212,7 @@ import TaskTooltip from "./TaskTooltip.vue";
 import PMColumnFilterIconAsc from "../../components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue";
 import PMColumnFilterIconDesc from "../../components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue";
 import FilterTableBodyMixin from "../../components/shared/FilterTableBodyMixin";
+import TaskListRowButtons from "./TaskListRowButtons.vue";
 import { get } from "lodash";
 
 const uniqIdsMixin = createUniqIdsMixin();
@@ -259,6 +228,7 @@ export default {
     TaskTooltip,
     PMColumnFilterIconAsc,
     PMColumnFilterIconDesc,
+    TaskListRowButtons
   },
   mixins: [
     datatableMixin,
@@ -320,25 +290,22 @@ export default {
           ariaLabel: this.$t("Quick fill Preview"),
           click: this.previewTasks,
           icon: "fas fa-eye",
-          title: "Preview",
-          separator: true,
-          savedSearch: false,
+          title: this.$t("Preview"),
+          show: !this.verifyURL('saved-searches') || false,
         },
         {
           id: "openCaseButton",
           title: this.$t("Open Case"),
           click: this.redirectToRequest,
           imgSrc: "/img/smartinbox-images/open-case.svg",
-          separator: true,
-          savedSearch: true,
+          show: !this.verifyURL('saved-searches') || true,
         },
         {
           id: "openTaskButton",
           title: this.$t("Open Task"),
           click: this.redirectToTask,
           icon: "fas fa-external-link-alt",
-          separator: false,
-          savedSearch: true,
+          show: !this.verifyURL('saved-searches') || true,
         },
       ],
       actions: [
@@ -698,7 +665,7 @@ export default {
     handleHideEllipsis() {
       this.ellipsisShow = false;
     },
-    handleRowMouseover(row) {
+    handleRowMouseover(row, index) {
       if (this.ellipsisShow) {
         this.isTooltipVisible = !this.disableRuleTooltip;
         this.clearHideTimer();
@@ -746,6 +713,7 @@ export default {
         x: rightBorderX,
         y: bottomBorderY,
       };
+      this.taskListRowButtonsShow(row, index);
     },
     handleRowMouseleave(visible) {
       this.startHideTimer();
@@ -837,6 +805,40 @@ export default {
     redirectToRequest(task) {
       window.location.href = this.openRequest(task.process_request);
     },
+    handleTrMouseleave(row, index) {
+      this.taskListRowButtonsHide(row, index);
+    },
+    /**
+     * TaskListRowButtons replaces the TaskTooltip component. 
+     * Please ensure that any methods related to TaskTooltip are cleared.
+     * @param {object} row
+     * @param {int} index
+     */
+    taskListRowButtonsShow(row, index) {
+      let container = this.$refs.filterTable.$el;
+      let scrolledWidth = container.scrollWidth - container.clientWidth - container.scrollLeft;
+      
+      let firstRow = container.querySelector('tbody tr');
+      let lastCell = firstRow.lastElementChild;
+      let cellIndex = lastCell.cellIndex;
+      let lastColumnWidth = lastCell.offsetWidth;
+
+      if(this.$refs["taskListRowButtons-" + index][0].colIndex<cellIndex){
+        scrolledWidth = scrolledWidth - lastColumnWidth;
+      }
+
+      this.$refs["taskListRowButtons-" + index][0].show();
+      this.$refs["taskListRowButtons-" + index][0].setMargin(scrolledWidth);
+    },
+    /**
+     * TaskListRowButtons replaces the TaskTooltip component. 
+     * Please ensure that any methods related to TaskTooltip are cleared.
+     * @param {object} row
+     * @param {int} index
+     */
+    taskListRowButtonsHide(row, index) {
+      this.$refs["taskListRowButtons-" + index][0].close();
+    },
   },
 };
 </script>
@@ -864,49 +866,10 @@ export default {
   width: 197px;
   height: 40px;
 }
-
-.icon-button {
-  color: #888;
-  width: 32px;
-  height: 32px;
-  border: 0;
-}
-.vertical-separator {
-  display: inline-block;
-  width: 1px;
-  height: 24px;
-  background-color: #ccc; /* Color del separador */
-  margin: 0 1px; /* Espaciado alrededor del separador */
-  vertical-align: middle; /* Alinear verticalmente con los botones */
-}
 .btn-light:hover {
   background-color: #EDF1F6;
   color: #888;
 }
-.task-hover-tooltip {
-  opacity: 1 !important;
-}
-.task-hover-tooltip .tooltip-inner {
-  background-color: #F2F6F7;
-  color: #556271;
-  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
-  border-radius: 7px;
-  padding: 9px 12px 9px 12px;
-  border: 1px solid #CDDDEE
-}
-.task-hover-tooltip .arrow::before {
-  border-bottom-color: #CDDDEE !important;
-}
-.task-hover-tooltip .arrow::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  border-width: 0 .4rem .4rem;
-  transform: translateY(3px);
-  border-color: transparent;
-  border-style: solid;
-  border-bottom-color: #F2F6F7;
-}
 </style>
 <style lang="scss" scoped>
 @import url("../../../sass/_scrollbar.scss");
diff --git a/resources/lang/en.json b/resources/lang/en.json
index a2c0f917ce..f7a643a2ff 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -2264,5 +2264,16 @@
   "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.",
-  "Recent Cases": "Recent Cases"
+  "Recent Cases": "Recent Cases",
+  "No results": "No results",
+  "Process Info": "Process Info",
+  "Process Chart": "Process Chart",
+  "Create Template": "Create Template",
+  "This will create a PM Block based on the {{assetName}} Process": "This will create a PM Block based on the {{assetName}} Process",
+  "Author": "Author",
+  "Version": "Version",
+  "Type to search Screen": "Type to search Screen",
+  "Type to search Chart": "Type to search Chart",
+  "Open Case": "Open Case",
+  "Alternative": "Alternative"
 }

From 0e351149ea9c607c0b5c85819ca1e98966940c76 Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Fri, 14 Jun 2024 16:10:52 -0400
Subject: [PATCH 2/7] FOUR-14245 Update Task Table in Launchpad

---
 resources/js/processes-catalogue/components/ProcessTab.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessTab.vue b/resources/js/processes-catalogue/components/ProcessTab.vue
index 57b0a3fc1d..4d4f67435d 100644
--- a/resources/js/processes-catalogue/components/ProcessTab.vue
+++ b/resources/js/processes-catalogue/components/ProcessTab.vue
@@ -106,9 +106,6 @@ export default {
   },
   methods: {
     onTabChanged(activeTabIndex) {
-      if (activeTabIndex === 0) {
-
-      }
       if (activeTabIndex === 1) {
         this.$nextTick(() => {
           this.$refs.taskList.fetch();

From d21180438f710ddfc8da86f069487e663f655a1c Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Fri, 14 Jun 2024 18:06:24 -0400
Subject: [PATCH 3/7] FOUR-14245 Update Task Table in Launchpad

---
 .../PMColumnFilterPopoverCommonMixin.js       | 12 +++
 .../components/ProcessTab.vue                 |  2 +
 .../tasks/components/TaskListRowButtons.vue   | 54 +++++++-------
 resources/js/tasks/components/TasksList.vue   | 74 ++++++++++---------
 4 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/resources/js/common/PMColumnFilterPopoverCommonMixin.js b/resources/js/common/PMColumnFilterPopoverCommonMixin.js
index d68c200839..cae31eee22 100644
--- a/resources/js/common/PMColumnFilterPopoverCommonMixin.js
+++ b/resources/js/common/PMColumnFilterPopoverCommonMixin.js
@@ -2,6 +2,10 @@ import { get, cloneDeep } from "lodash";
 
 const PMColumnFilterCommonMixin = {
   props: {
+    autosaveFilter: {
+      type: Boolean,
+      default: true
+    },
     advancedFilterProp: {
       type: Object,
       default: null
@@ -30,6 +34,14 @@ const PMColumnFilterCommonMixin = {
   methods: {
     storeFilterConfiguration() {
       const {order, type} = this.filterConfiguration();
+      
+      if (!this.autosaveFilter) {
+        this.$emit("advanced-filter-updated", {
+          filters: this.formattedFilter(),
+          order
+        });
+        return;
+      }
 
       // If advanced filter was provided as a prop, do not save the filter
       // or overwrite the global advanced_filter, instead emit the filter.
diff --git a/resources/js/processes-catalogue/components/ProcessTab.vue b/resources/js/processes-catalogue/components/ProcessTab.vue
index 4d4f67435d..4a266b6d40 100644
--- a/resources/js/processes-catalogue/components/ProcessTab.vue
+++ b/resources/js/processes-catalogue/components/ProcessTab.vue
@@ -15,6 +15,7 @@
           :filter="filterRequest"
           :columns="columnsRequest"
           :pmql="fullPmqlRequest"
+          :autosaveFilter="false"
           ></requests-listing>
       </b-tab>
       <b-tab
@@ -28,6 +29,7 @@
           :disable-tooltip="false"
           :disable-quick-fill-tooltip="false"
           :fetch-on-created="false"
+          :autosaveFilter="false"
           ></tasks-list>
       </b-tab>
     </b-tabs>
diff --git a/resources/js/tasks/components/TaskListRowButtons.vue b/resources/js/tasks/components/TaskListRowButtons.vue
index 234f31066c..d433fbcbf1 100644
--- a/resources/js/tasks/components/TaskListRowButtons.vue
+++ b/resources/js/tasks/components/TaskListRowButtons.vue
@@ -3,32 +3,34 @@
     <slot name="content"></slot>
     <PMFloatingButtons ref="pmFloatingButtons">
       <template v-slot:content>
-        <span v-for="(button, index) in buttons" :key="index">
-          <b-button :id="button.id + rowIndex"
-                    v-if="button.show"
-                    aria-label="button.title"
-                    @click="onClick(button)"
-                    variant="light"
-                    size="sm">
-            <i v-if="button.icon" 
-               :class="button.icon"/>
-            <img v-else-if="button.imgSrc"
-                 :src="button.imgSrc"
-                 :alt="button.title"/>
-          </b-button>
-          <b-tooltip
-            :target="button.id + rowIndex"
-            :title="button.title"
-            custom-class="task-hover-tooltip"
-            placement="bottom"
-            :delay="0"
-            boundary="viewport"
-            :no-fade="true"
-            />
-          <div v-if="index < buttons.length - 1 && button.show" 
-               class="task-vertical-separator">
-          </div>
-        </span>
+        <slot name="body">
+          <span v-for="(button, index) in buttons" :key="index">
+            <b-button :id="button.id + rowIndex"
+                      v-if="button.show"
+                      aria-label="button.title"
+                      @click="onClick(button)"
+                      variant="light"
+                      size="sm">
+              <i v-if="button.icon" 
+                 :class="button.icon"/>
+              <img v-else-if="button.imgSrc"
+                   :src="button.imgSrc"
+                   :alt="button.title"/>
+            </b-button>
+            <b-tooltip
+              :target="button.id + rowIndex"
+              :title="button.title"
+              custom-class="task-hover-tooltip"
+              placement="bottom"
+              :delay="0"
+              boundary="viewport"
+              :no-fade="true"
+              />
+            <div v-if="index < buttons.length - 1 && button.show" 
+                 class="task-vertical-separator">
+            </div>
+          </span>
+        </slot>
       </template>
     </PMFloatingButtons>
   </div>
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 2835ce8e52..834fd59068 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -102,26 +102,16 @@
               </template>
               <template v-else>
                 <template v-if="header.field === 'due_at'">
-                  <TaskListRowButtons 
-                    :ref="'taskListRowButtons-'+rowIndex"
-                    :buttons="taskTooltipButtons"
-                    :row="row"
-                    :rowIndex="rowIndex"
-                    :colIndex="colIndex"
-                    :showButtons="isTooltipVisible">
-                    <template v-slot:content>
-                      <span
-                        :class="[
-                        'badge',
-                        'badge-' + row['color_badge'],
-                        'due-' + row['color_badge'],
-                        ]"
-                        >
-                        {{ formatRemainingTime(row.due_at) }}
-                      </span>
-                      <span>{{ getNestedPropertyValue(row, header) }}</span>
-                    </template>
-                  </TaskListRowButtons>
+                  <span
+                    :class="[
+                    'badge',
+                    'badge-' + row['color_badge'],
+                    'due-' + row['color_badge'],
+                    ]"
+                    >
+                    {{ formatRemainingTime(row.due_at) }}
+                  </span>
+                  <span>{{ getNestedPropertyValue(row, header) }}</span>
                 </template>
                 <template v-else-if="header.field === 'is_priority'">
                   <span>
@@ -141,21 +131,35 @@
                   </span>
                 </template>
                 <template v-else>
-                  <div
-                    :id="`element-${rowIndex}-${colIndex}`"
-                    :class="{ 'pm-table-truncate': header.truncate }"
-                    :style="{ maxWidth: header.width + 'px' }"
-                  >
-                    {{ getNestedPropertyValue(row, header) }}
-                    <b-tooltip
-                      v-if="header.truncate"
-                      :target="`element-${rowIndex}-${colIndex}`"
-                      custom-class="pm-table-tooltip"
-                      @show="checkIfTooltipIsNeeded"
-                    >
-                      {{ getNestedPropertyValue(row, header) }}
-                    </b-tooltip>
-                  </div>
+                  <TaskListRowButtons 
+                    :ref="'taskListRowButtons-'+rowIndex"
+                    :buttons="taskTooltipButtons"
+                    :row="row"
+                    :rowIndex="rowIndex"
+                    :colIndex="colIndex"
+                    :showButtons="isTooltipVisible">
+                    <template v-slot:content>
+                      <div
+                        :id="`element-${rowIndex}-${colIndex}`"
+                        :class="{ 'pm-table-truncate': header.truncate }"
+                        :style="{ maxWidth: header.width + 'px' }"
+                        >
+                        {{ getNestedPropertyValue(row, header) }}
+                        <b-tooltip
+                          v-if="header.truncate"
+                          :target="`element-${rowIndex}-${colIndex}`"
+                          custom-class="pm-table-tooltip"
+                          @show="checkIfTooltipIsNeeded"
+                          >
+                          {{ getNestedPropertyValue(row, header) }}
+                        </b-tooltip>
+                      </div>
+                    </template>
+                    <template v-slot:body>
+                      <slot name="tooltip" v-bind:previewTasks="previewTasks">
+                      </slot>
+                    </template>
+                  </TaskListRowButtons>
                 </template>
               </template>
             </template>

From 9f476c8542572370c1091a30aedd4f41fbd1a81b Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Mon, 17 Jun 2024 09:45:37 -0400
Subject: [PATCH 4/7] FOUR-14245 Update Task Table in Launchpad

---
 .../js/common/PMColumnFilterPopoverCommonMixin.js    | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/resources/js/common/PMColumnFilterPopoverCommonMixin.js b/resources/js/common/PMColumnFilterPopoverCommonMixin.js
index cae31eee22..3fe22a0125 100644
--- a/resources/js/common/PMColumnFilterPopoverCommonMixin.js
+++ b/resources/js/common/PMColumnFilterPopoverCommonMixin.js
@@ -34,14 +34,6 @@ const PMColumnFilterCommonMixin = {
   methods: {
     storeFilterConfiguration() {
       const {order, type} = this.filterConfiguration();
-      
-      if (!this.autosaveFilter) {
-        this.$emit("advanced-filter-updated", {
-          filters: this.formattedFilter(),
-          order
-        });
-        return;
-      }
 
       // If advanced filter was provided as a prop, do not save the filter
       // or overwrite the global advanced_filter, instead emit the filter.
@@ -67,7 +59,9 @@ const PMColumnFilterCommonMixin = {
         order
       };
 
-      ProcessMaker.apiClient.put(url, config);
+      if (!this.autosaveFilter) {
+        ProcessMaker.apiClient.put(url, config);
+      }
       window.ProcessMaker.advanced_filter = config;
       window.ProcessMaker.EventBus.$emit("advanced-filter-updated");
     },

From 34d5f186f12d3d45dbdd72c4bcab6343ed4017eb Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Mon, 17 Jun 2024 20:05:21 -0400
Subject: [PATCH 5/7] FOUR-14245 Update Task Table in Launchpad

---
 resources/js/components/PMTable.vue           |  2 +-
 .../js/tasks/components/QuickFillPreview.vue  |  6 +-
 .../tasks/components/TaskListRowButtons.vue   | 16 ++--
 resources/js/tasks/components/TasksList.vue   | 81 +++++++++----------
 4 files changed, 47 insertions(+), 58 deletions(-)

diff --git a/resources/js/components/PMTable.vue b/resources/js/components/PMTable.vue
index ce90719c3e..01ab3d2c77 100644
--- a/resources/js/components/PMTable.vue
+++ b/resources/js/components/PMTable.vue
@@ -67,7 +67,7 @@
     methods: {
       tableRowMouseover(row, rowIndex) {
         let container = this.$refs.filterTable.$el;
-        let scrolledWidth = container.scrollWidth - container.clientWidth;
+        let scrolledWidth = container.scrollWidth - container.clientWidth - container.scrollLeft;
         this.$emit('onRowMouseover', row, scrolledWidth, rowIndex);
       },
       getSlotName(field) {
diff --git a/resources/js/tasks/components/QuickFillPreview.vue b/resources/js/tasks/components/QuickFillPreview.vue
index efe5bd8938..cda0cd0b5f 100644
--- a/resources/js/tasks/components/QuickFillPreview.vue
+++ b/resources/js/tasks/components/QuickFillPreview.vue
@@ -139,18 +139,18 @@
           <template v-slot:tooltip="{ tooltipRowData, previewTasks }">
             <b-button
               v-if="propFromButton === 'previewTask'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="previewTasks(tooltipRowData, 93, 'previewTask')"
             >
               <i class="fas fa-eye" />
             </b-button>
             <b-button
               v-if="propFromButton === 'fullTask'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="
                 previewTasks(tooltipRowData, 50, 'fullTask');
                 setTask();
@@ -160,9 +160,9 @@
             </b-button>
             <b-button
               v-if="propFromButton === 'inboxRules'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="previewTasks(tooltipRowData, 50, 'inboxRules')"
             >
               <i class="fas fa-eye" />
diff --git a/resources/js/tasks/components/TaskListRowButtons.vue b/resources/js/tasks/components/TaskListRowButtons.vue
index d433fbcbf1..8f09572f9f 100644
--- a/resources/js/tasks/components/TaskListRowButtons.vue
+++ b/resources/js/tasks/components/TaskListRowButtons.vue
@@ -1,6 +1,5 @@
 <template>
-  <div>
-    <slot name="content"></slot>
+  <div class="pm-task-row-buttons">
     <PMFloatingButtons ref="pmFloatingButtons">
       <template v-slot:content>
         <slot name="body">
@@ -38,11 +37,9 @@
 
 <script>
   import PMFloatingButtons from "../../components/PMFloatingButtons.vue";
-  import PMPopoverConfirmation from "../../components/PMPopoverConfirmation.vue";
   export default {
     components: {
-      PMFloatingButtons,
-      PMPopoverConfirmation
+      PMFloatingButtons
     },
     props: {
       buttons: null,
@@ -51,11 +48,6 @@
       colIndex: null,
       showButtons: null
     },
-    data() {
-      return {
-        idButtonRemove: "inbox-rule-row-button-" + Math.random().toString(36).substring(2, 9)
-      };
-    },
     methods: {
       show() {
         this.triggerFloatingButtons(() => {
@@ -91,6 +83,10 @@
 </script>
 
 <style scoped>
+  .pm-task-row-buttons {
+    position: relative;
+    display: math;
+  }
   .task-vertical-separator {
     display: inline;
     border-left: 1px solid #ccc;
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 834fd59068..cf1bf7d699 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -73,6 +73,21 @@
             :class="{ 'pm-table-filter-applied-tbody': header.sortAsc || header.sortDesc }"
             :key="colIndex"
           >
+            <!-- Slot for floating buttons -->
+            <template v-if="colIndex === visibleHeaders.length-1">
+              <TaskListRowButtons 
+                    :ref="'taskListRowButtons-'+rowIndex"
+                    :buttons="taskTooltipButtons"
+                    :row="row"
+                    :rowIndex="rowIndex"
+                    :colIndex="colIndex"
+                    :showButtons="isTooltipVisible">
+                <template v-slot:body>
+                  <slot name="tooltip" v-bind:previewTasks="previewTasks">
+                  </slot>
+                </template>
+              </TaskListRowButtons>
+            </template>
             <template v-if="containsHTML(getNestedPropertyValue(row, header))">
               <div
                 :id="`element-${rowIndex}-${colIndex}`"
@@ -104,11 +119,11 @@
                 <template v-if="header.field === 'due_at'">
                   <span
                     :class="[
-                    'badge',
-                    'badge-' + row['color_badge'],
-                    'due-' + row['color_badge'],
+                      'badge',
+                      'badge-' + row['color_badge'],
+                      'due-' + row['color_badge'],
                     ]"
-                    >
+                  >
                     {{ formatRemainingTime(row.due_at) }}
                   </span>
                   <span>{{ getNestedPropertyValue(row, header) }}</span>
@@ -131,35 +146,21 @@
                   </span>
                 </template>
                 <template v-else>
-                  <TaskListRowButtons 
-                    :ref="'taskListRowButtons-'+rowIndex"
-                    :buttons="taskTooltipButtons"
-                    :row="row"
-                    :rowIndex="rowIndex"
-                    :colIndex="colIndex"
-                    :showButtons="isTooltipVisible">
-                    <template v-slot:content>
-                      <div
-                        :id="`element-${rowIndex}-${colIndex}`"
-                        :class="{ 'pm-table-truncate': header.truncate }"
-                        :style="{ maxWidth: header.width + 'px' }"
-                        >
-                        {{ getNestedPropertyValue(row, header) }}
-                        <b-tooltip
-                          v-if="header.truncate"
-                          :target="`element-${rowIndex}-${colIndex}`"
-                          custom-class="pm-table-tooltip"
-                          @show="checkIfTooltipIsNeeded"
-                          >
-                          {{ getNestedPropertyValue(row, header) }}
-                        </b-tooltip>
-                      </div>
-                    </template>
-                    <template v-slot:body>
-                      <slot name="tooltip" v-bind:previewTasks="previewTasks">
-                      </slot>
-                    </template>
-                  </TaskListRowButtons>
+                  <div
+                    :id="`element-${rowIndex}-${colIndex}`"
+                    :class="{ 'pm-table-truncate': header.truncate }"
+                    :style="{ maxWidth: header.width + 'px' }"
+                    >
+                    {{ getNestedPropertyValue(row, header) }}
+                    <b-tooltip
+                      v-if="header.truncate"
+                      :target="`element-${rowIndex}-${colIndex}`"
+                      custom-class="pm-table-tooltip"
+                      @show="checkIfTooltipIsNeeded"
+                      >
+                      {{ getNestedPropertyValue(row, header) }}
+                    </b-tooltip>
+                  </div>
                 </template>
               </template>
             </template>
@@ -713,6 +714,7 @@ export default {
       if(this.fromButton === "inboxRules"){
         bottomBorderY = rect.bottom - topAdjust + 90 - elementHeight;
       }
+      //rowPosition deprecated is not used
       this.rowPosition = {
         x: rightBorderX,
         y: bottomBorderY,
@@ -821,18 +823,9 @@ export default {
     taskListRowButtonsShow(row, index) {
       let container = this.$refs.filterTable.$el;
       let scrolledWidth = container.scrollWidth - container.clientWidth - container.scrollLeft;
-      
-      let firstRow = container.querySelector('tbody tr');
-      let lastCell = firstRow.lastElementChild;
-      let cellIndex = lastCell.cellIndex;
-      let lastColumnWidth = lastCell.offsetWidth;
-
-      if(this.$refs["taskListRowButtons-" + index][0].colIndex<cellIndex){
-        scrolledWidth = scrolledWidth - lastColumnWidth;
-      }
-
+      let widthTd = this.$refs["taskListRowButtons-" + index][0].$el.parentNode.offsetWidth - 24;
       this.$refs["taskListRowButtons-" + index][0].show();
-      this.$refs["taskListRowButtons-" + index][0].setMargin(scrolledWidth);
+      this.$refs["taskListRowButtons-" + index][0].setMargin(scrolledWidth - widthTd);
     },
     /**
      * TaskListRowButtons replaces the TaskTooltip component. 

From 8f679d467a7e5e508edc91d006c2ebc6a56954c7 Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Mon, 17 Jun 2024 20:07:21 -0400
Subject: [PATCH 6/7] FOUR-14245 Update Task Table in Launchpad

---
 resources/js/tasks/components/TasksList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index cf1bf7d699..f9f8b2014a 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -150,14 +150,14 @@
                     :id="`element-${rowIndex}-${colIndex}`"
                     :class="{ 'pm-table-truncate': header.truncate }"
                     :style="{ maxWidth: header.width + 'px' }"
-                    >
+                  >
                     {{ getNestedPropertyValue(row, header) }}
                     <b-tooltip
                       v-if="header.truncate"
                       :target="`element-${rowIndex}-${colIndex}`"
                       custom-class="pm-table-tooltip"
                       @show="checkIfTooltipIsNeeded"
-                      >
+                    >
                       {{ getNestedPropertyValue(row, header) }}
                     </b-tooltip>
                   </div>

From 7e6520c1ff0c53e498418effacd6de0c3721d931 Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Tue, 18 Jun 2024 17:00:07 -0400
Subject: [PATCH 7/7] FOUR-14245 Container behavior was updated in the process
 catalog.

---
 .../js/processes-catalogue/components/ProcessesCatalogue.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 0ce2012151..5f7503602e 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -383,10 +383,9 @@ export default {
 }
 .processes-info {
   width: 100%;
-  margin-right: 16px;
+  margin-right: -16px;
   height: calc(100vh - 145px);
-  padding-left: 32px;
-  
+  overflow-x: hidden;
   @media (max-width: $lp-breakpoint) {
     padding-left: 0;
   }