From 9679a65d50806a6bcd5f1bc8bc0d8238f187cf09 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 22 May 2024 15:30:13 +0000
Subject: [PATCH 01/24] FOUR-15762:Update the list component (like Request)

---
 src/components/renderer/form-requests.vue | 215 ++++++++++++++--------
 1 file changed, 137 insertions(+), 78 deletions(-)

diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
index c138bd457..2b2226c95 100755
--- a/src/components/renderer/form-requests.vue
+++ b/src/components/renderer/form-requests.vue
@@ -1,51 +1,64 @@
 <template>
   <div v-if="showTable">
-    <vuetable
-      ref="vuetable"
-      :data-manager="dataManager"
-      :sort-order="sortOrder"
-      :api-mode="false"
-      :fields="fields"
+    <filter-table
+      :headers="tableHeaders"
       :data="tableData"
-      :css="css"
-      data-path="data"
-      pagination-path="meta"
+      :unread="unreadColumnName"
+      :loading="shouldShowLoader"
     >
-      <template slot="ids" slot-scope="props">
-        <b-link
-          class="text-nowrap"
-          :href="openRequest(props.rowData, props.rowIndex)"
+      <template
+        v-for="(row, rowIndex) in data.data"
+        v-slot:[`row-${rowIndex}`]
+      >
+        <td
+          v-for="(header, colIndex) in tableHeaders"
+          :key="`${rowIndex}-${colIndex}`"
         >
-          #{{ props.rowData.id }}
-        </b-link>
-      </template>
-      <template slot="name" slot-scope="props">
-        <span v-uni-id="props.rowData.id.toString()">{{
-          props.rowData.name
-        }}</span>
-      </template>
-      <template slot="status" slot-scope="props">
-        <span>
-          <i :class="`fas fa-circle text-${props.rowData.status.color}`" />
-          {{ props.rowData.status.label }}
-        </span>
-      </template>
-      <template slot="actions" slot-scope="props">
-        <div class="actions">
-          <div class="popout">
-            <b-btn
-              v-b-tooltip.hover
-              v-uni-aria-describedby="props.rowData.id.toString()"
-              variant="link"
-              :href="openRequest(props.rowData, props.rowIndex)"
-              :title="$t('Open Request')"
+          <template v-if="containsHTML(getNestedPropertyValue(row, header))">
+            <div
+              :id="`element-${rowIndex}-${colIndex}`"
+              :class="{ 'pm-table-truncate': header.truncate }"
+              :style="{ maxWidth: header.width + 'px' }"
             >
-              <i class="fas fa-caret-square-right fa-lg fa-fw" />
-            </b-btn>
-          </div>
-        </div>
+              <span v-html="sanitize(getNestedPropertyValue(row, header))"></span>
+            </div>
+            <b-tooltip
+              v-if="header.truncate"
+              :target="`element-${rowIndex}-${colIndex}`"
+              custom-class="pm-table-tooltip"
+              @show="checkIfTooltipIsNeeded"
+            >
+              {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
+            </b-tooltip>
+          </template>
+          <template v-else>
+            <template v-if="isComponent(row[header.field])">
+              <component
+                :is="row[header.field].component"
+                v-bind="row[header.field].props"
+              />
+            </template>
+            <template v-else>
+              <div
+                :id="`element-${rowIndex}-${colIndex}`"
+                :class="{ 'pm-table-truncate': header.truncate }"
+                :style="{ maxWidth: header.width + 'px' }"
+              >
+                {{ getNestedPropertyValue(row, header) }}
+                <b-tooltip
+                  v-if="header.truncate"
+                  :target="`element-${rowIndex}-${colIndex}`"
+                  custom-class="pm-table-tooltip"
+                  @show="checkIfTooltipIsNeeded"
+                >
+                  {{ getNestedPropertyValue(row, header) }}
+                </b-tooltip>
+              </div>
+            </template>
+          </template>
+        </td>
       </template>
-    </vuetable>
+    </filter-table>
   </div>
   <div v-else>
     <formEmpty link="Requests" title="No Requests to Show" :url="noDataUrl" />
@@ -78,7 +91,8 @@ export default {
           sortField: "id",
           direction: "desc"
         }
-      ]
+      ],
+      tableHeaders: [],
     };
   },
   computed: {
@@ -87,7 +101,7 @@ export default {
     }
   },
   mounted() {
-    this.setFields();
+    this.setupColumns();
     this.pmql = `requester = "${Processmaker.user.username}"`;
     this.fetch();
     this.$root.$on("dropdownSelectionRequest", this.fetchData);
@@ -158,39 +172,6 @@ export default {
           });
       });
     },
-    setFields() {
-      this.fields.push({
-        name: "__slot:ids",
-        field: "id",
-        sortField: "id",
-        sortable: true,
-        title: "#"
-      });
-
-      this.fields.push({
-        name: "__slot:name",
-        field: "name",
-        sortField: "name",
-        sortable: true,
-        title: () => this.$t("Name")
-      });
-
-      this.fields.push({
-        name: "__slot:status",
-        field: "status",
-        sortField: "status",
-        sortable: true,
-        title: () => this.$t("Status")
-      });
-
-      this.fields.push({
-        name: "__slot:actions",
-        title: ""
-      });
-      this.$nextTick(() => {
-        this.$refs.vuetable.normalizeFields();
-      });
-    },
     formatStatus(status) {
       let color = "";
       let label = "";
@@ -215,7 +196,7 @@ export default {
           color = "success";
           label = "In Progress";
       }
-      return { color, label };
+      return (`<span class="badge badge-${color} status-${color}"> ${label} </span>`);
     },
     openRequest(data, index) {
       return `/requests/${data.id}`;
@@ -249,7 +230,85 @@ export default {
       this.pmql = "";
       this.pmql = searchData;
       this.fetch();
-    }
+    },
+    setupColumns() {
+      const columns = this.getColumns();
+      this.tableHeaders = this.getColumns();
+
+      columns.forEach((column) => {
+        const field = {
+          title: () => this.$t(column.label),
+        };
+
+        switch (column.field) {
+          case "id":
+            field.name = "__slot:ids";
+            field.title = "#";
+            break;
+          case "participants":
+            field.name = "__slot:participants";
+            break;
+          case "name":
+            field.name = "__slot:name";
+            break;
+          case "case_title":
+            field.name = "__slot:case_title";
+            break;
+          default:
+            field.name = column.name || column.field;
+        }
+
+        if (!field.field) {
+          field.field = column.field;
+        }
+
+        if (column.format === "datetime") {
+          field.callback = "formatDateUser|datetime";
+        }
+
+        if (column.format === "date") {
+          field.callback = "formatDateUser|date";
+        }
+
+        if (column.sortable === true && !field.sortField) {
+          field.sortField = column.field;
+        }
+
+        this.fields.push(field);
+      });
+
+      this.fields.push({
+        name: "__slot:actions",
+        title: "",
+      });
+    },
+    getColumns() {
+      return [
+        {
+          label: "Case #",
+          field: "case_number",
+          sortable: true,
+          default: true,
+          width: 80,
+        },
+        {
+          label: "Case title",
+          field: "case_title",
+          sortable: true,
+          default: true,
+          truncate: true,
+          width: 220,
+        },
+        {
+          label: "Status",
+          field: "status",
+          sortable: true,
+          default: true,
+          width: 100,
+          filter_subject: { type: "Status" },
+        }
+      ];
+    },
   }
 };
 </script>

