PMCORE-2698: My Cases > 'user information' does not display as tooltip for each Case

add mailto

fix unassigned

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

@@ -10,13 +10,34 @@
             <div class="col ellipsis" v-b-popover.hover.top="item.TAS_NAME">
                 {{ item.TAS_NAME }}
             </div>
-            <div class="avatar">
+            <div class="avatar" :id="id">
                 <b-avatar
                     variant="info"
                     :src="item.AVATAR"
-                    size="1.2em"
+                    size="2em"
                 ></b-avatar>
             </div>
+            <b-popover
+                :target="id"
+                placement="top"
+                ref="popover"
+                triggers="hover"    
+            >
+                <b-row >
+                    <b-col md="3">
+                        <b-avatar
+                            variant="info"
+                            :src="item.AVATAR"
+                            size="4em"
+                        ></b-avatar>
+                    </b-col>    
+                    <b-col md="9">
+                        <div class="font-weight-bold">{{item.USERNAME}}</div>
+                        <div v-if="item.POSITION !== ''">{{item.POSITION}}</div>
+                        <b-link :href="mailto(item.EMAIL)" >{{item.EMAIL}}</b-link>
+                    </b-col>
+                </b-row>
+            </b-popover>
         </div>
     </div>
 </template>
@@ -29,6 +50,7 @@ export default {
         return {
             //Color map for ["In Progress", "overdue", "inDraft", "paused", "unnasigned"]
             colorMap: ["green", "red", "orange", "aqua", "silver"],
+            id: "avatar-" + _.random(1000000)
         };
     },
     methods: {
@@ -40,13 +62,20 @@ export default {
         activeColor: function(codeColor) {
             return this.colorMap[codeColor - 1];
         },
+        mailto: function(email) {
+            return "mailto:" + email;
+        }
     }
 };
 </script>
 
-<style>
+<style> 
+.popover {
+    max-width: 600px !important; 
+    min-width: 200px !important;
+}
 .grouped-cell {
-    font-size: smaller;
+    font-size: small;
 }
 
 .ellipsis {
@@ -55,9 +84,7 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
 }
