PMCORE-2506: sideabr collapsed feature is not working

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

fix conflicts

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();