From f3c0ce79d40abd80262295c0dedd6e9454a03be4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Mon, 10 Jun 2024 11:15:50 -0400
Subject: [PATCH 1/5] Changed the scripts table style and pagination

---
 .../scripts/components/ScriptListing.vue      | 186 ++++++++++++++----
 1 file changed, 149 insertions(+), 37 deletions(-)

diff --git a/resources/js/processes/scripts/components/ScriptListing.vue b/resources/js/processes/scripts/components/ScriptListing.vue
index 91fb307e29..150ccc2f08 100644
--- a/resources/js/processes/scripts/components/ScriptListing.vue
+++ b/resources/js/processes/scripts/components/ScriptListing.vue
@@ -7,38 +7,85 @@
             :empty-desc="$t('')"
             empty-icon="noData"
     />
-    <div v-show="!shouldShowLoader" class="card card-body scripts-table-card" data-cy="scripts-table">
-      <vuetable
-        :dataManager="dataManager"
-        :sortOrder="sortOrder"
-        :css="css"
-        :api-mode="false"
-        @vuetable:pagination-data="onPaginationData"
-        :fields="fields"
+    <div v-show="!shouldShowLoader" class="scripts-table-card" data-cy="scripts-table">
+      <filter-table
+        :headers="fields"
         :data="data"
-        data-path="data"
-        :noDataTemplate="$t('No Data Available')"
-        pagination-path="meta"
+        table-name="scripts"
+        style="height: calc(100vh - 355px);"
       >
