PMCORE-3224: Enable custom sidebar
This commit is contained in:
Rodrigo Quelca
@@ -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);
|
||||
},
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
},
|
||||
|
||||
@@ -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'],
|
||||
"badge" => [
|
||||
"text" => "0",
|
||||
"class" => "badge-custom"
|
||||
]
|
||||
"icon" => $value['iconList']
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user