PMCORE-2722: Tooltips do not display in advanced search

rename component

fix task component

resources/assets/js/components/vuetable/TaskCell.vue

@@ -1,48 +1,65 @@
 <template>
-  <div class="v-task-cell">
-    <div v-for="item in data" v-bind:key="item.TITLE" class="d-flex mb-3">
-      <div v-bind:style="{ color: activeColor(item.CODE_COLOR) }">
-        <i class="fas fa-square"></i>
-      </div>
-      <div class="col .v-task-cell-ellipsis">
-        {{ item.TITLE }}
-      </div>
+    <div v-if="data.length" class="task-cell">
+        <div v-for="(item, index) in data" class="d-flex mb-3">
+            <div
+                v-bind:style="{ color: activeColor(item.CODE_COLOR) }"
+                :id="statusId + index"
+            >
+                <i class="fas fa-square"></i>
+            </div>
+            <b-popover :target="statusId + index" triggers="hover" placement="top">
+                <b> {{ item.DELAYED_TITLE }} </b> {{ item.DELAYED_MSG }}
+            </b-popover>
+            <div class="col ellipsis" v-b-popover.hover.top="item.TITLE">
+                {{ item.TITLE }}
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: "TaskCell",
-  props: ["data"],
-  data() {
-    return {
-      //Color map for ["In Progress", "overdue", "inDraft", "paused", "unnasigned"]
-      colorMap: ["green", "red", "orange", "aqua", "silver"],
-    };
-  },
-  methods: {
-    /**
-     * Get the style color to be applied in the square icon
-     * @param {number} - status color(1-5)
-     * @return {string} - color atribute string
-     */
-    activeColor: function (codeColor) {
-      return this.colorMap[codeColor - 1];
+    name: "TaskCell",
+    props: ["data"],
+    data() {
+        return {
+            colorMap: ["green", "red", "orange", "blue", "silver"],
+            statusId: "status-" + _.random(1000000)
+        };
     },
-  },
+    methods: {
+        /**
+         * Get the style color to be applied in the square icon
+         * @param {number} - status color(1-5)
+         * @return {string} - color atribute string
+         */
+        activeColor: function(codeColor) {
+            return this.colorMap[codeColor - 1];
+        }
+    }
 };
 </script>
 
-<style>
-.v-task-cell {
-  display: inline-flex;
+<style> 
+.popover {
+    max-width: 600px !important; 
+    min-width: 200px !important;
+}
+.task-cell {
+    font-size: normal;
 }
 
-.v-task-cell-ellipsis {
-  white-space: nowrap;
-  width: 140px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.ellipsis {
+    white-space: nowrap;
+    width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.color {
+    color: red;
+}
+.avatar {
+    color: "red";
+    width: "1.3em";
 }
 </style>

resources/assets/js/home/AdvancedSearch.vue

@@ -159,7 +159,14 @@ export default {
             },
             pmDateFormat: window.config.FORMATS.dateFormat,
             clickCount: 0,
-            singleClickTimer: null
+            singleClickTimer: null,
+            statusTitle: {
+                "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
+                "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
+                "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
+                "PAUSED": this.$i18n.t("ID_PAUSED"),
+                "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
+            }
         };
     },
     watch: {
@@ -252,9 +259,14 @@ export default {
                 dataFormat.push({
                     TITLE: data[i].tas_title,
                     CODE_COLOR: data[i].tas_color,
+                    DELAYED_TITLE: data[i].tas_status === "OVERDUE" ?
+                            this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[data[i].tas_status],
+                    DELAYED_MSG: data[i].tas_status === "OVERDUE" ? data[i].delay : ""
+
                 });
             }
             return dataFormat;
+            
         },
         formatUser(data) {
             var i,
@@ -267,8 +279,8 @@ export default {
                         lastName: data[i].usr_username,
                         format: window.config.FORMATS.format || null
                     }),
-                    EMAIL: data[i].usr_email,
-                    POSITION: data[i].usr_position,
+                    EMAIL: data[i].user_tooltip.usr_email,
+                    POSITION: data[i].user_tooltip.usr_position,
                     AVATAR: window.config.SYS_SERVER +
                                 window.config.SYS_URI +
                                 `users/users_ViewPhotoGrid?pUID=${data[i].user_id}`

resources/assets/js/home/Draft.vue

@@ -104,7 +104,14 @@ export default {
       },
       pmDateFormat: "Y-m-d H:i:s",
       clickCount: 0,
-      singleClickTimer: null
+      singleClickTimer: null,
+      statusTitle: {
+          "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
+          "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
+          "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
+          "PAUSED": this.$i18n.t("ID_PAUSED"),
+          "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
+      }
     };
   },
   mounted() {
@@ -202,6 +209,9 @@ export default {
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
+            DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
+              this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
+            DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
           }],
           PRIORITY: v.DEL_PRIORITY_LABEL,
           PRO_UID: v.PRO_UID,

resources/assets/js/home/Paused.vue

@@ -127,7 +127,14 @@ export default {
       },
       pmDateFormat: "Y-m-d H:i:s",
       clickCount: 0,
-      singleClickTimer: null
+      singleClickTimer: null,
+      statusTitle: {
+          "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
+          "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
+          "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
+          "PAUSED": this.$i18n.t("ID_PAUSED"),
+          "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
+      }
     };
   },
   mounted() {},
@@ -208,6 +215,9 @@ export default {
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
+            DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
+              this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
+            DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
           }],
           USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
               userName: v.USR_LASTNAME,

resources/assets/js/home/Todo.vue

@@ -120,7 +120,14 @@ export default {
       },
       pmDateFormat: "Y-m-d H:i:s",
       clickCount: 0,
-      singleClickTimer: null
+      singleClickTimer: null,
+      statusTitle: {
+          "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
+          "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
+          "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
+          "PAUSED": this.$i18n.t("ID_PAUSED"),
+          "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
+      }
     };
   },
   mounted() {},
@@ -216,6 +223,9 @@ export default {
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
+            DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
+              this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
+            DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
           }],
           USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
               userName: v.USR_LASTNAME,

resources/assets/js/home/Unassigned.vue

@@ -120,7 +120,14 @@ export default {
       },
       pmDateFormat: "Y-m-d H:i:s",
       clickCount: 0,
-      singleClickTimer: null
+      singleClickTimer: null,
+      statusTitle: {
+          "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
+          "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
+          "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
+          "PAUSED": this.$i18n.t("ID_PAUSED"),
+          "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
+      }
     };
   },
   mounted() {},
@@ -201,6 +208,9 @@ export default {
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
+            DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
+              this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
+            DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
           }],
           DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,