Merge pull request #6141 from ProcessMaker/observation/FOUR-13973

observation/FOUR-13973 In processes some columns are not resizing

Author: ryancooley

resources/js/components/shared/EllipsisMenu.vue

@@ -10,7 +10,7 @@
     class="ellipsis-dropdown-main"
     @show="onShow"
     @hide="onHide"
-    boundary="viewport"
+    
   >
     <template v-if="customButton" #button-content>
       <i

resources/js/components/shared/FilterTable.vue

@@ -168,22 +168,36 @@ export default {
     });
   },
   methods: {
+    calculateColumnWidth() {
+      this.headers.forEach((headerColumn, index) => {
+        if (this.calculateContent(index) !== 0) {
+          headerColumn.width = this.calculateContent(index) - 32;
+        }
+      });
+    },
     startResize(index) {
       this.isResizing = true;
+      this.calculateColumnWidth();
       this.resizingColumnIndex = index;
       this.startX = event.pageX;
       this.startWidth = this.headers[index].width;
 
       document.addEventListener("mousemove", this.doResize);
       document.addEventListener("mouseup", this.stopResize);
     },
+    calculateContent(index) {
+      const miDiv = document.getElementById(`column-${index}`);
+      return miDiv.scrollWidth;
+    },
     doResize(event) {
       if (this.isResizing) {
         const diff = event.pageX - this.startX;
-        this.headers[this.resizingColumnIndex].width = Math.max(
-          40,
-          this.startWidth + diff,
-        );
+        let min = 40;
+        const currentWidth = Math.max(min, this.startWidth + diff);
+        const contentWidth = this.calculateContent(this.resizingColumnIndex);
+        if ((contentWidth - currentWidth) <= 60) {
+          this.headers[this.resizingColumnIndex].width = currentWidth;
+        }
       }
     },
     stopResize() {
@@ -254,13 +268,13 @@ export default {
 
 .pm-table-column-resizer {
   position: absolute;
-  right: -5px;
+  right: 0px;
   top: 50%;
   transform: translateY(-50%);
   height: 85%;
   width: 10px;
   cursor: col-resize;
-  border-left: 1px solid rgba(0, 0, 0, 0.125);
+  border-right: 1px solid rgba(0, 0, 0, 0.125);
 }
 .pm-table-filter {
   width: 100%;
@@ -379,7 +393,7 @@ export default {
 .pm-table-container::-webkit-scrollbar-thumb {
   background-color: #6C757D;
   border-radius: 20px;
-} 
+}
 .ellipsis-dropdown-main ul.dropdown-menu.dropdown-menu-right.show {
   max-height: 250px;
   overflow-y: auto;

resources/js/processes/components/ArchivedProcessList.vue

@@ -17,6 +17,25 @@
         :data="data"
         style="height: calc(100vh - 355px);"
       >
+        <!-- Slot Table Header filter Button -->
+        <template
+          v-for="(column, index) in fields"
+          #[`filter-${column.field}`]
+        >
+          <div
+            v-if="column.sortable"
+            :key="index"
+            @click="handleEllipsisClick(column)"
+          >
+            <i
+              :class="['fas', {
+                'fa-sort': column.direction === 'none',
+                'fa-sort-up': column.direction === 'asc',
+                'fa-sort-down': column.direction === 'desc',
+              }]"
+            />
+          </div>
+        </template>
         <!-- Slot Table Body -->
         <template
           v-for="(row, rowIndex) in data.data"
@@ -33,39 +52,52 @@
               v-html="sanitize(row[header.field])"
             />
             <template v-else>
-              <template v-if="isComponent(row[header.field])">
+              <template
+                v-if="isComponent(row[header.field])"
+                :data-cy="`process-table-component-${rowIndex}-${colIndex}`"
+              >
                 <component
                   :is="row[header.field].component"
-                  :data-cy="`process-table-component-${rowIndex}-${colIndex}`"
                   v-bind="row[header.field].props"
                 />
               </template>
-              <template v-else>
-                <div
-                  v-if="header.field === 'name'"
-                  :data-cy="`process-table-field-${rowIndex}-${colIndex}`"
-                >
-                  <i
-                    v-b-tooltip
-                    tabindex="0"
-                    :title="row.warningMessages.join(' ')"
-                    class="text-warning fa fa-exclamation-triangle"
-                    :class="{'invisible': row.warningMessages.length == 0}"
-                  />
-                  <i
-                    v-if="row.status == 'ACTIVE' || row.status == 'INACTIVE'"
-                    v-b-tooltip
-                    tabindex="0"
-                    :title="row.status"
-                    class="mr-2"
-                    :class="{ 'fas fa-check-circle text-success': row.status == 'ACTIVE', 'far fa-circle': row.status == 'INACTIVE' }"
-                  />
-                  <span
-                    v-uni-id="row.id.toString()"
+              <template
+                v-else
+                :data-cy="`process-table-field-${rowIndex}-${colIndex}`"
+              >
+                <template v-if="header.field === 'name'">
+                  <div
+                    :id="`element-archived-${row.id}`"
+                    :class="{ 'pm-table-truncate': header.truncate }"
+                    :style="{ maxWidth: header.width + 'px' }"
+                  >
+                    <i
+                      v-b-tooltip
+                      tabindex="0"
+                      :title="row.warningMessages.join(' ')"
+                      class="text-warning fa fa-exclamation-triangle"
+                      :class="{'invisible': row.warningMessages.length == 0}"
+                    />
+                    <i
+                      v-if="row.status == 'ACTIVE' || row.status == 'INACTIVE'"
+                      v-b-tooltip
+                      tabindex="0"
+                      :title="row.status"
+                      class="mr-2"
+                      :class="{ 'fas fa-check-circle text-success': row.status == 'ACTIVE', 'far fa-circle': row.status == 'INACTIVE' }"
+                    />
+                    <span>
+                      {{ row[header.field] }}
+                    </span>
+                  </div>
+                  <b-tooltip
+                    v-if="header.truncate"
+                    :target="`element-archived-${row.id}`"
+                    custom-class="pm-table-tooltip"
                   >
                     {{ row[header.field] }}
-                  </span>
-                </div>
+                  </b-tooltip>
+                </template>
                 <ellipsis-menu
                   v-if="header.field === 'actions'"
                   class="process-table"
@@ -177,32 +209,40 @@ export default {
           field: "name",
           width: 200,
           sortable: true,
+          truncate: true,
+          direction: "none",
         },
         {
           label: this.$t("Category"),
           field: "category_list",
           width: 160,
           sortable: true,
+          direction: "none",
+          sortField: "category.name",
         },
         {
           label: this.$t("Owner"),
           field: "owner",
           width: 160,
           sortable: true,
+          direction: "none",
+          sortField: "user.username",
         },
         {
           label: this.$t("Modified"),
           field: "updated_at",
           format: "datetime",
           width: 160,
           sortable: true,
+          direction: "none",
         },
         {
           label: this.$t("Created"),
           field: "created_at",
           format: "datetime",
           width: 160,
           sortable: true,
+          direction: "none",
         },
         {
           name: "__slot:actions",