Sidebar with Groups

models/doctype/JournalEntry/JournalEntryList.js

@@ -0,0 +1,7 @@
+import { _ } from 'frappejs/utils';
+
+export default {
+  doctype: 'JournalEntry',
+  title: _('Journal Entry'),
+  columns: ['date', 'entryType']
+};

models/doctype/JournalEntryAccount/JournalEntryAccount.js

@@ -1,33 +1,34 @@
 module.exports = {
-    name: "JournalEntryAccount",
-    doctype: "DocType",
-    isSingle: 0,
-    isChild: 1,
-    keywordFields: [],
-    layout: 'ratio',
-    fields: [
-        {
-            "fieldname": "account",
-            "label": "Account",
-            "fieldtype": "Link",
-            "target": "Account",
-            "required": 1,
-            getFilters: (query, control) => {
-                return {
-                    keywords: ["like", query],
-                    isGroup: 0
-                }
-            }
-        },
-        {
-            "fieldname": "debit",
-            "label": "Debit",
-            "fieldtype": "Currency"
-        },
-        {
-            "fieldname": "credit",
-            "label": "Credit",
-            "fieldtype": "Currency"
-        }
-    ]
-}
+  name: 'JournalEntryAccount',
+  doctype: 'DocType',
+  isSingle: 0,
+  isChild: 1,
+  keywordFields: [],
+  layout: 'ratio',
+  fields: [
+    {
+      fieldname: 'account',
+      label: 'Account',
+      fieldtype: 'Link',
+      target: 'Account',
+      required: 1,
+      getFilters: (query, control) => {
+        if (query)
+          return {
+            keywords: ['like', query],
+            isGroup: 0
+          };
+      }
+    },
+    {
+      fieldname: 'debit',
+      label: 'Debit',
+      fieldtype: 'Currency'
+    },
+    {
+      fieldname: 'credit',
+      label: 'Credit',
+      fieldtype: 'Currency'
+    }
+  ]
+};

src/components/Sidebar.vue

@@ -4,12 +4,36 @@
       <div class="company-name px-3 py-2 my-2">
         <h6 class="m-0">{{ companyName }}</h6>
       </div>
-      <div
-        :class="['sidebar-item px-3 py-2 ', isCurrentRoute(item.route) ? 'active' : '']"
-        @click="routeTo(item.route)"
-        v-for="item in items"
-        :key="item.label"
-      >{{ item.label }}</div>
+      <div>
+        <!-- <transition-group name="slide-fade-group"> -->
+        <div v-for="group in groups" :key="group">
+          <div
+            :class="['sidebar-item px-3 py-2 ', activeGroup === group ? 'active' : '']"
+            @click="toggleGroup(group)"
+            style="user-select: none;"
+          >
+            {{
+            group }}
+          </div>
+          <transition name="slide-fade">
+            <div v-if="openGroup === group">
+              <div
+                v-for="item in groupItems"
+                style="user-select: none;"
+                :class="['sidebar-item px-3 py-2 ', isCurrentRoute(item.route) ? 'active' : '']"
+                @click="routeTo(item.route)"
+                :key="item.label"
+              >
+                <div class="d-flex align-items-center">
+                  <feather-icon class="mr-1" name="chevron-right" />
+                  {{ item.label }}
+                </div>
+              </div>
+            </div>
+          </transition>
+        </div>
+        <!-- </transition-group> -->
+      </div>
     </div>
     <div
       class="sidebar-item px-3 py-2 d-flex align-items-center"
@@ -22,12 +46,16 @@
   </div>
 </template>
 <script>
