automatically save transaction draft

src/views/desktop/UnlockPage.vue

@@ -114,6 +114,7 @@ import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
+import { useTransactionsStore } from '@/stores/transaction.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import assetConstants from '@/consts/asset.js';
@@ -129,7 +130,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore),
+        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useTransactionsStore, useExchangeRatesStore),
         ezBookkeepingLogoPath() {
             return assetConstants.ezBookkeepingLogoPath;
         },
@@ -181,6 +182,7 @@ export default {
                 self.verifyingByWebAuthn = false;
 
                 self.$user.unlockTokenByWebAuthn(id, userName, userSecret);
+                self.transactionsStore.initTransactionDraft();
                 self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
                     if (response.user) {
                         const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
@@ -230,6 +232,7 @@ export default {
 
             try {
                 self.$user.unlockTokenByPinCode(user.username, pinCode);
+                self.transactionsStore.initTransactionDraft();
                 self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
                     if (response.user) {
                         const localeDefaultSettings = self.$locale.setLanguage(response.user.language);

src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue

@@ -145,6 +145,22 @@
                 <v-form>
                     <v-card-text>
                         <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    persistent-placeholder
+                                    :label="$t('Automatically Save Draft')"
+                                    :placeholder="$t('Automatically Save Draft')"
+                                    :items="[
+                                        { value: 'disabled', displayName: $t('Disabled') },
+                                        { value: 'enabled', displayName: $t('Enabled') },
+                                        { value: 'confirmation', displayName: $t('Show Confirmation Every Time') }
+                                    ]"
+                                    v-model="autoSaveTransactionDraft"
+                                />
+                            </v-col>
+
                             <v-col cols="12" md="6">
                                 <v-select
                                     item-title="displayName"
@@ -275,6 +291,18 @@ export default {
                 this.settingsStore.setItemsCountInTransactionListPage(value);
             }
         },
+        autoSaveTransactionDraft: {
+            get: function () {
+                return this.settingsStore.appSettings.autoSaveTransactionDraft;
+            },
+            set: function (value) {
+                this.settingsStore.setAutoSaveTransactionDraft(value);
+
+                if (value === 'disabled') {
+                    this.transactionsStore.clearTransactionDraft();
+                }
+            }
+        },
         isAutoGetCurrentGeoLocation: {
             get: function () {
                 return this.settingsStore.appSettings.autoGetCurrentGeoLocation;

src/views/desktop/app/settings/tabs/AppLockSettingTab.vue

@@ -64,6 +64,7 @@
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
+import { useTransactionsStore } from '@/stores/transaction.js';
 
 import logger from '@/lib/logger.js';
 import webauthn from '@/lib/webauthn.js';
@@ -77,7 +78,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useSettingsStore, useUserStore),
+        ...mapStores(useSettingsStore, useUserStore, useTransactionsStore),
         isEnableApplicationLock: {
             get: function () {
                 return this.settingsStore.appSettings.applicationLock;
@@ -168,6 +169,7 @@ export default {
 
             this.$user.encryptToken(user.username, this.pinCode);
             this.settingsStore.setEnableApplicationLock(true);
+            this.transactionsStore.saveTransactionDraft();
 
             this.settingsStore.setEnableApplicationLockWebAuthn(false);
             this.$user.clearWebAuthnConfig();
@@ -190,6 +192,7 @@ export default {
 
             this.$user.decryptToken();
             this.settingsStore.setEnableApplicationLock(false);
+            this.transactionsStore.saveTransactionDraft();
 
             this.settingsStore.setEnableApplicationLockWebAuthn(false);
             this.$user.clearWebAuthnConfig();

src/views/desktop/transactions/list/dialogs/EditDialog.vue

@@ -447,6 +447,8 @@ export default {
             showState: false,
             mode: 'add',
             activeTab: 'basicInfo',
+            addByTemplateId: null,
+            duplicateFromId: null,
             editId: null,
             originalTransactionEditable: false,
             clientSessionId: '',
@@ -758,6 +760,8 @@ export default {
     methods: {
         open(options) {
             const self = this;
+            self.addByTemplateId = null;
+            self.duplicateFromId = null;
             self.showState = true;
             self.activeTab = 'basicInfo';
             self.loading = true;
@@ -790,6 +794,9 @@ export default {
 
                     if (options.template) {
                         self.setTransaction(options.template, options, false, false);
+                        self.addByTemplateId = options.template.id;
+                    } else if ((self.settingsStore.appSettings.autoSaveTransactionDraft === 'enabled' || self.settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') && self.transactionsStore.transactionDraft) {
+                        self.setTransaction(self.transactionsStore.transactionDraft, options, false, false);
                     }
 
                     if (self.settingsStore.appSettings.autoGetCurrentGeoLocation
@@ -931,6 +938,10 @@ export default {
                             }
                         }
 
+                        if (self.mode === 'add' && !self.addByTemplateId && !self.duplicateFromId) {
+                            self.transactionsStore.clearTransactionDraft();
+                        }
+
                         self.showState = false;
                     }).catch(error => {
                         self.submitting = false;
@@ -1004,6 +1015,7 @@ export default {
             }
 
             this.editId = null;
+            this.duplicateFromId = this.transaction.id;
             this.transaction.id = null;
             this.transaction.time = getCurrentUnixTime();
             this.transaction.timeZone = this.settingsStore.appSettings.timeZone;
@@ -1049,11 +1061,40 @@ export default {
             });
         },
         cancel() {
-            if (this.reject) {
-                this.reject();
+            const self = this;
+
+            const doClose = function () {
+                if (self.reject) {
+                    self.reject();
+                }
+
+                self.showState = false;
+            };
+
+            if (self.type !== 'transaction' || self.mode !== 'add' || self.addByTemplateId || self.duplicateFromId) {
+                doClose();
+                return;
             }
 
-            this.showState = false;
+            if (self.settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') {
+                if (self.transactionsStore.isTransactionDraftModified(self.transaction)) {
+                    self.$refs.confirmDialog.open('Do you want to save this transaction draft?').then(() => {
+                        self.transactionsStore.saveTransactionDraft(self.transaction);
+                        doClose();
+                    }).catch(() => {
+                        self.transactionsStore.clearTransactionDraft();
+                        doClose();
+                    });
+                } else {
+                    self.transactionsStore.clearTransactionDraft();
+                    doClose();
+                }
+            } else if (self.settingsStore.appSettings.autoSaveTransactionDraft === 'enabled') {
+                self.transactionsStore.saveTransactionDraft(self.transaction);
+                doClose();
+            } else {
+                doClose();
+            }
         },
         showDateTimeError(error) {
             this.$refs.snackbar.showError(error);