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 += ` -
- - ${task.element_name} - -
+ 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 }}.'",