diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 92fed23042..5f7e67b3d5 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -37,8 +37,17 @@
+
+ {{ column.tooltip }}
+
@@ -75,6 +84,7 @@
v-if="header.truncate"
:target="`${tableName}-element-${rowIndex}-${index}`"
custom-class="pm-table-tooltip"
+ @show="checkIfTooltipIsNeeded"
>
{{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
@@ -97,6 +107,7 @@
v-if="header.truncate"
:target="`${tableName}-element-${rowIndex}-${index}`"
custom-class="pm-table-tooltip"
+ @show="checkIfTooltipIsNeeded"
>
{{ getNestedPropertyValue(row, header) }}
@@ -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;
diff --git a/resources/js/components/shared/FilterTableBodyMixin.js b/resources/js/components/shared/FilterTableBodyMixin.js
index dd64cfbaae..0a7e0da7e2 100644
--- a/resources/js/components/shared/FilterTableBodyMixin.js
+++ b/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();
+ }
+ }
},
};
diff --git a/resources/js/processes/components/ArchivedProcessList.vue b/resources/js/processes/components/ArchivedProcessList.vue
index 2fe7f5ad24..ca53554823 100644
--- a/resources/js/processes/components/ArchivedProcessList.vue
+++ b/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] }}
diff --git a/resources/js/processes/components/ProcessesListing.vue b/resources/js/processes/components/ProcessesListing.vue
index 0f1043e254..50f59f5624 100644
--- a/resources/js/processes/components/ProcessesListing.vue
+++ b/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] }}
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index 0e7d0c7544..0d306c7e8f 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/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)) }}
@@ -77,6 +78,7 @@
v-if="header.truncate"
:target="`element-${rowIndex}-${colIndex}`"
custom-class="pm-table-tooltip"
+ @show="checkIfTooltipIsNeeded"
>
{{ getNestedPropertyValue(row, header) }}
@@ -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 += `
-
+ return value.map((task) => {
+ return `
+
+ ${task.element_name}
+
`;
- }
+ }).join('
');
return htmlString;
},
formatCaseNumber(value) {
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 6ddd97645e..50ed8e1ebe 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/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)) }}
@@ -86,6 +87,7 @@
v-if="header.truncate"
:target="`element-${rowIndex}-${colIndex}`"
custom-class="pm-table-tooltip"
+ @show="checkIfTooltipIsNeeded"
>
{{ getNestedPropertyValue(row, header) }}
diff --git a/resources/js/templates/components/ProcessTemplatesListing.vue b/resources/js/templates/components/ProcessTemplatesListing.vue
index 1b5c926854..68aed44a2f 100644
--- a/resources/js/templates/components/ProcessTemplatesListing.vue
+++ b/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] }}
diff --git a/resources/lang/en.json b/resources/lang/en.json
index 1a47723878..0dd5689511 100644
--- a/resources/lang/en.json
+++ b/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 }}.'",