From fc3fb1cef810cc56532d5c94deeda69892691e20 Mon Sep 17 00:00:00 2001 From: Gustavo Bascope Date: Thu, 8 Feb 2024 09:21:58 -0400 Subject: [PATCH 1/6] Added a tooltip property for columns headers --- .../js/components/shared/FilterTable.vue | 23 +++++++++++++++++++ .../requests/components/RequestsListing.vue | 1 + 2 files changed, 24 insertions(+) diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue index f3fc0b3be4..976a462163 100644 --- a/resources/js/components/shared/FilterTable.vue +++ b/resources/js/components/shared/FilterTable.vue @@ -39,6 +39,14 @@ class="pm-table-column-resizer" @mousedown="startResize(index)" /> + + {{ column.tooltip }} + @@ -367,6 +375,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/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue index d1b3bf72ca..4831a26716 100644 --- a/resources/js/requests/components/RequestsListing.vue +++ b/resources/js/requests/components/RequestsListing.vue @@ -258,6 +258,7 @@ export default { default: true, width: 140, truncate: true, + tooltip: this.$t("This column doesn't have a filter"), }, { label: this.$t("Participants"), From 15421175e1d1936858433e85a0058dbc2053c2da Mon Sep 17 00:00:00 2001 From: Gustavo Bascope Date: Fri, 9 Feb 2024 15:33:58 -0400 Subject: [PATCH 2/6] added task tooltip to translations --- resources/lang/en.json | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/lang/en.json b/resources/lang/en.json index 1a47723878..5e5576081b 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 doesn't have a filter": "This column doesn't have a filter", "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 }}.'", From a9ad68d424cca9e8a9ef26e5412101d6f950d75c Mon Sep 17 00:00:00 2001 From: Gustavo Bascope Date: Fri, 9 Feb 2024 15:43:58 -0400 Subject: [PATCH 3/6] sonarQube --- resources/js/components/shared/FilterTable.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue index 2b1eea75be..0c10040f2b 100644 --- a/resources/js/components/shared/FilterTable.vue +++ b/resources/js/components/shared/FilterTable.vue @@ -41,7 +41,6 @@ /> From 4ca3efeb659f46b532d4f9f1cddc5535fa10a487 Mon Sep 17 00:00:00 2001 From: Nolan Ehrstrom Date: Fri, 9 Feb 2024 13:59:04 -0800 Subject: [PATCH 4/6] Only show tooltip if necessary --- .../js/components/shared/FilterTable.vue | 4 ++++ .../components/shared/FilterTableBodyMixin.js | 6 ++++++ .../components/ArchivedProcessList.vue | 1 + .../processes/components/ProcessesListing.vue | 1 + .../requests/components/RequestsListing.vue | 19 +++++++++---------- resources/js/tasks/components/TasksList.vue | 2 ++ .../components/ProcessTemplatesListing.vue | 1 + resources/lang/en.json | 2 +- 8 files changed, 25 insertions(+), 11 deletions(-) diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue index 0c10040f2b..2b521b55c8 100644 --- a/resources/js/components/shared/FilterTable.vue +++ b/resources/js/components/shared/FilterTable.vue @@ -43,6 +43,8 @@ v-if="column.tooltip" :target="`${tableName}-column-${index}`" custom-class="pm-table-tooltip-header" + placement="bottom" + delay="600" > {{ column.tooltip }} @@ -82,6 +84,7 @@ v-if="header.truncate" :target="`${tableName}-element-${rowIndex}-${index}`" custom-class="pm-table-tooltip" + @show="checkIfTooltipIsNeeded" > {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }} @@ -104,6 +107,7 @@ v-if="header.truncate" :target="`${tableName}-element-${rowIndex}-${index}`" custom-class="pm-table-tooltip" + @show="checkIfTooltipIsNeeded" > {{ getNestedPropertyValue(row, header) }} diff --git a/resources/js/components/shared/FilterTableBodyMixin.js b/resources/js/components/shared/FilterTableBodyMixin.js index dd64cfbaae..751ab0b4dd 100644 --- a/resources/js/components/shared/FilterTableBodyMixin.js +++ b/resources/js/components/shared/FilterTableBodyMixin.js @@ -72,5 +72,11 @@ export default { } return "-"; }, + checkIfTooltipIsNeeded(e,v){ + console.log(e.target, e.target.offsetWidth, e.target.scrollWidth); + 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 617e64be55..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,7 +261,7 @@ export default { default: true, width: 140, truncate: true, - tooltip: this.$t("This column doesn't have a filter"), + tooltip: this.$t("This column can not be sorted or filtered."), }, { label: this.$t("Participants"), @@ -335,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 5e5576081b..0dd5689511 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -1768,7 +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 doesn't have a filter": "This column doesn't have a filter", + "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 }}.'", From a598084e3d43e9bb8a5604d7e940364ef78052e8 Mon Sep 17 00:00:00 2001 From: Nolan Ehrstrom Date: Fri, 9 Feb 2024 14:00:08 -0800 Subject: [PATCH 5/6] Remove debugging --- resources/js/components/shared/FilterTableBodyMixin.js | 1 - 1 file changed, 1 deletion(-) diff --git a/resources/js/components/shared/FilterTableBodyMixin.js b/resources/js/components/shared/FilterTableBodyMixin.js index 751ab0b4dd..0a7e0da7e2 100644 --- a/resources/js/components/shared/FilterTableBodyMixin.js +++ b/resources/js/components/shared/FilterTableBodyMixin.js @@ -73,7 +73,6 @@ export default { return "-"; }, checkIfTooltipIsNeeded(e,v){ - console.log(e.target, e.target.offsetWidth, e.target.scrollWidth); if (e.target.offsetWidth >= e.target.scrollWidth) { e.preventDefault(); } From c348440e5cf27dbfbe173f9101fb2143cb68cf5a Mon Sep 17 00:00:00 2001 From: Nolan Ehrstrom Date: Fri, 9 Feb 2024 14:20:08 -0800 Subject: [PATCH 6/6] Sonar qube --- resources/js/components/shared/FilterTable.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue index 2b521b55c8..5f7e67b3d5 100644 --- a/resources/js/components/shared/FilterTable.vue +++ b/resources/js/components/shared/FilterTable.vue @@ -37,14 +37,14 @@
{{ column.tooltip }} @@ -186,7 +186,7 @@ export default { } }); }, - startResize(index) { + startResize(event, index) { this.isResizing = true; this.calculateColumnWidth(); this.resizingColumnIndex = index;