-const path = require('path');
+import sidebarConfig from '../sidebarConfig';
 export default {
   data() {
     return {
       companyName: '',
       dbFileName: '',
+      groups: [],
+      groupItems: [],
+      activeGroup: undefined,
+      openGroup: undefined,
       items: [
         {
           label: 'Chart of Accounts',
@@ -49,6 +77,10 @@ export default {
           label: 'Payments',
           route: '/list/Payment'
         },
+        {
+          label: 'Journal Entry',
+          route: '/list/JournalEntry'
+        },
         {
           label: 'Invoices',
           route: '/list/Invoice'
@@ -65,18 +97,26 @@ export default {
     };
   },
   async mounted() {
-    const accountingSettings = await frappe.getDoc('AccountingSettings');
-    this.companyName = accountingSettings.companyName;
-    if (localStorage.dbPath) {
-      const parts = localStorage.dbPath.split(path.sep);
-      this.dbFileName = parts[parts.length - 1];
-    }
+    this.companyName = await sidebarConfig.getTitle();
+    this.dbFileName = await sidebarConfig.getDbName();
+    this.groups = sidebarConfig.getGroups();
   },
   methods: {
     isCurrentRoute(route) {
+      if (this.activeGroup) return false;
       return this.$route.path === route;
     },
+    toggleGroup(groupTitle) {
+      this.groupItems =
+        this.activeGroup === groupTitle
+          ? []
+          : sidebarConfig.getItems(groupTitle);
+      this.activeGroup =
+        this.activeGroup === groupTitle ? undefined : groupTitle;
+      this.openGroup = this.activeGroup === groupTitle ? groupTitle : undefined;
+    },
     routeTo(route) {
+      this.activeGroup = undefined;
       this.$router.push(route);
     },
     goToDatabaseSelector() {
@@ -107,4 +147,25 @@ export default {
     background-color: $primary;
   }
 }
+.slide-fade-enter-active {
+  transition: all 0.2s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out;
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(-5px);
+  opacity: 0;
+}
+// .slide-fade-group-enter-active {
+//   transition: all 0.5s ease;
+// }
+// .slide-fade-group-leave-active {
+//   transition: all 0.5s ease-out;
+// }
+// .slide-fade-group-enter,
+// .slide-fade-group-leave-to {
+//   transform: translateY(-10px);
+// }
 </style>

src/pages/ListView/listConfig.js

@@ -3,11 +3,13 @@ import Customer from '../../../models/doctype/Party/CustomerList';
 import Item from '../../../models/doctype/Item/ItemList';
 import Payment from '../../../models/doctype/Payment/PaymentList';
 import Tax from '../../../models/doctype/Tax/TaxList';
+import JournalEntry from '../../../models/doctype/JournalEntry/JournalEntryList';
 
 export default {
   Invoice,
   Customer,
   Item,
   Payment,
-  Tax
-}
+  Tax,
+  JournalEntry
+};

src/sidebarConfig.js

@@ -1,26 +1,45 @@
 import frappe from 'frappejs';
 import { _ } from 'frappejs/utils';
+const path = require('path');
 
 export default {
-  async getTitle() {
+  getTitle: async () => {
     const accountingSettings = await frappe.getSingle('AccountingSettings');
     return accountingSettings.companyName;
   },
+  getDbName() {
+    if (localStorage.dbPath) {
+      const parts = localStorage.dbPath.split(path.sep);
+      return parts[parts.length - 1];
+    }
+  },
+  getGroups() {
+    return this.groups.map(g => g.title);
+  },
+  getItems(groupTitle) {
+    if (groupTitle)
+      return this.groups.filter(g => g.title === groupTitle)[0].items;
+    else return [];
+  },
   groups: [
     {
       title: _('Masters'),
       items: [
         {
-          label: _('Item'), route: '#/list/Item'
+          label: _('Chart Of Accounts'),
+          route: '/chartOfAccounts'
         },
         {
-          label: _('Party'), route: '#/list/Party'
+          label: _('Item'),
+          route: '/list/Item'
         },
         {
-          label: _('Tax'), route: '#/list/Tax'
+          label: _('Customer'),
+          route: '/list/Customer'
         },
         {
-          label: _('Account'), route: '#/tree/Account'
+          label: _('Tax'),
+          route: '/list/Tax'
         }
       ]
     },
@@ -28,16 +47,19 @@ export default {
       title: _('Transactions'),
       items: [
         {
-          label: _('Invoice'), route: '#/list/Invoice'
+          label: _('Invoice'),
+          route: '/list/Invoice'
         },
         {
-          label: _('Journal Entry'), route: '#/list/JournalEntry'
+          label: _('Journal Entry'),
+          route: '/list/JournalEntry'
+        },
+        {
+          label: _('Payment'),
+          route: '/list/Payment'
         }
         // {
-        //   label: _('Payment'), route: '#/list/Payment'
-        // },
-        // {
-        //   label: _('AccountingLedgerEntry'), route: '#/list/AccountingLedgerEntry'
+        //   label: _('AccountingLedgerEntry'), route: '/list/AccountingLedgerEntry'
         // },
       ]
     },
@@ -45,16 +67,20 @@ export default {
       title: _('Reports'),
       items: [
         {
-          label: _('General Ledger'), route: '#/report/general-ledger'
+          label: _('General Ledger'),
+          route: '/report/general-ledger'
         },
         {
-          label: _('Sales Register'), route: '#/report/sales-register'
+          label: _('Sales Register'),
+          route: '/report/sales-register'
         },
         {
-          label: _('Bank Reconciliation'), route: '#/report/bank-reconciliation'
+          label: _('Bank Reconciliation'),
+          route: '/report/bank-reconciliation'
         },
         {
-          label: _('Goods and Service Tax'), route: '#/report/gst-taxes'
+          label: _('Goods and Service Tax'),
+          route: '/report/gst-taxes'
         }
       ]
     },
@@ -62,7 +88,8 @@ export default {
       title: _('Tools'),
       items: [
         {
-          label: _('Data Import'), route: '#/data-import'
+          label: _('Data Import'),
+          route: '/data-import'
         }
       ]
     }