Merge pull request #1463 from ProcessMaker/feature/FOUR-10340

FOUR-10340: Designer: The list needs to updated according to the filter applied
ProcessMaker · Oct 13, 2023 · dabf72a · dabf72a
2 parents 228877b + c3089bd
commit dabf72a
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 28 deletions.
diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
@@ -13,21 +13,24 @@
           <p class="control-text" :style="dataControl.colorText">
             {{ title }}
           </p>
-        </div>
-      </template>
-      <template v-else>
-        <span class="control-text">{{ $t(title) }}</span>
-        <b-dropdown variant="custom" no-caret>
+          <template v-if="dataControl.dropdownShow === 'requests'">
+          <b-dropdown variant="custom" no-caret>
           <template #button-content>
             <i class="fas fa-caret-down"></i>
           </template>
-          <b-dropdown-item @click="handleOption('me')"
-            >{{ $t('Request Started By Me') }}</b-dropdown-item
-          >
-          <b-dropdown-item @click="handleOption('participant')"
-            >{{ $t('With Me as Participant') }}
+          <b-dropdown-item @click="handleDropdownSelection('requests_filter', 'by_me')">{{
+            $t("Request Started By Me")
+          }}</b-dropdown-item>
+          <b-dropdown-item
+            @click="handleDropdownSelection('requests_filter', 'as_participant')"
+            >{{ $t("With Me as Participant") }}
           </b-dropdown-item>
         </b-dropdown>
+        </template>
+        </div>
+      </template>
+      <template v-else>
+        <span class="control-text">{{ $t(title) }}</span>
       </template>
       <div class="ml-auto d-flex align-items-center">
         <template v-if="dataControl.dropdownShow === 'requests'">
@@ -36,13 +39,22 @@
               <template #button-content>
                 <span>{{ $t(titleDropdown) }}</span>
               </template>
-              <b-dropdown-item variant="warning">
+              <b-dropdown-item
+                variant="success"
+                @click="handleDropdownSelection('requests_dropdown', 'In Progress')"
+              >
                 <i class="fas fa-circle mr-2"></i>{{ $t("In Progress") }}
               </b-dropdown-item>
-              <b-dropdown-item variant="success">
+              <b-dropdown-item
+                variant="primary"
+                @click="handleDropdownSelection('requests_dropdown', 'Completed')"
+              >
                 <i class="fas fa-circle mr-2"></i>{{ $t("Completed") }}
               </b-dropdown-item>
-              <b-dropdown-item>{{ $t(titleDropdown) }}</b-dropdown-item>
+              <b-dropdown-item
+                @click="handleDropdownSelection('requests_dropdown', 'all')"
+                >{{ $t(titleDropdown) }}</b-dropdown-item
+              >
             </b-dropdown>
           </div>
         </template>
@@ -52,17 +64,28 @@
               <template #button-content>
                 <span>{{ $t(titleDropdown) }}</span>
               </template>
-              <AvatarDropdown
-                :variant="'warning'"
-                :text="countInProgress"
-                :label="'In Progress'"
-              ></AvatarDropdown>
-              <AvatarDropdown
-                :variant="'danger'"
-                :text="countOverdue"
-                :label="'Overdue'"
-              ></AvatarDropdown>
-              <b-dropdown-item>{{ $t(titleDropdown) }}</b-dropdown-item>
+              <b-dropdown-item
+                @click="handleDropdownSelection('tasks', 'In Progress')"
+              >
+                <AvatarDropdown
+                  :variant="'warning'"
+                  :text="countInProgress"
+                  :label="'In Progress'"
+                ></AvatarDropdown>
+              </b-dropdown-item>
+              <b-dropdown-item
+                @click="handleDropdownSelection('tasks', 'Overdue')"
+              >
+                <AvatarDropdown
+                  :variant="'danger'"
+                  :text="countOverdue"
+                  :label="'Overdue'"
+                ></AvatarDropdown>
+              </b-dropdown-item>
+              <b-dropdown-item
+                @click="handleDropdownSelection('tasks', 'all')"
+                >{{ $t(titleDropdown) }}</b-dropdown-item
+              >
             </b-dropdown>
           </div>
         </template>