-        <template slot="title" slot-scope="props">
-          <b-link
-            v-if="permission.includes('edit-scripts')"
-            :href="`/designer/scripts/${props.rowData.id}/builder`"
-            v-uni-id="props.rowData.id.toString()"
-          >{{ props.rowData.title }}</b-link>
-          <span v-uni-id="props.rowData.id.toString()" v-else="permission.includes('edit-scripts')">{{props.rowData.title}}</span>
+        <!-- Slot Table Header filter Button -->
+        <template v-for="(column, index) in fields" v-slot:[`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',
+              }]"
+            ></i>
+          </div>
         </template>
-
-        <template slot="actions" slot-scope="props">
-          <ellipsis-menu
-            :actions="scriptActions"
-            :permission="permission"
-            :data="props.rowData"
-            :divider="true"
-            @navigate="onScriptNavigate"
-          />
+        <template v-for="(row, rowIndex) in data.data" v-slot:[`row-${rowIndex}`]>
+          <td
+            v-for="(header, colIndex) in fields"
+            :key="colIndex"
+            :data-cy="`scripts-table-td-${rowIndex}-${colIndex}`"
+          >
+            <div
+              :data-cy="`datasource-table-html-${rowIndex}-${colIndex}`"
+              v-if="containsHTML(row[header.field])"
+              v-html="sanitize(row[header.field])"
+            >
+            </div>
+            <template v-else>
+              <template
+                v-if="isComponent(row[header.field])"
+                :data-cy="`scripts-table-component-${rowIndex}-${colIndex}`"
+              >
+                <component
+                  :is="row[header.field].component"
+                  v-bind="row[header.field].props"
+                >
+                </component>
+              </template>
+              <template
+                v-else
+                :data-cy="`scripts-table-field-${rowIndex}-${colIndex}`"
+              >
+                <template v-if="header.field === 'title'">
+                  <b-link
+                    v-if="permission.includes('edit-scripts')"
+                    :href="`/designer/scripts/${row.id}/builder`"
+                    v-uni-id="row.id.toString()"
+                  >{{ row.title }}</b-link>
+                  <span v-uni-id="row.id.toString()" v-else="permission.includes('edit-scripts')">{{ row.title }}</span>
+                </template>
+                <template v-if="header.field === 'actions'">
+                  <ellipsis-menu
+                    :actions="scriptActions"
+                    :permission="permission"
+                    :data="row"
+                    :divider="true"
+                    @navigate="onScriptNavigate"
+                  />
+                </template>
+                <template v-if="header.field !== 'title' && header.field !== 'actions'">
+                  <div
+                    :style="{ maxWidth: header.width + 'px' }"
+                  >
+                    {{ getNestedPropertyValue(row, header) }}
+                  </div>
+                </template>
+              </template>
+            </template>
+          </td>
         </template>
-      </vuetable>
+      </filter-table>
 
       <add-to-project-modal id="add-to-project-modal" ref="add-to-project-modal"  assetType="script" :assetId="assetId" :assetName="assetName"/>
 
@@ -83,18 +130,20 @@
 </template>
 
 <script>
+import { createUniqIdsMixin } from "vue-uniq-ids";
 import datatableMixin from "../../../components/common/mixins/datatable";
 import dataLoadingMixin from "../../../components/common/mixins/apiDataLoading";
 import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
 import ellipsisMenuMixin from "../../../components/shared/ellipsisMenuActions";
 import scriptNavigationMixin from "../../../components/shared/scriptNavigation";
 import AddToProjectModal from "../../../components/shared/AddToProjectModal.vue";
-import { createUniqIdsMixin } from "vue-uniq-ids";
+import { FilterTableBodyMixin } from "../../../components/shared";
+
 const uniqIdsMixin = createUniqIdsMixin();
 
 export default {
   components: { EllipsisMenu, AddToProjectModal },
-  mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin, ellipsisMenuMixin, scriptNavigationMixin],
+  mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin, ellipsisMenuMixin, scriptNavigationMixin, FilterTableBodyMixin],
   props: ["filter", "id", "permission", "scriptExecutors"],
   data() {
     return {
@@ -114,43 +163,76 @@ export default {
         {
           title: () => this.$t("Name"),
           name: "__slot:title",
+          label: this.$t("Name"),
           field: "title",
-          sortField: "title"
+          sortable: true,
+          direction: "none",
+          width: 180,
+          sortField: "title",
         },
         {
           title: () => this.$t("Description"),
           name: "description",
-          sortField: "description"
+          label: this.$t("Description"),
+          field: "description",
+          sortable: true,
+          direction: "none",
+          width: 180,
+          sortField: "description",
         },
         {
           title: () => this.$t("Category"),
           name: "categories",
           sortField: "category.name",
+          label: this.$t("Category"),
+          field: "category.name",
+          sortable: true,
+          direction: "none",
+          width: 150,
           callback(categories) {
             return categories.map(item => item.name).join(', ');
-          }
+          },
         },
         {
           title: () => this.$t("Language"),
           name: "language",
           sortField: "language",
-          callback: this.formatLanguage
+          label: this.$t("Language"),
+          field: "language",
+          sortable: true,
+          direction: "none",
+          width: 130,
+          callback: this.formatLanguage,
         },
         {
           title: () => this.$t("Modified"),
           name: "updated_at",
           sortField: "updated_at",
-          callback: "formatDate"
+          label: this.$t("Modified"),
+          field: "updated_at",
+          sortable: true,
+          direction: "none",
+          format: "datetime",
+          width: 140,
+          callback: "formatDate",
         },
         {
           title: () => this.$t("Created"),
           name: "created_at",
           sortField: "created_at",
-          callback: "formatDate"
+          label: this.$t("Created"),
+          field: "created_at",
+          sortable: true,
+          direction: "none",
+          format: "datetime",
+          width: 140,
+          callback: "formatDate",
         },
         {
           name: "__slot:actions",
-          title: ""
+          title: "",
+          label: "",
+          field: "actions",
         }
       ]
     };
@@ -208,6 +290,36 @@ export default {
       this.assetName = title;
       this.$refs["add-to-project-modal"].show();
     },
+    handleEllipsisClick(categoryColumn) {
+      this.fields.forEach(column => {
+        if (column.field !== categoryColumn.field) {
+          column.direction = "none";
+          column.filterApplied = false;
+        }
+      });
+
+      if (categoryColumn.direction === "asc") {
+        categoryColumn.direction = "desc";
+      } else if (categoryColumn.direction === "desc") {
+        categoryColumn.direction = "none";
+        categoryColumn.filterApplied = false;
+      } else {
+        categoryColumn.direction = "asc";
+        categoryColumn.filterApplied = true;
+      }
+
+      if (categoryColumn.direction !== "none") {
+        const sortOrder = [
+          {
+            sortField: categoryColumn.sortField || categoryColumn.field,
+            direction: categoryColumn.direction,
+          },
+        ];
+        this.dataManager(sortOrder);
+      } else {
+        this.fetch();
+      }
+    },
   },
 
   computed: {}

From 3deb407130f51429bec27f95d8674300750f3a22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Mon, 10 Jun 2024 12:27:30 -0400
Subject: [PATCH 2/5] Changed the style and pagination in the screens list
 table

---
 .../screens/components/ScreenListing.vue      | 177 ++++++++++++++----
 1 file changed, 144 insertions(+), 33 deletions(-)

diff --git a/resources/js/processes/screens/components/ScreenListing.vue b/resources/js/processes/screens/components/ScreenListing.vue
index 8d20fd1e49..3dc16f7155 100644
--- a/resources/js/processes/screens/components/ScreenListing.vue
+++ b/resources/js/processes/screens/components/ScreenListing.vue
@@ -7,36 +7,84 @@
             :empty-desc="$t('')"
             empty-icon="noData"
     />
-    <div v-show="!shouldShowLoader" class="card card-body screen-table-card" data-cy="screens-table">
-      <vuetable
-        :dataManager="dataManager"
-        :noDataTemplate="$t('No Data Available')"
-        :sortOrder="sortOrder"
-        :css="css"
-        :api-mode="false"
-        :fields="fields"
+    <div v-show="!shouldShowLoader" class="screen-table-card" data-cy="screens-table">
+      <filter-table
+        :headers="fields"
         :data="data"
-        data-path="data"
-        pagination-path="meta"
+        table-name="scripts"
+        style="height: calc(100vh - 355px);"
       >
-        <template slot="title" slot-scope="props">
-          <b-link
-            :href="onScreenNavigate('edit-screen', props.rowData, props.rowIndex)"
-            v-if="permission.includes('edit-screens')"
-          ><span v-uni-id="props.rowData.id.toString()">{{props.rowData.title}}</span></b-link>
-          <span v-uni-id="props.rowData.id.toString()" v-else="permission.includes('edit-screens')">{{props.rowData.title}}</span>
+        <!-- Slot Table Header filter Button -->
+        <template v-for="(column, index) in fields" v-slot:[`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',
+              }]"
+            ></i>
+          </div>
         </template>
