Merge pull request #1456 from ProcessMaker/feature/FOUR-10042

FOUR-10042: HOME: Add in the component "COUNT"
ProcessMaker · Oct 11, 2023 · de3c7f4 · de3c7f4
2 parents 848b2a6 + ba95c86
commit de3c7f4
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 7 deletions.
diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
@@ -1,20 +1,43 @@
 <template>
   <div class="card mt-4 mb-4">
     <div class="card-header d-flex justify-content-between align-items-center">
-      <h4>{{ title }}</h4>
+      <template v-if="dataControl.showControl">
+        <div class="mb-2">
+          <b-avatar
+            v-if="dataControl.showAvatar"
+            size="2em"
+            :variant="dataControl.variant"
+            :text="dataControl.count"
+            class="avatar-text"
+          ></b-avatar>
+          <p class="control-text" :style="dataControl.colorText">
+            {{ title }}
+          </p>
+        </div>
+      </template>
+      <template v-else>
+        <p class="control-text">
+          {{ title }}
+        </p>
+      </template>
+      <div class="ml-auto mr-2">
+        <i class="fas fa-search custom-icon" />
+      </div>
       <div>
-        <i class="fas fa-search" />
+        <b-link @click="openExternalLink">
+          <i class="fas fa-external-link-alt custom-icon" />
+        </b-link>
       </div>
     </div>
     <div class="card-body list-table">
       <template v-if="listOption === 'My Tasks'">
-        <FormTasks></FormTasks>
+        <FormTasks @tasksCount="getData"></FormTasks>
       </template>
       <template v-if="listOption === 'My Requests'">
-        <FormRequests></FormRequests>
+        <FormRequests @requestsCount="getData"></FormRequests>
       </template>
       <template v-if="listOption === 'Start new Request'">
-        <FormNewRequest></FormNewRequest>
+        <FormNewRequest @startControl="getData"></FormNewRequest>
       </template>
     </div>
   </div>
@@ -31,25 +54,63 @@ export default {
   props: ["listOption"],
   data() {
     return {
-      title: this.$t("List Table")
+      title: this.$t("List Table"),
+      dataControl: {}
     };
   },
   watch: {
     listOption() {
       this.title = this.listOption;
+      this.dataControl = {};
     }
   },
   mounted() {
     this.title = this.listOption;
   },
-  methods: {}
+  methods: {
+    getData(data) {
+      this.dataControl = data;
+    },
+    openExternalLink() {
+      window.open(this.dataControl.url, "_blank");
+    }
+  }
 };
 </script>
 
 <style lang="scss">
 .prevent-interaction.form-list-table::after {
   content: attr(placeholder);
 }
+
+.avatar-text {
+  display: inline-block;
+  margin-right: 10px;
+  color: white;
+  font-family: "Open Sans", sans-serif;
+  text-align: center;
+  font-size: 15.832px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.317px;
+}
+
+.control-text {
+  display: inline-block;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.28px;
+  text-transform: uppercase;
+}
+
+.custom-icon {
+  color: #6c8498; /* Cambia esto al color que desees */
+}
+
 .list-table {
   height: 300px;
   overflow: auto;

diff --git a/src/components/renderer/form-new-request.vue b/src/components/renderer/form-new-request.vue
@@ -77,6 +77,14 @@ export default {
           data.meta.from -= 1;
           this.$refs.listProcess.data = data;
           this.$refs.listProcess.setPaginationData(data.meta);
+          const dataStart = {
+            count: "0",
+            showControl: true,
+            showAvatar: false,
+            colorTextStart: "color: #57646F",
+            url: "#"
+          };
+          this.$emit("startControl", dataStart);
         })
         .catch(() => {
           this.error = true;

diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
@@ -56,6 +56,7 @@ export default {
   mixins: [uniqIdsMixin, datatableMixin],
   data() {
     return {
+      countResponse: "0",
       fields: [],
       filter: "",
       data: [],
@@ -120,6 +121,17 @@ export default {
               record.status = this.formatStatus(record.status);
             }
             this.tableData = response.data;
+            this.countResponse = Object.keys(this.tableData.data).length;
+            const dataRequests = {
+              count: `${this.countResponse}`,
+              showControl: true,
+              showAvatar: true,
+              variant: "primary",
+              textColor: "text-primary",
+              colorText: "color: #1572C2",
+              url: "/requests"
+            };
+            this.$emit("requestsCount", dataRequests);
           })
           .catch(() => {
             this.tableData = [];

diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
@@ -53,6 +53,7 @@ export default {
   mixins: [uniqIdsMixin, datatableMixin],
   data() {
     return {
+      countResponse: "0",
       fields: [],
       data: [],
       tableData: [],
@@ -122,6 +123,17 @@ export default {
           )
           .then((response) => {
             this.tableData = response.data;
+            this.countResponse = Object.keys(this.tableData.data).length;
+            const dataTasks = {
+              count: `${this.countResponse}`,
+              showControl: true,
+              showAvatar: true,
+              variant: "warning",
+              textColor: "text-warning",
+              colorText: "color: #ff9900",
+              url: "/tasks"
+            };
+            this.$emit("tasksCount", dataTasks);
           })
           .catch(() => {
             this.tableData = [];