support showing transaction tag in transaction list page

pkg/services/transaction_tags.go

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;
 }