Desk, DatabaseSelector and SetupWizard

src/App.vue

@@ -1,53 +1,57 @@
 <template>
   <div id="app">
-    <div class="row no-gutters" v-if="showDesk">
-      <sidebar class="col-2" />
-      <div class="page-container col-10 bg-light">
-        <router-view />
-      </div>
-    </div>
-    <setup-wizard v-else/>
+    <desk v-if="showDesk" />
+    <database-selector v-if="showDatabaseSelector" @file="connectToDBFile" />
+    <setup-wizard v-if="showSetupWizard" />
   </div>
 </template>
 
 <script>
-import Sidebar from './components/Sidebar';
 import frappe from 'frappejs';
-import Vue from 'vue';
-import Observable from 'frappejs/utils/observable';
-import Desk from 'frappejs/ui/components/Desk';
-import sidebarConfig from './sidebarConfig';
+import Desk from './pages/Desk';
 import SetupWizard from './pages/SetupWizard/SetupWizard';
+import DatabaseSelector from './pages/DatabaseSelector';
 
 export default {
   name: 'App',
   data() {
     return {
-      showDesk: JSON.parse(localStorage.showDesk),
-      sidebarConfig
+      showDatabaseSelector: false,
+      showDesk: false,
+      showSetupWizard: false
     }
   },
   components: {
+    Desk,
     SetupWizard,
-    Sidebar
+    DatabaseSelector,
   },
-  async created() {
+  mounted() {
+    if (!localStorage.dbPath) {
+      this.showDatabaseSelector = true;
+    } else {
+      frappe.events.trigger('connect-database', localStorage.dbPath);
+    }
+
     frappe.events.on('show-setup-wizard', () => {
+      this.showSetupWizard = true;
       this.showDesk = false;
-    })
+      this.showDatabaseSelector = false;
+    });
 
     frappe.events.on('show-desk', () => {
       this.showDesk = true;
-      this.$router.push('/tree/Account');
-    });
+      this.showSetupWizard = false;
+      this.showDatabaseSelector = false;
+    })
+  },
+  methods: {
+    connectToDBFile(filePath) {
+      frappe.events.trigger('DatabaseSelector:file-selected', filePath);
+    }
   }
 }
 </script>
 <style lang="scss">
 @import "styles/index.scss";
-.page-container {
-  height: 100vh;
-  overflow: auto;
-  overflow-x: hidden;
-}
 </style>

src/main-electron.js

@@ -24,17 +24,26 @@ import Toasted from 'vue-toasted';
   frappe.registerModels(models);
   frappe.fetch = window.fetch.bind();
 
-  const electronSettings = getSettings();
-  if (!electronSettings.dbPath) {
-    localStorage.showDesk = false;
-  } else {
-    await connectToLocalDatabase();
-    localStorage.showDesk = true;
-  }
+  frappe.events.on('connect-database', async (filepath) => {
+    await connectToLocalDatabase(filepath);
+    frappe.events.trigger('show-desk');
+  });
 
