Add Settings Page with autosave

models/doctype/AccountingSettings/AccountingSettings.js

@@ -14,7 +14,8 @@ module.exports = {
             label: "Company Name",
             fieldname: "companyName",
             fieldtype: "Data",
-            required: 1
+            required: 1,
+            disabled: 1
         },
 
         {

package.json

@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "frappejs": "github:frappe/frappejs",
-    "popper.js": "^1.14.4"
+    "popper.js": "^1.14.4",
+    "vue-toasted": "^1.1.25"
   }
 }

src/App.vue

@@ -45,4 +45,9 @@ export default {
 </script>
 <style lang="scss">
 @import "styles/index.scss";
+.page-container {
+  height: 100vh;
+  overflow: auto;
+  overflow-x: hidden;
+}
 </style>

src/main-electron.js

@@ -13,6 +13,7 @@ import Vue from 'vue';
 import App from './App';
 import router from './router';
 import frappeVue from 'frappejs/ui/plugins/frappeVue';
+import Toasted from 'vue-toasted';
 
 (async () => {
   frappe.isServer = true;
@@ -79,6 +80,10 @@ import frappeVue from 'frappejs/ui/plugins/frappeVue';
 
   Vue.config.productionTip = false;
   Vue.use(frappeVue);
+  Vue.use(Toasted, {
+    position: 'bottom-right',
+    duration : 3000
+ });
 
   /* eslint-disable no-new */
   new Vue({

src/pages/Settings/SettingSection.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="doc">
+    <h4 class="mb-3">{{ doctype }}</h4>
+    <form-layout
+      :doc="doc"
+      :fields="fields"
+      @updateDoc="saveDoc"
+    />
+  </div>
+</template>
+<script>
+import FormLayout from 'frappejs/ui/components/Form/FormLayout';
+
+export default {
+  name: 'SettingSection',
+  props: ['doctype'],
+  components: {
+    FormLayout
+  },
+  data() {
+    return {
+      doc: null,
+      fields: []
+    }
+  },
+  async mounted() {
+    this.doc = await frappe.getDoc(this.doctype);
+    this.fields = frappe.getMeta(this.doctype).fields;
+  },
+  methods: {
+    saveDoc() {
+      this.doc.update();
+      this.$toasted.show('Saved');
+    }
+  }
+}
+</script>

src/pages/Settings/Settings.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <page-header title="Settings" />
+    <div class="row">
+      <div class="col-8 bg-white mt-4 mx-auto border p-5">
+        <setting-section doctype="AccountingSettings" />
+        <hr class="mt-4">
+        <setting-section doctype="SystemSettings" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import PageHeader from '@/components/PageHeader';
+import SettingSection from './SettingSection';
+
+export default {
+  name: 'Settings',
+  components: {
+    PageHeader,
+    SettingSection
+  }
+}
+</script>

src/router/index.js

@@ -10,6 +10,8 @@ import reportViewConfig from '../../reports/view';
 
 import DataImport from '../pages/DataImport';
 
+import Settings from '../pages/Settings/Settings';
+
 Vue.use(Router);
 
 const routes = [
@@ -48,6 +50,11 @@ const routes = [
     path: '/data-import',
     name: 'Data Import',
     component: DataImport
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: Settings
   }
 ];