Skip to content

Commit

Permalink
support creating transaction from template
Browse files Browse the repository at this point in the history
  • Loading branch information
mayswind committed Aug 3, 2024
1 parent 8892253 commit fcb954f
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 11 deletions.
33 changes: 29 additions & 4 deletions src/views/desktop/transactions/ListPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,18 @@
</v-btn>
<span>{{ $t('Transaction List') }}</span>
<v-btn class="ml-3" color="default" variant="outlined"
:disabled="loading || !canAddTransaction" @click="add">{{ $t('Add') }}</v-btn>
:disabled="loading || !canAddTransaction" @click="add">
{{ $t('Add') }}
<v-menu activator="parent" :open-on-hover="true" v-if="allTransactionTemplates && allTransactionTemplates.length">
<v-list>
<v-list-item :title="template.name"
:prepend-icon="icons.templates"
:key="template.id"
v-for="template in allTransactionTemplates"
@click="add(template)"></v-list-item>
</v-list>
</v-menu>
</v-btn>
<v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :loading="loading" @click="reload">
<template #loader>
Expand Down Expand Up @@ -516,11 +527,13 @@ 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 numeralConstants from '@/consts/numeral.js';
import datetimeConstants from '@/consts/datetime.js';
import accountConstants from '@/consts/account.js';
import transactionConstants from '@/consts/transaction.js';
import templateConstants from '@/consts/template.js';
import { isString, getNameByKeyValue } from '@/lib/common.js';
import logger from '@/lib/logger.js';
import {
Expand Down Expand Up @@ -562,6 +575,7 @@ import {
mdiArrowLeft,
mdiArrowRight,
mdiPound,
mdiTextBoxOutline,
mdiDotsVertical
} from '@mdi/js';
Expand Down Expand Up @@ -621,12 +635,13 @@ export default {
arrowLeft: mdiArrowLeft,
arrowRight: mdiArrowRight,
tag: mdiPound,
templates: mdiTextBoxOutline,
more: mdiDotsVertical
}
};
},
computed: {
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore),
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useTransactionTemplatesStore),
defaultCurrency() {
return getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(this.allAccounts, this.queryAllFilterAccountIds, this.userStore.currentUserDefaultCurrency);
},
Expand Down Expand Up @@ -907,6 +922,10 @@ export default {
allAvailableTagsCount() {
return this.transactionTagsStore.allAvailableTagsCount;
},
allTransactionTemplates() {
const allVisibleTemplates = this.transactionTemplatesStore.allVisibleTemplates;
return allVisibleTemplates[templateConstants.allTemplateTypes.Normal] || [];
},
recentMonthDateRanges() {
return this.$locale.getAllRecentMonthDateRanges(this.userStore, true, true);
},
Expand Down Expand Up @@ -992,6 +1011,11 @@ export default {
this.currentPage = 1;
this.reload(false);
this.transactionTemplatesStore.loadAllTemplates({
templateType: templateConstants.allTemplateTypes.Normal,
force: false
});
},
reload(force) {
const self = this;
Expand Down Expand Up @@ -1307,14 +1331,15 @@ export default {
this.$router.push(this.getFilterLinkUrl());
}
},
add() {
add(template) {
const self = this;
self.$refs.editDialog.open({
type: self.query.type,
categoryId: self.queryAllFilterCategoryIdsCount === 1 ? self.query.categoryIds : '',
accountId: self.queryAllFilterAccountIdsCount === 1 ? self.query.accountIds : '',
tagIds: self.query.tagIds || ''
tagIds: self.query.tagIds || '',
template: template
}).then(result => {
if (result && result.message) {
self.$refs.snackbar.showMessage(result.message);
Expand Down
4 changes: 4 additions & 0 deletions src/views/desktop/transactions/list/dialogs/EditDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -669,6 +669,10 @@ export default {
self.mode = 'add';
self.editId = null;
if (options.template) {
self.setTransaction(options.template, options, false, false);
}
if (self.settingsStore.appSettings.autoGetCurrentGeoLocation
&& !self.geoLocationStatus && !self.transaction.geoLocation) {
self.updateGeoLocation(false);
Expand Down
49 changes: 46 additions & 3 deletions src/views/mobile/HomePage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -184,26 +184,45 @@
<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>

<script>
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;
Expand All @@ -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;
},
Expand Down Expand Up @@ -260,6 +283,11 @@ export default {
self.$toast(error.message || error);
}
});
self.transactionTemplatesStore.loadAllTemplates({
templateType: templateConstants.allTemplateTypes.Normal,
force: false
});
}
},
methods: {
Expand Down Expand Up @@ -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);
},
Expand Down Expand Up @@ -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>
19 changes: 15 additions & 4 deletions src/views/mobile/transactions/EditPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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) {
Expand All @@ -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,
Expand Down

0 comments on commit fcb954f

Please sign in to comment.