PMCORE-2506: sideabr collapsed feature is not working

PMCORE-2507: Grouped cell  feature, create a component to support this  functionality

fix conflicts

package-lock.json

@@ -3617,6 +3617,11 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "faker": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/faker/-/faker-5.1.0.tgz",
+      "integrity": "sha512-RrWKFSSA/aNLP0g3o2WW1Zez7/MnMr7xkiZmoCfAGZmdkDQZ6l2KtuXHN5XjdvpRjDl8+3vf+Rrtl06Z352+Mw=="
+    },
     "fast-deep-equal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
@@ -10455,6 +10460,11 @@
         }
       }
     },
+    "underscore": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.0.tgz",
+      "integrity": "sha512-21rQzss/XPMjolTiIezSu3JAjgagXKROtNrYFEOWK109qY1Uv2tVjPTZ1ci2HgvQDA16gHYSthQIJfB+XId/rQ=="
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -10750,6 +10760,15 @@
         "tinycolor2": "^1.1.2"
       }
     },
+    "vue-faker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-faker/-/vue-faker-3.0.0.tgz",
+      "integrity": "sha512-rMPjMdrq6P9bDYm/fGb7ZJHZhRv2YW3iDkuCHYts7Nx/uVVPBxh0cHE7umpFIQsteiiCs0wPP2xwvkzeLPWLRA==",
+      "requires": {
+        "faker": "^5.0.0",
+        "underscore": "^1.8.3"
+      }
+    },
     "vue-fullscreen": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/vue-fullscreen/-/vue-fullscreen-2.1.6.tgz",

package.json

@@ -26,12 +26,13 @@
     "bootstrap-vue": "^2.19.0",
     "chart.js": "^2.7.2",
     "dateformat": "^3.0.3",
+    "faker": "^5.1.0",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "hooper": "^0.3.4",
     "idempotent-babel-polyfill": "^7.4.4",
     "jquery": "^3.1.1",
-    "lodash": "^4.17.10",
+    "lodash": "^4.17.20",
     "muuri": "^0.7.1",
     "npm-font-open-sans": "^1.1.0",
     "popper.js": "^1.12",
@@ -43,6 +44,7 @@
     "vue-chartjs": "^3.3.2",
     "vue-clipboards": "^1.2.4",
     "vue-color": "^2.7.0",
+    "vue-faker": "^3.0.0",
     "vue-fullscreen": "^2.1.3",
     "vue-i18n": "^8.22.2",
     "vue-js-toggle-button": "^1.3.1",

resources/assets/js/api/Cases.js

@@ -1,5 +1,5 @@
 import headerData from "./../mocks/casesHeader.json";
-import startedData from "./../mocks/startedCases.json";
+import startedData from "./../mocks/startedCasesFaker.js";
 import inprogressData from "./../mocks/inprogressCases.json";
 import completedData from "./../mocks/completedCases.json";
 import supervisingData from "./../mocks/supervisingCases.json";

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

@@ -0,0 +1,67 @@
+<template>
+    <div v-if="data.length" class="grouped-cell">
+        <div v-for="item in data" class="d-flex mb-3">
+            <div
+                v-bind:style="{ color: activeColor(item.STATUS) }"
+                v-b-popover.hover.top="item.DELAYED_MSG"
+            >
+                <i class="fas fa-square"></i>
+            </div>
+            <div class="col ellipsis" v-b-popover.hover.top="item.TAS_NAME">
+                {{ item.TAS_NAME }}
+            </div>
+            <div class="avatar">
+                <b-avatar
+                    variant="info"
+                    :src="item.AVATAR"
+                    size="1.2em"
+                ></b-avatar>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "GroupedCell",
+    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];
+        },
+    }
+};
+</script>
+
+<style>
+.grouped-cell {
+    font-size: smaller;
+}
+
+.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/MyCases.vue

@@ -19,6 +19,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
+      <div slot="pending_taks" slot-scope="props">
+         <GroupedCell :data="props.row.PENDING_TASKS"/>
+      </div>
       <div slot="status" slot-scope="props">{{ props.row.STATUS }}</div>
       <div slot="start_date" slot-scope="props">
         {{ props.row.START_DATE }}
@@ -42,6 +45,7 @@
 import HeaderCounter from "../components/home/HeaderCounter.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
+import GroupedCell from "../components/utils/GroupedCell.vue";
 import api from "./../api/index";
 
 export default {
@@ -50,6 +54,7 @@ export default {
     HeaderCounter,
     ButtonFleft,
     ModalNewRequest,
+    GroupedCell
   },
   props: {},
   data() {
@@ -70,6 +75,7 @@ export default {
         "case_number",
         "case_title",
         "process_name",
+        "pending_taks",
         "status",
         "start_date",
         "finish_date",
@@ -82,6 +88,7 @@ export default {
           case_number: "ID_CASE_NUMBER",
           case_title: "ID_CASE_TITLE",
           process_name: "ID_PROCESS_NAME",
+          pending_taks: "PENDING_TASKS",
           status: "ID_STATUS",
           start_date: "ID_START_DATE",
           finish_date: "ID_FINISH_DATE",
@@ -121,7 +128,6 @@ export default {
   },
   mounted() {
     this.getHeaders();
-    document.body.querySelector(".pmDynaformLoading").style.display = "none";
   },
   watch: {},
   computed: {
@@ -180,6 +186,7 @@ export default {
           STATUS: v.APP_STATUS,
           START_DATE: v.DEL_DELEGATE_DATE_LABEL,
           FINISH_DATE: v.DEL_DELEGATE_DATE_LABEL,
+          PENDING_TASKS: v.PENDING_TASKS,
           DURATION: v.DURATION_LABEL,
         });
       });

resources/assets/js/mocks/startedCasesFaker.js

@@ -0,0 +1,42 @@
+
+
+function createFakerData () {
+    var faker = require("faker");
+    var _ = require("lodash");
+    var  total = 20;
+    return {
+        
+        data:_.times(total,function (n) {
+            return  {
+                "APP_NUMBER": faker.random.number(),
+                "APP_TITLE": faker.name.title(),
+                "PRO_TITLE": faker.finance.accountName(),
+                "TAS_TITLE": faker.company.companyName(),
+                "PENDING_TASKS": [
+                    {
+                        TAS_NAME: faker.company.companyName(),
+                        STATUS: faker.random.number({ min:1, max:5 }),
+                        AVATAR: faker.image.image(),
+                        DELAYED_MSG: faker.name.title()
+                    },
+                    {
+                        TAS_NAME: faker.company.companyName(),
+                        STATUS: faker.random.number({ min:1, max:5 }),
+                        AVATAR: faker.image.image(),
+                        DELAYED_MSG: faker.name.title()
+                    }
+                    
+                ],
+                "APP_STATUS": "IN PROGRESS",
+                "DEL_DELEGATE_DATE": "10/10/10",
+                "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+                "DEL_FINISH_DATE": "10/10/10",
+                "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+                "DURATION": "4 days",
+                "DURATION_LABEL": "4 months 4 days"
+            }
+        }),
+        total : total
+    }
+}
+module.exports = createFakerData();