-
 .color {
-  
     color: red;
 }
 .avatar {

resources/assets/js/home/AdvancedSearch.vue

@@ -89,6 +89,7 @@ import AdvancedFilter from "../components/search/AdvancedFilter";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import ModalComments from "./modal/ModalComments.vue";
 import api from "./../api/index";
+import utils from "./../utils/utils";
 
 export default {
     name: "AdvancedSearch",
@@ -262,49 +263,16 @@ export default {
                 dataFormat = [];
             for (i = 0; i < data.length; i += 1) {
                 dataFormat.push({
-                    USER_DATA: this.nameFormatCases(
+                    USER_DATA: utils.userNameDisplayFormat({
-                        data[i].usr_firstname,
+                        userName: data[i].usr_firstname,
-                        data[i].usr_lastname,
+                        firstName: data[i].usr_lastname,
-                        data[i].usr_username
+                        lastName: data[i].usr_username,
-                    )
+                        format: window.config.FORMATS.format || null
+                    }),
                 });
             }
             return dataFormat;
         },
-        /**
-         * Get for user format name configured in Processmaker Environment Settings
-         *
-         * @param {string} name
-         * @param {string} lastName
-         * @param {string} userName
-         * @return {string} nameFormat
-         */
-        nameFormatCases(name, lastName, userName) {
-            let nameFormat = "";
-            if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
-                return nameFormat;
-            }
-            if (this.nameFormat === "@firstName @lastName") {
-                nameFormat = name + " " + lastName;
-            } else if (this.nameFormat === "@firstName @lastName (@userName)") {
-                nameFormat = name + " " + lastName + " (" + userName + ")";
-            } else if (this.nameFormat === "@userName") {
-                nameFormat = userName;
-            } else if (this.nameFormat === "@userName (@firstName @lastName)") {
-                nameFormat = userName + " (" + name + " " + lastName + ")";
-            } else if (this.nameFormat === "@lastName @firstName") {
-                nameFormat = lastName + " " + name;
-            } else if (this.nameFormat === "@lastName, @firstName") {
-                nameFormat = lastName + ", " + name;
-            } else if (
-                this.nameFormat === "@lastName, @firstName (@userName)"
-            ) {
-                nameFormat = lastName + ", " + name + " (" + userName + ")";
-            } else {
-                nameFormat = name + " " + lastName;
-            }
-            return nameFormat;
-        },
         /**
          * Convert string to date format
          *

resources/assets/js/home/MyCases.vue

@@ -71,6 +71,7 @@ import MyCasesFilter from "../components/search/MyCasesFilter";
 import ModalComments from "./modal/ModalComments.vue";
 import GroupedCell from "../components/vuetable/GroupedCell.vue";
 import api from "./../api/index";
+import utils from "./../utils/utils";
 
 export default {
     name: "MyCases",
@@ -301,47 +302,23 @@ export default {
                     {
                         TAS_NAME: data[i].tas_title,
                         STATUS: data[i].tas_color,
-                        PENDING: "",
+                        DELAYED_MSG: data[i].delay,
-                        DELAYED_MSG: data[i].delay
+                        AVATAR: window.config.SYS_SERVER +
+                                window.config.SYS_URI +
+                                `users/users_ViewPhotoGrid?pUID=${data[i].user_id}`,
+                        USERNAME: utils.userNameDisplayFormat({
+                            userName: data[i].user_tooltip.usr_username,
+                            firstName: data[i].user_tooltip.usr_firstname,
+                            lastName: data[i].user_tooltip.usr_lastname,
+                            format: window.config.FORMATS.format || null
+                        }),
+                        POSITION: data[i].user_tooltip.usr_position,
+                        EMAIL: data[i].user_tooltip.usr_email
                     }
                 );
             }
             return dataFormat;
         },
-        /**
-         * Get for user format name configured in Processmaker Environment Settings
-         *
-         * @param {string} name
-         * @param {string} lastName
-         * @param {string} userName
-         * @return {string} nameFormat
-         */
-        nameFormatCases(name, lastName, userName) {
-            let nameFormat = "";
-            if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
-                return nameFormat;
-            }
-            if (this.nameFormat === "@firstName @lastName") {
-                nameFormat = name + " " + lastName;
-            } else if (this.nameFormat === "@firstName @lastName (@userName)") {
-                nameFormat = name + " " + lastName + " (" + userName + ")";
-            } else if (this.nameFormat === "@userName") {
-                nameFormat = userName;
-            } else if (this.nameFormat === "@userName (@firstName @lastName)") {
-                nameFormat = userName + " (" + name + " " + lastName + ")";
-            } else if (this.nameFormat === "@lastName @firstName") {
-                nameFormat = lastName + " " + name;
-            } else if (this.nameFormat === "@lastName, @firstName") {
-                nameFormat = lastName + ", " + name;
-            } else if (
-                this.nameFormat === "@lastName, @firstName (@userName)"
-            ) {
-                nameFormat = lastName + ", " + name + " (" + userName + ")";
-            } else {
-                nameFormat = name + " " + lastName;
-            }
-            return nameFormat;
-        },
         /**
          * Convert string to date format
          *

resources/assets/js/home/Paused.vue

@@ -34,15 +34,8 @@
         <TaskCell :data="props.row.TASK" />
       </div>
       <div slot="current_user" slot-scope="props">
-        {{
+        {{ props.row.USERNAME_DISPLAY_FORMAT }}
-          nameFormatCases(
-            props.row.USR_FIRSTNAME,
-            props.row.USR_LASTNAME,
-            props.row.USR_USERNAME
-          )
-        }}
       </div>
-
       <div slot="due_date" slot-scope="props">
         {{ props.row.DUE_DATE }}
       </div>
@@ -71,6 +64,7 @@ import CasesFilter from "../components/search/CasesFilter";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import ModalUnpauseCase from "./modal/ModalUnpauseCase.vue";
 import api from "./../api/index";
+import utils from "./../utils/utils";
 
 export default {
   name: "Paused",
@@ -216,9 +210,12 @@ export default {
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
           }],
-          USR_FIRSTNAME: v.USR_FIRSTNAME,
+          USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
-          USR_LASTNAME: v.USR_LASTNAME,
+              userName: v.USR_LASTNAME,
-          USR_USERNAME: v.USR_USERNAME,
+              firstName: v.USR_LASTNAME,
+              lastName: v.USR_LASTNAME,
+              format: window.config.FORMATS.format || null
+          }),
           DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
           PRIORITY: v.DEL_PRIORITY_LABEL,
@@ -230,38 +227,6 @@ export default {
       });
       return data;
     },
-    /**
-     * Get for user format name configured in Processmaker Environment Settings
-     *
-     * @param {string} name
-     * @param {string} lastName
-     * @param {string} userName
-     * @return {string} nameFormat
-     */
-    nameFormatCases(name, lastName, userName) {
-      let nameFormat = "";
-      if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
-        return nameFormat;
-      }
-      if (this.nameFormat === "@firstName @lastName") {
-        nameFormat = name + " " + lastName;
-      } else if (this.nameFormat === "@firstName @lastName (@userName)") {
-        nameFormat = name + " " + lastName + " (" + userName + ")";
-      } else if (this.nameFormat === "@userName") {
-        nameFormat = userName;
-      } else if (this.nameFormat === "@userName (@firstName @lastName)") {
-        nameFormat = userName + " (" + name + " " + lastName + ")";
-      } else if (this.nameFormat === "@lastName @firstName") {
-        nameFormat = lastName + " " + name;
-      } else if (this.nameFormat === "@lastName, @firstName") {
-        nameFormat = lastName + ", " + name;
-      } else if (this.nameFormat === "@lastName, @firstName (@userName)") {
-        nameFormat = lastName + ", " + name + " (" + userName + ")";
-      } else {
-        nameFormat = name + " " + lastName;
-      }
-      return nameFormat;
-    },
     /**
      * Open case detail
      *

resources/assets/js/home/Todo.vue

@@ -34,15 +34,8 @@
         <TaskCell :data="props.row.TASK" />
       </div>
       <div slot="current_user" slot-scope="props">
-        {{
+        {{ props.row.USERNAME_DISPLAY_FORMAT}}
-          nameFormatCases(
-            props.row.USR_FIRSTNAME,
-            props.row.USR_LASTNAME,
-            props.row.USR_USERNAME
-          )
-        }}
       </div>
-
       <div slot="due_date" slot-scope="props">
         {{ props.row.DUE_DATE }}
       </div>
@@ -66,6 +59,7 @@ import ModalNewRequest from "./ModalNewRequest.vue";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import CasesFilter from "../components/search/CasesFilter";
 import api from "./../api/index";
+import utils from "./../utils/utils";
 
 export default {
   name: "Todo",
@@ -208,9 +202,12 @@ export default {
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
           }],
-          USR_FIRSTNAME: v.USR_FIRSTNAME,
+          USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
-          USR_LASTNAME: v.USR_LASTNAME,
+              userName: v.USR_LASTNAME,
-          USR_USERNAME: v.USR_USERNAME,
+              firstName: v.USR_LASTNAME,
+              lastName: v.USR_LASTNAME,
+              format: window.config.FORMATS.format || null
+          }),
           DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
           PRIORITY: v.DEL_PRIORITY_LABEL,
@@ -222,38 +219,6 @@ export default {
       });
       return data;
     },
-    /**
-     * Get for user format name configured in Processmaker Environment Settings
-     *
-     * @param {string} name
-     * @param {string} lastName
-     * @param {string} userName
-     * @return {string} nameFormat
-     */
-    nameFormatCases(name, lastName, userName) {
-      let nameFormat = "";
-      if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
-        return nameFormat;
-      }
-      if (this.nameFormat === "@firstName @lastName") {
-        nameFormat = name + " " + lastName;
-      } else if (this.nameFormat === "@firstName @lastName (@userName)") {
-        nameFormat = name + " " + lastName + " (" + userName + ")";
-      } else if (this.nameFormat === "@userName") {
-        nameFormat = userName;
-      } else if (this.nameFormat === "@userName (@firstName @lastName)") {
-        nameFormat = userName + " (" + name + " " + lastName + ")";
-      } else if (this.nameFormat === "@lastName @firstName") {
-        nameFormat = lastName + " " + name;
-      } else if (this.nameFormat === "@lastName, @firstName") {
-        nameFormat = lastName + ", " + name;
-      } else if (this.nameFormat === "@lastName, @firstName (@userName)") {
-        nameFormat = lastName + ", " + name + " (" + userName + ")";
-      } else {
-        nameFormat = name + " " + lastName;
-      }
-      return nameFormat;
-    },
     /**
      * Open selected cases in the inbox
      *

resources/assets/js/home/Unassigned.vue

@@ -33,16 +33,6 @@
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
-      <div slot="current_user" slot-scope="props">
-        {{
-          nameFormatCases(
-            props.row.USR_FIRSTNAME,
-            props.row.USR_LASTNAME,
-            props.row.USR_USERNAME
-          )
-        }}
-      </div>
-
       <div slot="due_date" slot-scope="props">
         {{ props.row.DUE_DATE }}
       </div>
@@ -95,7 +85,6 @@ export default {
         "case_title",
         "process_name",
         "task",
-        "current_user",
         "due_date",
         "delegation_date",
         "priority",
@@ -213,9 +202,6 @@ export default {
             CODE_COLOR: v.TAS_COLOR,
             COLOR: v.TAS_COLOR_LABEL,
           }],
-          USR_FIRSTNAME: v.USR_FIRSTNAME,
-          USR_LASTNAME: v.USR_LASTNAME,
-          USR_USERNAME: v.USR_USERNAME,
           DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
           PRIORITY: v.DEL_PRIORITY_LABEL,
@@ -227,42 +213,6 @@ export default {
       });
       return data;
     },
-    /**
-     * Get for user format name configured in Processmaker Environment Settings
-     *
-     * @param {string} name
-     * @param {string} lastName
-     * @param {string} userName
-     * @return {string} nameFormat
-     */
-    nameFormatCases(name, lastName, userName) {
-      let nameFormat = "";
-      if (!(name && lastName && userName)) {
-        return "";
-      }
-
-      if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
-        return nameFormat;
-      }
-      if (this.nameFormat === "@firstName @lastName") {
-        nameFormat = name + " " + lastName;
-      } else if (this.nameFormat === "@firstName @lastName (@userName)") {
-        nameFormat = name + " " + lastName + " (" + userName + ")";
-      } else if (this.nameFormat === "@userName") {
-        nameFormat = userName;
-      } else if (this.nameFormat === "@userName (@firstName @lastName)") {
-        nameFormat = userName + " (" + name + " " + lastName + ")";
-      } else if (this.nameFormat === "@lastName @firstName") {
-        nameFormat = lastName + " " + name;
-      } else if (this.nameFormat === "@lastName, @firstName") {
-        nameFormat = lastName + ", " + name;
-      } else if (this.nameFormat === "@lastName, @firstName (@userName)") {
-        nameFormat = lastName + ", " + name + " (" + userName + ")";
-      } else {
-        nameFormat = name + " " + lastName;
-      }
-      return nameFormat;
-    },
     /**
      * Claim case
      *

resources/assets/js/utils/utils.js

@@ -0,0 +1,23 @@
+import _ from "lodash";
+export default {
+    /**
+     * Environment Formats function for full name
+     * @param {object} params
+     */
+    userNameDisplayFormat(params) {
+        let aux;
+        let defaultValues = {
+                userName: '',
+                firstName: '',
+                lastName: '',
+                format: '(@lastName, @firstName) @userName'
+            };
+        _.assignIn(defaultValues, params);
+        console.log(defaultValues);
+        aux = defaultValues.format;
+        aux = aux.replace('@userName',defaultValues.userName);
+        aux = aux.replace('@firstName',defaultValues.firstName);
+        aux = aux.replace('@lastName',defaultValues.lastName);
+        return aux;
+    }
+}