feat: Sytem tab in settings

- Extract New / Load Database functionality in functions

src-electron/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron');
+const { app, BrowserWindow, ipcMain } = require('electron');
 const setupMenu = require('./menu');
 
 let mainWindow;
@@ -27,7 +27,7 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     vibrancy: 'sidebar',
     transparent: true,
-    backgroundColor: "#80FFFFFF",
+    backgroundColor: '#80FFFFFF',
     width: 1200,
     height: 907,
     frame: false,
@@ -48,6 +48,10 @@ function createWindow() {
   setupMenu();
 }
 
+ipcMain.on('reload-main-window', () => {
+  mainWindow.reload();
+});
+
 app.on('ready', createWindow);
 
 app.on('window-all-closed', () => {

src/main-electron.js

@@ -6,6 +6,7 @@ import common from 'frappejs/common';
 import coreModels from 'frappejs/models';
 import models from '../models';
 import postStart from '../server/postStart';
+import { ipcRenderer } from 'electron';
 import { getSettings, saveSettings } from '../electron/settings';
 
 // vue imports
@@ -57,6 +58,10 @@ import Toasted from 'vue-toasted';
     }
   });
 
+  frappe.events.on('reload-main-window', () => {
+    ipcRenderer.send('reload-main-window');
+  });
+
   frappe.events.on('SetupWizard:setup-complete', async setupWizardValues => {
     const countryList = require('../fixtures/countryInfo.json');
     const {

src/pages/DatabaseSelector.vue

@@ -53,9 +53,7 @@
 <script>
 import { _ } from 'frappejs';
 import AddIcon from '@/components/Icons/Add';
-const { remote } = require('electron');
-const { dialog } = remote;
-const currentWindow = remote.getCurrentWindow();
+import { createNewDatabase, loadExistingDatabase } from '@/utils';
 
 export default {
   name: 'DatabaseSelector',
@@ -63,37 +61,13 @@ export default {
     AddIcon
   },
   methods: {
-    newDatabase() {
-      dialog.showSaveDialog(
-        currentWindow,
-        {
-          title: _('Select folder'),
-          defaultPath: 'frappe-accounting.db'
-        },
-        filePath => {
-          if (filePath) {
-            if (!filePath.endsWith('.db')) {
-              filePath = filePath + '.db';
-            }
+    async newDatabase() {
+      let filePath = await createNewDatabase();
       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]);
-          }
-        }
-      );
+    async existingDatabase() {
+      let filePath = await loadExistingDatabase();
+      this.$emit('file', filePath);
     }
   }
 };

src/pages/Settings.vue

@@ -26,13 +26,13 @@
 import { _ } from 'frappejs/utils';
 import WindowControls from '@/components/WindowControls';
 import TabGeneral from './TabGeneral.vue';
+import TabSystem from './TabSystem.vue';
 import Row from '@/components/Row';
 
 export default {
   name: 'Settings',
   components: {
     WindowControls,
-    TabGeneral,
     Row
   },
   data() {
@@ -71,7 +71,8 @@ export default {
           label: _('System'),
           icon: `<svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path d="M20.872 13.453c.082-.48.125-.966.128-1.453a9.033 9.033 0 00-.128-1.453l2.1-2.029a1 1 0 00.171-1.218l-1.5-2.6a1.009 1.009 0 00-1.143-.461l-2.8.8a9.017 9.017 0 00-2.527-1.451L14.47.758A1 1 0 0013.5 0h-3a1 1 0 00-.97.758l-.707 2.83A9.017 9.017 0 006.3 5.039l-2.8-.8a1.01 1.01 0 00-1.143.461l-1.5 2.6a1 1 0 00.171 1.219l2.1 2.029c-.082.48-.125.965-.128 1.452.003.487.046.973.128 1.453l-2.1 2.029A1 1 0 00.857 16.7l1.5 2.6a1 1 0 001.142.462l2.8-.8a9.017 9.017 0 002.527 1.451l.707 2.83A1 1 0 0010.5 24h3a1 1 0 00.97-.758l.707-2.83a9.017 9.017 0 002.523-1.451l2.8.8a1 1 0 001.142-.462l1.5-2.6a1 1 0 00-.171-1.219l-2.099-2.027zM12 16a4 4 0 110-8 4 4 0 010 8z" fill="#415668" fill-rule="evenodd"/>
-          </svg>`
+          </svg>`,
+          component: TabSystem
         },
         {
           label: _('Privacy'),

src/pages/TabSystem.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="flex items-center">
+      <svg class="h-12" viewBox="0 0 40 48" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M37.73 0c1.097 0 1.986.89 1.986 1.986v43.688c0 1.096-.889 1.986-1.986 1.986H1.986A1.986 1.986 0 010 45.674V1.986C0 .889.89 0 1.986 0zm-7.943 27.404c-2.283 1.688-6.156 2.383-9.929 2.383-3.773 0-7.645-.695-9.929-2.383v4.369l.006.156c.196 2.575 5.25 3.816 9.923 3.816 4.766 0 9.93-1.291 9.93-3.972zm0-7.943c-2.283 1.688-6.156 2.383-9.929 2.383-3.773 0-7.645-.695-9.929-2.383v4.369l.006.156c.196 2.575 5.25 3.815 9.923 3.815 4.766 0 9.93-1.29 9.93-3.971zm-9.929-7.546c-4.766 0-9.929 1.29-9.929 3.972 0 2.68 5.163 3.971 9.93 3.971 4.765 0 9.928-1.29 9.928-3.971s-5.163-3.972-9.929-3.972z"
+          fill="#2490EF"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <div class="ml-4 flex flex-col">
+        <span class="font-semibold">{{ companyName }}</span>
+        <span class="text-xs text-gray-600">{{ dbPath }}</span>
+      </div>
+    </div>
+    <div class="mt-4 text-sm">
+      <Button @click="newDatabase">{{ _('Create New') }}</Button>
+      <Button @click="existingDatabase">{{ _('Browse File') }}</Button>
+    </div>
+    <TwoColumnForm class="mt-6" v-if="doc" :doc="doc" :fields="fields" :autosave="true" />
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import TwoColumnForm from '@/components/TwoColumnForm';
+import Button from '@/components/Button';
+import { createNewDatabase, loadExistingDatabase } from '@/utils';
+import { remote } from 'electron';
+
+export default {
+  name: 'TabSystem',
+  components: {
+    TwoColumnForm,
+    Button
+  },
+  data() {
+    return {
+      companyName: null,
+      doc: null
+    };
+  },
+  async mounted() {
+    this.doc = await frappe.getSingle('SystemSettings');
+    this.companyName = (await frappe.getSingle(
+      'AccountingSettings'
+    )).companyName;
+  },
+  methods: {
+    async newDatabase() {
+      let filePath = await createNewDatabase();
+      localStorage.dbPath = filePath;
+      frappe.events.trigger('reload-main-window');
+      remote.getCurrentWindow().close();
+    },
+    async existingDatabase() {
+      let filePath = await loadExistingDatabase();
+      localStorage.dbPath = filePath;
+      frappe.events.trigger('reload-main-window');
+      remote.getCurrentWindow().close();
+    }
+  },
+  computed: {
+    fields() {
+      let meta = frappe.getMeta('SystemSettings');
+      return meta.getQuickEditFields();
+    },
+    dbPath() {
+      return localStorage.dbPath;
+    }
+  }
+};
+</script>
+

src/router.js

@@ -110,4 +110,8 @@ const routes = [
 
 let router = new Router({ routes });
 
+if (process.env.NODE_ENV === 'development') {
+  window.router = router
+}
+
 export default router;

src/utils.js

@@ -0,0 +1,40 @@
+import { _ } from 'frappejs';
+import { remote } from 'electron';
+
+export function createNewDatabase() {
+  return new Promise(resolve => {
+    remote.dialog.showSaveDialog(
+      remote.getCurrentWindow(),
+      {
+        title: _('Select folder'),
+        defaultPath: 'frappe-accounting.db'
+      },
+      filePath => {
+        if (filePath) {
+          if (!filePath.endsWith('.db')) {
+            filePath = filePath + '.db';
+          }
+          resolve(filePath);
+        }
+      }
+    );
+  });
+}
+
+export function loadExistingDatabase() {
+  return new Promise(resolve => {
+    remote.dialog.showOpenDialog(
+      remote.getCurrentWindow(),
+      {
+        title: _('Select file'),
+        properties: ['openFile'],
+        filters: [{ name: 'SQLite DB File', extensions: ['db'] }]
+      },
+      files => {
+        if (files && files[0]) {
+          resolve(files[0]);
+        }
+      }
+    );
+  });
+}