PMCORE-3224: Enable custom sidebar

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

@@ -6,7 +6,7 @@
             :class="item.class"
             v-bind="item.attributes"
         >
-            {{ item.title }} <b-icon icon="pie-chart-fill"></b-icon>
+            {{ item.title }} <b-icon :icon="item.icon || ''" @click="item.onClick(item) || function(){}"></b-icon>
         </div>
         <div
             v-else-if="!isItemHidden"
@@ -50,7 +50,6 @@
                             isMobileItem
                     "
                 >
-                    <sidebar-menu-badge v-if="item.badge" :badge="item.badge" />
                     <div
                         v-if="itemHasChild"
                         class="vsm--arrow"
@@ -257,7 +256,15 @@ export default {
             return !!(this.item.child && this.item.child.length > 0);
         },
         isItemHidden() {
-            return false;
+            if (this.isCollapsed) {
+                if (this.item.hidden && this.item.hiddenOnCollapse === undefined) {
+                    return true
+                } else {
+                    return this.item.hiddenOnCollapse === true
+                }
+            } else {
+            return this.item.hidden === true
+            }
         },
     },
     watch: {
@@ -374,7 +381,6 @@ export default {
          */
         initState() {
             this.initActiveState();
-            this.initShowState();
         },
         /**
          * Initalize the active state of the menu item
@@ -427,6 +433,7 @@ export default {
          * @param {object} event
          */
         mouseOverEvent(event) {
+            console.log("over");
             if (this.item.disabled) return;
             event.stopPropagation();
             this.itemHover = true;
@@ -439,6 +446,7 @@ export default {
          * @param {object} event
          */
         mouseOutEvent(event) {
+
             event.stopPropagation();
             this.itemHover = false;
         },
@@ -454,6 +462,7 @@ export default {
          * @param {object} el
          */
         expandAfterEnter(el) {
+            console.log("ebnter");
             el.style.height = "auto";
         },
         /**
@@ -473,16 +482,18 @@ export default {
          * @param {object} itemEl
          */
         emitMobileItem(event, itemEl) {
+            debugger;
             if (this.hover) return;
             if (!this.isCollapsed || !this.isFirstLevel || this.isMobileItem)
                 return;
             this.$emit("unset-mobile-item", true);
             setTimeout(() => {
-                if (this.mobileItem !== this.item) {
+                
-                    this.$emit("set-mobile-item", { item: this.item, itemEl });
+                if (this.$parent.mobileItem !== this.item) {
+                    this.$parent.$emit("set-mobile-item", { item: this.item, itemEl });
                 }
                 if (event.type === "click" && !this.itemHasChild) {
-                    this.$emit("unset-mobile-item", false);
+                    this.$parent.$emit("unset-mobile-item", false);
                 }
             }, 0);
         },

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

@@ -1,6 +1,6 @@
 <template>
     <span
-        :id="data.id"
+        :id="`label-${data.id}`"
         @mouseover="hoverHandler"
         v-b-tooltip.hover
         :title="labelTooltip"
@@ -8,7 +8,7 @@
     >
         {{ data.title }}
     <b-tooltip
-        :target="data.id"
+        :target="`label-${data.id}`"
         triggers="hoverHandler"
         :show.sync="show"
     >
@@ -39,6 +39,9 @@ export default {
             }
         }
     },
+    mounted () {
+        console.log(this.data);
+    },
     methods: {
         /**
          * Delay the hover event

resources/assets/js/home/Home.vue

@@ -40,6 +40,7 @@
 </template>
 <script>
 import CustomSidebar from "./../components/menu/CustomSidebar";
+import CustomSidebarMenuItem from "./../components/menu/CustomSidebarMenuItem";
 import MyCases from "./MyCases/MyCases.vue";
 import MyDocuments from "./MyDocuments";
 import Todo from "./Inbox/Todo.vue";
@@ -246,6 +247,37 @@ export default {
                 } else if (newData[i].href) {
                     newData[i].id  = "LegacyFrame";
                 }
+                // Tasks group need pie chart icon
+                if (data[i].header && data[i].id === "FOLDERS") {
+                    data[i] = {
+                        component: CustomSidebarMenuItem,
+                        props: {
+                            isCollapsed: this.collapsed? true: false,
+                            item: {
+                                header: data[i].header,
+                                title: data[i].title,
+                                hiddenOnCollapse: data[i].hiddenOnCollapse,
+                                icon: 'pie-chart-fill',
+                                onClick: function (item) {
+                                    console.log("onclick");
+                                }
+                            }
+                        }
+                    }
+                }
+                if (data[i].id === "todo" || data[i].id === "draft" 
+                || data[i].id === "paused" || data[i].id === "unassigned")  {
+                    data[i]["child"] = data[i].customCasesList;
+                    data[i]["sortable"] = data[i].customCasesList.length > 1;
+                    data[i]["sortIcon"] = "gear-fill";
+                    data[i] = {
+                        component: CustomSidebarMenuItem,   
+                        props: {
+                            isCollapsed: this.collapsed? true: false,
+                            item: data[i]
+                        }
+                    };
+                }
             }
             return newData;
         },

workflow/engine/src/ProcessMaker/Services/Api/Home.php

@@ -574,6 +574,8 @@ class Home extends Api
                 $option->header = true;
                 $option->title = $menuInstance->Labels[$i];
                 $option->hiddenOnCollapse = true;
+                $option->id = $menuInstance->Id[$i];
+
             } else {
                 $option->href = $menuInstance->Options[$i];
                 $option->id = $menuInstance->Id[$i];
@@ -581,12 +583,6 @@ class Home extends Api
                 $option->icon = $menuInstance->Icons[$i];
             }
 
-            // Add additional attributes for some options
-            if (in_array($menuInstance->Id[$i], $optionsWithCounter)) {
-                $option->badge = new stdClass();
-                $option->badge->text = '0';
-                $option->badge->class = 'badge-custom';
-            }
             if ($menuInstance->Id[$i] === 'CASES_SEARCH') {
                 // Get advanced search filters for the current user
                 $filters = Filter::getByUser($this->getUserId());
@@ -626,11 +622,7 @@ class Home extends Api
                         "id" => $value['id'],
                         "title" => $value['name'],
                         "description" => $value['description'],
-                        "icon" => $value['iconList'],
+                        "icon" => $value['iconList']
-                        "badge" => [
-                            "text" => "0",
-                            "class" => "badge-custom"
-                        ]
                     ];
                 }
             }