FOUR-10336: HOME: Add in the component "VIEW ALL"

src/components/renderer/avatar-dropdown.vue

@@ -0,0 +1,22 @@
+<template>
+  <b-dropdown-item>
+    <b-avatar
+      :variant="variant"
+      size="1.5rem"
+      :text="text"
+      class="text-white"
+    ></b-avatar>
+    {{ label }}
+  </b-dropdown-item>
+</template>
+
+<script>
+export default {
+  props: {
+    variant: String,
+    text: String,
+    label: String
+  }
+};
+</script>
+

src/components/renderer/form-list-table.vue

@@ -16,12 +16,59 @@
         </div>
       </template>
       <template v-else>
-        <p class="control-text">
-          {{ title }}
-        </p>
+        <span class="control-text">{{ $t(title) }}</span>
+        <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>
+        </b-dropdown>
       </template>
-      <div class="ml-auto mr-2">
-        <i class="fas fa-search custom-icon" />
+      <div class="ml-auto d-flex align-items-center">
+        <template v-if="dataControl.dropdownShow === 'requests'">
+          <div class="mr-4">
+            <b-dropdown variant="secondary" size="sm">
+              <template #button-content>
+                <span>{{ $t(titleDropdown) }}</span>
+              </template>
+              <b-dropdown-item variant="warning">
+                <i class="fas fa-circle mr-2"></i>{{ $t("In Progress") }}
+              </b-dropdown-item>
+              <b-dropdown-item variant="success">
+                <i class="fas fa-circle mr-2"></i>{{ $t("Completed") }}
+              </b-dropdown-item>
+              <b-dropdown-item>{{ $t(titleDropdown) }}</b-dropdown-item>
+            </b-dropdown>
+          </div>
+        </template>
+        <template v-if="dataControl.dropdownShow === 'tasks'">
+          <div class="mr-4">
+            <b-dropdown variant="secondary" size="sm">
+              <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>
+          </div>
+        </template>
+        <div>
+          <i class="fas fa-search custom-icon ml-2"></i>
+        </div>
       </div>
       <div>
         <b-link @click="openExternalLink">
@@ -47,13 +94,17 @@
 import FormTasks from "./form-tasks.vue";
 import FormRequests from "./form-requests.vue";
 import FormNewRequest from "./form-new-request.vue";
+import AvatarDropdown from "./avatar-dropdown.vue";
 
 export default {
-  components: { FormTasks, FormRequests, FormNewRequest },
+  components: { FormTasks, FormRequests, FormNewRequest, AvatarDropdown },
   mixins: [],
   props: ["listOption"],
   data() {
     return {
+      titleDropdown: "View All",
+      countInProgress: "0",
+      countOverdue: "0",
       title: this.$t("List Table"),
       dataControl: {}
     };
@@ -69,7 +120,9 @@ export default {
   },
   methods: {
     getData(data) {
-      this.dataControl = data;
+      this.dataControl = data.dataControls;
+      this.countOverdue = data.tasksDropdown[0];
+      this.countInProgress = data.tasksDropdown[1];
     },
     openExternalLink() {
       window.open(this.dataControl.url, "_blank");
@@ -78,7 +131,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .prevent-interaction.form-list-table::after {
   content: attr(placeholder);
 }
@@ -108,11 +161,13 @@ export default {
 }
 
 .custom-icon {
-  color: #6c8498; /* Cambia esto al color que desees */
+  color: #6c8498;
 }
-
 .list-table {
   height: 300px;
   overflow: auto;
 }
+.btn-custom {
+  background-color: #f7f7f7;
+}
 </style>

src/components/renderer/form-new-request.vue

@@ -59,6 +59,7 @@ 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` +
@@ -77,14 +78,15 @@ export default {
           data.meta.from -= 1;
           this.$refs.listProcess.data = data;
           this.$refs.listProcess.setPaginationData(data.meta);
-          const dataStart = {
+          const dataControls = {
             count: "0",
             showControl: true,
             showAvatar: false,
             colorTextStart: "color: #57646F",
-            url: "#"
+            url: ""
           };
-          this.$emit("startControl", dataStart);
+          let tasksDropdown = [];
+          this.$emit("startControl", { dataControls, tasksDropdown });
         })
         .catch(() => {
           this.error = true;

src/components/renderer/form-requests.vue

@@ -124,16 +124,18 @@ export default {
             }
             this.tableData = response.data;
             this.countResponse = Object.keys(this.tableData.data).length;
-            const dataRequests = {
+            const dataControls = {
               count: `${this.countResponse}`,
               showControl: true,
               showAvatar: true,
               variant: "primary",
               textColor: "text-primary",
               colorText: "color: #1572C2",
-              url: "/requests"
+              url: "/requests",
+              dropdownShow: "requests"
             };
-            this.$emit("requestsCount", dataRequests);
+            let tasksDropdown = [];
+            this.$emit("requestsCount", { dataControls, tasksDropdown });
           })
           .catch(() => {
             this.tableData = [];

src/components/renderer/form-tasks.vue

@@ -53,6 +53,8 @@ export default {
   mixins: [uniqIdsMixin, datatableMixin],
   data() {
     return {
+      countInProgress: "0",
+      countOverdue: "0",
       countResponse: "0",
       fields: [],
       data: [],
@@ -114,6 +116,8 @@ export default {
 
         this.previousPmql = pmql;
 
+        let tasksDropdown = [];
+
         // Load from our api client
         ProcessMaker.apiClient
           .get(
@@ -125,16 +129,21 @@ export default {
           .then((response) => {
             this.tableData = response.data;
             this.countResponse = Object.keys(this.tableData.data).length;
-            const dataTasks = {
+            this.countOverdue = `${this.tableData.meta.in_overdue}`;
+            tasksDropdown.push(this.countOverdue);
+            this.countInProgress = `${this.tableData.meta.total}`;
+            tasksDropdown.push(this.countInProgress);
+            const dataControls = {
               count: `${this.countResponse}`,
               showControl: true,
               showAvatar: true,
               variant: "warning",
               textColor: "text-warning",
               colorText: "color: #ff9900",
-              url: "/tasks"
+              url: "/tasks",
+              dropdownShow: "tasks"
             };
-            this.$emit("tasksCount", dataTasks);
+            this.$emit("tasksCount", { dataControls, tasksDropdown });
           })
           .catch(() => {
             this.tableData = [];