From a1806e6a7caf68a26cceca297377b5695057b7ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Wed, 19 Jun 2024 17:00:33 -0400
Subject: [PATCH 1/4] ellipsis icon replaces filter or sort icon on hover

---
 .../PMColumnFilterIconThreeDots.vue           |  9 ++---
 .../PMColumnFilterPopover.vue                 | 10 ++++++
 .../js/components/shared/FilterTable.vue      |  2 ++
 resources/js/tasks/components/TasksList.vue   | 35 +++++++++++++++++++
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
index 4b01a48d1b..f130d340ac 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
@@ -1,11 +1,11 @@
 <template>
   <span>
-    <svg v-if="!columnSortAsc && !columnSortDesc && !filterApplied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+    <svg v-if="(!columnSortAsc && !columnSortDesc && !filterApplied) || columnMouseover" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
       <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
     </svg>
-    <PMColumnFilterIconAsc v-if="columnSortAsc"></PMColumnFilterIconAsc>
-    <PMColumnFilterIconDesc v-if="columnSortDesc"></PMColumnFilterIconDesc>
-    <i v-if="filterApplied" class="fas fa-filter"></i>
+    <PMColumnFilterIconAsc v-if="columnSortAsc && !columnMouseover"></PMColumnFilterIconAsc>
+    <PMColumnFilterIconDesc v-if="columnSortDesc && !columnMouseover"></PMColumnFilterIconDesc>
+    <i v-if="filterApplied && !columnMouseover" class="fas fa-filter"></i>
   </span>
 </template>
 <script>
@@ -22,6 +22,7 @@ export default {
     "columnSortAsc",
     "columnSortDesc",
     "filterApplied",
+    "columnMouseover",
   ],
 };
 </script>
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
index a7acaa5bab..6a39491a83 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
@@ -8,6 +8,7 @@
         :columnSortAsc="columnSortAsc"
         :columnSortDesc="columnSortDesc"
         :filterApplied="filterApplied"
+        :columnMouseover="columnHover"
       />
     </b-button>
     <b-popover :container="container"
@@ -61,12 +62,21 @@
       "columnSortAsc",
       "columnSortDesc",
       "filterApplied",
+      "columnMouseover",
     ],
     data() {
       return {
         popoverShow: false
       };
     },
