Merge branch 'feature/PMCORE-3049' of https://bitbucket.org/colosa/processmaker into taskmetrics

resources/assets/js/api/Menu.js

@@ -25,5 +25,22 @@ export let menu = {
                 "Accept-Language": window.config.SYS_LANG
               }
         });
+    },
+    /**
+     * Get the counter of a specific task
+     * @param {string} task 
+     * @returns 
+     */
+    getTooltip(task) {
+        return axios.get(
+            window.config.SYS_SERVER_API +
+            '/api/1.0/' +
+            window.config.SYS_WORKSPACE +
+            '/home/'+ task +'/counter', {
+            headers: {
+                'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken,
+                "Accept-Language": window.config.SYS_LANG
+              }
+        });
     }
 };

resources/assets/js/components/headers/MultiviewHeader.vue

@@ -2,21 +2,33 @@
   <div class="pm-multiview-header">
     <div class="pm-multiview-header-title"></div>
     <div class="pm-multiview-header-actions">
-      <div>
+      <b-row>
-        <button
+        <b-col sm="8">
-          v-for="action in data.actions"
+          <div class="subtitle" v-if="dataSubtitle">
-          :key="action.id"
+            <h6>
-          @click="action.onClick(action)"
+              {{ dataSubtitle.subtitle }}
-          class="pm-multiview-header-button"
+              <span>
-          :title="action.title"
+                <i :class="dataSubtitle.icon"></i>
-        >
+              </span>
-          <div>
+            </h6>
-            <span>
-              <i :class="action.icon"></i>
-            </span>
           </div>
-        </button>
+        </b-col>
-      </div>
+        <b-col sm="4" class="pm-multiview-header-actions-buttons">
+          <button
+            v-for="action in data.actions"
+            :key="action.id"
+            @click="action.onClick(action)"
+            class="pm-multiview-header-button"
+            :title="action.title"
+          >
+            <div>
+              <span>
+                <i :class="action.icon"></i>
+              </span>
+            </div>
+          </button>
+        </b-col>
+      </b-row>
     </div>
   </div>
 </template>
