support creating transaction from template

2026-05-18 00:34:28 +08:00 · 2024-08-04 00:58:25 +08:00
parent 889225301c
commit fcb954ff40
4 changed files with 94 additions and 11 deletions
@@ -172,7 +172,7 @@
                <f7-icon f7="creditcard"></f7-icon>
                <span class="tabbar-label">{{ $t('Accounts') }}</span>
            </f7-link>
-            <f7-link class="link" href="/transaction/add">
+            <f7-link id="homepage-add-button" class="link" href="/transaction/add" @taphold="openTransactionTemplatePopover">
                <f7-icon f7="plus_square" class="ebk-tarbar-big-icon"></f7-icon>
            </f7-link>
            <f7-link class="link" href="/statistic/transaction">
@@ -184,6 +184,19 @@
                <span class="tabbar-label">{{ $t('Settings') }}</span>
            </f7-link>
        </f7-toolbar>
+
+        <f7-popover class="template-popover-menu" target-el="#homepage-add-button"
+                    v-model:opened="showTransactionTemplatePopover">
+            <f7-list dividers v-if="allTransactionTemplates">
+                <f7-list-item :title="template.name" :key="template.id"
+                              v-for="template in allTransactionTemplates"
+                              @click="addTransaction(template)">
+                    <template #media>
+                        <f7-icon f7="doc_plaintext"></f7-icon>
+                    </template>
+                </f7-list-item>
+            </f7-list>
+        </f7-popover>
    </f7-page>
 </template>

@@ -191,19 +204,25 @@
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
+import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.js';
 import { useOverviewStore } from '@/stores/overview.js';

 import datetimeConstants from '@/consts/datetime.js';
+import templateConstants from '@/consts/template.js';
 import { formatUnixTime } from '@/lib/datetime.js';

 export default {
+    props: [
+        'f7router'
+    ],
    data() {
        return {
-            loading: true
+            loading: true,
+            showTransactionTemplatePopover: false
        };
    },
    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useOverviewStore),
+        ...mapStores(useSettingsStore, useUserStore, useTransactionTemplatesStore, useOverviewStore),
        showAmountInHomePage: {
            get: function() {
                return this.settingsStore.appSettings.showAmountInHomePage;
@@ -215,6 +234,10 @@ export default {
        defaultCurrency() {
            return this.userStore.currentUserDefaultCurrency;
        },
+        allTransactionTemplates() {
+            const allTemplates = this.transactionTemplatesStore.allVisibleTemplates;
+            return allTemplates[templateConstants.allTemplateTypes.Normal] || [];
+        },
        allDateRanges() {
            return datetimeConstants.allDateRanges;
        },
@@ -260,6 +283,11 @@ export default {
                    self.$toast(error.message || error);
                }
            });
+
+            self.transactionTemplatesStore.loadAllTemplates({
+                templateType: templateConstants.allTemplateTypes.Normal,
+                force: false
+            });
        }
    },
    methods: {
@@ -292,6 +320,16 @@ export default {
                }
            });
        },
+        addTransaction(template) {
+            if (template && template.id) {
+                this.f7router.navigate('/transaction/add?templateId=' + template.id);
+            }
+        },
+        openTransactionTemplatePopover() {
+            if (this.allTransactionTemplates && this.allTransactionTemplates.length) {
+                this.showTransactionTemplatePopover = true;
+            }
+        },
        getDisplayCurrency(value, currencyCode) {
            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
        },
@@ -387,4 +425,9 @@ export default {
    height: var(--ebk-big-icon-button-size);
    line-height: var(--ebk-big-icon-button-size);
 }
+
+.template-popover-menu .popover-inner{
+    max-height: 400px;
+    overflow-y: auto;
+}
 </style>
@@ -355,10 +355,12 @@ import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionTagsStore } from '@/stores/transactionTag.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
+import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';

 import categoryConstants from '@/consts/category.js';
 import transactionConstants from '@/consts/transaction.js';
+import templateConstants from '@/consts/template.js';
 import logger from '@/lib/logger.js';
 import {
    getNameByKeyValue
@@ -413,7 +415,7 @@ export default {
        };
    },
    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useExchangeRatesStore),
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useTransactionTemplatesStore, useExchangeRatesStore),
        title() {
            if (this.mode === 'add') {
                return 'Add Transaction';
@@ -654,7 +656,8 @@ export default {
        const promises = [
            self.accountsStore.loadAllAccounts({ force: false }),
            self.transactionCategoriesStore.loadAllCategories({ force: false }),
-            self.transactionTagsStore.loadAllTags({ force: false })
+            self.transactionTagsStore.loadAllTags({ force: false }),
+            self.transactionTemplatesStore.loadAllTemplates({ force: false, templateType: templateConstants.allTemplateTypes.Normal })
        ];

        if (query.id) {
@@ -676,15 +679,23 @@ export default {
        }

        Promise.all(promises).then(function (responses) {
-            if (query.id && !responses[3]) {
+            if (query.id && !responses[4]) {
                self.$toast('Unable to retrieve transaction');
                self.loadingError = 'Unable to retrieve transaction';
                return;
            }

+            let fromTransaction = null;
+
+            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];
+            }
+
            setTransactionModelByTransaction(
                self.transaction,
-                query.id ? responses[3] : null,
+                fromTransaction,
                self.allCategories,
                self.allCategoriesMap,
                self.allVisibleAccounts,