From 0d1f4fd92528311500e971ee2f7b94161c33b551 Mon Sep 17 00:00:00 2001
From: Gustavo Bascope <gustavo.bascope@processmaker.com>
Date: Thu, 1 Feb 2024 17:02:24 -0400
Subject: [PATCH 1/5] fix process archived column resize and sorting

---
 .../components/ArchivedProcessList.vue        | 92 +++++++++++++------
 1 file changed, 66 insertions(+), 26 deletions(-)

diff --git a/resources/js/processes/components/ArchivedProcessList.vue b/resources/js/processes/components/ArchivedProcessList.vue
index 64a1f5aeea..552372989a 100644
--- a/resources/js/processes/components/ArchivedProcessList.vue
+++ b/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,18 +209,24 @@ 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"),
@@ -196,6 +234,7 @@ export default {
           format: "datetime",
           width: 160,
           sortable: true,
+          direction: "none",
         },
         {
           label: this.$t("Created"),
@@ -203,6 +242,7 @@ export default {
           format: "datetime",
           width: 160,
           sortable: true,
+          direction: "none",
         },
         {
           name: "__slot:actions",

From d6c37dd960cd8df87363c6f25d99334d2e373db8 Mon Sep 17 00:00:00 2001
From: Gustavo Bascope <gustavo.bascope@processmaker.com>
Date: Fri, 2 Feb 2024 12:58:40 -0400
Subject: [PATCH 2/5] Fix header background and cut off space on resize

---
 resources/js/components/shared/FilterTable.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 46a7422606..0643668451 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -168,8 +168,18 @@ export default {
     });
   },
   methods: {
+    calculateColumnWidth() {
+      this.headers.forEach((headerColumn, index) => {
+        const column = document.getElementById(`column-${index}`);
+        const rect = column.getBoundingClientRect();
+        if (rect.width !== 0) {
+          headerColumn.width = rect.width - 32;
+        }
+      });
+    },
     startResize(index) {
       this.isResizing = true;
+      this.calculateColumnWidth();
       this.resizingColumnIndex = index;
       this.startX = event.pageX;
       this.startWidth = this.headers[index].width;
@@ -254,13 +264,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 +389,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;

From 8fb169b635cabb287ddb57172ca44d89dfcdae07 Mon Sep 17 00:00:00 2001
From: Gustavo Bascope <gustavo.bascope@processmaker.com>
Date: Fri, 2 Feb 2024 18:21:56 -0400
Subject: [PATCH 3/5] Fix the resize columns

---
 resources/js/components/shared/FilterTable.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 0643668451..163f6becc9 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -190,8 +190,9 @@ export default {
     doResize(event) {
       if (this.isResizing) {
         const diff = event.pageX - this.startX;
+        let min = 40;
         this.headers[this.resizingColumnIndex].width = Math.max(
-          40,
+          min,
           this.startWidth + diff,
         );
       }

From 88eebb1fdf68b0a72a5f0965de3fefbba7c77da8 Mon Sep 17 00:00:00 2001
From: Gustavo Bascope <gustavo.bascope@processmaker.com>
Date: Mon, 5 Feb 2024 11:16:26 -0400
Subject: [PATCH 4/5] Fix the problem where dragging is causing the text to
 truncate even when the column is not moving

---
 .../js/components/shared/FilterTable.vue      | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 163f6becc9..c2530dc68b 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -170,10 +170,8 @@ export default {
   methods: {
     calculateColumnWidth() {
       this.headers.forEach((headerColumn, index) => {
-        const column = document.getElementById(`column-${index}`);
-        const rect = column.getBoundingClientRect();
-        if (rect.width !== 0) {
-          headerColumn.width = rect.width - 32;
+        if (this.calculateContent(index) !== 0) {
+          headerColumn.width = this.calculateContent(index) - 32;
         }
       });
     },
@@ -187,14 +185,19 @@ export default {
       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;
         let min = 40;
-        this.headers[this.resizingColumnIndex].width = Math.max(
-          min,
-          this.startWidth + diff,
-        );
+        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() {

From 108b4f2ba9092ae304a24e84e9429a1313fbf927 Mon Sep 17 00:00:00 2001
From: Gustavo Bascope <gustavo.bascope@processmaker.com>
Date: Mon, 5 Feb 2024 12:11:19 -0400
Subject: [PATCH 5/5] fix process list menu viewport

---
 resources/js/components/shared/EllipsisMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/shared/EllipsisMenu.vue b/resources/js/components/shared/EllipsisMenu.vue
index a3f829a313..49b8d57f22 100644
--- a/resources/js/components/shared/EllipsisMenu.vue
+++ b/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