-
-        <template slot="actions" slot-scope="props">
-          <ellipsis-menu
-            :actions="screenActions"
-            :permission="permission"
-            :data="props.rowData"
-            :divider="true"
-            @navigate="onScreenNavigate"
-          />
+        <template v-for="(row, rowIndex) in data.data" v-slot:[`row-${rowIndex}`]>
+          <td
+            v-for="(header, colIndex) in fields"
+            :key="colIndex"
+            :data-cy="`scripts-table-td-${rowIndex}-${colIndex}`"
+          >
+            <div
+              :data-cy="`datasource-table-html-${rowIndex}-${colIndex}`"
+              v-if="containsHTML(row[header.field])"
+              v-html="sanitize(row[header.field])"
+            >
+            </div>
+            <template v-else>
+              <template
+                v-if="isComponent(row[header.field])"
+                :data-cy="`scripts-table-component-${rowIndex}-${colIndex}`"
+              >
+                <component
+                  :is="row[header.field].component"
+                  v-bind="row[header.field].props"
+                >
+                </component>
+              </template>
+              <template
+                v-else
+                :data-cy="`scripts-table-field-${rowIndex}-${colIndex}`"
+              >
+                <template v-if="header.field === 'title'">
+                  <b-link
+                    :href="onScreenNavigate('edit-screen', row, rowIndex)"
+                    v-if="permission.includes('edit-screens')"
+                  ><span v-uni-id="row.id.toString()">{{row.title}}</span></b-link>
+                  <span v-uni-id="row.id.toString()" v-else="permission.includes('edit-screens')">{{ row.title }}</span>
+                </template>
+                <template v-if="header.field === 'actions'">
+                  <ellipsis-menu
+                    :actions="screenActions"
+                    :permission="permission"
+                    :data="row"
+                    :divider="true"
+                    @navigate="onScreenNavigate"
+                  />
+                </template>
+                <template v-if="header.field !== 'title' && header.field !== 'actions'">
+                  <div
+                    :style="{ maxWidth: header.width + 'px' }"
+                  >
+                    {{ getNestedPropertyValue(row, header) }}
+                  </div>
+                </template>
+              </template>
+            </template>
+          </td>
         </template>
-      </vuetable>
+      </filter-table>
 
       <add-to-project-modal id="add-to-project-modal" ref="add-to-project-modal"  assetType="screen" :assetId="screenId" :assetName="assetName" :assignedProjects="assignedProjects"/>
     </div>
