From e96eb221512784b2a8c313f7c67c2d2e40810480 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Tue, 28 May 2024 10:58:33 -0400
Subject: [PATCH 1/4] Added a reset size functionality to tables

---
 .../js/components/shared/FilterTable.vue      | 20 +++++++++----------
 resources/sass/_scrollbar.scss                |  9 ++++++---
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 3889be6e99..f1005b8005 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -37,6 +37,7 @@
             <div
               v-if="index !== visibleHeaders.length - 1"
               class="pm-table-column-resizer"
+              @dblclick="resetSize(index)"
               @mousedown="startResize($event, index)"
             />
             <b-tooltip
@@ -180,6 +181,7 @@ export default {
       startX: 0,
       startWidth: 0,
       resizingColumnIndex: -1,
+      originalWidths: [],
     };
   },
   computed: {
@@ -212,6 +214,9 @@ export default {
     },
     calculateColumnWidth(widthAdjust = 1) {
       this.visibleHeaders.forEach((headerColumn, index) => {
+        if (!this.originalWidths[index]) {
+          this.originalWidths[index] = headerColumn.width || this.calculateContent(index);
+        }
         if (this.calculateContent(index) !== 0) {
           headerColumn.width = (this.calculateContent(index) * widthAdjust) - 32;
         }
@@ -250,6 +255,11 @@ export default {
         this.resizingColumnIndex = -1;
       }
     },
+    resetSize(index) {
+      if (this.originalWidths[index]) {
+        this.visibleHeaders[index].width = this.originalWidths[index];
+      }
+    },
     handleRowClick(row, event) {
       this.$emit("table-row-click", row, event);
     },
@@ -279,8 +289,6 @@ export default {
   border-right: 1px solid rgba(0, 0, 0, 0.125);
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 5px;
-  scrollbar-width: 8px;
-  scrollbar-color: #6C757D;
   max-height: calc(100vh - 150px);
 }
 
@@ -429,14 +437,6 @@ export default {
     white-space: nowrap;
   }
 }
-.pm-table-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.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;
diff --git a/resources/sass/_scrollbar.scss b/resources/sass/_scrollbar.scss
index 4be0f570e2..8346601d4d 100644
--- a/resources/sass/_scrollbar.scss
+++ b/resources/sass/_scrollbar.scss
@@ -1,16 +1,19 @@
 /* Works on Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: #6A7888 #f7f9fb;
+  scrollbar-color: rgba(73, 94, 109, 0.5) transparent;
 }
 /* Works on Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 *::-webkit-scrollbar-track {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), var(--icons-buttons-inter, #f7f9fb);
+  background-color: transparent;
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
 }
 *::-webkit-scrollbar-thumb {
-  background-color: #6A7888;
+  background-color: rgba(73, 94, 109, 0.5);
   border-radius: 4px;
 }

From 3d5ee563794b6eed241020f72b0e5f0895655886 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Wed, 29 May 2024 17:02:02 -0400
Subject: [PATCH 2/4] new pagination style and functionality

---
 .../js/components/shared/PaginationTable.vue  | 89 ++++++++++++++-----
 resources/sass/_scrollbar.scss                |  1 -
 2 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/resources/js/components/shared/PaginationTable.vue b/resources/js/components/shared/PaginationTable.vue
index 0323ebb1cf..3c2dd9a5cc 100644
--- a/resources/js/components/shared/PaginationTable.vue
+++ b/resources/js/components/shared/PaginationTable.vue
@@ -1,29 +1,51 @@
 <template>
   <div class="pagination">
-    <button
+    <b-button
       :disabled="currentPage === 1"
       class="pagination-button"
+      variant="light"
+      @click="firstPage"
+    >
+      <img src="/img/pagination-images/first.svg" :alt="$t('No Image')">
+    </b-button>
+    <b-button
+      :disabled="currentPage === 1"
+      class="pagination-button"
+      variant="light"
       @click="previousPage"
     >
-      <strong>&lt;</strong>
-    </button>
+      <img src="/img/pagination-images/previous.svg" :alt="$t('No Image')">
+    </b-button>
 
     <input
       ref="pageInput"
       v-model="pageInput"
       type="text"
       :placeholder="pageInputPlaceholder"
-      class="pagination-button pagination-input"
+      class="pagination-input"
       @keyup.enter="redirectPage(pageInput)"
     >
 
-    <button
+    <span class="pagination-total">
+      of {{ totalPageCount }}
+    </span>
+
+    <b-button
       :disabled="currentPage >= totalPageCount"
       class="pagination-button"
+      variant="light"
       @click="nextPage"
     >
-      <strong>&gt;</strong>
-    </button>
+      <img src="/img/pagination-images/next.svg" :alt="$t('No Image')">
+    </b-button>
+    <b-button
+      :disabled="currentPage >= totalPageCount"
+      class="pagination-button"
+      variant="light"
+      @click="lastPage"
+    >
+      <img src="/img/pagination-images/last.svg" :alt="$t('No Image')">
+    </b-button>
     <span class="pagination-total">
       {{ totalItems }}
     </span>
@@ -113,7 +135,7 @@ export default {
       return `${this.meta.per_page} per Page`;
     },
     pageInputPlaceholder() {
-      return `${this.currentPage}-${this.totalPageCount}`;
+      return `${this.currentPage}`;
     },
   },
   watch: {
@@ -132,11 +154,17 @@ export default {
         this.goToPage(this.currentPage - 1);
       }
     },
-    nextPage() {
-      if (this.currentPage < this.totalPageCount) {
-        this.goToPage(this.currentPage + 1);
+    firstPage() {
+      if (this.currentPage > 1) {
+        this.goToPage(1);
       }
     },
+    nextPage() {
+      this.goToPage(this.currentPage + 1);
+    },
+    lastPage() {
+      this.goToPage(this.totalPageCount);
+    },
     goToPage(page) {
       this.$emit("page-change", page);
     },
@@ -176,21 +204,30 @@ export default {
   align-items: center;
   margin-top: 20px;
   font-weight: 400;
-  font-size: 15px;
-  color: #5C5C63;
+  font-size: 16px;
+  color: #556271;
+  gap: 8px;
 }
 .pagination-button {
-  background-color: #FFFFFF;
-  border: 1px solid #CDDDEE;
-  border-radius: 8px;
-  padding: 5px 10px;
-  color: #5C5C63;
-  margin-right: 8px;
-  font-weight: 400;
-  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  border-radius: 4px;
+  padding: 8px;
+  width: 32px;
+  height:32px;
+}
+.pagination-button:focus {
+  box-shadow: 0px 0px 0px 3px rgba(72, 145, 255, 0.4);
+}
+.btn.disabled, .btn:disabled {
+  opacity: 0.5;
 }
 .pagination-button:hover {
-  background-color: #FAFBFC;
+  background-color: #EBEEF2;
+}
+.btn.disabled:hover {
+  background-color: transparent;
 }
 .pagination-current-page {
     color: #1572C2;
@@ -198,6 +235,7 @@ export default {
 }
 .pagination-total {
   margin-left: 10px;
+  padding: 0px 8px 0px 8px;
 }
 .pagination-dropup {
   font-weight: 400;
@@ -213,6 +251,13 @@ export default {
   font-size: 14.5px;
   color: #5C5C63;
 }
+.pagination-input {
+  border: solid 1px;
+  border-radius: 4px;
+  width: 44px;
+  height: 32;
+  border-color: #CDDDEE;
+}
 .pagination-input::placeholder {
   text-align: center;
 }
diff --git a/resources/sass/_scrollbar.scss b/resources/sass/_scrollbar.scss
index 8346601d4d..27bab475b2 100644
--- a/resources/sass/_scrollbar.scss
+++ b/resources/sass/_scrollbar.scss
@@ -10,7 +10,6 @@
 }
 *::-webkit-scrollbar-track {
   background-color: transparent;
-  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.5);
   border-radius: 4px;
 }
 *::-webkit-scrollbar-thumb {

From 7452d95de37a22752548d73b9cf9b090afc7549b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Wed, 29 May 2024 17:08:55 -0400
Subject: [PATCH 3/4] Added new icons for pagination

---
 resources/img/pagination-images/first.svg    | 3 +++
 resources/img/pagination-images/last.svg     | 3 +++
 resources/img/pagination-images/next.svg     | 3 +++
 resources/img/pagination-images/previous.svg | 3 +++
 4 files changed, 12 insertions(+)
 create mode 100644 resources/img/pagination-images/first.svg
 create mode 100644 resources/img/pagination-images/last.svg
 create mode 100644 resources/img/pagination-images/next.svg
 create mode 100644 resources/img/pagination-images/previous.svg

diff --git a/resources/img/pagination-images/first.svg b/resources/img/pagination-images/first.svg
new file mode 100644
index 0000000000..7399ee56fa
--- /dev/null
+++ b/resources/img/pagination-images/first.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.35967 11.7681C8.6565 12.015 9.07204 12.0712 9.42511 11.9056C9.77817 11.74 10 11.3869 10 10.9995V1.00134C10 0.613911 9.77504 0.260851 9.42511 0.0952558C9.07517 -0.070339 8.65962 -0.0172236 8.35967 0.232731L2.36077 5.23182L2.00146 5.53176V1.00134C2.00146 0.448316 1.55467 0.00152292 1.00164 0.00152292C0.44862 0.00152292 0.00182629 0.448316 0.00182629 1.00134V10.9995C0.00182629 11.5525 0.44862 11.9993 1.00164 11.9993C1.55467 11.9993 2.00146 11.5525 2.00146 10.9995V6.46909L2.36077 6.76904L8.35967 11.7681Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/last.svg b/resources/img/pagination-images/last.svg
new file mode 100644
index 0000000000..621fd4a98e
--- /dev/null
+++ b/resources/img/pagination-images/last.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.64033 11.7681C2.3435 12.015 1.92796 12.0712 1.57489 11.9056C1.22183 11.74 1 11.3869 1 10.9995V1.00134C1 0.613911 1.22496 0.260851 1.57489 0.0952558C1.92483 -0.070339 2.34038 -0.0172236 2.64033 0.232731L8.63923 5.23182L8.99854 5.53176V1.00134C8.99854 0.448316 9.44533 0.00152292 9.99836 0.00152292C10.5514 0.00152292 10.9982 0.448316 10.9982 1.00134V10.9995C10.9982 11.5525 10.5514 11.9993 9.99836 11.9993C9.44533 11.9993 8.99854 11.5525 8.99854 10.9995V6.46909L8.63923 6.76904L2.64033 11.7681Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/next.svg b/resources/img/pagination-images/next.svg
new file mode 100644
index 0000000000..99343901d6
--- /dev/null
+++ b/resources/img/pagination-images/next.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.08203 5.16524L2.151 0.230924C1.50566 -0.305821 0.527344 0.152909 0.527344 0.992042V11.008C0.527344 11.8471 1.50566 12.3058 2.151 11.7691L8.08235 6.83476C8.60411 6.40069 8.6038 5.59931 8.08203 5.16524Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/previous.svg b/resources/img/pagination-images/previous.svg
new file mode 100644
index 0000000000..499314c292
--- /dev/null
+++ b/resources/img/pagination-images/previous.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.917967 5.16524L6.849 0.230924C7.49434 -0.305821 8.47266 0.152909 8.47266 0.992042V11.008C8.47266 11.8471 7.49434 12.3058 6.849 11.7691L0.917655 6.83476C0.395888 6.40069 0.3962 5.59931 0.917967 5.16524Z" fill="#556271"/>
+</svg>

From 66ea685754be84a35b16ba1d0ef316b78e39ec5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Wed, 29 May 2024 17:16:44 -0400
Subject: [PATCH 4/4] added public path for the icons

---
 webpack.mix.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webpack.mix.js b/webpack.mix.js
index 811935b1a2..866b36d0b2 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -56,6 +56,7 @@ mix
   .copy("resources/img/launchpad-images/*", "public/img/launchpad-images")
   .copy("resources/img/launchpad-images/icons/*", "public/img/launchpad-images/icons")
   .copy("resources/img/smartinbox-images/*", "public/img/smartinbox-images")
+  .copy("resources/img/pagination-images/*", "public/img/pagination-images")
   .copy("resources/img/script_lang/*", "public/img/script_lang")
   .copy("node_modules/snapsvg/dist/snap.svg.js", "public/js")
   .copy("resources/js/components/CustomActions.vue", "public/js")