accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-11-13 00:46:28 +00:00
Code Issues Releases Activity

fix: Better logic for sidebar active state

Browse Source 
- Keep the sidebar item active even if its form is open
This commit is contained in:
Faris Ansari 2019-12-20 12:22:14 +05:30
parent 9726fe4e8a
commit c0c7a9edbb
2 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Sidebar.vue
View File

@ -13,7 +13,8 @@
<div class="mt-5"> <div class="mt-5">
<div class="mt-1 first:mt-0" v-for="group in groups" :key="group.title"> <div class="mt-1 first:mt-0" v-for="group in groups" :key="group.title">
<div <div
class="px-3 py-2 flex items-center rounded cursor-pointer hover:bg-white" class="px-3 py-2 flex items-center rounded-lg cursor-pointer hover:bg-white"
:class="isActiveGroup(group) && !group.items ? 'bg-white' : ''"
@click="onGroupClick(group)" @click="onGroupClick(group)"
> >
<component <component
@ -74,6 +75,9 @@ export default {
let currentPath = this.$router.currentRoute.fullPath; let currentPath = this.$router.currentRoute.fullPath;
this.activeGroup = this.groups.find(g => { this.activeGroup = this.groups.find(g => {
if (g.route === currentPath) {
return true;
}
if (g.items) { if (g.items) {
let activeItem = g.items.filter(i => i.route === currentPath); let activeItem = g.items.filter(i => i.route === currentPath);
if (activeItem.length) { if (activeItem.length) {
@ -88,7 +92,9 @@ export default {
methods: { methods: {
itemActiveClass(item) { itemActiveClass(item) {
let currentRoute = this.$route.path; let currentRoute = this.$route.path;
return currentRoute === item.route ? 'bg-white text-blue-500' : ''; let routeMatch = currentRoute === item.route;
let doctypeMatch = this.$route.params.doctype === item.doctype;
return routeMatch || doctypeMatch ? 'bg-white text-blue-500' : '';
}, },
isActiveGroup(group) { isActiveGroup(group) {
return this.activeGroup && group.title === this.activeGroup.title; return this.activeGroup && group.title === this.activeGroup.title;

30
src/sidebarConfig.js
View File

@ -24,23 +24,28 @@ const config = {
items: [ items: [
{ {
label: _('Invoice'), label: _('Invoice'),
route: '/list/SalesInvoice' route: '/list/SalesInvoice',
doctype: 'SalesInvoice'
}, },
{ {
label: _('Customers'), label: _('Customers'),
route: '/list/Customer' route: '/list/Customer',
doctype: 'Customer'
}, },
{ {
label: _('Items'), label: _('Items'),
route: '/list/Item' route: '/list/Item',
doctype: 'Item'
}, },
{ {
label: _('Taxes'), label: _('Taxes'),
route: '/list/Tax' route: '/list/Tax',
doctype: 'Tax'
}, },
{ {
label: _('Journal Entry'), label: _('Journal Entry'),
route: '/list/JournalEntry' route: '/list/JournalEntry',
doctype: 'JournalEntry'
} }
] ]
}, },
@ -53,23 +58,28 @@ const config = {
items: [ items: [
{ {
label: _('Bill'), label: _('Bill'),
route: '/list/PurchaseInvoice' route: '/list/PurchaseInvoice',
doctype: 'PurchaseInvoice'
}, },
{ {
label: _('Suppliers'), label: _('Suppliers'),
route: '/list/Supplier' route: '/list/Supplier',
doctype: 'Supplier'
}, },
{ {
label: _('Items'), label: _('Items'),
route: '/list/Item' route: '/list/Item',
doctype: 'Item'
}, },
{ {
label: _('Taxes'), label: _('Taxes'),
route: '/list/Tax' route: '/list/Tax',
doctype: 'Tax'
}, },
{ {
label: _('Journal Entry'), label: _('Journal Entry'),
route: '/list/JournalEntry' route: '/list/JournalEntry',
doctype: 'JournalEntry'
} }
] ]
}, },