@@ -137,43 +185,76 @@ export default {
         {
           title: () => this.$t("Name"),
           name: "__slot:title",
+          label: this.$t("Name"),
           field: "title",
-          sortField: "title"
+          sortable: true,
+          direction: "none",
+          width: 150,
+          sortField: "title",
         },
         {
           title: () => this.$t("Description"),
           name: "description",
-          sortField: "description"
+          label: this.$t("Description"),
+          field: "description",
+          sortable: true,
+          direction: "none",
+          width: 150,
+          sortField: "description",
         },
         {
           title: () => this.$t("Category"),
           name: "categories",
+          label: this.$t("Category"),
+          field: "category.name",
+          sortable: true,
+          direction: "none",
+          width: 150,
           sortField: "category.name",
           callback(categories) {
             return categories.map(item => item.name).join(', ');
-          }
+          },
         },
         {
           title: () => this.$t("Type"),
           name: "type",
+          label: this.$t("Type"),
+          field: "type",
+          sortable: true,
+          direction: "none",
+          width: 100,
           sortField: "type",
-          callback: this.formatType
+          callback: this.formatType,
         },
         {
           title: () => this.$t("Modified"),
           name: "updated_at",
+          label: this.$t("Modified"),
+          field: "updated_at",
+          sortable: true,
+          direction: "none",
+          format: "datetime",
+          width: 140,
           sortField: "updated_at",
-          callback: "formatDate"
+          callback: "formatDate",
         },
         {
           title: () => this.$t("Created"),
           name: "created_at",
+          label: this.$t("Created"),
+          field: "created_at",
+          sortable: true,
+          direction: "none",
+          format: "datetime",
+          width: 140,
           sortField: "created_at",
-          callback: "formatDate"
+          callback: "formatDate",
         },
         {
           name: "__slot:actions",
-          title: ""
+          title: "",
+          label: "",
+          field: "actions",
         }
       ]
     };
@@ -245,6 +326,36 @@ export default {
       this.page = page;
       this.fetch();
     },
+    handleEllipsisClick(categoryColumn) {
+      this.fields.forEach(column => {
+        if (column.field !== categoryColumn.field) {
+          column.direction = "none";
+          column.filterApplied = false;
+        }
+      });
+
+      if (categoryColumn.direction === "asc") {
+        categoryColumn.direction = "desc";
+      } else if (categoryColumn.direction === "desc") {
+        categoryColumn.direction = "none";
+        categoryColumn.filterApplied = false;
+      } else {
+        categoryColumn.direction = "asc";
+        categoryColumn.filterApplied = true;
+      }
+
+      if (categoryColumn.direction !== "none") {
+        const sortOrder = [
+          {
+            sortField: categoryColumn.sortField || categoryColumn.field,
+            direction: categoryColumn.direction,
+          },
+        ];
+        this.dataManager(sortOrder);
+      } else {
+        this.fetch();
+      }
+    },
   },
 
   computed: {}

From e9c3fb0b8784ffefddb5fdce06774ece81f54912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Tue, 11 Jun 2024 18:27:56 -0400
Subject: [PATCH 3/5] changed the pagination style on assets tables

---
 .../components/shared/FilterTableBodyMixin.js |  5 +-
 .../js/components/shared/PaginationTable.vue  |  3 +-
 resources/js/components/shared/UtilsTable.js  | 30 ++++++++++++
 resources/js/components/shared/index.js       |  2 +
 .../components/RequestTab.vue                 |  3 +-
 .../components/TaskTab.vue                    |  3 +-
 .../components/CategoriesListing.vue          | 35 ++------------
 .../screens/components/ScreenListing.vue      | 47 +++++--------------
 .../scripts/components/ScriptListing.vue      | 37 ++-------------
 9 files changed, 61 insertions(+), 104 deletions(-)
 create mode 100644 resources/js/components/shared/UtilsTable.js

diff --git a/resources/js/components/shared/FilterTableBodyMixin.js b/resources/js/components/shared/FilterTableBodyMixin.js
index d153cd7fb0..a5ceec47a1 100644
--- a/resources/js/components/shared/FilterTableBodyMixin.js
+++ b/resources/js/components/shared/FilterTableBodyMixin.js
@@ -34,7 +34,8 @@ export default {
       this.page = page;
       this.fetch();
     },
-    changePerPage(value) {
+    changePerPage(value, page) {
+      this.page = page;
       this.perPage = value;
       this.fetch();
     },
@@ -81,6 +82,6 @@ export default {
       if (e.target.offsetWidth >= e.target.scrollWidth) {
         e.preventDefault();
       }
-    }
+    },
   },
 };
