PMCORE-2573:review pending task column in my cases table

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

@@ -38,7 +38,7 @@ export default {
          * @return {string} - color atribute string
          */
         activeColor: function(codeColor) {
-            return this.colorMap[codeColor-1];
+            return this.colorMap[codeColor - 1];
         },
     }
 };

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

@@ -1,10 +1,12 @@
 <template>
   <div class="v-task-cell">
-    <div v-bind:style="{ color: activeColor(data.CODE_COLOR) }">
+    <div v-for="item in data" class="d-flex mb-3">
-      <i class="fas fa-square"></i>
+      <div v-bind:style="{ color: activeColor(item.CODE_COLOR) }">
-    </div>
+        <i class="fas fa-square"></i>
-    <div class="col .v-task-cell-ellipsis">
+      </div>
-      {{ data.TITLE }}
+      <div class="col .v-task-cell-ellipsis">
+        {{ item.TITLE }}
+      </div>
     </div>
   </div>
 </template>

resources/assets/js/home/AdvancedSearch.vue

@@ -54,22 +54,20 @@
                 {{ props.row.STATUS }}
             </div>
             <div slot="current_user" slot-scope="props">
-                {{
+                <div class="v-user-cell" v-for="item in props.row.USER">
-                    nameFormatCases(
+                    <div class="col .v-user-cell-ellipsis">
-                        props.row.USR_FIRSTNAME,
+                        {{ item.USER_DATA }}
-                        props.row.USR_LASTNAME,
+                    </div>
-                        props.row.USR_USERNAME
+                </div>
-                    )
-                }}
             </div>
-            <div slot="due_date" slot-scope="props">
+            <div slot="start_date" slot-scope="props">
-                {{ props.row.DUE_DATE }}
+                {{ props.row.START_DATE }}
             </div>
-            <div slot="delegation_date" slot-scope="props">
+            <div slot="finish_date" slot-scope="props">
-                {{ props.row.DELEGATION_DATE }}
+                {{ props.row.FINISH_DATE }}
             </div>
-              <div slot="priority" slot-scope="props">
+              <div slot="duration" slot-scope="props">
-                {{ props.row.PRIORITY }}
+                {{ props.row.DURATION }}
             </div>
             <div slot="actions" slot-scope="props">
                 <div class="btn-default">
@@ -124,9 +122,9 @@ export default {
                 "process_name",
                 "task",
                 "current_user",
-                "due_date",
+                "start_date",
-                "delegation_date",
+                "finish_date",
-                "priority",
+                "duration",
                 "actions",
             ],
             tableData: [],
@@ -139,9 +137,9 @@ export default {
                     process_name: this.$i18n.t("ID_PROCESS_NAME"),
                     task: this.$i18n.t("ID_TASK"),
                     current_user: this.$i18n.t("ID_CURRENT_USER"),
-                    due_date: this.$i18n.t("ID_DUE_DATE"),
+                    start_date: this.$i18n.t("ID_START_DATE"),
-                    delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
+                    finish_date: this.$i18n.t("ID_FINISH_DATE"),
-                    priority: this.$i18n.t("ID_PRIORITY"),
+                    duration: this.$i18n.t("ID_DURATION"),
                     actions: "",
                 },
                 selectable: {
@@ -209,23 +207,45 @@ export default {
                     CASE_NUMBER: v.APP_NUMBER,
                     CASE_TITLE: v.DEL_TITLE,
                     PROCESS_NAME: v.PRO_TITLE,
-                    TASK: {
+                    TASK: this.formatTasks(v.THREAD_TASKS),
-                        TITLE: v.TAS_TITLE,
+                    USER: this.formatUser(v.THREAD_USERS),
-                        CODE_COLOR: v.TAS_COLOR,
+                    START_DATE: v.APP_CREATE_DATE_LABEL,
-                        COLOR: v.TAS_COLOR_LABEL,
+                    FINISH_DATE: v.APP_FINISH_DATE_LABEL,
-                    },
+                    DURATION: v.DURATION,
-                    USR_FIRSTNAME: v.USR_FIRSTNAME,
-                    USR_LASTNAME: v.USR_LASTNAME,
-                    USR_USERNAME: v.USR_USERNAME,
-                    DUE_DATE: v.DEL_TASK_DUE_DATE,
-                    DELEGATION_DATE: v.DEL_DELEGATE_DATE,
-                    PRIORITY: v.DEL_PRIORITY_LABEL,
                     DEL_INDEX: v.DEL_INDEX,
                     APP_UID: v.APP_UID,
                 });
             });
             return data;
         },
+        /**
+         * Format the data for the column task
+         */
+        formatTasks(data) {
+            var i,
+                dataFormat = [];
+            for (i = 0; i < data.length; i += 1) {
+                dataFormat.push({
+                    TITLE: data[i].tas_title,
+                    CODE_COLOR: data[i].tas_color,
+                });
+            }
+            return dataFormat;
+        },
+        formatUser(data) {
+            var i,
+                dataFormat = [];
+            for (i = 0; i < data.length; i += 1) {
+                dataFormat.push({
+                    USER_DATA: this.nameFormatCases(
+                        data[i].usr_firstname,
+                        data[i].usr_lastname,
+                        data[i].usr_username
+                    )
+                });
+            }
+            return dataFormat;
+        },
         /**
          * Get for user format name configured in Processmaker Environment Settings
          *
@@ -491,4 +511,13 @@ export default {
     padding-left: 50px;
     padding-right: 50px;
 }
+.v-user-cell {
+  display: inline-block;
+}
+.v-user-cell-ellipsis {
+    white-space: nowrap;
+    width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 </style>

resources/assets/js/home/MyCases.vue

@@ -55,7 +55,7 @@ import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
 import MyCasesFilter from "../components/search/MyCasesFilter";
 import ModalComments from "./modal/ModalComments.vue";
-import GroupedCell from "../components/utils/GroupedCell.vue";
+import GroupedCell from "../components/vuetable/GroupedCell.vue";
 import api from "./../api/index";
 
 export default {
@@ -186,7 +186,8 @@ export default {
          * Format Response API TODO to grid inbox and columns
          */
         formatDataResponse(response) {
-            let data = [];
+            let that = this,
+                data = [];
             _.forEach(response, (v) => {
                 data.push({
                     CASE_NUMBER: v.APP_NUMBER,
@@ -195,7 +196,7 @@ export default {
                     STATUS: v.APP_STATUS,
                     START_DATE: v.APP_CREATE_DATE || "",
                     FINISH_DATE: v.APP_FINISH_DATE || "",
-                    PENDING_TASKS: [],
+                    PENDING_TASKS: that.formantPendingTask(v.PENDING),
                     DURATION: v.DURATION,
                     DEL_INDEX: v.DEL_INDEX,
                     APP_UID: v.APP_UID,
@@ -205,6 +206,23 @@ export default {
             });
             return data;
         },
+        /**
+         * Format data for pending task.
+         */
+        formantPendingTask(data) {
+            var i,
+                dataFormat = [];
+            for (i = 0; i < data.length; i += 1) {
+                dataFormat.push(
+                    {
+                        TAS_NAME: data[i].tas_title,
+                        STATUS: data[i].tas_color,
+                        PENDING: ""
+                    }
+                );
+            }
+            return dataFormat;
+        },
         /**
          * Get for user format name configured in Processmaker Environment Settings
          *