@@ -102,6 +125,8 @@ export default {
   props: ["listOption"],
   data() {
     return {
+      optionRequest: "by_me",
+      dropdownRequest: "In Progress",
       titleDropdown: "View All",
       countInProgress: "0",
       countOverdue: "0",
@@ -126,6 +151,28 @@ export default {
     },
     openExternalLink() {
       window.open(this.dataControl.url, "_blank");
+    },
+    handleDropdownSelection(listType, valueSelected) {
+      let combinedFilter = [];
+      if (listType === "tasks") {
+        this.$root.$emit("dropdownSelectionTask", valueSelected);
+      } else {
+        if (listType === "requests_filter") {
+          this.optionRequest = valueSelected;
+          if (valueSelected === 'by_me') {
+            this.title = 'Request Started By Me';
+          }
+          if (valueSelected === 'as_participant') {
+            this.title = 'With Me as Participant';
+          }
+        }
+        if (listType === "requests_dropdown") {
+          this.dropdownRequest = valueSelected;
+        }
+        combinedFilter.push(this.optionRequest);
+        combinedFilter.push(this.dropdownRequest);
+        this.$root.$emit("dropdownSelectionRequest", combinedFilter);
+      }
     }
   }
 };

diff --git a/src/components/renderer/form-new-request.vue b/src/components/renderer/form-new-request.vue
@@ -59,7 +59,6 @@ export default {
     },
     fetch() {
       // Now call our api
-      
       window.ProcessMaker.apiClient
         .get(
           `start_processes?page=${this.page}&per_page=${this.perPage}&filter=${this.filter}&order_by=category.name,name` +

diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
@@ -85,6 +85,7 @@ export default {
     this.setFields();
     this.pmql = `(status = "In Progress") AND (requester = "${Processmaker.user.username}")`;
     this.fetch();
+    this.$root.$on("dropdownSelectionRequest", this.fetchData);
   },
   methods: {
     fetch() {
@@ -143,7 +144,7 @@ export default {
               url: "/requests",
               dropdownShow: "requests"
             };
-            let tasksDropdown = [];
+            const tasksDropdown = [];
             this.$emit("requestsCount", { dataControls, tasksDropdown });
           })
           .catch(() => {
@@ -222,6 +223,21 @@ export default {
         : diff <= 1
         ? "text-warning"
         : "text-dark";
+    },
+    fetchData(selectedOptions) {
+      if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "all") {
+        this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "${selectedOptions[1]}")`;
+      }
+      if (
+        selectedOptions[0] === "as_participant" &&
+        selectedOptions[1] !== "all"
+      ) {
+        this.pmql = `(status = "${selectedOptions[1]}") AND (participant = "${Processmaker.user.username}")`;
+      }
+      if (selectedOptions[1] === "all") {
+        this.pmql = `(user_id = ${ProcessMaker.user.id}) AND ((status = "In Progress") OR (status = "Completed"))`;
+      }
+      this.fetch();
     }
   }
 };

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
@@ -83,6 +83,7 @@ export default {
     this.setFields();
     this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
     this.fetch();
+    this.$root.$on("dropdownSelectionTask", this.fetchData);
   },
   methods: {
     getSortParam() {
@@ -95,11 +96,16 @@ export default {
     fetch() {
       Vue.nextTick(() => {
         let pmql = "";
+        let filterDropdowns = "";
 
         if (this.pmql !== undefined) {
           pmql = this.pmql;
         }
 
+        if (this.filterDropdowns !== undefined) {
+          filterDropdowns = this.filterDropdowns;
+        }
+
         let { filter } = this;
         let filterParams = "";
 
@@ -124,15 +130,15 @@ export default {
 
         this.previousPmql = pmql;
 
-        let tasksDropdown = [];
+        const tasksDropdown = [];
 
         // Load from our api client
         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`
+              }${filterParams}${this.getSortParam()}&non_system=true&${filterDropdowns}`
           )
           .then((response) => {
             this.showTable = response.data.data.length !== 0;
@@ -274,6 +280,15 @@ export default {
         : diff <= 1
         ? "text-warning"
         : "text-dark";
+    },
+    fetchData(selectedOption) {
+      if (selectedOption === "In Progress" || selectedOption === "all") {
+        this.filterDropdowns = "";
+      }
+      if (selectedOption === "Overdue") {
+        this.filterDropdowns = "overdue=true";
+      }
+      this.fetch();
     }
   }
 };