mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 23:47:33 +08:00
Code Issues 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
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;
}