@@ -24,7 +36,10 @@
 <script>
 export default {
   name: "MultiviewHeader",
-  props: ["data"],
+  props: [
+    "data",
+    "dataSubtitle"
+  ],
   data() {
     return {};
   },
@@ -38,10 +53,11 @@ export default {
 
 <style>
 .pm-multiview-header {
+  margin-bottom: 7px;
 }
 .pm-multiview-header-title {
 }
-.pm-multiview-header-actions {
+.pm-multiview-header-actions-buttons {
   text-align: end;
 }
 .pm-multiview-header-button {

resources/assets/js/components/menu/CustomSidebarMenuItem.vue

@@ -34,7 +34,7 @@
                         "
                     >
                         <span class="vsm--title">
-                            {{ item.title }}
+                            <custom-tooltip :data="item"></custom-tooltip>
                             <b-icon
                                 v-if="item.sortable"
                                 :icon="item.sortIcon"
@@ -139,7 +139,7 @@
                     </div>
                 </draggable>
 
-                <template #modal-footer="{ ok, cancel, hide }">
+                <template #modal-footer="{ cancel }">
                     <b-button size="sm" variant="danger" @click="cancel()">
                         Cancel
                     </b-button>
@@ -153,6 +153,8 @@
 import draggable from "vuedraggable";
 import CustomSidebarMenuLink from "./CustomSidebarMenuLink";
 import CustomSidebarMenuIcon from "./CustomSidebarMenuIcon";
+import CustomTooltip from "./../utils/CustomTooltip.vue";
+
 export default {
     name: "CustomSidebarMenuItem",
     props: {
@@ -201,6 +203,7 @@ export default {
         draggable,
         CustomSidebarMenuLink,
         CustomSidebarMenuIcon,
+        CustomTooltip
     },
     data() {
         return {
@@ -210,6 +213,7 @@ export default {
             itemHover: false,
             exactActive: false,
             active: false,
+            titleHover: '',
         };
     },
     computed: {

resources/assets/js/components/search/CasesFilter.vue

@@ -31,7 +31,9 @@
 
     <div class="p-1 v-flex">
       <h5 class="v-search-title">{{ title }}</h5>
-
+      <div class="pm-in-text-icon">
+        <i :class="icon"></i>
+      </div>  
       <b-input-group class="w-75 p-1">
         <div class="input-group mb-3">
           <div class="input-group-prepend">
@@ -87,7 +89,7 @@ import api from "./../../api/index";
 
 export default {
   name: "Cases",
-  props: ["filters", "title"],
+  props: ["filters", "title", "icon"],
   components: {
     SearchPopover,
     CaseNumber,
@@ -376,7 +378,12 @@ export default {
 }
 
 .v-search-title {
-  padding-right: 20px;
+  padding-right: 10px;
   line-height: 40px;
 }
+.pm-in-text-icon {
+  font-size: 2vw;
+  padding-right: 10px;
+  line-height: 3vw;
+}
 </style>

resources/assets/js/components/search/MyCasesFilter.vue

@@ -28,8 +28,10 @@
         </SearchPopover>
 
     <div class="p-1 v-flex">
-      <h5 class="v-search-title">{{ title }}</h5>
+        <h5 class="v-search-title">{{ title }}</h5>
-
+        <div class="pm-mc-text-icon">
+            <i :class="icon"></i>
+      </div>  
       <b-input-group class="w-75 p-1">
         <div class="input-group mb-3">
           <div class="input-group-prepend">
@@ -86,7 +88,7 @@ import api from "./../../api/index";
 
 export default { 
     name: "MyCasesFilter",
-    props: ["filters","title"],
+    props: ["filters","title", "icon"],
     components:{
         SearchPopover,
         CaseNumber,
@@ -408,8 +410,13 @@ export default {
 }
 
 .v-search-title {
-  padding-right: 20px;
+  padding-right: 10px;
   line-height: 40px;
 }
+.pm-mc-text-icon{
+  font-size: 2vw;
+  padding-right: 10px;
+  line-height: 3vw;
+}
 </style>
 

resources/assets/js/components/utils/CustomTooltip.vue

@@ -0,0 +1,71 @@
+<template>
+    <span
+        :id="data.id"
+        @mouseover="hoverHandler"
+        v-b-tooltip.hover
+        :title="labelTooltip"
+        @mouseleave="unhoverHandler"
+    >
+        {{ data.title }}
+    <b-tooltip
+        :target="data.id"
+        triggers="hoverHandler"
+        :show.sync="show"
+    >
+        {{ labelTooltip }}
+    </b-tooltip>
+    </span>
+    
+</template>
+
+<script>
+import api from "./../../api/index";
+
+export default {
+    name: "CustomTooltip",
+    props: {
+        data: Object,
+    },
+    data() {
+        return {
+            labelTooltip: "",
+            hovering: "",
+            show: false,
+            menuMap: {
+                CASES_INBOX: "inbox",
+                CASES_DRAFT: "draft",
+                CASES_PAUSED: "paused",
+                CASES_SELFSERVICE: "unassigned"
+            }
+        }
+    },
+    methods: {
+        /**
+         * Delay the hover event
+         */
+        hoverHandler() {
+            this.hovering = setTimeout(() => { this.setTooltip() }, 3000);
+        },
+        /**
+         * Reset the delay and hide the tooltip
+         */
+        unhoverHandler() {
+            this.labelTooltip = "";
+            this.show = false;
+            clearTimeout(this.hovering);
+        },
+        /**
+         * Set the label to show in the tooltip
+         */
+        setTooltip() {
+            let that = this;
+            api.menu
+                .getTooltip(that.menuMap[that.data.id])
+                .then((response) => {
+                    that.labelTooltip = response.data.label;
+                    that.show = true;
+                });
+        },
+    }
+}
+</script>

resources/assets/js/home/CaseDetail.vue

@@ -35,8 +35,8 @@
             <div slot="case_title" slot-scope="props">
               {{ props.row.CASE_TITLE }}
             </div>
-            <div slot="assignee" slot-scope="props">
+            <div slot="current_user" slot-scope="props">
-              {{ props.row.ASSIGNEE }}
+                <CurrentUserCell :data="props.row.USER_DATA" />
             </div>
             <div slot="status" slot-scope="props">
               {{ props.row.STATUS }}
@@ -114,6 +114,7 @@ import ModalCancelCase from "../home/modal/ModalCancelCase.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
 import ModalClaimCase from "./modal/ModalClaimCase.vue";
 import TaskCell from "../components/vuetable/TaskCell.vue";
+import CurrentUserCell from "../components/vuetable/CurrentUserCell.vue"
 import utils from "./../utils/utils";
 import Api from "../api/index";
 
@@ -131,7 +132,8 @@ export default {
     ButtonFleft,
     ModalNewRequest,
     ModalClaimCase,
-    TaskCell
+    TaskCell,
+    CurrentUserCell
   },
   props: {},
   data() {
@@ -153,7 +155,7 @@ export default {
       columns: [
         "task",
         "case_title",
-        "assignee",
+        "current_user",
         "status",
         "due_date",
         "actions"
@@ -164,7 +166,7 @@ export default {
         headings: {
           task: this.$i18n.t("ID_TASK"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
-          assignee: this.$i18n.t("ID_CURRENT_USER"),
+          current_user: this.$i18n.t("ID_CURRENT_USER"),
           status: this.$i18n.t("ID_STATUS"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
           actions: this.$i18n.t("ID_ACTIONS")
@@ -500,15 +502,7 @@ export default {
             },
           ],
           CASE_TITLE: v.DEL_TITLE,
-          ASSIGNEE:
+          USER_DATA: this.formatUser(v.user_tooltip),
-            v.USR_ID !== 0
-              ? utils.userNameDisplayFormat({
-                  userName: v.USR_USERNAME,
-                  firstName: v.USR_LASTNAME,
-                  lastName: v.USR_LASTNAME,
-                  format: window.config.FORMATS.format || null
-                })
-              : this.$i18n.t("ID_UNASSIGNED"),
           STATUS: v.DEL_THREAD_STATUS,
           DUE_DATE: v.DEL_TASK_DUE_DATE,
           TASK_COLOR: v.TAS_COLOR_LABEL,
@@ -520,6 +514,31 @@ export default {
       });
       return data;
     },
+    /**
+     * Format user information to show
+     */
+    formatUser(data) {
+        var dataFormat = [],
+            userDataFormat;
+        userDataFormat = data.usr_id ?
+            utils.userNameDisplayFormat({
+                userName: data.usr_firstname,
+                firstName: data.usr_lastname,
+                lastName: data.usr_username,
+                format: window.config.FORMATS.format || null
+            })
+            : this.$i18n.t("ID_UNASSIGNED");
+        dataFormat.push({
+            USERNAME_DISPLAY_FORMAT: userDataFormat !== "" ? userDataFormat : this.$i18n.t("ID_UNASSIGNED"),
+            EMAIL: data.usr_email,
+            POSITION: data.usr_position,
+            AVATAR: userDataFormat !== this.$i18n.t("ID_UNASSIGNED") ? window.config.SYS_SERVER_AJAX +
+                window.config.SYS_URI +
+                `users/users_ViewPhotoGrid?pUID=${data.usr_id}` : "",
+            UNASSIGNED: userDataFormat !== this.$i18n.t("ID_UNASSIGNED") ? true : false
+        });    
+        return dataFormat;
+    },
     /**
      * Show the alert message
      * @param {string} message - message to be displayen in the body

resources/assets/js/home/Draft/Draft.vue

@@ -5,10 +5,14 @@
     <CasesFilter
       :filters="filters"
       :title="$t('ID_DRAFT')"
+      :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header :data="dataMultiviewHeader" />
+    <multiview-header
+      :data="dataMultiviewHeader"
+      :dataSubtitle="dataSubtitle"
+    />
     <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
@@ -226,6 +230,7 @@ export default {
         "actions"
       ],
       tableData: [],
+      icon:"fas fa-edit",
       options: {
         filterable: false,
         headings: {
@@ -281,7 +286,8 @@ export default {
       dataEllipsis: {
         buttons: {}
       },
-      showEllipsis: false
+      showEllipsis: false,
+      dataSubtitle: null
     };
   },
   created() {

resources/assets/js/home/Inbox/Todo.vue

@@ -8,10 +8,14 @@
     <CasesFilter
       :filters="filters"
       :title="$t('ID_CASES_STATUS_TO_DO')"
+      :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header :data="dataMultiviewHeader" />
+    <multiview-header
+      :data="dataMultiviewHeader"
+      :dataSubtitle="dataSubtitle"
+    />
     <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
@@ -266,6 +270,7 @@ export default {
         "actions"
       ],
       tableData: [],
+      icon:"fas fa-check-circle",
       options: {
         filterable: false,
         headings: {
@@ -325,7 +330,8 @@ export default {
       dataEllipsis: {
         buttons: {}
       },
-      showEllipsis: false
+      showEllipsis: false,
+      dataSubtitle: null
     };
   },
   created() {
@@ -513,7 +519,7 @@ export default {
                 POSITION: data.user_tooltip.usr_position,
                 AVATAR: userDataFormat !== "" ? window.config.SYS_SERVER_AJAX +
                     window.config.SYS_URI +
-                    `users/users_ViewPhotoGrid?pUID=${data.user_tooltip.user_id}` : "",
+                    `users/users_ViewPhotoGrid?pUID=${data.user_tooltip.usr_id}` : "",
                 UNASSIGNED: userDataFormat !== "" ? true : false
             });    
         return dataFormat;

resources/assets/js/home/MyCases/MyCases.vue

@@ -13,6 +13,8 @@
         <MyCasesFilter
             :filters="filters"
             :title="title"
+            :random="random"
+            :icon="filterHeaderObject.icon"
             @onRemoveFilter="onRemoveFilter"
             @onUpdateFilters="onUpdateFilters"
         />
@@ -101,7 +103,11 @@ export default {
             filter: "CASES_INBOX",
             allView: [],
             filterHeader: "STARTED",
+            filterHeaderObject: {
+                icon:"fas fa-inbox"
+            },
             headers: [],
+            random: _.random(0,1000000000),
             newCase: {
                 title: this.$i18n.t("ID_NEW_CASE"),
                 class: "btn-success",
@@ -533,6 +539,8 @@ export default {
                             that.filterHeader = obj.item;
                             that.$refs["vueTable"].setPage(1); // Reset the page when change the header filter
                             that.$refs["vueTable"].getData();
+                            that.filterHeaderObject = obj;
+                            that.random = _.random(0,1000000000);
                         },
                         class: info[v.id].class
                     });

resources/assets/js/home/Paused/Paused.vue

@@ -6,10 +6,14 @@
     <CasesFilter
       :filters="filters"
       :title="$t('ID_PAUSED')"
+      :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header :data="dataMultiviewHeader" />
+    <multiview-header
+      :data="dataMultiviewHeader"
+      :dataSubtitle="dataSubtitle"
+    />
     <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
@@ -265,6 +269,7 @@ export default {
         "actions",
       ],
       tableData: [],
+      icon:"far fa-pause-circle",
       options: {
         filterable: false,
         headings: {
@@ -324,7 +329,8 @@ export default {
       dataEllipsis: {
         buttons: {}
       },
-      showEllipsis: false
+      showEllipsis: false,
+      dataSubtitle: null
     };
   },
   created() {
@@ -508,7 +514,7 @@ export default {
                 POSITION: data.user_tooltip.usr_position,
                 AVATAR: userDataFormat !== "" ? window.config.SYS_SERVER_AJAX +
                     window.config.SYS_URI +
-                    `users/users_ViewPhotoGrid?pUID=${data.user_tooltip.user_id}` : "",
+                    `users/users_ViewPhotoGrid?pUID=${data.user_tooltip.usr_id}` : "",
                 UNASSIGNED: userDataFormat !== "" ? true : false
             });    
         return dataFormat;

resources/assets/js/home/Unassigned/Unassigned.vue

@@ -5,10 +5,14 @@
     <CasesFilter
       :filters="filters"
       :title="$t('ID_UNASSIGNED')"
+      :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header :data="dataMultiviewHeader" />
+    <multiview-header
+      :data="dataMultiviewHeader"
+      :dataSubtitle="dataSubtitle"
+    />
     <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
@@ -260,6 +264,7 @@ export default {
         "priority",
         "actions",
       ],
+      icon:"fas fa-users",
       options: {
         filterable: false,
         headings: {
@@ -319,7 +324,8 @@ export default {
       dataEllipsis: {
         buttons: {}
       },
-      showEllipsis: false
+      showEllipsis: false,
+      dataSubtitle: null
     };
   },
   mounted() {
@@ -467,7 +473,7 @@ export default {
                 POSITION: data.user_tooltip.usr_position,
                 AVATAR: userDataFormat !== "" ? window.config.SYS_SERVER_AJAX +
                     window.config.SYS_URI +
-                    `users/users_ViewPhotoGrid?pUID=${data.user_tooltip.user_id}` : "",
+                    `users/users_ViewPhotoGrid?pUID=${data.user_tooltip.usr_id}` : "",
                 UNASSIGNED: userDataFormat !== "" ? true : false
             });    
         return dataFormat;