observation/FOUR-13816 TOOL TIP: Task column does not have filtering options

resources/js/components/shared/FilterTable.vue

@@ -37,8 +37,17 @@
             <div
               v-if="index !== headers.length - 1"
               class="pm-table-column-resizer"
-              @mousedown="startResize(index)"
+              @mousedown="startResize($event, index)"
             />
+            <b-tooltip
+              v-if="column.tooltip"
+              :target="`${tableName}-column-${index}`"
+              custom-class="pm-table-tooltip-header"
+              placement="bottom"
+              delay="500"
+            >
+              {{ column.tooltip }}
+            </b-tooltip>
           </th>
         </tr>
         <tr>
@@ -75,6 +84,7 @@
                   v-if="header.truncate"
                   :target="`${tableName}-element-${rowIndex}-${index}`"
                   custom-class="pm-table-tooltip"
+                  @show="checkIfTooltipIsNeeded"
                 >
                   {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
                 </b-tooltip>
@@ -97,6 +107,7 @@
                       v-if="header.truncate"
                       :target="`${tableName}-element-${rowIndex}-${index}`"
                       custom-class="pm-table-tooltip"
+                      @show="checkIfTooltipIsNeeded"
                     >
                       {{ getNestedPropertyValue(row, header) }}
                     </b-tooltip>
@@ -175,7 +186,7 @@ export default {
         }
       });
     },
-    startResize(index) {
+    startResize(event, index) {
       this.isResizing = true;
       this.calculateColumnWidth();
       this.resizingColumnIndex = index;
@@ -343,6 +354,21 @@ export default {
   border-bottom-color: #F2F8FE !important;
   border-top-color: #F2F8FE !important;
 }
+.pm-table-tooltip-header {
+  opacity: 1 !important;
+}
+.pm-table-tooltip-header .tooltip-inner {
+  background-color: #deebff;
+  color: #104a75;
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
+  max-width: 250px;
+  padding: 14px;
+  border-radius: 7px;
+}
+.pm-table-tooltip-header .arrow::before {
+  border-bottom-color: #deebff !important;
+  border-top-color: #deebff !important;
+}
 .pm-table-filter-applied {
   color: #1572C2;
   background-color: #F2F8FE !important;

resources/js/components/shared/FilterTableBodyMixin.js

@@ -72,5 +72,10 @@ export default {
       }
       return "-";
     },
+    checkIfTooltipIsNeeded(e,v){
+      if (e.target.offsetWidth >= e.target.scrollWidth) {
+        e.preventDefault();
+      }
+    }
   },
 };

resources/js/processes/components/ArchivedProcessList.vue

@@ -95,6 +95,7 @@
                     v-if="header.truncate"
                     :target="`element-archived-${row.id}`"
                     custom-class="pm-table-tooltip"
+                    @show="checkIfTooltipIsNeeded"
                   >
                     {{ row[header.field] }}
                   </b-tooltip>

resources/js/processes/components/ProcessesListing.vue

@@ -95,6 +95,7 @@
                     v-if="header.truncate"
                     :target="`element-${row.id}`"
                     custom-class="pm-table-tooltip"
+                    @show="checkIfTooltipIsNeeded"
                   >
                     {{ row[header.field] }}
                   </b-tooltip>

resources/js/requests/components/RequestsListing.vue

@@ -54,6 +54,7 @@
                 v-if="header.truncate"
                 :target="`element-${rowIndex}-${colIndex}`"
                 custom-class="pm-table-tooltip"
+                @show="checkIfTooltipIsNeeded"
               >
                 {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
               </b-tooltip>
@@ -77,6 +78,7 @@
                     v-if="header.truncate"
                     :target="`element-${rowIndex}-${colIndex}`"
                     custom-class="pm-table-tooltip"
+                    @show="checkIfTooltipIsNeeded"
                   >
                     {{ getNestedPropertyValue(row, header) }}
                   </b-tooltip>
@@ -259,6 +261,7 @@ export default {
           default: true,
           width: 140,
           truncate: true,
+          tooltip: this.$t("This column can not be sorted or filtered."),
         },
         {
           label: this.$t("Participants"),
@@ -334,16 +337,13 @@ export default {
       );
     },
     formatActiveTasks(value) {
-      let htmlString = '';
-      for (const task of value) {
-        htmlString += `
-          <div class="text-truncate">
-            <a class="text-nowrap" href="${this.openTask(task)}">
-              ${task.element_name}
-            </a>
-          </div>
+      return value.map((task) => {
+        return `
+          <a href="${this.openTask(task)}">
+            ${task.element_name}
+          </a>
         `;
-      }
+      }).join('<br/>');
       return htmlString;
     },
     formatCaseNumber(value) {

resources/js/tasks/components/TasksList.vue

@@ -56,6 +56,7 @@
                 v-if="header.truncate"
                 :target="`element-${rowIndex}-${colIndex}`"
                 custom-class="pm-table-tooltip"
+                @show="checkIfTooltipIsNeeded"
               >
                 {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
               </b-tooltip>
@@ -86,6 +87,7 @@
                       v-if="header.truncate"
                       :target="`element-${rowIndex}-${colIndex}`"
                       custom-class="pm-table-tooltip"
+                      @show="checkIfTooltipIsNeeded"
                     >
                       {{ getNestedPropertyValue(row, header) }}
                     </b-tooltip>

resources/js/templates/components/ProcessTemplatesListing.vue

@@ -70,6 +70,7 @@
                       v-if="header.truncate"
                       :target="`element-${row.id}`"
                       custom-class="pm-table-tooltip"
+                      @show="checkIfTooltipIsNeeded"
                     >
                       {{ row[header.field] }}
                     </b-tooltip>

resources/lang/en.json

@@ -1768,6 +1768,7 @@
   "There is a validation error in your form.": "There is a validation error in your form.",
   "These credentials do not match our records.": "These credentials do not match our records.",
   "This application installs a new version of ProcessMaker.": "This application installs a new version of ProcessMaker.",
+  "This column can not be sorted or filtered.": "This column can not be sorted or filtered.",
   "This control is hidden until this expression is true": "This control is hidden until this expression is true",
   "This environment already contains a newer version of the {{ item }} named '{{ name }}.'":"This environment already contains a newer version of the {{ item }} named '{{ name }}.'",
   "This environment already contains an older version of the {{ item }} named '{{ name }}.'":"This environment already contains an older version of the {{ item }} named '{{ name }}.'",