zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

support showing transaction tag in transaction list page

Browse Source
This commit is contained in:
MaysWind
2024-07-10 00:34:20 +08:00
parent 4b249a0ebb
commit 84a96d80b7
19 changed files with 163 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/services/transaction_tags.go
+1 -1
View File
@@ -184,7 +184,7 @@ func (s *TransactionTagService) GetAllTagIdsOfTransactions(c *core.Context, uid
}
var tagIndexes []*models.TransactionTagIndex
err := s.UserDataDB(uid).NewSession(c).Where("uid=? AND deleted=?", uid, false).In("transaction_id", transactionIds).Find(&tagIndexes)
err := s.UserDataDB(uid).NewSession(c).Where("uid=? AND deleted=?", uid, false).In("transaction_id", transactionIds).OrderBy("transaction_id asc, tag_index_id asc").Find(&tagIndexes)
allTransactionTagIds := s.GetGroupedTransactionTagIds(tagIndexes)
src/lib/settings.js
+9
View File
@@ -16,6 +16,7 @@ const defaultSettings = {
timezoneUsedForStatisticsInHomePage: timezoneConstants.defaultTimezoneTypesUsedForStatistics,
itemsCountInTransactionListPage: 15,
showTotalAmountInTransactionListPage: true,
showTagInTransactionListPage: false,
showAccountBalance: true,
statistics: {
defaultChartDataType: statisticsConstants.defaultChartDataType,
@@ -196,6 +197,14 @@ export function setShowTotalAmountInTransactionListPage(value) {
setOption('showTotalAmountInTransactionListPage', value);
}
export function isShowTagInTransactionListPage() {
return getOption('showTagInTransactionListPage');
}
export function setShowTagInTransactionListPage(value) {
setOption('showTagInTransactionListPage', value);
}
export function isShowAccountBalance() {
return getOption('showAccountBalance');
}
src/locales/en.js
+1
View File
@@ -1113,6 +1113,7 @@ export default {
'Transaction List Page': 'Transaction List Page',
'Transactions Per Page': 'Transactions Per Page',
'Show Monthly Total Amount': 'Show Monthly Total Amount',
'Show Transaction Tag': 'Show Transaction Tag',
'Transaction Edit Page': 'Transaction Edit Page',
'Automatically Add Geolocation': 'Automatically Add Geolocation',
'Enable Animation': 'Enable Animation',
src/locales/zh_Hans.js
+1
View File
@@ -1113,6 +1113,7 @@ export default {
'Transaction List Page': '交易列表页面',
'Transactions Per Page': '每页交易数',
'Show Monthly Total Amount': '显示月度总金额',
'Show Transaction Tag': '显示交易标签',
'Transaction Edit Page': '交易编辑页面',
'Automatically Add Geolocation': '自动添加地理位置',
'Enable Animation': '启用动画',
src/stores/setting.js
+5
View File
@@ -18,6 +18,7 @@ export const useSettingsStore = defineStore('settings', {
timezoneUsedForStatisticsInHomePage: settings.getTimezoneUsedForStatisticsInHomePage(),
itemsCountInTransactionListPage: settings.getItemsCountInTransactionListPage(),
showTotalAmountInTransactionListPage: settings.isShowTotalAmountInTransactionListPage(),
showTagInTransactionListPage: settings.isShowTagInTransactionListPage(),
showAccountBalance: settings.isShowAccountBalance(),
statistics: {
defaultChartDataType: settings.getStatisticsDefaultChartDataType(),
@@ -82,6 +83,10 @@ export const useSettingsStore = defineStore('settings', {
settings.setShowTotalAmountInTransactionListPage(value);
this.appSettings.showTotalAmountInTransactionListPage = value;
},
setShowTagInTransactionListPage(value) {
settings.setShowTagInTransactionListPage(value);
this.appSettings.showTagInTransactionListPage = value;
},
setShowAccountBalance(value) {
settings.setShowAccountBalance(value);
this.appSettings.showAccountBalance = value;
src/styles/mobile/font-size-default.css
+3
View File
@@ -75,6 +75,9 @@
--ebk-transaction-day-of-week-font-size: 12px;
--ebk-transaction-account-arrow-font-size: 12px;
--ebk-transaction-account-arrow-margin-top: -1px;
--ebk-transaction-tag-chip-font-size: 13px;
--ebk-transaction-tag-chip-media-size: 19px;
--ebk-transaction-tag-chip-height: 19px;
--ebk-login-page-title-font-size: 28px;
--ebk-license-popup-title-font-size: 30px;
--ebk-license-content-font-size: 14px;
src/styles/mobile/font-size-large.css
+3
View File
@@ -75,6 +75,9 @@
--ebk-transaction-day-of-week-font-size: 13px;
--ebk-transaction-account-arrow-font-size: 13px;
--ebk-transaction-account-arrow-margin-top: -2px;
--ebk-transaction-tag-chip-font-size: 13px;
--ebk-transaction-tag-chip-media-size: 20px;
--ebk-transaction-tag-chip-height: 20px;
--ebk-login-page-title-font-size: 28px;
--ebk-license-popup-title-font-size: 31px;
--ebk-license-content-font-size: 15px;
src/styles/mobile/font-size-small.css
+3
View File
@@ -75,6 +75,9 @@
--ebk-transaction-day-of-week-font-size: 12px;
--ebk-transaction-account-arrow-font-size: 12px;
--ebk-transaction-account-arrow-margin-top: -1px;
--ebk-transaction-tag-chip-font-size: 13px;
--ebk-transaction-tag-chip-media-size: 18px;
--ebk-transaction-tag-chip-height: 18px;
--ebk-login-page-title-font-size: 28px;
--ebk-license-popup-title-font-size: 30px;
--ebk-license-content-font-size: 13px;
src/styles/mobile/font-size-x-large.css
+3
View File
@@ -75,6 +75,9 @@
--ebk-transaction-day-of-week-font-size: 14px;
--ebk-transaction-account-arrow-font-size: 14px;
--ebk-transaction-account-arrow-margin-top: -2px;
--ebk-transaction-tag-chip-font-size: 14px;
--ebk-transaction-tag-chip-media-size: 22px;
--ebk-transaction-tag-chip-height: 22px;
--ebk-login-page-title-font-size: 28px;
--ebk-license-popup-title-font-size: 32px;
--ebk-license-content-font-size: 16px;
src/styles/mobile/font-size-xx-large.css
+3
View File
@@ -75,6 +75,9 @@
--ebk-transaction-day-of-week-font-size: 15px;
--ebk-transaction-account-arrow-font-size: 15px;
--ebk-transaction-account-arrow-margin-top: -3px;
--ebk-transaction-tag-chip-font-size: 15px;
--ebk-transaction-tag-chip-media-size: 22px;
--ebk-transaction-tag-chip-height: 22px;
--ebk-login-page-title-font-size: 28px;
--ebk-license-popup-title-font-size: 36px;
--ebk-license-content-font-size: 17px;
src/styles/mobile/font-size-xxx-large.css
+3
View File
@@ -75,6 +75,9 @@
--ebk-transaction-day-of-week-font-size: 17px;
--ebk-transaction-account-arrow-font-size: 17px;
--ebk-transaction-account-arrow-margin-top: -4px;
--ebk-transaction-tag-chip-font-size: 16px;
--ebk-transaction-tag-chip-media-size: 24px;
--ebk-transaction-tag-chip-height: 24px;
--ebk-login-page-title-font-size: 28px;
--ebk-license-popup-title-font-size: 38px;
--ebk-license-content-font-size: 19px;
src/styles/mobile/font-size-xxxx-large.css
+3
View File
@@ -75,6 +75,9 @@
--ebk-transaction-day-of-week-font-size: 19px;
--ebk-transaction-account-arrow-font-size: 19px;
--ebk-transaction-account-arrow-margin-top: -4px;
--ebk-transaction-tag-chip-font-size: 18px;
--ebk-transaction-tag-chip-media-size: 26px;
--ebk-transaction-tag-chip-height: 26px;
--ebk-login-page-title-font-size: 28px;
--ebk-license-popup-title-font-size: 40px;
--ebk-license-content-font-size: 21px;
src/styles/mobile/global.css
+2
View File
@@ -98,10 +98,12 @@ i.icon.la, i.icon.las, i.icon.lab {
/** custom class **/
:root {
--default-icon-color: #000;
--ebk-transaction-tag-chip-bg-color: rgba(0, 0, 0, 0.04);
}
:root.dark {
--default-icon-color: #fff;
--ebk-transaction-tag-chip-bg-color: rgba(255, 255, 255, 0.04);
}
.pin-codes-input {
src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
+19
View File
@@ -123,6 +123,17 @@
v-model="showTotalAmountInTransactionListPage"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-value="value"
persistent-placeholder
:label="$t('Show Transaction Tag')"
:placeholder="$t('Show Transaction Tag')"
:items="enableDisableOptions"
v-model="showTagInTransactionListPage"
/>
</v-col>
</v-row>
</v-card-text>
</v-form>
@@ -248,6 +259,14 @@ export default {
this.settingsStore.setShowTotalAmountInTransactionListPage(value);
}
},
showTagInTransactionListPage: {
get: function () {
return this.settingsStore.appSettings.showTagInTransactionListPage;
},
set: function (value) {
this.settingsStore.setShowTagInTransactionListPage(value);
}
},
itemsCountInTransactionListPage: {
get: function () {
return this.settingsStore.appSettings.itemsCountInTransactionListPage;
src/views/desktop/transactions/ListPage.vue
+43 -5
View File
@@ -308,13 +308,14 @@
</v-list>
</v-menu>
</th>
<th class="transaction-table-column-tags" v-if="showTagInTransactionListPage">{{ $t('Tags') }}</th>
<th class="transaction-table-column-description">{{ $t('Description') }}</th>
</tr>
</thead>
<tbody v-if="loading && (!transactions || !transactions.length || transactions.length < 1)">
<tr :key="itemIdx" v-for="itemIdx in skeletonData">
<td class="px-0" colspan="5">
<td class="px-0" :colspan="showTagInTransactionListPage ? 6 : 5">
<v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
</td>
</tr>
@@ -322,7 +323,7 @@
<tbody v-if="!loading && (!transactions || !transactions.length || transactions.length < 1)">
<tr>
<td colspan="5">{{ $t('No transaction data') }}</td>
<td :colspan="showTagInTransactionListPage ? 6 : 5">{{ $t('No transaction data') }}</td>
</tr>
</tbody>
@@ -331,7 +332,7 @@
v-for="(transaction, idx) in transactions">
<tr class="transaction-list-row-date no-hover text-sm"
v-if="idx === 0 || (idx > 0 && (transaction.date !== transactions[idx - 1].date))">
<td colspan="5" class="font-weight-bold">
<td :colspan="showTagInTransactionListPage ? 6 : 5" class="font-weight-bold">
<div class="d-flex align-center">
<span>{{ getLongDate(transaction) }}</span>
<v-chip class="ml-1" color="default" size="x-small">
@@ -380,6 +381,15 @@
<span v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">{{ transaction.destinationAccount.name }}</span>
</div>
</td>
<td class="transaction-table-column-tags" v-if="showTagInTransactionListPage">
<v-chip class="transaction-tag" size="small" :prepend-icon="icons.tag"
:text="allTransactionTags[tagId].name"
:key="tagId"
v-for="tagId in transaction.tagIds"/>
<v-chip class="transaction-tag" size="small" :prepend-icon="icons.tag"
:text="$t('None')"
v-if="!transaction.tagIds || !transaction.tagIds.length"/>
</td>
<td class="transaction-table-column-description text-truncate">
{{ transaction.comment }}
</td>
@@ -433,6 +443,7 @@ import { useSettingsStore } from '@/stores/setting.js';
import { useUserStore } from '@/stores/user.js';
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 numeralConstants from '@/consts/numeral.js';
@@ -478,6 +489,7 @@ import {
mdiPencilBoxOutline,
mdiArrowLeft,
mdiArrowRight,
mdiPound,
mdiDotsVertical
} from '@mdi/js';
@@ -532,12 +544,13 @@ export default {
modifyBalance: mdiPencilBoxOutline,
arrowLeft: mdiArrowLeft,
arrowRight: mdiArrowRight,
tag: mdiPound,
more: mdiDotsVertical
}
};
},
computed: {
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionsStore),
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore),
defaultCurrency() {
return getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(this.allAccounts, this.queryAllFilterAccountIds, this.userStore.currentUserDefaultCurrency);
},
@@ -786,11 +799,17 @@ export default {
return primaryCategories;
},
allTransactionTags() {
return this.transactionTagsStore.allTransactionTagsMap;
},
recentMonthDateRanges() {
return this.$locale.getAllRecentMonthDateRanges(this.userStore, true, true);
},
showTotalAmountInTransactionListPage() {
return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
},
showTagInTransactionListPage() {
return this.settingsStore.appSettings.showTagInTransactionListPage;
}
},
created() {
@@ -875,7 +894,8 @@ export default {
Promise.all([
self.accountsStore.loadAllAccounts({ force: false }),
self.transactionCategoriesStore.loadAllCategories({ force: false })
self.transactionCategoriesStore.loadAllCategories({ force: false }),
self.transactionTagsStore.loadAllTags({ force: false })
]).then(() => {
if (this.queryMonthlyData) {
const currentMonthMinDate = parseDateFromUnixTime(this.query.minTime);
@@ -1354,6 +1374,11 @@ export default {
white-space: nowrap;
}
.transaction-table .transaction-table-column-tags {
width: 80px;
max-width: 300px;
}
.transaction-table-column-description {
max-width: 300px;
}
@@ -1368,6 +1393,19 @@ export default {
margin-left: 0in;
}
.transaction-table .transaction-table-column-tags .v-chip.transaction-tag {
margin-right: 4px;
margin-top: 2px;
margin-bottom: 2px;
}
.transaction-table .transaction-table-column-tags .v-chip.transaction-tag > .v-chip__content {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.transaction-category-menu .item-icon,
.transaction-amount-menu .item-icon,
.transaction-account-menu .item-icon,
src/views/mobile/settings/PageSettingsPage.vue
+12
View File
@@ -26,6 +26,10 @@
<span>{{ $t('Show Monthly Total Amount') }}</span>
<f7-toggle :checked="showTotalAmountInTransactionListPage" @toggle:change="showTotalAmountInTransactionListPage = $event"></f7-toggle>
</f7-list-item>
<f7-list-item>
<span>{{ $t('Show Transaction Tag') }}</span>
<f7-toggle :checked="showTagInTransactionListPage" @toggle:change="showTagInTransactionListPage = $event"></f7-toggle>
</f7-list-item>
</f7-list>
<f7-block-title>{{ $t('Transaction Edit Page') }}</f7-block-title>
@@ -74,6 +78,14 @@ export default {
this.settingsStore.setShowTotalAmountInTransactionListPage(value);
}
},
showTagInTransactionListPage: {
get: function () {
return this.settingsStore.appSettings.showTagInTransactionListPage;
},
set: function (value) {
this.settingsStore.setShowTagInTransactionListPage(value);
}
},
isAutoGetCurrentGeoLocation: {
get: function () {
return this.settingsStore.appSettings.autoGetCurrentGeoLocation;
src/views/mobile/settings/TextSizeSettingsPage.vue
+7
View File
@@ -63,6 +63,13 @@
</div>
</div>
<div class="item-footer">
<div class="transaction-tags">
<f7-chip media-bg-color="black" class="transaction-tag" :text="$t('Tag Title')">
<template #media>
<f7-icon f7="number"></f7-icon>
</template>
</f7-chip>
</div>
<div class="transaction-footer">
<span>{{ currentShortTime }}</span>
<span>·</span>
src/views/mobile/transactions/EditPage.vue
+5
View File
@@ -876,9 +876,14 @@ export default {
}
.transaction-edit-tag {
--f7-chip-bg-color: var(--ebk-transaction-tag-chip-bg-color);
margin-right: 4px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.transaction-edit-tag > .chip-media {
opacity: 0.6;
}
</style>
src/views/mobile/transactions/ListPage.vue
+37 -2
View File
@@ -210,6 +210,16 @@
</div>
</div>
<div class="item-footer">
<div class="transaction-tags" v-if="showTagInTransactionListPage && transaction.tagIds && transaction.tagIds.length">
<f7-chip media-bg-color="black" class="transaction-tag"
:text="allTransactionTags[tagId].name"
:key="tagId"
v-for="tagId in transaction.tagIds">
<template #media>
<f7-icon f7="number"></f7-icon>
</template>
</f7-chip>
</div>
<div class="transaction-footer">
<span>{{ getDisplayTime(transaction) }}</span>
<span v-if="transaction.utcOffset !== currentTimezoneOffsetMinutes">{{ `(${getDisplayTimezone(transaction)})` }}</span>
@@ -456,6 +466,7 @@ import { useSettingsStore } from '@/stores/setting.js';
import { useUserStore } from '@/stores/user.js';
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 numeralConstants from '@/consts/numeral.js';
@@ -501,7 +512,7 @@ export default {
};
},
computed: {
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionsStore),
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore),
defaultCurrency() {
return getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(this.allAccounts, this.queryAllFilterAccountIds, this.userStore.currentUserDefaultCurrency);
},
@@ -625,6 +636,9 @@ export default {
return primaryCategories;
},
allTransactionTags() {
return this.transactionTagsStore.allTransactionTagsMap;
},
allDateRanges() {
return datetimeConstants.allDateRanges;
},
@@ -633,6 +647,9 @@ export default {
},
showTotalAmountInTransactionListPage() {
return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
},
showTagInTransactionListPage() {
return this.settingsStore.appSettings.showTagInTransactionListPage;
}
},
created() {
@@ -680,7 +697,8 @@ export default {
Promise.all([
self.accountsStore.loadAllAccounts({ force: false }),
self.transactionCategoriesStore.loadAllCategories({ force: false })
self.transactionCategoriesStore.loadAllCategories({ force: false }),
self.transactionTagsStore.loadAllTags({ force: false })
]).then(() => {
return self.transactionsStore.loadTransactions({
reload: true,
@@ -1102,6 +1120,23 @@ export default {
padding-bottom: 2px;
}
.list.transaction-info-list li.transaction-info .chip.transaction-tag {
--f7-chip-media-size: var(--ebk-transaction-tag-chip-media-size);
--f7-chip-media-font-size: var(--ebk-transaction-tag-chip-font-size);
--f7-chip-font-size: var(--ebk-transaction-tag-chip-font-size);
--f7-chip-height: var(--ebk-transaction-tag-chip-height);
--f7-chip-text-color: var(--f7-list-item-footer-text-color);
--f7-chip-bg-color: var(--ebk-transaction-tag-chip-bg-color);
margin-right: 4px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.list.transaction-info-list li.transaction-info .chip.transaction-tag > .chip-media {
opacity: 0.6;
}
.list.transaction-info-list li.transaction-info .transaction-footer {
padding-top: 4px;
}