diff --git a/resources/js/components/shared/PaginationTable.vue b/resources/js/components/shared/PaginationTable.vue
index 3c2dd9a5cc..10c1d45735 100644
--- a/resources/js/components/shared/PaginationTable.vue
+++ b/resources/js/components/shared/PaginationTable.vue
@@ -169,8 +169,7 @@ export default {
       this.$emit("page-change", page);
     },
     changePerPage(value) {
-      this.goToPage(this.defaultPage);
-      this.$emit("per-page-change", value);
+      this.$emit("per-page-change", value, this.defaultPage);
     },
     redirectPage(value) {
       this.$emit("page-change", value);
diff --git a/resources/js/components/shared/UtilsTable.js b/resources/js/components/shared/UtilsTable.js
new file mode 100644
index 0000000000..4be0e70a86
--- /dev/null
+++ b/resources/js/components/shared/UtilsTable.js
@@ -0,0 +1,30 @@
+export const ellipsisSortClick = (categoryColumn, context)=>{
+    context.fields.forEach(column => {
+        if (column.field !== categoryColumn.field) {
+        column.direction = "none";
+        column.filterApplied = false;
+        }
+    });
+
+    if (categoryColumn.direction === "asc") {
+        categoryColumn.direction = "desc";
+    } else if (categoryColumn.direction === "desc") {
+        categoryColumn.direction = "none";
+        categoryColumn.filterApplied = false;
+    } else {
+        categoryColumn.direction = "asc";
+        categoryColumn.filterApplied = true;
+    }
+
+    if (categoryColumn.direction !== "none") {
+        const sortOrder = [
+        {
+            sortField: categoryColumn.sortField || categoryColumn.field,
+            direction: categoryColumn.direction,
+        },
+        ];
+        context.dataManager(sortOrder);
+    } else {
+        context.fetch();
+    }
+}
\ No newline at end of file
diff --git a/resources/js/components/shared/index.js b/resources/js/components/shared/index.js
index aa39660b97..66630a8c94 100644
--- a/resources/js/components/shared/index.js
+++ b/resources/js/components/shared/index.js
@@ -54,6 +54,7 @@ import DataLoading from '../../components/common/DataLoading';
 import AvatarImage from '../../components/AvatarImage';
 import FilterTableBodyMixin from "./FilterTableBodyMixin";
 import PaginationTable from "./PaginationTable.vue";
+import { ellipsisSortClick } from "./UtilsTable";
 
 export {
   AddToProjectModal,
@@ -112,4 +113,5 @@ export {
   AvatarImage,
   FilterTableBodyMixin,
   PaginationTable,
+  ellipsisSortClick,
 };
diff --git a/resources/js/processes-catalogue/components/RequestTab.vue b/resources/js/processes-catalogue/components/RequestTab.vue
index 0d5432bdca..07d7041dc1 100644
--- a/resources/js/processes-catalogue/components/RequestTab.vue
+++ b/resources/js/processes-catalogue/components/RequestTab.vue
@@ -132,7 +132,8 @@ export default {
       this.page = page;
       this.queryBuilder();
     },
-    changePerPage(value) {
+    changePerPage(value, page) {
+      this.page = page;
       this.perPage = value;
       this.queryBuilder();
     },
diff --git a/resources/js/processes-catalogue/components/TaskTab.vue b/resources/js/processes-catalogue/components/TaskTab.vue
index 0c67f94fdf..0c4c5ccf95 100644
--- a/resources/js/processes-catalogue/components/TaskTab.vue
+++ b/resources/js/processes-catalogue/components/TaskTab.vue
@@ -133,7 +133,8 @@ export default {
       this.page = page;
       this.queryBuilder();
     },
-    changePerPage(value) {
+    changePerPage(value, page) {
+      this.page = page;
       this.perPage = value;
       this.queryBuilder();
     },
diff --git a/resources/js/processes/categories/components/CategoriesListing.vue b/resources/js/processes/categories/components/CategoriesListing.vue
index 5fdfa97ad9..47200211dc 100644
--- a/resources/js/processes/categories/components/CategoriesListing.vue
+++ b/resources/js/processes/categories/components/CategoriesListing.vue
@@ -19,7 +19,7 @@
               <div
                 v-if="column.sortable"
                 :key="index"
-                @click="handleEllipsisClick(column)"
+                @click="onClickEllipsis(column)"
               >
                 <i
                   :class="['fas', {
@@ -112,6 +112,8 @@
   import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
   import paginationTable from "../../../components/shared/PaginationTable.vue";
   import FilterTableBodyMixin from "../../../components/shared/FilterTableBodyMixin";
+  import { ellipsisSortClick } from "../../../components/shared/UtilsTable";
+
   const uniqIdsMixin = createUniqIdsMixin();
 
   export default {
@@ -292,35 +294,8 @@
         };
         return bubbleColor[status];
       },
-      handleEllipsisClick(categoryColumn) {
-        this.fields.forEach(column => {
-          if (column.field !== categoryColumn.field) {
-            column.direction = "none";
-            column.filterApplied = false;
-          }
-        });
-
-        if (categoryColumn.direction === "asc") {
-          categoryColumn.direction = "desc";
-        } else if (categoryColumn.direction === "desc") {
-          categoryColumn.direction = "none";
-          categoryColumn.filterApplied = false;
-        } else {
-          categoryColumn.direction = "asc";
-          categoryColumn.filterApplied = true;
-        }
-
-        if (categoryColumn.direction !== "none") {
-          const sortOrder = [
-            {
-              sortField: categoryColumn.sortField || categoryColumn.field,
-              direction: categoryColumn.direction,
-            },
-          ];
-          this.dataManager(sortOrder);
-        } else {
-          this.fetch();
-        }
+      onClickEllipsis(column) {
+        ellipsisSortClick(column, this);
       },
     }
   };
diff --git a/resources/js/processes/screens/components/ScreenListing.vue b/resources/js/processes/screens/components/ScreenListing.vue
index 3dc16f7155..611af1f2bc 100644
--- a/resources/js/processes/screens/components/ScreenListing.vue
+++ b/resources/js/processes/screens/components/ScreenListing.vue
@@ -11,7 +11,7 @@
       <filter-table
         :headers="fields"
         :data="data"
-        table-name="scripts"
+        table-name="screens"
         style="height: calc(100vh - 355px);"
       >
         <!-- Slot Table Header filter Button -->
@@ -19,7 +19,7 @@
           <div
             v-if="column.sortable"
             :key="index"
-            @click="handleEllipsisClick(column)"
+            @click="onClickEllipsis(column)"
           >
             <i
               :class="['fas', {
@@ -34,10 +34,10 @@
           <td
             v-for="(header, colIndex) in fields"
             :key="colIndex"
-            :data-cy="`scripts-table-td-${rowIndex}-${colIndex}`"
+            :data-cy="`screens-table-td-${rowIndex}-${colIndex}`"
           >
             <div
-              :data-cy="`datasource-table-html-${rowIndex}-${colIndex}`"
+              :data-cy="`screens-table-html-${rowIndex}-${colIndex}`"
               v-if="containsHTML(row[header.field])"
               v-html="sanitize(row[header.field])"
             >
@@ -45,7 +45,7 @@
             <template v-else>
               <template
                 v-if="isComponent(row[header.field])"
-                :data-cy="`scripts-table-component-${rowIndex}-${colIndex}`"
+                :data-cy="`screens-table-component-${rowIndex}-${colIndex}`"
               >
                 <component
                   :is="row[header.field].component"
@@ -55,7 +55,7 @@
               </template>
               <template
                 v-else
-                :data-cy="`scripts-table-field-${rowIndex}-${colIndex}`"
+                :data-cy="`screens-table-field-${rowIndex}-${colIndex}`"
               >
                 <template v-if="header.field === 'title'">
                   <b-link
@@ -156,6 +156,7 @@ import screenNavigationMixin from "../../../components/shared/screenNavigation";
 import CreateTemplateModal from "../../../components/templates/CreateTemplateModal.vue";
 import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
 import PaginationTable from "../../../components/shared/PaginationTable.vue";
+import { ellipsisSortClick } from "../../../components/shared/UtilsTable";
 
 import { createUniqIdsMixin } from "vue-uniq-ids";
 import AddToProjectModal from "../../../components/shared/AddToProjectModal.vue";
@@ -284,7 +285,7 @@ export default {
           }
         });
     },
