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

2021-08-09 19:58:22 +00:00
parent 9261612ce7 d17ea63872
commit 50c8cae9c2
12 changed files with 223 additions and 50 deletions
--- a/resources/assets/js/api/Menu.js
+++ b/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
+              }
+        });
    }
 };
--- a/resources/assets/js/components/headers/MultiviewHeader.vue
+++ b/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>
-        <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>
+      <b-row>
+        <b-col sm="8">
+          <div class="subtitle" v-if="dataSubtitle">
+            <h6>
+              {{ dataSubtitle.subtitle }}
+              <span>
+                <i :class="dataSubtitle.icon"></i>
+              </span>
+            </h6>
          </div>
-        </button>
-      </div>
+        </b-col>
+        <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 {
--- a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
+++ b/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: {
--- a/resources/assets/js/components/search/CasesFilter.vue
+++ b/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>
--- a/resources/assets/js/components/search/MyCasesFilter.vue
+++ b/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>

--- a/resources/assets/js/components/utils/CustomTooltip.vue
+++ b/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>
--- a/resources/assets/js/home/CaseDetail.vue
+++ b/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">
-              {{ props.row.ASSIGNEE }}
+            <div slot="current_user" slot-scope="props">
+                <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:
-            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"),
+          USER_DATA: this.formatUser(v.user_tooltip),
          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
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/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() {
--- a/resources/assets/js/home/Inbox/Todo.vue
+++ b/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;
--- a/resources/assets/js/home/MyCases/MyCases.vue
+++ b/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
                    });
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/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;
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/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;