Merged in feature/PMCORE-2523 (pull request #7596)

PMCORE-2523

Approved-by: Rodrigo Quelca

resources/assets/js/api/Menu.js

@@ -1,9 +1,12 @@
-import menuData from "./../mocks/menu.json";
+import axios from 'axios';
 
 export let menu = {
     get() {
-        return new Promise((resolutionFunc, rejectionFunc) => {
-            resolutionFunc(menuData);
+        return axios.get(window.config.SYS_SERVER + '/api/1.0/' + window.config.SYS_WORKSPACE + '/home/menu', {
+            headers: {
+                'Authorization': 'Bearer ' + window.config.SYS_CREDENTIALS.accessToken
+              }
         });
+        
     },
 };

resources/assets/js/components/menu/CustomSidebar.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script>
-
+import api from "./../../api/index";
 export default {
     name: "CustomSidebar",
-    props: ['menu'],
     data() {
         return {
+            menu: [],
             collapsed: false,
             isOnMobile: false,
             hideToggle: true,
@@ -43,7 +43,14 @@ export default {
     mounted() {
         this.onResize();
         window.addEventListener("resize", this.onResize);
-       
+        api.menu
+            .get()
+            .then((response) => {
+                this.menu = this.mappingMenu(response.data);
+            })
+            .catch((e) => {
+                console.error(e);
+            });
     },
     methods: {
         /**
@@ -76,6 +83,34 @@ export default {
                 this.collapsed = false;
             }
         },
+        /**
+         * Do a mapping of vue view for menus
+         * @returns array
+         */
+        mappingMenu(data) {
+            var i,
+                j,
+                newData = data,
+                auxId,
+                viewVue = {
+                    'CASES_MY_CASES': 'MyCases',
+                    'CASES_SEARCH': 'advanced-search',
+                    'CASES_INBOX': 'todo',
+                    'CASES_DRAFT': 'draft',
+                    'CASES_PAUSED': 'paused',
+                    'CASES_SELFSERVICE': 'unassigned',
+                    'CONSOLIDATED_CASES': 'batch-routing',
+                    'CASES_TO_REASSIGN': 'task-reassignments',
+                    'CASES_FOLDERS': 'my-documents'
+                };
+            for (i = 0; i < data.length; i += 1) {
+                auxId = data[i].id || '';
+                if (auxId !== '' && viewVue[auxId]) {
+                    newData[i].id = viewVue[auxId];
+                }
+            }
+            return newData;
+        }
     },
 };
 </script>

resources/assets/js/home/Home.vue

@@ -98,9 +98,7 @@ export default {
                 });
         },
         OnClickSidebarItem(item) {
-            this.page = item.item.page || "MyCases";
-            this.pageId = item.item.id || null;
-            this.pageName = item.item.title || null;
+            this.page = item.item.id || "MyCases";
         },
         /**
          * Update page component

resources/assets/sass/menu.scss

@@ -37,7 +37,8 @@
 .v-sidebar-menu .vsm--item {
   position: relative;
   display: block;
-  width: 100%
+  width: 90%;
+  margin-left: 10px;
 }
 
 .v-sidebar-menu .vsm--link {
@@ -69,11 +70,12 @@
 }
 
 .v-sidebar-menu .vsm--link_level-1 .vsm--icon {
-  height: 30px;
   line-height: 30px;
   width: 30px;
   text-align: center;
-  border-radius: 3px
+  border-radius: 3px;
+  margin-top: 8px;
+  margin-right: 0px;
 }
 
 .v-sidebar-menu .vsm--link:after {
@@ -149,7 +151,8 @@
   right: 10px;
   top: 50%;
   -webkit-transform: translateY(-50%);
-  transform: translateY(-50%)
+  transform: translateY(-50%);
+  border-radius: 11px;
 }
 
 .v-sidebar-menu .vsm--badge_default {
@@ -287,7 +290,6 @@
 .v-sidebar-menu .vsm--link_level-1.vsm--link_exact-active .vsm--icon,
 .v-sidebar-menu .vsm--link_level-1.vsm--link_active .vsm--icon {
   color: #fff;
-  background-color: #1e1e21
 }
 
 /*.v-sidebar-menu .vsm--link_hover,
@@ -311,21 +313,13 @@
   background-color: #3397E1
 }
 
-.v-sidebar-menu .vsm--dropdown .vsm--list {
-  background-color: #c1c1c1
-}
-
 .v-sidebar-menu .vsm--dropdown .vsm--link {
-  color: #222222
+  color: #fff
 }
 
-/*.v-sidebar-menu .vsm--dropdown .vsm--icon {
-  color: #222222
-}*/
-
 .vsm--link_level-2:hover .vsm--title,
 .vsm--link_level-2:hover .vsm--icon {
-  color: #3397E1
+  color: #94c0e0
 }
 
 .v-sidebar-menu .vsm--mobile-bg {