+    computed: {
+      columnHover() {
+        if (this.columnMouseover === this.value) {
+          return true;
+        }
+        return false;
+      },
+    },
     methods: {
       onShown() {
         this.$emit("onUpdate", this);
diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index e982e14da5..d5887400d2 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -23,6 +23,8 @@
             class="pm-table-ellipsis-column"
             :class="{ 'pm-table-filter-applied': column.filterApplied || column.sortAsc || column.sortDesc }"
             :style="{ width: column.fixed_width + 'px' }"
+            @mouseover="$emit('table-column-mouseover', column.field)"
+            @mouseleave="$emit('table-column-mouseleave')"
           >
             <div
               class="pm-table-column-header"
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 955e406d6e..1430fda11a 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -14,6 +14,8 @@
         @table-row-click="handleRowClick"
         @table-row-mouseover="handleRowMouseover"
         @table-row-mouseleave="handleRowMouseleave"
+        @table-column-mouseover="handleColumnMouseover"
+        @table-column-mouseleave="handleColumnMouseleave"
       >
         <!-- Slot Table Header -->
         <template
@@ -54,6 +56,7 @@
             :columnSortAsc="column.sortAsc"
             :columnSortDesc="column.sortDesc"
             :filterApplied="column.filterApplied"
+            :columnMouseover="columnMouseover"
             @onChangeSort="onChangeSort($event, column.field)"
             @onApply="onApply($event, column.field)"
             @onClear="onClear(column.field)"
@@ -378,6 +381,7 @@ export default {
       isTooltipVisible: false,
       hideTimer: null,
       ellipsisShow: false,
+      columnMouseover: null,
     };
   },
   computed: {
@@ -837,6 +841,37 @@ 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 widthTd = this.$refs["taskListRowButtons-" + index][0].$el.parentNode.offsetWidth - 24;
+      this.$refs["taskListRowButtons-" + index][0].show();
+      this.$refs["taskListRowButtons-" + index][0].setMargin(scrolledWidth - widthTd);
+    },
+    /**
+     * 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();
+    },
+    handleColumnMouseover(column) {
+      this.columnMouseover = column;
+    },
+    handleColumnMouseleave() {
+      this.columnMouseover = null;
+    },
   },
 };
 </script>

From 037d14f2f12bfe80fdd4df62fff007dcaec532d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Thu, 20 Jun 2024 13:22:41 -0400
Subject: [PATCH 2/4] changed filter icon styles on hover in requests listing

---
 resources/js/requests/components/RequestsListing.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index f55fa164eb..2c298922d2 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -9,6 +9,8 @@
         :unread="unreadColumnName"
         :loading="shouldShowLoader"
         @table-row-click="handleRowClick"
+        @table-column-mouseover="handleColumnMouseover"
+        @table-column-mouseleave="handleColumnMouseleave"
       >
         <!-- Slot Table Header -->
         <template v-for="(column, index) in tableHeaders" v-slot:[column.field]>
@@ -31,6 +33,7 @@
                                    :columnSortAsc="column.sortAsc"
                                    :columnSortDesc="column.sortDesc"
                                    :filterApplied="column.filterApplied"
+                                   :columnMouseover="columnMouseover"
                                    @onChangeSort="onChangeSort($event, column.field)"
                                    @onApply="onApply($event, column.field)"
                                    @onClear="onClear(column.field)"
@@ -162,6 +165,7 @@ export default {
       previousAdvancedFilter: "",
       tableHeaders: [],
       unreadColumnName: "user_viewed_at",
+      columnMouseover: null,
     };
   },
   computed: {
@@ -572,6 +576,12 @@ export default {
         type: 'requestFilter',
       }
     },
+    handleColumnMouseover(column) {
+      this.columnMouseover = column;
+    },
+    handleColumnMouseleave() {
+      this.columnMouseover = null;
+    },
   }
 };
 </script>

From c5f82b1fd3ee1da88a513523ad03b79ffbc056f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Thu, 20 Jun 2024 19:29:05 -0400
Subject: [PATCH 3/4] truncate header text and tooltip if the text is truncated

---
 .../js/components/shared/FilterTable.vue      | 23 +++++++++++++++----
 .../requests/components/RequestsListing.vue   | 22 +++++++++++++++++-
 resources/js/tasks/components/TasksList.vue   | 17 +++++++++++++-
 3 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index b0ee087596..fd3b6daa71 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -244,7 +244,7 @@ export default {
     doResize(event) {
       if (this.isResizing) {
         const diff = event.pageX - this.startX;
-        let min = 40;
+        let min = 64;
         const currentWidth = Math.max(min, this.startWidth + diff);
         const contentWidth = this.calculateContent(this.resizingColumnIndex);
         if ((contentWidth - currentWidth) <= 80) {
@@ -310,6 +310,7 @@ export default {
 .pm-table-column-header {
   overflow: hidden;
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .pm-table-column-resizer {
@@ -379,6 +380,7 @@ export default {
   position: absolute;
   top: 20%;
   right: 7px;
+  background-color: #F2F8FE
 }
 .pm-table-ellipsis-column .pm-table-filter-button {
   opacity: 0;
@@ -416,16 +418,27 @@ export default {
   opacity: 1 !important;
 }
 .pm-table-tooltip-header .tooltip-inner {
-  background-color: #deebff;
-  color: #104a75;
+  background-color: #FFFFFF;
+  color: #4C545C;
   box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
   max-width: 250px;
   padding: 14px;
   border-radius: 7px;
+  border: 1px solid #CDDDEE
 }
 .pm-table-tooltip-header .arrow::before {
-  border-bottom-color: #deebff !important;
-  border-top-color: #deebff !important;
+  border-bottom-color: #CDDDEE !important;
+  border-top-color: #CDDDEE !important;
+}
+.pm-table-tooltip-header .arrow::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  border-width: 0 .4rem .4rem;
+  transform: translateY(3px);
+  border-color: transparent;
+  border-style: solid;
+  border-bottom-color: #FFFFFF;
 }
 .pm-table-filter-applied {
   color: #1572C2;
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index 2c298922d2..a4511b0eea 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -14,7 +14,23 @@
       >
         <!-- Slot Table Header -->
         <template v-for="(column, index) in tableHeaders" v-slot:[column.field]>
-          <div :key="index" style="display: inline-block;">{{ $t(column.label) }}</div>
+          <div
+            :key="index"
+            :id="`requests-table-column-${column.field}`"
+            class="pm-table-column-header-text"
+          >
+            {{ $t(column.label) }}
+          </div>
+          <b-tooltip
+            :key="index"
+            :target="`requests-table-column-${column.field}`"
+            custom-class="pm-table-tooltip-header"
+            placement="bottom"
+            :delay="0"
+            @show="checkIfTooltipIsNeeded"
+          >
+            {{ $t(column.label) }}
+          </b-tooltip>
         </template>
         <!-- Slot Table Header filter Button -->
         <template v-for="(column, index) in tableHeaders" v-slot:[`filter-${column.field}`]>
@@ -589,6 +605,10 @@ export default {
   .pm-table-ellipsis-column{
     text-transform: uppercase;
   }
+  .pm-table-column-header-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
 <style lang="scss" scoped>
   @import url("../../../sass/_scrollbar.scss");
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index f6b5d6e41d..b15140f7ec 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -26,7 +26,8 @@
         >
           <div
             :key="index"
-            style="display: inline-block"
+            :id="`tasks-table-column-${column.field}`"
+            class="pm-table-column-header-text"
           >
             <img
               v-if="column.field === 'is_priority'"
@@ -37,6 +38,16 @@
             />
             <span v-else>{{ $t(column.label) }}</span>
           </div>
+          <b-tooltip
+            :key="index"
+            :target="`tasks-table-column-${column.field}`"
+            custom-class="pm-table-tooltip-header"
+            placement="bottom"
+            :delay="0"
+            @show="checkIfTooltipIsNeeded"
+          >
+            {{ $t(column.label) }}
+          </b-tooltip>
         </template>
         <!-- Slot Table Header filter Button -->
         <template
@@ -880,6 +891,10 @@ export default {
   background-color: #EDF1F6;
   color: #888;
 }
+.pm-table-column-header-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
 <style lang="scss" scoped>
 @import url("../../../sass/_scrollbar.scss");

From 7d62bc80a9904999b7c6054e55e84f97167a146d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Thu, 20 Jun 2024 19:48:49 -0400
Subject: [PATCH 4/4] SonarQube fixes

---
 .../PMColumnFilterPopover/PMColumnFilterPopover.vue          | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
index 6a39491a83..d44bc1e08a 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
@@ -71,10 +71,7 @@
     },
     computed: {
       columnHover() {
-        if (this.columnMouseover === this.value) {
-          return true;
-        }
-        return false;
+        return this.columnMouseover === this.value;
       },
     },
     methods: {