-  frappe.events.on('SetupWizard:setup-complete', async ({ setupWizardValues }) => {
+  frappe.events.on('DatabaseSelector:file-selected', async (filepath) => {
+    await connectToLocalDatabase(filepath);
+
+    localStorage.dbPath = filepath;
+
+    const accountingSettings = await frappe.getSingle('AccountingSettings');
+    if (!accountingSettings.companyName) {
+      frappe.events.trigger('show-setup-wizard');
+    } else {
+      frappe.events.trigger('show-desk');
+    }
+  });
+
+  frappe.events.on('SetupWizard:setup-complete', async (setupWizardValues) => {
     const {
-      file,
       companyName,
       country,
       name,
@@ -44,11 +53,6 @@ import Toasted from 'vue-toasted';
       fiscalYearEnd
     } = setupWizardValues;
 
-    // db init
-    const dbPath = path.join(file[0].path, 'frappe-accounting.db');
-    await saveSettings({ dbPath });
-    await connectToLocalDatabase();
-
     const doc = await frappe.getSingle('AccountingSettings');
     await doc.set({
       companyName,
@@ -66,10 +70,9 @@ import Toasted from 'vue-toasted';
     frappe.events.trigger('show-desk');
   });
 
-  async function connectToLocalDatabase() {
-    const electronSettings = getSettings();
+  async function connectToLocalDatabase(filepath) {
     frappe.login('Administrator');
-    frappe.db = new SQLite({ dbPath: electronSettings.dbPath });
+    frappe.db = new SQLite({ dbPath: filepath });
     await frappe.db.connect();
     await frappe.db.migrate();
     frappe.getSingle('SystemSettings');

src/pages/DatabaseSelector.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="row">
+    <div class="col-8 mx-auto p-5">
+      <div class="row">
+        <div class="col-6">
+          <clickable-card
+            @click="newDatabase"
+            :title="_('New Database')"
+            :description="_('Create a new database file and store it in your computer.')"
+          />
+        </div>
+        <div class="col-6">
+          <clickable-card
+            @click="existingDatabase"
+            :title="_('Existing Database')"
+            :description="_('Load an existing .db file from your computer.')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ClickableCard from '../components/ClickableCard';
+const { remote } = require('electron');
+const { dialog } = remote;
+const currentWindow = remote.getCurrentWindow();
+
+export default {
+  name: 'DatabaseSelector',
+  components: {
+    ClickableCard
+  },
+  methods: {
+    newDatabase() {
+      dialog.showSaveDialog(
+        currentWindow,
+        {
+          title: 'Select folder',
+          defaultPath: 'frappe-accounting.db'
+        },
+        (filePath) => {
+          if (filePath) {
+            if (!filePath.endsWith('.db')) {
+              filePath = filePath + '.db';
+            }
+            this.$emit('file', filePath);
+          }
+        }
+      );
+    },
+    existingDatabase() {
+      dialog.showOpenDialog(
+        currentWindow,
+        {
+          title: 'Select file',
+          properties: ['openFile'],
+          filters: [{ name: 'SQLite DB File', extensions: ['db'] }]
+        },
+        (files) => {
+          if (files && files[0]) {
+            this.$emit('file', files[0]);
+          }
+        }
+      );
+    }
+  }
+};
+</script>

src/pages/Desk.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="row no-gutters">
+    <sidebar class="col-2" />
+    <div class="page-container col-10 bg-light">
+      <router-view />
+    </div>
+  </div>
+</template>
+<script>
+import Sidebar from '../components/Sidebar';
+export default {
+  name: 'Desk',
+  components: {
+    Sidebar
+  }
+}
+</script>
+<style>
+.page-container {
+  height: 100vh;
+  overflow: auto;
+  overflow-x: hidden;
+}
+</style>

src/pages/SetupWizard/SetupWizard.vue

@@ -55,7 +55,7 @@ export default {
   methods: {
     async submit() {
       try {
-        frappe.events.trigger('SetupWizard:setup-complete', { setupWizardValues: this.doc });
+        frappe.events.trigger('SetupWizard:setup-complete', this.doc);
       } catch (e) {
         console.error(e);
       }

src/pages/SetupWizard/config.js

@@ -3,14 +3,6 @@ const countryList = Object.keys(require('../../../fixtures/countryInfo.json')).s
 
 export default {
   fields: [
-    {
-      fieldname: 'file',
-      label: 'File',
-      fieldtype: 'File',
-      required: 1,
-      directory: 1
-    },
-
     {
       fieldname: 'country',
       label: 'Country',
@@ -66,13 +58,6 @@ export default {
   layout: {
     paginated: true,
     sections: [
-      process.env.ELECTRON === 'true' ? {
-        title: 'Select File location',
-        columns: [
-          { fields: ['file'] }
-        ]
-      } : null,
-
       {
         title: 'Select Country',
         columns: [