From e2ffc2051b42d9bed115b0e0a645c3928881d732 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 23 May 2024 16:45:24 +0000
Subject: [PATCH 02/24] =?UTF-8?q?FOUR-15761:=1B[20:My=20Cases=20-=20Update?=
 =?UTF-8?q?=20the=20columns=20to=20show=20cases?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/renderer/form-requests.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
index 2b2226c95..537be6721 100755
--- a/src/components/renderer/form-requests.vue
+++ b/src/components/renderer/form-requests.vue
@@ -289,7 +289,8 @@ export default {
           field: "case_number",
           sortable: true,
           default: true,
-          width: 80,
+          width: 96,
+          fixed_width: 96
         },
         {
           label: "Case title",
@@ -297,14 +298,18 @@ export default {
           sortable: true,
           default: true,
           truncate: true,
-          width: 220,
+          width: 314,
+          fixed_width: 314,
+          resizable: false
         },
         {
           label: "Status",
           field: "status",
           sortable: true,
           default: true,
-          width: 100,
+          width: 113,
+          fixed_width: 314,
+          resizable: false,
           filter_subject: { type: "Status" },
         }
       ];

From 825cc3d6e66ee6a69d372c131aad2dc9b4be775b Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 23 May 2024 18:04:48 +0000
Subject: [PATCH 03/24] FOUR-15760:Rename My Request to My Cases

---
 src/components/renderer/form-list-table.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index 49bba9a02..cc805441a 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -172,7 +172,7 @@
       <template v-if="listOption === 'My Tasks'">
         <FormTasks @tasksCount="getData"></FormTasks>
       </template>
-      <template v-if="listOption === 'My Requests'">
+      <template v-if="listOption === 'My Cases'">
         <FormRequests @requestsCount="getData"></FormRequests>
       </template>
       <template v-if="listOption === 'Start New Request'">
@@ -238,7 +238,7 @@ export default {
         if (listType === "requests_filter") {
           this.optionRequest = valueSelected;
           if (valueSelected === "by_me") {
-            this.title = "Request Started By Me";
+            this.title = "Cases Started By Me";
           }
           if (valueSelected === "as_participant") {
             this.title = "With Me as Participant";

From 1358b7528db09f7bb16584732e3af62f93275dcf Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Fri, 24 May 2024 12:22:24 -0400
Subject: [PATCH 04/24] FOUR-15533: Update STart  new Request Section

---
 src/components/renderer/form-list-table.vue  | 37 +++++++++++++++++---
 src/components/renderer/form-new-request.vue |  2 +-
 src/components/renderer/form-requests.vue    |  2 +-
 src/form-builder-controls.js                 |  6 ++--
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index cc805441a..a0311c395 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -172,10 +172,10 @@
       <template v-if="listOption === 'My Tasks'">
         <FormTasks @tasksCount="getData"></FormTasks>
       </template>
-      <template v-if="listOption === 'My Cases'">
+      <template v-if="verifyListCase()">
         <FormRequests @requestsCount="getData"></FormRequests>
       </template>
-      <template v-if="listOption === 'Start New Request'">
+      <template v-if="verifyNewCase()">
         <FormNewRequest @startControl="getData"></FormNewRequest>
       </template>
     </div>
@@ -212,14 +212,26 @@ export default {
   },
   watch: {
     listOption() {
-      this.title = this.listOption;
+      this.title = this.checkTitle(this.listOption);
       this.dataControl = {};
     }
   },
   mounted() {
-    this.title = this.listOption;
+    this.title = this.checkTitle(this.listOption);
   },
   methods: {
+    /**
+     * Backward compatibility beacuse value is used as title
+     */
+    checkTitle(option) {
+      if (option === "Start New Request") {
+        return "Start New Case";
+      }
+      if (option === "My Requests") {
+        return "My Cases";
+      }
+      return option;
+    },
     getData(data) {
       this.dataControl = data.dataControls;
     },
@@ -313,6 +325,23 @@ export default {
         this.badgeVariant = "";
         this.showBadge = false;
       }
+    },
+    /**
+     * Verify backward compatibility for Start New Case
+     */
+    verifyNewCase() {
+      return (
+        this.listOption === "Start New Case" ||
+        this.listOption === "Start New Request"
+      );
+    },
+    /**
+     * Verify backward compatibility for List Cases
+     */
+    verifyListCase() {
+      return (
+        this.listOption === "My Cases" || this.listOption === "My Requests"
+      );
     }
   }
 };
diff --git a/src/components/renderer/form-new-request.vue b/src/components/renderer/form-new-request.vue
index 8592a8357..a8856850e 100755
--- a/src/components/renderer/form-new-request.vue
+++ b/src/components/renderer/form-new-request.vue
@@ -12,7 +12,7 @@
       </b-container>
     </div>
     <div v-else>
-      <formEmpty link="" title="No Request to Start" url="" />
+      <formEmpty link="" title="No Case to Start" url="" />
     </div>
   </div>
 </template>
diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
index 537be6721..521acdd25 100755
--- a/src/components/renderer/form-requests.vue
+++ b/src/components/renderer/form-requests.vue
@@ -61,7 +61,7 @@
     </filter-table>
   </div>
   <div v-else>
-    <formEmpty link="Requests" title="No Requests to Show" :url="noDataUrl" />
+    <formEmpty link="Requests" title="No Cases to Show" :url="noDataUrl" />
   </div>
 </template>
 
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 7cf9f4936..e086908fd 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -951,10 +951,10 @@ export default [
             label: "List Table",
             options: [
               { value: "My Tasks", content: "My Tasks" },
-              { value: "My Requests", content: "My Requests" },
+              { value: "My Cases", content: "My Cases" },
               {
-                value: "Start New Request",
-                content: "Start New Request"
+                value: "Start New Case",
+                content: "Start New Case"
               }
             ]
           }

From 4e5e08c8aa8f42c5d538fe8fd0c8048068aa9b64 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Fri, 24 May 2024 14:20:04 -0400
Subject: [PATCH 05/24] Solve Configuration

---
 src/form-builder-controls.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index e086908fd..054ad1cf4 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -951,9 +951,9 @@ export default [
             label: "List Table",
             options: [
               { value: "My Tasks", content: "My Tasks" },
-              { value: "My Cases", content: "My Cases" },
+              { value: "My Requests", content: "My Cases" },
               {
-                value: "Start New Case",
+                value: "Start New Request",
                 content: "Start New Case"
               }
             ]

From d0b17ac4e67130817ac3b3ffc8eb84ca9fda307c Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 27 May 2024 11:45:17 -0400
Subject: [PATCH 06/24] FOUR-15763:My Cases - Implement the Open Case

---
 src/components/renderer/form-requests.vue | 24 +++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
index 521acdd25..527ee011b 100755
--- a/src/components/renderer/form-requests.vue
+++ b/src/components/renderer/form-requests.vue
@@ -149,7 +149,8 @@ export default {
           .then((response) => {
             this.showTable = response.data.data.length !== 0;
             for (const record of response.data.data) {
-              // format Status
+              record.case_number = this.formatOpenCase(record, "case_number");
+              record.case_title = this.formatOpenCase(record, "case_title");
               record.status = this.formatStatus(record.status);
             }
             this.tableData = response.data;
@@ -196,9 +197,20 @@ export default {
           color = "success";
           label = "In Progress";
       }
-      return (`<span class="badge badge-${color} status-${color}"> ${label} </span>`);
+      return `<span class="badge badge-${color} status-${color}"> ${label} </span>`;
     },
-    openRequest(data, index) {
+    /**
+     * Add the formart to column to open a case in other tab
+     */
+    formatOpenCase(value, option) {
+      const attr = value;
+      if (option === "case_title") {
+        attr[option] = value.case_title_formatted || value.case_title || "";
+      }
+      return `<a href="${this.openRequest(value)}" class="text-nowrap"
+        target="_blank">${attr[option]}</a>`;
+    },
+    openRequest(data) {
       return `/requests/${data.id}`;
     },
     classDueDate(value) {
@@ -279,7 +291,7 @@ export default {
 
       this.fields.push({
         name: "__slot:actions",
-        title: "",
+        title: ""
       });
     },
     getColumns() {
@@ -310,10 +322,10 @@ export default {
           width: 113,
           fixed_width: 314,
           resizable: false,
-          filter_subject: { type: "Status" },
+          filter_subject: { type: "Status" }
         }
       ];
-    },
+    }
   }
 };
 </script>

From b2d256e96f5749ba02ddb4cf463a0673c4d04bb3 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 27 May 2024 15:28:10 -0400
Subject: [PATCH 07/24] FOUT-15764:My Cases - Implement the scroll in this
 section

---
 src/components/renderer/form-list-table.vue | 1 +
 src/components/renderer/form-requests.vue   | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index a0311c395..fdc444d50 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -384,6 +384,7 @@ export default {
   height: 300px;
   overflow: auto;
   background-color: #f9f9f9;
+  padding: 0;
 }
 
 .btn-outline-secondary {
diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
index 521acdd25..6f75c57f6 100755
--- a/src/components/renderer/form-requests.vue
+++ b/src/components/renderer/form-requests.vue
@@ -317,3 +317,9 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.pm-table-container {
+  height: 300px;
+}
+</style>

From ab772ef35533b833900d97d86315c25e3eee8642 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 27 May 2024 16:28:32 -0400
Subject: [PATCH 08/24] FOUR-16235:Implement the new UI counters

---
 src/components/renderer/form-list-table.vue | 23 ++++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index a0311c395..987a78929 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -2,14 +2,10 @@
   <div class="card" :style="customStyle">
     <div class="card-header d-flex justify-content-between align-items-center">
       <template v-if="dataControl.showControl">
-        <div class="mb-1 mt-1">
-          <b-avatar
-            v-if="dataControl.showAvatar"
-            size="2em"
-            :variant="dataControl.variant"
-            :text="dataControl.count"
-            class="avatar-text"
-          ></b-avatar>
+        <div class="head-filter">
+          <b-badge class="badge-custom" pill :variant="dataControl.variant">
+            {{ dataControl.count }}
+          </b-badge>
           <p class="control-text mb-0" :style="dataControl.colorText">
             {{ $t(title) }}
           </p>
@@ -409,4 +405,15 @@ export default {
 .dropdown-item {
   padding: 10px 8px;
 }
+.head-filter {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.badge {
+  display: inline-flex;
+  padding: 8px;
+  height: 24px;
+  align-items: center;
+}
 </style>

From d2fd84b10e08f0f53bcbd53e7d85eb1bab6ab74d Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Tue, 28 May 2024 12:49:14 -0400
Subject: [PATCH 09/24] feature/FOUR-15768

---
 src/assets/no-priority.svg             |   3 +
 src/assets/priority-header.svg         |   3 +
 src/assets/priority.svg                |   4 +
 src/components/renderer/form-tasks.vue | 155 ++++++++++++++++---------
 4 files changed, 113 insertions(+), 52 deletions(-)
 create mode 100755 src/assets/no-priority.svg
 create mode 100755 src/assets/priority-header.svg
 create mode 100755 src/assets/priority.svg

diff --git a/src/assets/no-priority.svg b/src/assets/no-priority.svg
new file mode 100755
index 000000000..3f80a4832
--- /dev/null
+++ b/src/assets/no-priority.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4.88136L0 0V10.8475V16H1.06667V10.4407L16 4.88136ZM12.6133 4.98983L1.06667 9.30169V1.46441L12.6133 4.98983Z" fill="#6A7888"/>
+</svg>
diff --git a/src/assets/priority-header.svg b/src/assets/priority-header.svg
new file mode 100755
index 000000000..fc79b7ec3
--- /dev/null
+++ b/src/assets/priority-header.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4.8L1.06667 0.320003V0H0V10.6667V15.7333H1.06667V10.2667L16 4.8Z" fill="#556271"/>
+</svg>
diff --git a/src/assets/priority.svg b/src/assets/priority.svg
new file mode 100755
index 000000000..5647e92e3
--- /dev/null
+++ b/src/assets/priority.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4.8L1.06667 0.320003V0H0V10.6667V15.7333H1.06667V10.2667L16 4.8Z" fill="#ED4858"/>
+<path d="M16 4.8L1.06667 0.320003V0H0V10.6667V15.7333H1.06667V10.2667L16 4.8Z" fill="white" fill-opacity="0.25"/>
+</svg>
diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index f6e9e43f2..30885ac69 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -1,48 +1,51 @@
 <template>
   <div v-if="showTable">
-    <vuetable
-      ref="vuetable"
-      :data-manager="dataManager"
-      :sort-order="sortOrder"
-      :api-mode="false"
-      :fields="fields"
+    <filter-table
+      :headers="tableHeaders"
       :data="tableData"
-      :css="css"
-      data-path="data"
-      pagination-path="meta"
+      :unread="unreadColumnName"
+      :loading="shouldShowLoader"
     >
-      <template slot="name" slot-scope="props">
-        <b-link
-          v-uni-id="props.rowData.id.toString()"
-          :href="onAction('edit', props.rowData, props.rowIndex)"
+      <template
+        v-for="(column, index) in tableHeaders"
+        v-slot:[column.field]
+      >
+        <div
+          :key="index"
+          style="display: inline-block"
         >
-          {{ props.rowData.element_name }}
-        </b-link>
+          <img
+            v-if="column.field === 'is_priority'"
+            src="../../assets/priority-header.svg"
+            alt="priority-header"
+            width="20"
+            height="20"
+          />
+          <span v-else>{{ $t(column.label) }}</span>
+        </div>
       </template>
-      <template slot="requestName" slot-scope="props">
-        <b-link
-          :href="onAction('showRequestSummary', props.rowData, props.rowIndex)"
+      <template
+        v-for="(row, rowIndex) in data.data"
+        v-slot:[`row-${rowIndex}`]
+      >
+        <td v-for="(header, colIndex) in tableHeaders"
+          :key="`${rowIndex}-${colIndex}`"
         >
-          #{{ props.rowData.process_request.id }}
-          {{ props.rowData.process_request.name }}
-        </b-link>
+          <template v-if="header.field === 'due_at'">
+            <span
+              :class="[
+                'badge',
+                'badge-' + row['color_badge'],
+                'due-' + row['color_badge'],
+              ]"
+            >
+              {{ formatRemainingTime(row.due_at) }}
+            </span>
+            <span>{{ getNestedPropertyValue(row, header) }}</span>
+          </template>
+        </td>
       </template>
-      <template slot="dueDate" slot-scope="props">
-        <span :class="classDueDate(props.rowData.due_at)">
-          {{ formatDate(props.rowData.due_at) }}
-        </span>
-      </template>
-      <template slot="completedDate" slot-scope="props">
-        <span class="text-dark">
-          {{ formatDate(props.rowData.completed_at) }}
-        </span>
-      </template>
-      <template slot="preview" slot-scope="props">
-        <span>
-          <i class="fa fa-eye" @click="previewTasks(props.rowData)" />
-        </span>
-      </template>
-    </vuetable>
+    </filter-table>
     <component :is="tasksPreview" ref="preview-sidebar" />
   </div>
   <div v-else>
@@ -71,6 +74,7 @@ export default {
       order_direction: "DESC",
       status: "",
       showTable: true,
+      tableHeaders: [],
       sortOrder: [
         {
           field: "ID",
@@ -88,7 +92,7 @@ export default {
     }
   },
   mounted() {
-    this.setFields();
+    this.setupColumns();
     this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
     this.fetch();
     this.$root.$on("dropdownSelectionTask", this.fetchData);
@@ -151,6 +155,10 @@ export default {
           )
           .then((response) => {
             this.showTable = response.data.data.length !== 0;
+            for (const record of response.data.data) {
+              // format Status
+              record.case_title = record.process_request.case_title;
+            }
             this.tableData = response.data;
             this.countResponse = this.tableData.meta.total;
             this.countOverdue = `${this.tableData.meta.in_overdue}`;
@@ -178,16 +186,27 @@ export default {
       const columns = [
         {
           label: "Task",
-          field: "task",
+          field: "element_name",
           sortable: true,
-          default: true
+          default: true,
+          width: 153,
+        },
+        {
+          label: "Priority",
+          field: "is_priority",
+          sortable: false,
+          default: true,
+          width: 48,
         },
         {
-          label: "Request",
-          field: "request",
+          label: "Case title",
+          field: "case_title",
+          name: "__slot:case_number",
           sortable: true,
-          default: true
-        }
+          default: true,
+          width: 314,
+          truncate: true,
+        },
       ];
 
       if (this.status === "CLOSED") {
@@ -195,19 +214,22 @@ export default {
           label: "Completed",
           field: "completed_at",
           sortable: true,
-          default: true
+          default: true,
+          width: 220,
         });
       } else {
         columns.push({
           label: "Due",
           field: "due_at",
           sortable: true,
-          default: true
+          default: true,
+          width: 220,
         });
       }
       return columns;
     },
-    setFields() {
+    setupColumns() {
+      this.tableHeaders = this.getColumns();
       const columns = this.getColumns();
 
       columns.forEach((column) => {
@@ -221,6 +243,10 @@ export default {
             field.field = "element_name";
             field.sortField = "element_name";
             break;
+          case "is_priority":
+            field.name = "__slot:is_priority";
+            field.field = "is_priority";
+            break;
           case "request":
             field.name = "__slot:requestName";
             field.sortField = "process_requests.id,process_requests.name";
@@ -254,10 +280,6 @@ export default {
         name: "__slot:preview",
         title: ""
       });
-
-      this.$nextTick(() => {
-        this.$refs.vuetable.normalizeFields();
-      });
     },
     formatDate(value, format) {
       format = format || "";
@@ -311,7 +333,36 @@ export default {
       this.pmql = "";
       this.pmql = searchData;
       this.fetch();
-    }
+    },
+    sanitizeTooltip(html) {
+      let cleanHtml = html.replace(/<script(.*?)>[\s\S]*?<\/script>/gi, "");
+      cleanHtml = cleanHtml.replace(/<style(.*?)>[\s\S]*?<\/style>/gi, "");
+      cleanHtml = cleanHtml.replace(
+        /<(?!img|input|meta|time|button|select|textarea|datalist|progress|meter)[^>]*>/gi,
+        ""
+      );
+      cleanHtml = cleanHtml.replace(/\s+/g, " ");
+
+      return cleanHtml;
+    },
+    formatRemainingTime(date) {
+      const millisecondsPerDay = 1000 * 60 * 60 * 24;
+      const remaining = this.remainingTime(date);
+      const daysRemaining = Math.ceil(remaining / millisecondsPerDay);
+      if (daysRemaining <= 1 && daysRemaining >= -1) {
+        const hoursRemaining = Math.ceil(remaining / (1000 * 60 * 60));
+        return `${hoursRemaining}H`;
+      }
+
+      return `${daysRemaining}D`;
+    },
+    remainingTime(date) {
+      date = moment(date);
+      if (!date.isValid()) {
+        return 0;
+      }
+      return date.diff(this.now);
+    },
   }
 };
 </script>

From 8f5a8d0baef2fc908211e8429098ae970ba60b18 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Tue, 28 May 2024 15:01:48 -0400
Subject: [PATCH 10/24] feature/FOUR-15768

---
 src/components/renderer/form-tasks.vue | 47 +++++++++++++++++++-------
 src/mixins/datatable.js                | 29 +++++++++++++++-
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 30885ac69..cfdfc03fc 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -25,7 +25,7 @@
         </div>
       </template>
       <template
-        v-for="(row, rowIndex) in data.data"
+        v-for="(row, rowIndex) in tableData.data"
         v-slot:[`row-${rowIndex}`]
       >
         <td v-for="(header, colIndex) in tableHeaders"
@@ -43,6 +43,40 @@
             </span>
             <span>{{ getNestedPropertyValue(row, header) }}</span>
           </template>
+          <template v-else-if="header.field === 'is_priority'">
+            <span>
+              <img
+                :src="
+                  row[header.field]
+                    ? '../../assets/priority.svg'
+                    : '../../assets/no-priority.svg'
+                "
+                :alt="row[header.field] ? 'priority' : 'no-priority'"
+                width="20"
+                height="20"
+                @click.prevent="
+                  togglePriority(row.id, !row[header.field])
+                "
+              />
+            </span>
+          </template>
+          <template v-else>
+            <div
+              :id="`element-${rowIndex}-${colIndex}`"
+              :class="{ 'pm-table-truncate': header.truncate }"
+              :style="{ maxWidth: header.width + 'px' }"
+            >
+              {{ getNestedPropertyValue(row, header) }}
+              <b-tooltip
+                v-if="header.truncate"
+                :target="`element-${rowIndex}-${colIndex}`"
+                custom-class="pm-table-tooltip"
+                @show="checkIfTooltipIsNeeded"
+              >
+                {{ getNestedPropertyValue(row, header) }}
+              </b-tooltip>
+            </div>
+          </template>
         </td>
       </template>
     </filter-table>
@@ -334,17 +368,6 @@ export default {
       this.pmql = searchData;
       this.fetch();
     },
-    sanitizeTooltip(html) {
-      let cleanHtml = html.replace(/<script(.*?)>[\s\S]*?<\/script>/gi, "");
-      cleanHtml = cleanHtml.replace(/<style(.*?)>[\s\S]*?<\/style>/gi, "");
-      cleanHtml = cleanHtml.replace(
-        /<(?!img|input|meta|time|button|select|textarea|datalist|progress|meter)[^>]*>/gi,
-        ""
-      );
-      cleanHtml = cleanHtml.replace(/\s+/g, " ");
-
-      return cleanHtml;
-    },
     formatRemainingTime(date) {
       const millisecondsPerDay = 1000 * 60 * 60 * 24;
       const remaining = this.remainingTime(date);
diff --git a/src/mixins/datatable.js b/src/mixins/datatable.js
index 5d0bdcfc9..3cdffe394 100644
--- a/src/mixins/datatable.js
+++ b/src/mixins/datatable.js
@@ -1,3 +1,5 @@
+import { get } from 'lodash';
+
 export default {
   data() {
     return {
@@ -28,6 +30,31 @@ export default {
       }
       this.orderDirection = sortOrder[0].direction;
       this.fetch();
-    }
+    },
+    getNestedPropertyValue(obj, header) {
+      return this.format(get(obj, header.field), header);
+    },
+    format(value, header) {
+      let config = "";
+      if (header.format === "datetime") {
+        config = ProcessMaker.user.datetime_format;
+        value = this.convertUTCToLocal(value, config)
+      }
+      if (header.format === "date") {
+        config = ProcessMaker.user.datetime_format.replace(/[\sHh:msaAzZ]/g, "");
+        value = this.convertUTCToLocal(value, config)
+      }
+      return value;
+    },
+    convertUTCToLocal(value, config) {
+      if (value) {
+        if (moment(value).isValid()) {
+          return window.moment(value)
+            .format(config);
+        }
+        return value;
+      }
+      return "-";
+    },
   }
 };

From 9016d994ac3338c66a77f2fcc218865e0fa7f649 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Tue, 28 May 2024 15:09:02 -0400
Subject: [PATCH 11/24] feature/FOUR-15768

---
 src/assets/no-priority.svg             | 3 ---
 src/assets/priority.svg                | 4 ----
 src/components/renderer/form-tasks.vue | 4 ++--
 3 files changed, 2 insertions(+), 9 deletions(-)
 delete mode 100755 src/assets/no-priority.svg
 delete mode 100755 src/assets/priority.svg

diff --git a/src/assets/no-priority.svg b/src/assets/no-priority.svg
deleted file mode 100755
index 3f80a4832..000000000
--- a/src/assets/no-priority.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 4.88136L0 0V10.8475V16H1.06667V10.4407L16 4.88136ZM12.6133 4.98983L1.06667 9.30169V1.46441L12.6133 4.98983Z" fill="#6A7888"/>
-</svg>
diff --git a/src/assets/priority.svg b/src/assets/priority.svg
deleted file mode 100755
index 5647e92e3..000000000
--- a/src/assets/priority.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 4.8L1.06667 0.320003V0H0V10.6667V15.7333H1.06667V10.2667L16 4.8Z" fill="#ED4858"/>
-<path d="M16 4.8L1.06667 0.320003V0H0V10.6667V15.7333H1.06667V10.2667L16 4.8Z" fill="white" fill-opacity="0.25"/>
-</svg>
diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index cfdfc03fc..50f86d94a 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -48,8 +48,8 @@
               <img
                 :src="
                   row[header.field]
-                    ? '../../assets/priority.svg'
-                    : '../../assets/no-priority.svg'
+                    ? '/img/priority.svg'
+                    : '/img/no-priority.svg'
                 "
                 :alt="row[header.field] ? 'priority' : 'no-priority'"
                 width="20"

From 45c2761521a0dd4080f9139619f150c3bad1c45e Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Tue, 28 May 2024 15:43:46 -0400
Subject: [PATCH 12/24] some corrections

---
 src/components/renderer/form-tasks.vue | 160 ++++++++++++++++++-------
 src/mixins/datatable.js                |  71 ++++++++++-
 2 files changed, 184 insertions(+), 47 deletions(-)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 50f86d94a..7d5d586e9 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -31,51 +31,77 @@
         <td v-for="(header, colIndex) in tableHeaders"
           :key="`${rowIndex}-${colIndex}`"
         >
-          <template v-if="header.field === 'due_at'">
-            <span
-              :class="[
-                'badge',
-                'badge-' + row['color_badge'],
-                'due-' + row['color_badge'],
-              ]"
-            >
-              {{ formatRemainingTime(row.due_at) }}
-            </span>
-            <span>{{ getNestedPropertyValue(row, header) }}</span>
-          </template>
-          <template v-else-if="header.field === 'is_priority'">
-            <span>
-              <img
-                :src="
-                  row[header.field]
-                    ? '/img/priority.svg'
-                    : '/img/no-priority.svg'
-                "
-                :alt="row[header.field] ? 'priority' : 'no-priority'"
-                width="20"
-                height="20"
-                @click.prevent="
-                  togglePriority(row.id, !row[header.field])
-                "
-              />
-            </span>
-          </template>
-          <template v-else>
+          <template v-if="containsHTML(getNestedPropertyValue(row, header))">
             <div
               :id="`element-${rowIndex}-${colIndex}`"
               :class="{ 'pm-table-truncate': header.truncate }"
               :style="{ maxWidth: header.width + 'px' }"
             >
-              {{ getNestedPropertyValue(row, header) }}
-              <b-tooltip
-                v-if="header.truncate"
-                :target="`element-${rowIndex}-${colIndex}`"
-                custom-class="pm-table-tooltip"
-                @show="checkIfTooltipIsNeeded"
-              >
-                {{ getNestedPropertyValue(row, header) }}
-              </b-tooltip>
+              <span v-html="sanitize(getNestedPropertyValue(row, header))"></span>
             </div>
+            <b-tooltip
+              v-if="header.truncate"
+              :target="`element-${rowIndex}-${colIndex}`"
+              custom-class="pm-table-tooltip"
+              @show="checkIfTooltipIsNeeded"
+            >
+              {{ sanitizeTooltip(getNestedPropertyValue(row, header)) }}
+            </b-tooltip>
+          </template>
+          <template v-else>
+            <template v-if="isComponent(row[header.field])">
+              <component
+                :is="row[header.field].component"
+                v-bind="row[header.field].props"
+              >
+              </component>
+            </template>
+            <template v-else>
+              <template v-if="header.field === 'due_at'">
+                <span
+                  :class="[
+                    'badge',
+                    'badge-' + row['color_badge'],
+                    'due-' + row['color_badge'],
+                  ]"
+                >
+                  {{ formatRemainingTime(row.due_at) }}
+                </span>
+                <span>{{ getNestedPropertyValue(row, header) }}</span>
+              </template>
+              <template v-else-if="header.field === 'is_priority'">
+                <span>
+                  <img
+                    :src="
+                      row[header.field]
+                        ? '/img/priority.svg'
+                        : '/img/no-priority.svg'
+                    "
+                    :alt="row[header.field] ? 'priority' : 'no-priority'"
+                    width="20"
+                    height="20"
+                    @click.prevent="togglePriority(row.id, !row[header.field])"
+                  />
+                </span>
+              </template>
+              <template v-else>
+                <div
+                  :id="`element-${rowIndex}-${colIndex}`"
+                  :class="{ 'pm-table-truncate': header.truncate }"
+                  :style="{ maxWidth: header.width + 'px' }"
+                >
+                  {{ getNestedPropertyValue(row, header) }}
+                  <b-tooltip
+                    v-if="header.truncate"
+                    :target="`element-${rowIndex}-${colIndex}`"
+                    custom-class="pm-table-tooltip"
+                    @show="checkIfTooltipIsNeeded"
+                  >
+                    {{ getNestedPropertyValue(row, header) }}
+                  </b-tooltip>
+                </div>
+              </template>
+            </template>
           </template>
         </td>
       </template>
@@ -190,8 +216,9 @@ export default {
           .then((response) => {
             this.showTable = response.data.data.length !== 0;
             for (const record of response.data.data) {
-              // format Status
-              record.case_title = record.process_request.case_title;
+              record["case_title"] = this.formatCaseTitle(record.process_request, record);
+              record["color_badge"] = this.formatColorBadge(record["due_at"]);
+              record["element_name"] = this.formatActiveTask(record);
             }
             this.tableData = response.data;
             this.countResponse = this.tableData.meta.total;
@@ -216,6 +243,31 @@ export default {
           });
       });
     },
+    formatActiveTask(row) {
+      return `
+      <a href="${this.openTask(row)}"
+        data-cy="active-task-data"
+        class="text-nowrap">
+        ${row.element_name}
+      </a>`;
+    },
+    formatColorBadge(date) {
+      const days = this.remainingTime(date);
+      return days >= 0 ? "primary" : "danger";
+    },
+    formatCaseTitle(processRequest, record) {
+      return `
+      <a href="${this.openTask(processRequest, 1)}"
+         class="text-nowrap">
+         ${
+           processRequest.case_title_formatted ||
+           processRequest.case_title ||
+           record.case_title ||
+           ""
+         }
+      </a>`;
+    },
+    openTask() {},
     getColumns() {
       const columns = [
         {
@@ -386,6 +438,32 @@ export default {
       }
       return date.diff(this.now);
     },
+    sanitizeTooltip(html) {
+      let cleanHtml = html.replace(/<script(.*?)>[\s\S]*?<\/script>/gi, "");
+      cleanHtml = cleanHtml.replace(/<style(.*?)>[\s\S]*?<\/style>/gi, "");
+      cleanHtml = cleanHtml.replace(
+        /<(?!img|input|meta|time|button|select|textarea|datalist|progress|meter)[^>]*>/gi,
+        ""
+      );
+      cleanHtml = cleanHtml.replace(/\s+/g, " ");
+
+      return cleanHtml;
+    }
   }
 };
 </script>
+
+<style scoped>
+.due-danger {
+  background-color: rgba(237, 72, 88, 0.2);
+  color: rgba(237, 72, 88, 1);
+  font-weight: 600;
+  border-radius: 5px;
+}
+.due-primary {
+  background: rgba(205, 221, 238, 1);
+  color: rgba(86, 104, 119, 1);
+  font-weight: 600;
+  border-radius: 5px;
+}
+</style>
diff --git a/src/mixins/datatable.js b/src/mixins/datatable.js
index 3cdffe394..d14ee455d 100644
--- a/src/mixins/datatable.js
+++ b/src/mixins/datatable.js
@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import { get } from "lodash";
 
 export default {
   data() {
@@ -38,23 +38,82 @@ export default {
       let config = "";
       if (header.format === "datetime") {
         config = ProcessMaker.user.datetime_format;
-        value = this.convertUTCToLocal(value, config)
+        value = this.convertUTCToLocal(value, config);
       }
       if (header.format === "date") {
-        config = ProcessMaker.user.datetime_format.replace(/[\sHh:msaAzZ]/g, "");
-        value = this.convertUTCToLocal(value, config)
+        config = ProcessMaker.user.datetime_format.replace(
+          /[\sHh:msaAzZ]/g,
+          ""
+        );
+        value = this.convertUTCToLocal(value, config);
       }
       return value;
     },
     convertUTCToLocal(value, config) {
       if (value) {
         if (moment(value).isValid()) {
-          return window.moment(value)
-            .format(config);
+          return window.moment(value).format(config);
         }
         return value;
       }
       return "-";
     },
+    containsHTML(text) {
+      const doc = new DOMParser().parseFromString(text, "text/html");
+      return Array.from(doc.body.childNodes).some(
+        (node) => node.nodeType === Node.ELEMENT_NODE
+      );
+    },
+    isComponent(content) {
+      if (content && typeof content === "object") {
+        return content.component && typeof content.props === "object";
+      }
+      return false;
+    },
+    sanitize(html) {
+      return this.removeScripts(html);
+    },
+    removeScripts(input) {
+      const doc = new DOMParser().parseFromString(input, "text/html");
+
+      const scripts = doc.querySelectorAll("script");
+      scripts.forEach((script) => {
+        script.remove();
+      });
+
+      const styles = doc.querySelectorAll("style");
+      styles.forEach((style) => {
+        style.remove();
+      });
+
+      return doc.body.innerHTML;
+    },
+    changePage(page) {
+      this.page = page;
+      this.fetch();
+    },
+    changePerPage(value) {
+      this.perPage = value;
+      this.fetch();
+    },
+    formatAvatar(user) {
+      return {
+        component: "AvatarImage",
+        props: {
+          size: "25",
+          "input-data": user,
+          "hide-name": false,
+          "name-clickable": true
+        }
+      };
+    },
+    formatCategory(categories) {
+      return categories.map((item) => item.name).join(", ");
+    },
+    checkIfTooltipIsNeeded(e, v) {
+      if (e.target.offsetWidth >= e.target.scrollWidth) {
+        e.preventDefault();
+      }
+    }
   }
 };

From b712263883db648bfd6f274104d82839056e39f5 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Tue, 28 May 2024 16:07:06 -0400
Subject: [PATCH 13/24] feature/FOUR-15535

---
 src/components/renderer/form-list-table.vue | 133 ++++++--------------
 1 file changed, 38 insertions(+), 95 deletions(-)

diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index 987a78929..44ea7aa1a 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -11,7 +11,7 @@
           </p>
           <template v-if="dataControl.dropdownShow === 'requests'">
             <b-dropdown
-              variant="outline-secondary"
+              variant="link"
               right
               no-caret
             >
@@ -43,45 +43,22 @@
         <template v-if="dataControl.dropdownShow === 'requests'">
           <div class="mr-4">
             <b-dropdown
-              variant="outline-secondary"
+              variant="link"
+              right
               size="sm"
             >
               <template #button-content>
                 <span class="text-capitalize">
-                  <b-icon
-                    v-if="showBadge"
-                    icon="circle-fill"
-                    class="mr-2"
-                    :variant="badgeVariant"
-                  />
                   {{ $t(titleDropdown) }}
                 </span>
               </template>
               <b-dropdown-item
-                @click="handleDropdownSelection('requests_dropdown', 'all')"
-              >
-                <span class="item-text">
-                  {{ $t("View All") }}
-                </span>
-              </b-dropdown-item>
-              <b-dropdown-item
-                @click="handleDropdownSelection('requests_dropdown', 'Completed')"
-              >
-                <span class="item-text">
-                  <i
-                    class="fas fa-circle mr-2 text-primary" 
-                  />
-                  {{ $t("Completed") }}
-                </span>
-              </b-dropdown-item>
-              <b-dropdown-item
-                @click="handleDropdownSelection('requests_dropdown', 'In Progress')"
+                v-for="option in requestFilterDropdown"
+                :key="option"
+                @click="handleDropdownSelection('requests_dropdown', option)"
               >
                 <span class="item-text">
-                  <i
-                    class="fas fa-circle mr-2 text-success"
-                  />
-                  {{ $t("In Progress") }}
+                  {{ $t(option) }}
                 </span>
               </b-dropdown-item>
             </b-dropdown>
@@ -90,43 +67,22 @@
         <template v-if="dataControl.dropdownShow === 'tasks'">
           <div class="mr-4">
             <b-dropdown
-              variant="outline-secondary"
+              variant="link"
+              right
               size="sm"
             >
               <template #button-content>
                 <span class="text-capitalize">
-                  <b-icon
-                    v-if="showBadge"
-                    icon="circle-fill"
-                    class="mr-2"
-                    :variant="badgeVariant"
-                  />
                   {{ $t(titleDropdown) }}
                 </span>
               </template>
-              <b-dropdown-item @click="handleDropdownSelection('tasks', 'all')">
-                <span class="item-text">
-                  {{ $t("View All") }}
-                </span>
-              </b-dropdown-item>
               <b-dropdown-item
-                @click="handleDropdownSelection('tasks', 'Overdue')"
+                v-for="option in taskFilterDropdown"
+                :key="option"
+                @click="handleDropdownSelection('tasks', option)"
               >
                 <span class="item-text">
-                <i
-                  class="fas fa-circle mr-2 text-danger"
-                />
-                {{ $t("Overdue") }}
-                </span>
-              </b-dropdown-item>
-              <b-dropdown-item
-                @click="handleDropdownSelection('tasks', 'In Progress')"
-              >
-                <span class="item-text">
-                  <i
-                    class="fas fa-circle mr-2 text-warning"
-                  />
-                  {{ $t("In Progress") }}
+                {{ $t(option) }}
                 </span>
               </b-dropdown-item>
             </b-dropdown>
@@ -198,12 +154,22 @@ export default {
       searchCriteria: "",
       showInput: false,
       pmql: "",
-      badgeVariant: "",
       typeSelected: "",
       showBadge: false,
       customStyle: {
         "border-radius": "8px"
-      }
+      },
+      taskFilterDropdown: [
+        "Self-service",
+        "In Progress",
+        "Overdue",
+        "View All"
+      ],
+      requestFilterDropdown: [
+        "View All",
+        "Completed",
+        "In Progress",
+      ]
     };
   },
   watch: {
@@ -240,7 +206,7 @@ export default {
       if (listType === "tasks") {
         this.$root.$emit("dropdownSelectionTask", valueSelected);
         this.titleDropdown =
-          valueSelected === "all" ? this.viewAll : valueSelected;
+          valueSelected === "View All" ? this.viewAll : valueSelected;
         this.colorBadge();
       } else {
         if (listType === "requests_filter") {
@@ -254,7 +220,7 @@ export default {
         }
         if (listType === "requests_dropdown") {
           this.titleDropdown =
-            valueSelected === "all" ? this.viewAll : valueSelected;
+            valueSelected === "View All" ? this.viewAll : valueSelected;
           this.colorBadge();
           this.dropdownRequest = valueSelected;
         }
@@ -292,36 +258,6 @@ export default {
       this.performSearch(listType);
       this.showInput = !this.showInput;
     },
-    /**
-     * Set the badge's color of the filter selected
-     */
-    colorBadge() {
-      if (this.titleDropdown === "In Progress") {
-        if (this.typeSelected === "tasks") {
-          this.badgeVariant = "warning";
-        }
-        if (this.typeSelected === "requests_dropdown") {
-          this.badgeVariant = "success";
-        }
-        this.showBadge = true;
-      }
-      if (this.titleDropdown === "Overdue") {
-        this.badgeVariant = "danger";
-        this.showBadge = true;
-      }
-      if (this.titleDropdown === "Overdue") {
-        this.badgeVariant = "danger";
-        this.showBadge = true;
-      }
-      if (this.titleDropdown === "Completed") {
-        this.badgeVariant = "primary";
-        this.showBadge = true;
-      }
-      if (this.titleDropdown === "View All" || this.titleDropdown === "all") {
-        this.badgeVariant = "";
-        this.showBadge = false;
-      }
-    },
     /**
      * Verify backward compatibility for Start New Case
      */
@@ -397,13 +333,20 @@ export default {
 }
 
 .dropdown-menu {
-  padding: 10px;
-  width: 211px;
-  box-shadow: 0px 10px 20px 4px #00000021;
+  padding: 0px;
+  width: 250px;
+  box-shadow: 0px 4px 8px 0px #0000001A;
+  border-radius: 4px;
 }
 
 .dropdown-item {
-  padding: 10px 8px;
+  padding: 13px 12px;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21.79px;
+  letter-spacing: -0.02em;
+  text-align: left;
 }
 .head-filter {
   display: flex;

From 140eee7d217a03bac1bf5698bceb1bd7e9a44ebf Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 29 May 2024 11:10:22 -0400
Subject: [PATCH 14/24] FOUR-15775:Add Tag Draft when the request has defined
 the draft

---
 src/components/renderer/form-tasks.vue | 33 +++++++++++++++++++-------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 7d5d586e9..09d2c9d49 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -256,16 +256,31 @@ export default {
       return days >= 0 ? "primary" : "danger";
     },
     formatCaseTitle(processRequest, record) {
+      const draftBadge = this.verifyDraft(record);
       return `
-      <a href="${this.openTask(processRequest, 1)}"
-         class="text-nowrap">
-         ${
-           processRequest.case_title_formatted ||
-           processRequest.case_title ||
-           record.case_title ||
-           ""
-         }
-      </a>`;
+        ${draftBadge}
+        <a href="${this.openTask(processRequest, 1)}" class="text-nowrap">
+         ${this.getCaseTitle(processRequest, record)}
+        </a>`;
+    },
+    getCaseTitle(process, record) {
+      return (
+        process.case_title_formatted ||
+        process.case_title ||
+        record.case_title ||
+        ""
+      );
+    },
+    verifyDraft(record) {
+      let draftBadge = "";
+      if (record.draft && record.status !== "CLOSED") {
+        draftBadge = `
+          <span class ="badge badge-warning status-warnig">
+            ${this.$t("Draft")}
+          </span>
+        `;
+      }
+      return draftBadge;
     },
     openTask() {},
     getColumns() {

From d0e8b06e145dd32d346983cce2bf9f7a7a04c5ca Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 29 May 2024 11:25:22 -0400
Subject: [PATCH 15/24] FOUR-15769:My Task - Implement the scroll in this list

---
 src/components/renderer/form-tasks.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 7d5d586e9..a4902c2a2 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -466,4 +466,7 @@ export default {
   font-weight: 600;
   border-radius: 5px;
 }
+.pm-table-container {
+  height: 300px;
+}
 </style>

From 391083ee9da3d70af62001eef90c0ac8c6ab7f14 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 29 May 2024 12:18:18 -0400
Subject: [PATCH 16/24] feature/FOUR-15535

---
 src/components/renderer/form-list-table.vue | 38 +++++++++++++--------
 src/components/renderer/form-tasks.vue      |  2 +-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index 44ea7aa1a..e8111d027 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -11,8 +11,8 @@
           </p>
           <template v-if="dataControl.dropdownShow === 'requests'">
             <b-dropdown
-              variant="link"
-              right
+              variant="outline-secondary"
+              offset="-70"
               no-caret
             >
               <template #button-content>
@@ -43,8 +43,8 @@
         <template v-if="dataControl.dropdownShow === 'requests'">
           <div class="mr-4">
             <b-dropdown
-              variant="link"
-              right
+              variant="outline-secondary"
+              offset="-50"
               size="sm"
             >
               <template #button-content>
@@ -67,8 +67,8 @@
         <template v-if="dataControl.dropdownShow === 'tasks'">
           <div class="mr-4">
             <b-dropdown
-              variant="link"
-              right
+              variant="outline-secondary"
+              offset="-50"
               size="sm"
             >
               <template #button-content>
@@ -205,9 +205,7 @@ export default {
       this.typeSelected = listType;
       if (listType === "tasks") {
         this.$root.$emit("dropdownSelectionTask", valueSelected);
-        this.titleDropdown =
-          valueSelected === "View All" ? this.viewAll : valueSelected;
-        this.colorBadge();
+        this.titleDropdown = valueSelected;
       } else {
         if (listType === "requests_filter") {
           this.optionRequest = valueSelected;
@@ -219,9 +217,7 @@ export default {
           }
         }
         if (listType === "requests_dropdown") {
-          this.titleDropdown =
-            valueSelected === "View All" ? this.viewAll : valueSelected;
-          this.colorBadge();
+          this.titleDropdown = valueSelected;
           this.dropdownRequest = valueSelected;
         }
         combinedFilter.push(this.optionRequest);
@@ -318,8 +314,10 @@ export default {
   background-color: #f9f9f9;
 }
 
-.btn-outline-secondary {
+.btn-outline-secondary,
+.btn-outline-secondary:focus {
   border: none;
+  box-shadow: none;
 }
 
 .item-text {
@@ -334,7 +332,7 @@ export default {
 
 .dropdown-menu {
   padding: 0px;
-  width: 250px;
+  width: 180px;
   box-shadow: 0px 4px 8px 0px #0000001A;
   border-radius: 4px;
 }
@@ -348,11 +346,23 @@ export default {
   letter-spacing: -0.02em;
   text-align: left;
 }
+
+.btn-outline-secondary:hover,
+.btn-outline-secondary:not(:disabled):not(.disabled):active,
+.btn-outline-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-secondary.dropdown-toggle {
+    background: none;
+    color: #228fed;
+    border: none;
+    box-shadow: none;
+}
+
 .head-filter {
   display: flex;
   align-items: baseline;
   gap: 8px;
 }
+
 .badge {
   display: inline-flex;
   padding: 8px;
diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index f6e9e43f2..58deda50e 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -298,7 +298,7 @@ export default {
         : "text-dark";
     },
     fetchData(selectedOption) {
-      if (selectedOption === "In Progress" || selectedOption === "all") {
+      if (selectedOption === "In Progress" || selectedOption === "View All") {
         this.filterDropdowns = "";
         this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
       }

From 4a254af0cddcf7be32896e486037a2006008080d Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 29 May 2024 12:58:52 -0400
Subject: [PATCH 17/24] feature/FOUR-15535

---
 src/components/renderer/form-requests.vue | 15 ++++++++++-----
 src/components/renderer/form-tasks.vue    | 21 +++++++++++++++------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
index 527ee011b..5c6e194e5 100755
--- a/src/components/renderer/form-requests.vue
+++ b/src/components/renderer/form-requests.vue
@@ -85,6 +85,7 @@ export default {
       orderDirection: "DESC",
       additionalParams: "",
       showTable: true,
+      pmqlSearch: "",
       sortOrder: [
         {
           field: "id",
@@ -116,6 +117,10 @@ export default {
           pmql = this.pmql;
         }
 
+        if (this.pmqlSearch) {
+          pmql = pmql + "AND" + this.pmqlSearch;
+        }
+
         let { filter } = this;
 
         if (filter && filter.length) {
@@ -224,23 +229,23 @@ export default {
         : "text-dark";
     },
     fetchData(selectedOptions) {
-      if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "all") {
+      if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "View All") {
         this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "${selectedOptions[1]}")`;
       }
       if (
         selectedOptions[0] === "as_participant" &&
-        selectedOptions[1] !== "all"
+        selectedOptions[1] !== "View All"
       ) {
         this.pmql = `(status = "${selectedOptions[1]}") AND (participant = "${Processmaker.user.username}")`;
       }
-      if (selectedOptions[1] === "all") {
+      if (selectedOptions[1] === "View All") {
         this.pmql = `(user_id = ${ProcessMaker.user.id}) AND ((status = "In Progress") OR (status = "Completed"))`;
       }
       this.fetch();
     },
     fetchSearch(searchData) {
-      this.pmql = "";
-      this.pmql = searchData;
+      this.pmqlSearch = "";
+      this.pmqlSearch = searchData;
       this.fetch();
     },
     setupColumns() {
diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 58deda50e..17fec1d28 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -71,6 +71,7 @@ export default {
       order_direction: "DESC",
       status: "",
       showTable: true,
+      pmqlSearch: "",
       sortOrder: [
         {
           field: "ID",
@@ -89,7 +90,7 @@ export default {
   },
   mounted() {
     this.setFields();
-    this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
+    this.pmql = `(user_id = ${ProcessMaker.user.id})`;
     this.fetch();
     this.$root.$on("dropdownSelectionTask", this.fetchData);
     this.$root.$on("searchTask", this.fetchSearch);
@@ -111,6 +112,10 @@ export default {
           pmql = this.pmql;
         }
 
+        if (this.pmqlSearch) {
+          pmql = pmql + "AND" + this.pmqlSearch;
+        }
+
         if (this.filterDropdowns !== undefined) {
           filterDropdowns = this.filterDropdowns;
         }
@@ -298,9 +303,13 @@ export default {
         : "text-dark";
     },
     fetchData(selectedOption) {
-      if (selectedOption === "In Progress" || selectedOption === "View All") {
-        this.filterDropdowns = "";
-        this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
+      this.filterDropdowns = "";
+      this.pmql = `(user_id = ${ProcessMaker.user.id})`
+      if (selectedOption === "Self-service") {
+        this.pmql = this.pmql + `AND (status = "Self Service")`;
+      }
+      if (selectedOption === "In Progress") {
+        this.pmql = this.pmql + `AND (status = "In Progress")`;
       }
       if (selectedOption === "Overdue") {
         this.filterDropdowns = "overdue=true";
@@ -308,8 +317,8 @@ export default {
       this.fetch();
     },
     fetchSearch(searchData) {
-      this.pmql = "";
-      this.pmql = searchData;
+      this.pmqlSearch = "";
+      this.pmqlSearch = searchData;
       this.fetch();
     }
   }

From 27ef1ef6b07c5d0712101146f69cc8470c75f72c Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 29 May 2024 16:01:49 -0400
Subject: [PATCH 18/24] FOUR-15771:Add the functionality to Priority column

---
 src/components/renderer/form-tasks.vue | 36 +++++++++++++++++++-------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 623c14654..4edd43595 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -62,7 +62,7 @@
                   :class="[
                     'badge',
                     'badge-' + row['color_badge'],
-                    'due-' + row['color_badge'],
+                    'due-' + row['color_badge']
                   ]"
                 >
                   {{ formatRemainingTime(row.due_at) }}
@@ -72,11 +72,7 @@
               <template v-else-if="header.field === 'is_priority'">
                 <span>
                   <img
-                    :src="
-                      row[header.field]
-                        ? '/img/priority.svg'
-                        : '/img/no-priority.svg'
-                    "
+                    :src="getImgPriority(row[header.field])"
                     :alt="row[header.field] ? 'priority' : 'no-priority'"
                     width="20"
                     height="20"
@@ -259,7 +255,7 @@ export default {
       const draftBadge = this.verifyDraft(record);
       return `
         ${draftBadge}
-        <a href="${this.openTask(processRequest, 1)}" class="text-nowrap">
+        <a href="${this.openTask(record)}" class="text-nowrap">
          ${this.getCaseTitle(processRequest, record)}
         </a>`;
     },
@@ -282,7 +278,9 @@ export default {
       }
       return draftBadge;
     },
-    openTask() {},
+    openTask(data) {
+      return `/tasks/${data.id}/edit`;
+    },
     getColumns() {
       const columns = [
         {
@@ -291,6 +289,8 @@ export default {
           sortable: true,
           default: true,
           width: 153,
+          fixed_width: 153,
+          resizable: false
         },
         {
           label: "Priority",
@@ -298,6 +298,8 @@ export default {
           sortable: false,
           default: true,
           width: 48,
+          fixed_width: 48,
+          resizable: false
         },
         {
           label: "Case title",
@@ -307,7 +309,9 @@ export default {
           default: true,
           width: 314,
           truncate: true,
-        },
+          fixed_width: 314,
+          resizable: false
+        }
       ];
 
       if (this.status === "CLOSED") {
@@ -317,6 +321,8 @@ export default {
           sortable: true,
           default: true,
           width: 220,
+          fixed_width: 220,
+          resizable: false
         });
       } else {
         columns.push({
@@ -325,6 +331,8 @@ export default {
           sortable: true,
           default: true,
           width: 220,
+          fixed_width: 220,
+          resizable: false
         });
       }
       return columns;
@@ -463,6 +471,16 @@ export default {
       cleanHtml = cleanHtml.replace(/\s+/g, " ");
 
       return cleanHtml;
+    },
+    getImgPriority(data) {
+      return data ? "/img/priority.svg" : "/img/no-priority.svg";
+    },
+    togglePriority(taskId, isPriority) {
+      ProcessMaker.apiClient
+        .put(`tasks/${taskId}/setPriority`, { is_priority: isPriority })
+        .then(() => {
+          this.fetch();
+        });
     }
   }
 };

From 46e61adcad48a4b502e4820a1ea727cb9482ea6b Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 31 May 2024 09:20:14 -0400
Subject: [PATCH 19/24] feature/FOUR-15535

---
 src/components/renderer/form-tasks.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index dabda64a6..aa515b4bf 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -143,6 +143,7 @@ export default {
           direction: "DESC"
         }
       ],
+      advancedFilter: "",
       tasksPreview:
         (window.SharedComponents && window.SharedComponents.TasksHome) || {}
     };
@@ -214,9 +215,12 @@ export default {
         ProcessMaker.apiClient
           .get(
             `tasks?page=${this.page}&include=process,processRequest,processRequest.user,user,data` +
-              `&pmql=${encodeURIComponent(pmql)}&per_page=${
-                this.perPage
-              }${filterParams}${this.getSortParam()}&non_system=true&${filterDropdowns}`
+              `&pmql=${encodeURIComponent(pmql)}
+              &per_page=${this.perPage}
+              ${filterParams}
+              ${this.getSortParam()}
+              ${this.advancedFilter}
+              &non_system=true&${filterDropdowns}`
           )
           .then((response) => {
             this.showTable = response.data.data.length !== 0;
@@ -413,8 +417,9 @@ export default {
     fetchData(selectedOption) {
       this.filterDropdowns = "";
       this.pmql = `(user_id = ${ProcessMaker.user.id})`
+      this.advancedFilter = "";
       if (selectedOption === "Self-service") {
-        this.pmql = this.pmql + `AND (status = "Self Service")`;
+        this.advancedFilter = `&advanced_filter=(${encodeURIComponent('{"subject":{"type":"Status"},"operator":"=","value":"Self Service"}')})`;
       }
       if (selectedOption === "In Progress") {
         this.pmql = this.pmql + `AND (status = "In Progress")`;

From 45553c3a4a6871f1cb7c6e6f5e6ddbc17818063b Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 31 May 2024 12:16:50 -0400
Subject: [PATCH 20/24] feature/FOUR-16316

---
 src/components/renderer/form-tasks.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index fc9de8cf1..510617159 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -260,7 +260,7 @@ export default {
       const draftBadge = this.verifyDraft(record);
       return `
         ${draftBadge}
-        <a href="${this.openTask(record)}" class="text-nowrap">
+        <a href="${this.openRequest(processRequest)}" class="text-nowrap">
          ${this.getCaseTitle(processRequest, record)}
         </a>`;
     },
@@ -286,6 +286,9 @@ export default {
     openTask(data) {
       return `/tasks/${data.id}/edit`;
     },
+    openRequest(data) {
+      return `/requests/${data.id}`;
+    },
     getColumns() {
       const columns = [
         {

From e8d5d9173d260842c2bca6a4821a66f76651765f Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 3 Jun 2024 09:52:13 -0400
Subject: [PATCH 21/24] FOUR-16315: Cards in Start a new Case are very close in
 dashboard list

---
 src/components/renderer/form-new-request.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/renderer/form-new-request.vue b/src/components/renderer/form-new-request.vue
index 532142773..685cb7bf6 100755
--- a/src/components/renderer/form-new-request.vue
+++ b/src/components/renderer/form-new-request.vue
@@ -1,14 +1,17 @@
 <template>
   <div>
-    <div v-if="Object.keys(processes).length && !loading" class="process-list">
+    <div
+      v-if="Object.keys(processes).length && !loading"
+      class="process-list p-4"
+    >
       <div class="row">
         <template v-for="(process, index) in processes">
-          <div v-for="(event, indexE) in emptyStartEvents(process)" :key="`process-${index}-${indexE}`" class="col-sm-6">
-            <ProcessCard
-              :filter="filter"
-              :process="process"
-              :event="event"
-            />
+          <div
+            v-for="(event, indexE) in emptyStartEvents(process)"
+            :key="`process-${index}-${indexE}`"
+            class="col-sm-6"
+          >
+            <ProcessCard :filter="filter" :process="process" :event="event" />
           </div>
         </template>
       </div>

From 0946d6323eb889e8ff8abab07a148e8fca4d9e07 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 3 Jun 2024 10:38:57 -0400
Subject: [PATCH 22/24] feature/FOUR-15535

---
 src/components/renderer/form-tasks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index aa515b4bf..978fcfee2 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -419,7 +419,7 @@ export default {
       this.pmql = `(user_id = ${ProcessMaker.user.id})`
       this.advancedFilter = "";
       if (selectedOption === "Self-service") {
-        this.advancedFilter = `&advanced_filter=(${encodeURIComponent('{"subject":{"type":"Status"},"operator":"=","value":"Self Service"}')})`;
+        this.advancedFilter = `&advanced_filter=[${encodeURIComponent('{"subject":{"type":"Status","value":"status"},"operator":"=","value":"Self Service"}')}]`;
       }
       if (selectedOption === "In Progress") {
         this.pmql = this.pmql + `AND (status = "In Progress")`;

From f7cd7c1a84be0773175f680ce99dfe2a78b5114c Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 3 Jun 2024 11:07:11 -0400
Subject: [PATCH 23/24] feature/FOUR-15535

---
 src/components/renderer/form-tasks.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 978fcfee2..9a759f267 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -419,6 +419,7 @@ export default {
       this.pmql = `(user_id = ${ProcessMaker.user.id})`
       this.advancedFilter = "";
       if (selectedOption === "Self-service") {
+        this.pmql = "";
         this.advancedFilter = `&advanced_filter=[${encodeURIComponent('{"subject":{"type":"Status","value":"status"},"operator":"=","value":"Self Service"}')}]`;
       }
       if (selectedOption === "In Progress") {

From 83093e28766e424d87efe7424b332799ff743e40 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Tue, 4 Jun 2024 12:25:42 -0400
Subject: [PATCH 24/24] FOUR-15537:Review the Hover action preview buton Tasks

---
 src/components/renderer/form-tasks.vue | 95 +++++++++++++++++++++++++-
 1 file changed, 94 insertions(+), 1 deletion(-)

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 690f3bb22..6a6662817 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -5,6 +5,8 @@
       :data="tableData"
       :unread="unreadColumnName"
       :loading="shouldShowLoader"
+      @table-row-mouseover="handleRowMouseover"
+      @table-row-mouseleave="handleRowMouseleave"
     >
       <template
         v-for="(column, index) in tableHeaders"
@@ -102,6 +104,31 @@
         </td>
       </template>
     </filter-table>
+    <component
+      :is="taskTooltip"
+      v-show="isTooltipVisible"
+      :position="rowPosition"
+    >
+      <template v-slot:task-tooltip-body>
+        <div @mouseover="clearHideTimer" @mouseleave="hideTooltip">
+          <slot
+            name="tooltip"
+            :tooltip-row-data="tooltipRowData"
+            :preview-tasks="previewTasks"
+          >
+            <span>
+              <b-button
+                class="icon-button"
+                variant="light"
+                @click="previewTasks(tooltipRowData)"
+              >
+                <i class="fas fa-eye" />
+              </b-button>
+            </span>
+          </slot>
+        </div>
+      </template>
+    </component>
     <component :is="tasksPreview" ref="preview-sidebar" />
   </div>
   <div v-else>
@@ -141,7 +168,14 @@ export default {
       ],
       advancedFilter: "",
       tasksPreview:
-        (window.SharedComponents && window.SharedComponents.TasksHome) || {}
+        (window.SharedComponents && window.SharedComponents.TasksHome) || {},
+      taskTooltip:
+        (window.SharedComponents && window.SharedComponents.TaskTooltip) || {},
+      rowPosition: {},
+      ellipsisShow: false,
+      isTooltipVisible: false,
+      disableRuleTooltip: false,
+      hiderTimer: null
     };
   },
   computed: {
@@ -499,6 +533,65 @@ export default {
         .then(() => {
           this.fetch();
         });
+    },
+    handleRowMouseover(row) {
+      debugger;
+      if (this.ellipsisShow) {
+        this.isTooltipVisible = !this.disableRuleTooltip;
+        this.clearHideTimer();
+        return;
+      }
+      this.clearHideTimer();
+
+      const tableContainer = document.getElementById("table-container");
+      const rectTableContainer = tableContainer.getBoundingClientRect();
+      const topAdjust = rectTableContainer.top;
+
+      let elementHeight = 28;
+
+      this.isTooltipVisible = !this.disableRuleTooltip;
+      this.tooltipRowData = row;
+
+      const rowElement = document.getElementById(`row-${row.id}`);
+      let yPosition = 0;
+
+      const rect = rowElement.getBoundingClientRect();
+      yPosition = rect.top + window.scrollY;
+
+      const selectedFiltersBar = document.querySelector(
+        ".selected-filters-bar"
+      );
+      const selectedFiltersBarHeight = selectedFiltersBar
+        ? selectedFiltersBar.offsetHeight
+        : 0;
+
+      elementHeight -= selectedFiltersBarHeight;
+
+      const rightBorderX = rect.right;
+
+      const bottomBorderY = yPosition - topAdjust - elementHeight + 100;
+
+      this.rowPosition = {
+        x: rightBorderX,
+        y: bottomBorderY
+      };
+    },
+    handleRowMouseleave() {
+      this.startHideTimer();
+    },
+    startHideTimer() {
+      this.hideTimer = setTimeout(() => {
+        this.hideTooltip();
+      }, 500);
+    },
+    clearHideTimer() {
+      clearTimeout(this.hideTimer);
+    },
+    hideTooltip() {
+      if (this.ellipsisShow) {
+        return;
+      }
+      this.isTooltipVisible = false;
     }
   }
 };