From 3d3a757ddc8f0cf49a15a58a391f5259dfd10e61 Mon Sep 17 00:00:00 2001
From: Gustavo Bascope <gustavo.bascope@processmaker.com>
Date: Tue, 6 Feb 2024 16:29:27 -0400
Subject: [PATCH] Added an identifier for multiple instances of the table
 component

---
 resources/js/components/shared/FilterTable.vue | 18 ++++++++++++------
 .../components/CategoriesListing.vue           |  1 +
 .../components/ArchivedProcessList.vue         |  1 +
 .../processes/components/ProcessesListing.vue  |  1 +
 .../components/ProcessTemplatesListing.vue     |  1 +
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 9ad466a300..f3fc0b3be4 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -18,7 +18,7 @@
         <tr>
           <th
             v-for="(column, index) in headers"
-            :id="`column-${index}`"
+            :id="`${tableName}-column-${index}`"
             :key="index"
             class="pm-table-ellipsis-column"
             :class="{ 'pm-table-filter-applied': column.filterApplied }"
@@ -65,7 +65,7 @@
             >
               <template v-if="containsHTML(getNestedPropertyValue(row, header.field))">
                 <div
-                  :id="`element-${rowIndex}-${index}`"
+                  :id="`${tableName}-element-${rowIndex}-${index}`"
                   :class="{ 'pm-table-truncate': header.truncate }"
                   :style="{ maxWidth: header.width + 'px' }"
                 >
@@ -73,7 +73,7 @@
                 </div>
                 <b-tooltip
                   v-if="header.truncate"
-                  :target="`element-${rowIndex}-${index}`"
+                  :target="`${tableName}-element-${rowIndex}-${index}`"
                   custom-class="pm-table-tooltip"
                 >
                   {{ sanitizeTooltip(getNestedPropertyValue(row, header.field)) }}
@@ -88,14 +88,14 @@
                 </template>
                 <template v-else>
                   <div
-                    :id="`element-${rowIndex}-${index}`"
+                    :id="`${tableName}-element-${rowIndex}-${index}`"
                     :class="{ 'pm-table-truncate': header.truncate }"
                     :style="{ maxWidth: header.width + 'px' }"
                   >
                     {{ getNestedPropertyValue(row, header.field) }}
                     <b-tooltip
                       v-if="header.truncate"
-                      :target="`element-${rowIndex}-${index}`"
+                      :target="`${tableName}-element-${rowIndex}-${index}`"
                       custom-class="pm-table-tooltip"
                     >
                       {{ getNestedPropertyValue(row, header.field) }}
@@ -141,6 +141,12 @@ export default {
         return false;
       }
     },
+    tableName: {
+      type: String,
+      default: function () {
+        return "";
+      }
+    },
   },
   data() {
     return {
@@ -194,7 +200,7 @@ export default {
       document.addEventListener("mouseup", this.stopResize);
     },
     calculateContent(index) {
-      const miDiv = document.getElementById(`column-${index}`);
+      const miDiv = document.getElementById(`${this.tableName}-column-${index}`);
       return miDiv.scrollWidth;
     },
     doResize(event) {
diff --git a/resources/js/processes/categories/components/CategoriesListing.vue b/resources/js/processes/categories/components/CategoriesListing.vue
index 37734146a0..3f906ffe17 100644
--- a/resources/js/processes/categories/components/CategoriesListing.vue
+++ b/resources/js/processes/categories/components/CategoriesListing.vue
@@ -11,6 +11,7 @@
           <filter-table
             :headers="fields"
             :data="data"
+            table-name="categories"
             style="height: calc(100vh - 355px);"
           >
          <!-- Slot Table Header filter Button -->
diff --git a/resources/js/processes/components/ArchivedProcessList.vue b/resources/js/processes/components/ArchivedProcessList.vue
index 552372989a..ab6059bfb7 100644
--- a/resources/js/processes/components/ArchivedProcessList.vue
+++ b/resources/js/processes/components/ArchivedProcessList.vue
@@ -15,6 +15,7 @@
       <filter-table
         :headers="fields"
         :data="data"
+        table-name="archived"
         style="height: calc(100vh - 355px);"
       >
         <!-- Slot Table Header filter Button -->
diff --git a/resources/js/processes/components/ProcessesListing.vue b/resources/js/processes/components/ProcessesListing.vue
index ff612d4190..ad520c703b 100644
--- a/resources/js/processes/components/ProcessesListing.vue
+++ b/resources/js/processes/components/ProcessesListing.vue
@@ -15,6 +15,7 @@
       <filter-table
         :headers="fields"
         :data="data"
+        table-name="processes"
         style="height: calc(100vh - 355px);"
       >
         <!-- Slot Table Header filter Button -->
diff --git a/resources/js/templates/components/ProcessTemplatesListing.vue b/resources/js/templates/components/ProcessTemplatesListing.vue
index 5b785b7ed2..980833bcea 100644
--- a/resources/js/templates/components/ProcessTemplatesListing.vue
+++ b/resources/js/templates/components/ProcessTemplatesListing.vue
@@ -11,6 +11,7 @@
         <filter-table
           :headers="fields"
           :data="data"
+          table-name="templates"
           style="height: calc(100vh - 355px);"
         >
           <!-- Slot Table Header filter Button -->