-    showAddToProjectModal(title, id, projects) {        
+    showAddToProjectModal(title, id, projects) {
       this.screenId = id;
       this.assetName = title;
       this.assignedProjects = projects;
@@ -326,36 +327,10 @@ export default {
       this.page = page;
       this.fetch();
     },
-    handleEllipsisClick(categoryColumn) {
-      this.fields.forEach(column => {
-        if (column.field !== categoryColumn.field) {
-          column.direction = "none";
-          column.filterApplied = false;
-        }
-      });
-
-      if (categoryColumn.direction === "asc") {
-        categoryColumn.direction = "desc";
-      } else if (categoryColumn.direction === "desc") {
-        categoryColumn.direction = "none";
-        categoryColumn.filterApplied = false;
-      } else {
-        categoryColumn.direction = "asc";
-        categoryColumn.filterApplied = true;
-      }
-
-      if (categoryColumn.direction !== "none") {
-        const sortOrder = [
-          {
-            sortField: categoryColumn.sortField || categoryColumn.field,
-            direction: categoryColumn.direction,
-          },
-        ];
-        this.dataManager(sortOrder);
-      } else {
-        this.fetch();
-      }
+    onClickEllipsis(column) {
+      ellipsisSortClick(column, this);
     },
+
   },
 
   computed: {}
diff --git a/resources/js/processes/scripts/components/ScriptListing.vue b/resources/js/processes/scripts/components/ScriptListing.vue
index 150ccc2f08..27d2f8f171 100644
--- a/resources/js/processes/scripts/components/ScriptListing.vue
+++ b/resources/js/processes/scripts/components/ScriptListing.vue
@@ -19,7 +19,7 @@
           <div
             v-if="column.sortable"
             :key="index"
-            @click="handleEllipsisClick(column)"
+            @click="onClickEllipsis(column)"
           >
             <i
               :class="['fas', {
@@ -137,7 +137,7 @@ import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
 import ellipsisMenuMixin from "../../../components/shared/ellipsisMenuActions";
 import scriptNavigationMixin from "../../../components/shared/scriptNavigation";
 import AddToProjectModal from "../../../components/shared/AddToProjectModal.vue";
-import { FilterTableBodyMixin } from "../../../components/shared";
+import { FilterTableBodyMixin, ellipsisSortClick } from "../../../components/shared";
 
 const uniqIdsMixin = createUniqIdsMixin();
 
@@ -285,40 +285,13 @@ export default {
           this.loading = false;
         });
     },
