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 1/3] 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 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 2/3] 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 3/3] 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();
     }
   }