Sidebar Title

- set as companyName
- open DatabaseSelector on click

src/components/DatabaseSelector.vue

@@ -0,0 +1,50 @@
+<template>
+  <form-layout
+    :fields="[docfield]"
+    :doc="doc"
+  />
+</template>
+<script>
+import frappe from 'frappejs';
+// import SQLite from 'frappejs/backends/sqlite';
+import FormLayout from 'frappejs/ui/components/Form/FormLayout';
+import Observable from 'frappejs/utils/observable';
+
+export default {
+  name: 'DatabaseSelector',
+  components: {
+    FormLayout
+  },
+  data() {
+    return {
+      docfield: {
+        fieldtype: 'File',
+        label: 'Select File',
+        fieldname: 'file',
+        filetypes: ['.db']
+      },
+      value: null,
+      invalid: false
+    }
+  },
+  created() {
+    this.doc = new Observable();
+  },
+  methods: {
+    handleChange(fileList) {
+      const value = fileList[0].name;
+      this.value = value;
+    },
+    async changeDatabase() {
+      if (frappe.db) {
+        frappe.db.close();
+      }
+
+      const dbPath = this.value;
+      frappe.db = new SQLite({ dbPath });
+      await frappe.db.connect();
+      await frappe.db.migrate();
+    }
+  }
+}
+</script>

src/sidebarConfig.js

@@ -1,6 +1,27 @@
-const { _ } = require('frappejs/utils');
+import frappe from 'frappejs';
+import { _ } from 'frappejs/utils';
+import DatabaseSelector from './components/DatabaseSelector';
 
-export default [
+export default {
+  async getTitle() {
+    const accountingSettings = await frappe.getSingle('AccountingSettings');
+    return accountingSettings.companyName;
+  },
+  onTitleClick(vm) {
+    vm.$modal.show({
+      component: DatabaseSelector,
+      modalProps: {
+        title: _('Change Database File'),
+        primaryAction: {
+          label: _('Submit'),
+          handler: (vm) => {
+            vm.changeDatabase();
+          }
+        }
+      }
+    });
+  },
+  groups: [
     {
       items: [
         {
@@ -39,4 +60,5 @@ export default [
         }
       ]
     }
-];
+  ]
+};