-    showAddToProjectModal(title, id) {        
+    showAddToProjectModal(title, id) {
       this.assetId = id;
       this.assetName = title;
       this.$refs["add-to-project-modal"].show();
     },
-    handleEllipsisClick(categoryColumn) {
-      this.fields.forEach(column => {
-        if (column.field !== categoryColumn.field) {
-          column.direction = "none";
-          column.filterApplied = false;
-        }
-      });
-
-      if (categoryColumn.direction === "asc") {
-        categoryColumn.direction = "desc";
-      } else if (categoryColumn.direction === "desc") {
-        categoryColumn.direction = "none";
-        categoryColumn.filterApplied = false;
-      } else {
-        categoryColumn.direction = "asc";
-        categoryColumn.filterApplied = true;
-      }
-
-      if (categoryColumn.direction !== "none") {
-        const sortOrder = [
-          {
-            sortField: categoryColumn.sortField || categoryColumn.field,
-            direction: categoryColumn.direction,
-          },
-        ];
-        this.dataManager(sortOrder);
-      } else {
-        this.fetch();
-      }
+    onClickEllipsis(column) {
+      ellipsisSortClick(column, this);
     },
   },
 

From 25f411dc5260cc8aaa5d1cc1d7d13212b8f8e625 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Tue, 11 Jun 2024 18:40:35 -0400
Subject: [PATCH 4/5] php-cs-fixer observations

---
 .../Controllers/Api/ProcessController.php     | 21 +++++++++++--------
 .../Http/Controllers/Auth/LoginController.php |  8 +++----
 .../Http/Controllers/ProcessController.php    |  2 +-
 ProcessMaker/Models/ProcessRequest.php        |  3 ++-
 routes/web.php                                |  1 -
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/ProcessMaker/Http/Controllers/Api/ProcessController.php b/ProcessMaker/Http/Controllers/Api/ProcessController.php
index b55cd6a597..e6000c96bb 100644
--- a/ProcessMaker/Http/Controllers/Api/ProcessController.php
+++ b/ProcessMaker/Http/Controllers/Api/ProcessController.php
@@ -45,7 +45,7 @@ class ProcessController extends Controller
 {
     const CAROUSEL_TYPES = [
         'IMAGE' => 'image',
-        'EMBED' => 'embed'
+        'EMBED' => 'embed',
     ];
 
     /**
@@ -128,6 +128,7 @@ public function index(Request $request)
                     'id' => $item['id'],
                     'events'=> $item['start_events']];
             });
+
             return new ApiCollection($modifiedCollection);
         }
 
@@ -402,7 +403,7 @@ public function store(Request $request)
      * @param Process $process
      * @return ResponseFactory|Response
      *
-     * @throws \Throwable
+     * @throws Throwable
      *
      * @OA\Put(
      *     path="/processes/{processId}",
@@ -520,7 +521,7 @@ public function update(Request $request, Process $process)
     public function updateBpmn(Request $request, Process $process)
     {
         $request->validate(Process::rules($process));
-        
+
         // bpmn validation
         if ($schemaErrors = $this->validateBpmn($request)) {
             $warnings = [];
@@ -557,7 +558,8 @@ public function updateBpmn(Request $request, Process $process)
         ], 200);
     }
 
-    private function updateSubprocessElement($parentProcess, $request, $process) {
+    private function updateSubprocessElement($parentProcess, $request, $process)
+    {
         $definitions = $parentProcess->getDefinitions();
         $elements = $definitions->getElementsByTagName('callActivity');
         foreach ($elements as $element) {
@@ -584,7 +586,7 @@ private function updateSubprocessElement($parentProcess, $request, $process) {
      * @param Process $process
      * @return ResponseFactory|Response
      *
-     * @throws \Throwable
+     * @throws Throwable
      *
      * @OA\Put(
      *     path="/processes/{processId}/draft",
@@ -948,7 +950,7 @@ public function startProcesses(Request $request)
      * @param Process $process
      * @return ResponseFactory|Response
      *
-     * @throws \Throwable
+     * @throws Throwable
      *
      * @OA\Put(
      *     path="/processes/{processId}/restore",
@@ -1294,7 +1296,7 @@ public function import_ready($code)
      *
      * @return resource
      *
-     * @throws \Throwable
+     * @throws Throwable
      *
      * @OA\Post(
      *     path="/processes/{process_id}/import/assignments",
@@ -1440,7 +1442,7 @@ public function importAssignments(Process $process, Request $request)
      * @param Process $process
      * @param Request $request
      *
-     * @return \ProcessMaker\Http\Resources\ProcessRequests
+     * @return ProcessRequests
      *
      * @OA\Post(
      *     path="/process_events/{process_id}",
@@ -1778,7 +1780,7 @@ public function deleteMediaImages(Request $request, Process $process)
      * @param string $uuid
      * @param string $collectionName
      * @return bool
-    */
+     */
     private function deleteImage(Process $process, $uuid, $collectionName)
     {
         // Retrieve the media image by UUID and collection name
@@ -1788,6 +1790,7 @@ private function deleteImage(Process $process, $uuid, $collectionName)
         // If the media image exists, delete it and return true
         if ($mediaImagen) {
             $mediaImagen->delete();
+
             return true;
         } else {
             // Otherwise, return false
diff --git a/ProcessMaker/Http/Controllers/Auth/LoginController.php b/ProcessMaker/Http/Controllers/Auth/LoginController.php
index 4b3d7cf925..61ed085d2b 100644
--- a/ProcessMaker/Http/Controllers/Auth/LoginController.php
+++ b/ProcessMaker/Http/Controllers/Auth/LoginController.php
@@ -277,11 +277,11 @@ public function loggedOut(Request $request)
      * Handle a login request to the application.
      * Overrides the original login action.
      *
-     * @param  \Illuminate\Http\Request $request
-     * @param  \ProcessMaker\Models\User $user
+     * @param  Request $request
+     * @param  User $user
      * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\Response|\Illuminate\Http\JsonResponse
      *
-     * @throws \Illuminate\Validation\ValidationException
+     * @throws ValidationException
      */
     public function login(Request $request, User $user)
     {
@@ -340,7 +340,7 @@ public function login(Request $request, User $user)
     /**
      * Throws locked error message
      *
-     * @throws \Illuminate\Validation\ValidationException
+     * @throws ValidationException
      */
     protected function throwLockedLoginResponse()
     {
diff --git a/ProcessMaker/Http/Controllers/ProcessController.php b/ProcessMaker/Http/Controllers/ProcessController.php
index 9da007d074..74bb1600bd 100644
--- a/ProcessMaker/Http/Controllers/ProcessController.php
+++ b/ProcessMaker/Http/Controllers/ProcessController.php
@@ -124,7 +124,7 @@ public function edit(Process $process)
             'canEditData',
             'addons',
             'assignedProjects',
-            'isDraft'
+            'isDraft',
         ]));
     }
 
diff --git a/ProcessMaker/Models/ProcessRequest.php b/ProcessMaker/Models/ProcessRequest.php
index 5ab2a1f681..accec25261 100644
--- a/ProcessMaker/Models/ProcessRequest.php
+++ b/ProcessMaker/Models/ProcessRequest.php
@@ -527,10 +527,11 @@ public function summary()
                 $result[] = [
                     'key' => $key,
                     'value' => $value,
-                    'type' => $type
+                    'type' => $type,
                 ];
             }
         }
+
         return $result;
     }
 
diff --git a/routes/web.php b/routes/web.php
index 2be96209ed..c9863aa524 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -210,4 +210,3 @@
 
 // SAML Metadata Route
 Route::resource('/saml/metadata', MetadataController::class)->only('index');
-

From 1b2afd6bb6f248f53cd7afee36d3df3c61019c2e Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Wed, 12 Jun 2024 14:46:52 -0700
Subject: [PATCH 5/5] Quick style update

---
 resources/js/components/shared/PaginationTable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/components/shared/PaginationTable.vue b/resources/js/components/shared/PaginationTable.vue
index 10c1d45735..e5581f48be 100644
--- a/resources/js/components/shared/PaginationTable.vue
+++ b/resources/js/components/shared/PaginationTable.vue
@@ -233,7 +233,6 @@ export default {
     font-weight: 700;
 }
 .pagination-total {
-  margin-left: 10px;
   padding: 0px 8px 0px 8px;
 }
 .pagination-dropup {