Add provisions for settings sync

src/components/TwoColumnForm.vue

@@ -105,6 +105,10 @@ let TwoColumnForm = {
       type: Array,
       default: () => [1, 1],
     },
+    emitChange: {
+      type: Boolean,
+      default: false,
+    },
     noBorder: Boolean,
     focusFirstInput: Boolean,
   },
@@ -167,6 +171,10 @@ let TwoColumnForm = {
         return;
       }
 
+      if (this.emitChange && !df.inline) {
+        this.$emit('change', df, value, oldValue);
+      }
+
       // handle rename
       if (this.autosave && df.fieldname === 'name' && !this.doc.isNew()) {
         return this.doc.rename(value);
@@ -197,27 +205,36 @@ let TwoColumnForm = {
       handleErrorWithDialog(e, this.doc);
     },
     async activateInlineEditing(df) {
-      if (df.inline) {
-        this.inlineEditField = df;
-        if (!this.doc[df.fieldname]) {
-          this.inlineEditDoc = await frappe.getNewDoc(df.target);
-          this.inlineEditDoc.once('afterInsert', () => {
-            this.onChange(df, this.inlineEditDoc.name);
-          });
-        } else {
-          this.inlineEditDoc = this.doc.getLink(df.fieldname);
-        }
-        this.inlineEditDisplayField =
-          this.doc.meta.inlineEditDisplayField || 'name';
-        this.inlineEditFields = frappe.getMeta(df.target).getQuickEditFields();
+      if (!df.inline) {
+        return;
+      }
+
+      this.inlineEditField = df;
+      if (!this.doc[df.fieldname]) {
+        this.inlineEditDoc = await frappe.getNewDoc(df.target);
+        this.inlineEditDoc.once('afterInsert', () => {
+          this.onChange(df, this.inlineEditDoc.name);
+        });
+      } else {
+        this.inlineEditDoc = this.doc.getLink(df.fieldname);
       }
+
+      this.inlineEditDisplayField =
+        this.doc.meta.inlineEditDisplayField || 'name';
+      this.inlineEditFields = frappe.getMeta(df.target).getQuickEditFields();
     },
     async saveInlineEditDoc() {
-      if (this.inlineEditDoc) {
-        await this.$refs.inlineEditForm[0].insertOrUpdate();
-        await this.doc.loadLinks();
-        this.inlineEditField = null;
+      if (!this.inlineEditDoc) {
+        return;
       }
+      await this.$refs.inlineEditForm[0].insertOrUpdate();
+      await this.doc.loadLinks();
+
+      if (this.emitChange && df.inline) {
+        this.$emit('change', df.inlineEditField);
+      }
+
+      this.inlineEditField = null;
     },
   },
   computed: {

src/pages/Settings/Settings.vue

@@ -40,14 +40,15 @@
           </Row>
         </div>
         <div class="flex-1 p-6 overflow-y-auto">
-          <component :is="activeTabComponent" />
+          <component :is="activeTabComponent" @change="handleChange" />
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import { _ } from 'frappejs/utils';
+import frappe from 'frappejs';
 import WindowControls from '@/components/WindowControls';
 import TabGeneral from './TabGeneral.vue';
 import TabSystem from './TabSystem.vue';
@@ -57,6 +58,8 @@ import Row from '@/components/Row';
 import Icon from '@/components/Icon';
 import PageHeader from '@/components/PageHeader';
 import StatusBadge from '@/components/StatusBadge';
+import { callInitializeMoneyMaker } from '../../utils';
+import { showToast } from '../../utils';
 
 export default {
   name: 'Settings',
@@ -71,6 +74,7 @@ export default {
     return {
       activeTab: 0,
       updated: false,
+      fieldsChanged: [],
       tabs: [
         {
           label: _('Invoice'),
@@ -93,7 +97,34 @@ export default {
   activated() {
     this.setActiveTab();
   },
+  deactivated() {
+    if (this.fieldsChanged.length === 0) {
+      return;
+    }
+    const fieldnames = this.fieldsChanged.map(({ fieldname }) => fieldname);
+
+    if (fieldnames.includes('displayPrecision')) {
+      callInitializeMoneyMaker(undefined, true);
+      const { label } =
+        this.fieldsChanged[fieldnames.indexOf('displayPrecision')];
+
+      showToast({
+        message: _(`${label} change will be visible on reload.`),
+        actionText: frappe._('Reload'),
+        action: async () => {
+          frappe.events.trigger('reload-main-window');
+        },
+      });
+    }
+  },
   methods: {
+    handleChange(df, newValue, oldValue) {
+      if (!df) {
+        return;
+      }
+
+      this.fieldsChanged.push(df);
+    },
     setActiveTab() {
       const { tab } = this.$route.query;
       const index = this.tabs.findIndex((t) => t.label === _(tab));

src/pages/Settings/TabGeneral.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
-    <TwoColumnForm v-if="doc" :doc="doc" :fields="fields" :autosave="true" />
+    <TwoColumnForm
+      v-if="doc"
+      :doc="doc"
+      :fields="fields"
+      :autosave="true"
+      :emit-change="true"
+      @change="forwardChangeEvent"
+    />
   </div>
 </template>
 
@@ -11,16 +18,16 @@ import TwoColumnForm from '@/components/TwoColumnForm';
 export default {
   name: 'TabGeneral',
   components: {
-    TwoColumnForm
+    TwoColumnForm,
   },
   data() {
     return {
-      doc: null
+      doc: null,
     };
   },
   async mounted() {
     this.doc = await frappe.getDoc('AccountingSettings', 'AccountingSettings', {
-      skipDocumentCache: true
+      skipDocumentCache: true,
     });
   },
   computed: {
@@ -36,8 +43,13 @@ export default {
         'fiscalYearStart',
         'fiscalYearEnd',
         'gstin',
-      ].map(fieldname => meta.getField(fieldname));
-    }
-  }
+      ].map((fieldname) => meta.getField(fieldname));
+    },
+  },
+  methods: {
+    forwardChangeEvent(...args) {
+      this.$emit('change', ...args);
+    },
+  },
 };
 </script>

src/pages/Settings/TabInvoice.vue

@@ -8,6 +8,7 @@
           (value) => {
             doc.set('logo', value);
             doc.update();
+            forwardChangeEvent(meta.getField('logo'));
           }
         "
       />
@@ -27,13 +28,21 @@
             (value) => {
               doc.set('displayLogo', value);
               doc.update();
+              forwardChangeEvent(meta.getField('displayLogo'));
             }
           "
           size="small"
         />
       </div>
     </div>
-    <TwoColumnForm class="mt-6" :doc="doc" :fields="fields" :autosave="true" />
+    <TwoColumnForm
+      class="mt-6"
+      :doc="doc"
+      :fields="fields"
+      :autosave="true"
+      :emit-change="true"
+      @change="forwardChangeEvent"
+    />
   </div>
 </template>
 <script>
@@ -73,14 +82,9 @@ export default {
       return frappe.getMeta('PrintSettings');
     },
     fields() {
-      return [
-        'template',
-        'color',
-        'font',
-        'email',
-        'phone',
-        'address',
-      ].map((field) => this.meta.getField(field));
+      return ['template', 'color', 'font', 'email', 'phone', 'address'].map(
+        (field) => this.meta.getField(field)
+      );
     },
   },
   methods: {
@@ -90,12 +94,18 @@ export default {
         properties: ['openFile'],
         filters: [{ name: 'Invoice Logo', extensions: ['png', 'jpg', 'svg'] }],
       };
-      const { filePaths } = await ipcRenderer.invoke(IPC_ACTIONS.GET_OPEN_FILEPATH, options);
+      const { filePaths } = await ipcRenderer.invoke(
+        IPC_ACTIONS.GET_OPEN_FILEPATH,
+        options
+      );
       if (filePaths[0] !== undefined) {
         this.doc.set('logo', `file://${files[0]}`);
         this.doc.update;
       }
     },
+    forwardChangeEvent(...args) {
+      this.$emit('change', ...args);
+    },
   },
 };
 </script>

src/pages/Settings/TabSystem.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
-    <TwoColumnForm v-if="doc" :doc="doc" :fields="fields" :autosave="true" />
+    <TwoColumnForm
+      v-if="doc"
+      :doc="doc"
+      :fields="fields"
+      :autosave="true"
+      :emit-change="true"
+      @change="forwardChangeEvent"
+    />
   </div>
 </template>
 
@@ -28,5 +35,10 @@ export default {
       return meta.getQuickEditFields();
     },
   },
+  methods: {
+    forwardChangeEvent(...args) {
+      this.$emit('change', ...args);
+    },
+  },
 };
 </script>

src/utils.js

@@ -380,13 +380,13 @@ export async function getCurrency() {
   return currency;
 }
 
-export async function callInitializeMoneyMaker(currency) {
+export async function callInitializeMoneyMaker(currency, force = false) {
   currency ??= await getCurrency();
-  if (!currency && frappe.pesa) {
+  if (!force && !currency && frappe.pesa) {
     return;
   }
 
-  if (currency && frappe.pesa().options.currency === currency) {
+  if (!force && currency && frappe.pesa().options.currency === currency) {
     return;
   }
   await frappe.initializeMoneyMaker(currency);