Merge pull request #6167 from ProcessMaker/observation/FOUR-13973-B

observation/FOUR-13973-B Added an identifier for multiple instances of the table component

Author: ryancooley

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,15 +65,15 @@
             >
               <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' }"
                 >
                   <div v-html="sanitize(getNestedPropertyValue(row, header.field))"></div>
                 </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) {

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 -->

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 -->

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 -->

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 -->