Add Report page and fix form save

src/components/ClickableCard.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="card" @click="$emit('click')">
+    <div class="card-body">
+      <h5 class="card-title">{{ title }}</h5>
+      <p class="card-text">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['title', 'description']
+}
+</script>
+<style scoped>
+.card {
+  cursor: pointer;
+}
+</style>

src/components/Sidebar.vue

@@ -1,10 +1,18 @@
 <template>
-  <div class="page-sidebar bg-dark p-2 text-light">
+  <div class="page-sidebar bg-dark p-2 text-light d-flex flex-column justify-content-between">
-    <div class="company-name px-3 py-2 my-2">
+    <div>
-      <h6 class="m-0">{{ companyName }}</h6>
+      <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>
-    <div :class="['sidebar-item px-3 py-2 ', isCurrentRoute(item.route) ? 'active' : '']" @click="routeTo(item.route)" v-for="item in items" :key="item.label">
+    <div class="sidebar-item px-3 py-2 d-flex align-items-center"
-      {{ item.label }}
+      v-if="dbFileName" @click="goToDatabaseSelector"
+    >
+      <feather-icon class="mr-2" name="settings"></feather-icon>
+      <span>{{ dbFileName }}</span>
     </div>
   </div>
 </template>
@@ -13,6 +21,7 @@ export default {
   data() {
     return {
       companyName: '',
+      dbFileName: '',
       items: [
         {
           label: 'Invoices',
@@ -28,7 +37,7 @@ export default {
         },
         {
           label: 'Reports',
-          route: '/reports'
+          route: '/reportList'
         },
         {
           label: 'Settings',
@@ -40,6 +49,10 @@ export default {
   async mounted() {
     const accountingSettings = await frappe.getDoc('AccountingSettings');
     this.companyName = accountingSettings.companyName;
+    if (localStorage.dbPath) {
+      const parts = localStorage.dbPath.split('/');
+      this.dbFileName = parts[parts.length - 1];
+    }
   },
   methods: {
     isCurrentRoute(route) {
@@ -47,6 +60,10 @@ export default {
     },
     routeTo(route) {
       this.$router.push(route);
+    },
+    goToDatabaseSelector() {
+      localStorage.dbPath = '';
+      window.location.reload();
     }
   }
 }

src/pages/FormView/FormView.vue

@@ -36,6 +36,13 @@ export default {
     FormActions,
     FormLayout
   },
+  watch: {
+    name(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.loadDoc();
+      }
+    }
+  },
   data() {
     return {
       doc: null,
@@ -59,6 +66,8 @@ export default {
     async loadDoc() {
       if (!this.name) return;
       try {
+        // need to de-reference to let vue know that doc is changed
+        this.doc = null;
         this.doc = await frappe.getDoc(this.doctype, this.name);
 
         if (this.doc._notInserted && this.meta.fields.map(df => df.fieldname).includes('name')) {

src/pages/Report.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <page-header title="Reports" />
+    <div class="row">
+      <div class="col-8 mx-auto">
+        <clickable-card
+          class="mt-2"
+          title="General Ledger"
+          description="List of all ledger entries booked against all accounts"
+          @click="routeTo('general-ledger', { 'referenceType': 'Invoice' })"
+        />
+        <clickable-card
+          class="mt-2"
+          title="Trial Balance"
+          description="Balance of accounts"
+          @click="routeTo('trial-balance')"
+        />
+        <clickable-card
+          class="mt-2"
+          title="Sales Register"
+          description="Sales"
+          @click="routeTo('sales-register')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import PageHeader from '../components/PageHeader';
+import ClickableCard from '../components/ClickableCard';
+
+export default {
+  name: 'Report',
+  components: {
+    PageHeader,
+    ClickableCard
+  },
+  methods: {
+    routeTo(route, filters) {
+      const query = new URLSearchParams(filters);
+      this.$router.push(`/report/${route}?${query}`);
+    }
+  }
+}
+</script>

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 
 import ListView from '../pages/ListView';
-import FormView from '../pages/FormView';
+import FormView from '../pages/FormView/FormView';
 import PrintView from '../pages/PrintView';
 
 import Report from 'frappejs/ui/pages/Report';
@@ -12,6 +12,8 @@ import DataImport from '../pages/DataImport';
 
 import Settings from '../pages/Settings/Settings';
 
+import ReportList from '../pages/Report';
+
 Vue.use(Router);
 
 const routes = [
@@ -55,6 +57,11 @@ const routes = [
     path: '/settings',
     name: 'Settings',
     component: Settings
+  },
+  {
+    path: '/reportList',
+    name: 'Report',
+    component: ReportList
   }
 ];