automatically save transaction draft

2026-05-18 00:34:28 +08:00 · 2024-09-22 14:41:35 +08:00
parent 49df497f35
commit 4c13b7ad02
16 changed files with 384 additions and 26 deletions
@@ -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);
@@ -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;
@@ -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();
@@ -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);
@@ -39,6 +39,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';
@@ -54,7 +55,7 @@ export default {
        };
    },
    computed: {
-        ...mapStores(useSettingsStore, useUserStore),
+        ...mapStores(useSettingsStore, useUserStore, useTransactionsStore),
        isEnableApplicationLock: {
            get: function () {
                return this.settingsStore.appSettings.applicationLock;
@@ -145,6 +146,7 @@ export default {

            this.$user.encryptToken(user.username, pinCode);
            this.settingsStore.setEnableApplicationLock(true);
+            this.transactionsStore.saveTransactionDraft();

            this.settingsStore.setEnableApplicationLockWebAuthn(false);
            this.$user.clearWebAuthnConfig();
@@ -169,6 +171,7 @@ export default {

            this.$user.decryptToken();
            this.settingsStore.setEnableApplicationLock(false);
+            this.transactionsStore.saveTransactionDraft();

            this.settingsStore.setEnableApplicationLockWebAuthn(false);
            this.$user.clearWebAuthnConfig();
@@ -70,6 +70,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';
@@ -88,7 +89,7 @@ export default {
        }
    },
    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore),
+        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useTransactionsStore, useExchangeRatesStore),
        ezBookkeepingLogoPath() {
            return assetConstants.ezBookkeepingLogoPath;
        },
@@ -134,6 +135,7 @@ export default {
                self.$hideLoading();

                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);
@@ -188,6 +190,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);
@@ -34,6 +34,15 @@

        <f7-block-title>{{ $t('Transaction Edit Page') }}</f7-block-title>
        <f7-list strong inset dividers>
+            <f7-list-item
+                :title="$t('Automatically Save Draft')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Automatically Save Draft'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                <select v-model="autoSaveTransactionDraft">
+                    <option value="disabled">{{ $t('Disabled') }}</option>
+                    <option value="enabled">{{ $t('Enabled') }}</option>
+                    <option value="confirmation">{{ $t('Show Confirmation Every Time') }}</option>
+                </select>
+            </f7-list-item>
            <f7-list-item>
                <span>{{ $t('Automatically Add Geolocation') }}</span>
                <f7-toggle :checked="isAutoGetCurrentGeoLocation" @toggle:change="isAutoGetCurrentGeoLocation = $event"></f7-toggle>
@@ -45,11 +54,12 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
+import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.js';

 export default {
    computed: {
-        ...mapStores(useSettingsStore, useOverviewStore),
+        ...mapStores(useSettingsStore, useTransactionsStore, useOverviewStore),
        allTimezoneTypesUsedForStatistics() {
            return this.$locale.getAllTimezoneTypesUsedForStatistics();
        },
@@ -86,6 +96,18 @@ export default {
                this.settingsStore.setShowTagInTransactionListPage(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;
@@ -1,5 +1,5 @@
 <template>
-    <f7-page with-subnavbar @page:afterin="onPageAfterIn">
+    <f7-page with-subnavbar @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
        <f7-navbar>
            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
            <f7-nav-title :title="$t(title)"></f7-nav-title>
@@ -473,6 +473,8 @@ export default {
        return {
            type: 'transaction',
            mode: 'add',
+            addByTemplateId: null,
+            duplicateFromId: null,
            editId: null,
            transaction: newTransaction,
            clientSessionId: '',
@@ -480,6 +482,7 @@ export default {
            loadingError: null,
            geoLocationStatus: null,
            submitting: false,
+            submitted: false,
            uploadingPicture: false,
            removingPictureId: null,
            isSupportGeoLocation: !!navigator.geolocation,
@@ -903,9 +906,11 @@ export default {
            if (query.id) {
                if (self.mode === 'edit') {
                    self.editId = query.id;
+                } else if (self.mode === 'add') {
+                    self.duplicateFromId = query.id;
                }

-                promises.push(self.transactionsStore.getTransaction({ transactionId: query.id }));
+                promises.push(self.transactionsStore.getTransaction({ transactionId: query.id, withPictures: self.mode !== 'add' }));
            }
        } else if (self.type === 'template') {
            self.transaction.name = '';
@@ -953,12 +958,22 @@ export default {

            let fromTransaction = null;

-            if (self.type === 'transaction' && query.id) {
-                fromTransaction = responses[4];
-            } else if (self.type === 'transaction' && self.transactionTemplatesStore.allTransactionTemplatesMap && self.transactionTemplatesStore.allTransactionTemplatesMap[templateConstants.allTemplateTypes.Normal]) {
-                fromTransaction = self.transactionTemplatesStore.allTransactionTemplatesMap[templateConstants.allTemplateTypes.Normal][query.templateId];
-            } else if (self.type === 'template' && query.id) {
-                fromTransaction = responses[4];
+            if (self.type === 'transaction') {
+                if (query.id) {
+                    fromTransaction = responses[4];
+                } else if (query.templateId && self.transactionTemplatesStore.allTransactionTemplatesMap && self.transactionTemplatesStore.allTransactionTemplatesMap[templateConstants.allTemplateTypes.Normal]) {
+                    fromTransaction = self.transactionTemplatesStore.allTransactionTemplatesMap[templateConstants.allTemplateTypes.Normal][query.templateId];
+
+                    if (fromTransaction) {
+                        self.addByTemplateId = fromTransaction.id;
+                    }
+                } else if ((self.settingsStore.appSettings.autoSaveTransactionDraft === 'enabled' || self.settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') && self.transactionsStore.transactionDraft) {
+                    fromTransaction = self.transactionsStore.transactionDraft;
+                }
+            } else if (self.type === 'template') {
+                if (query.id) {
+                    fromTransaction = responses[4];
+                }
            }

            setTransactionModelByTransaction(
@@ -1019,6 +1034,27 @@ export default {
                this.updateGeoLocation(false);
            }
        },
+        onPageBeforeOut() {
+            const self = this;
+
+            if (self.submitted || self.type !== 'transaction' || self.mode !== 'add' || self.addByTemplateId || self.duplicateFromId) {
+                return;
+            }
+
+            if (self.settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') {
+                if (self.transactionsStore.isTransactionDraftModified(self.transaction)) {
+                    self.$confirm('Do you want to save this transaction draft?', () => {
+                        self.transactionsStore.saveTransactionDraft(self.transaction);
+                    }, () => {
+                        self.transactionsStore.clearTransactionDraft();
+                    });
+                } else {
+                    self.transactionsStore.clearTransactionDraft();
+                }
+            } else if (self.settingsStore.appSettings.autoSaveTransactionDraft === 'enabled') {
+                self.transactionsStore.saveTransactionDraft(self.transaction);
+            }
+        },
        save() {
            const self = this;
            const router = self.f7router;
@@ -1054,6 +1090,11 @@ export default {
                            self.$toast('You have saved this transaction');
                        }

+                        if (self.mode === 'add' && !self.addByTemplateId && !self.duplicateFromId) {
+                            self.transactionsStore.clearTransactionDraft();
+                        }
+
+                        self.submitted = true;
                        router.back();
                    }).catch(error => {
                        self.submitting = false;
@@ -1111,6 +1152,7 @@ export default {
                        self.$toast('You have saved this template');
                    }

+                    self.submitted = true;
                    router.back();
                }).catch(error => {
                    self.submitting = false;