show transaction tags in insights explorer page

This commit is contained in:
MaysWind
2026-01-04 01:21:33 +08:00
parent 41739d97e7
commit 6634d5b791
6 changed files with 92 additions and 13 deletions
+1
View File
@@ -31,6 +31,7 @@ var ALL_ALLOWED_CLOUD_SYNC_APP_SETTING_KEY_TYPES = map[string]UserApplicationClo
"alwaysShowTransactionPicturesInMobileTransactionEditPage": USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,
// Insights Explorer Page
"insightsExplorerDefaultDateRangeType": USER_APPLICATION_CLOUD_SETTING_TYPE_NUMBER,
"showTagInInsightsExplorerPage": USER_APPLICATION_CLOUD_SETTING_TYPE_BOOLEAN,
// Account List Page
"totalAmountExcludeAccountIds": USER_APPLICATION_CLOUD_SETTING_TYPE_STRING_BOOLEAN_MAP,
// Exchange Rates Data Page
+3
View File
@@ -52,6 +52,7 @@ export interface ApplicationSettings extends BaseApplicationSetting {
alwaysShowTransactionPicturesInMobileTransactionEditPage: boolean;
// Insights Explorer Page
insightsExplorerDefaultDateRangeType: number;
showTagInInsightsExplorerPage: boolean;
// Account List Page
totalAmountExcludeAccountIds: Record<string, boolean>;
// Exchange Rates Data Page
@@ -116,6 +117,7 @@ export const ALL_ALLOWED_CLOUD_SYNC_APP_SETTING_KEY_TYPES: Record<string, UserAp
'alwaysShowTransactionPicturesInMobileTransactionEditPage': UserApplicationCloudSettingType.Boolean,
// Insights Explorer Page
'insightsExplorerDefaultDateRangeType': UserApplicationCloudSettingType.Number,
'showTagInInsightsExplorerPage': UserApplicationCloudSettingType.Boolean,
// Account List Page
'totalAmountExcludeAccountIds': UserApplicationCloudSettingType.StringBooleanMap,
// Exchange Rates Data Page
@@ -165,6 +167,7 @@ export const DEFAULT_APPLICATION_SETTINGS: ApplicationSettings = {
alwaysShowTransactionPicturesInMobileTransactionEditPage: false,
// Insights Explorer Page
insightsExplorerDefaultDateRangeType: DEFAULT_TRANSACTION_EXPLORER_DATE_RANGE.type,
showTagInInsightsExplorerPage: true,
// Account List Page
totalAmountExcludeAccountIds: {},
// Exchange Rates Data Page
+7
View File
@@ -252,6 +252,12 @@ export const useSettingsStore = defineStore('settings', () => {
updateUserApplicationCloudSettingValue('insightsExplorerDefaultDateRangeType', value);
}
function setShowTagInInsightsExplorerPage(value: boolean): void {
updateApplicationSettingsValue('showTagInInsightsExplorerPage', value);
appSettings.value.showTagInInsightsExplorerPage = value;
updateUserApplicationCloudSettingValue('showTagInInsightsExplorerPage', value);
}
// Account List Page
function setTotalAmountExcludeAccountIds(value: Record<string, boolean>): void {
updateApplicationSettingsValue('totalAmountExcludeAccountIds', value);
@@ -476,6 +482,7 @@ export const useSettingsStore = defineStore('settings', () => {
setAlwaysShowTransactionPicturesInMobileTransactionEditPage,
// -- Insights Explorer Page
setInsightsExplorerDefaultDateRangeType,
setShowTagInInsightsExplorerPage,
// -- Account List Page
setTotalAmountExcludeAccountIds,
// -- Exchange Rates Data Page
@@ -53,7 +53,8 @@ export const ALL_APPLICATION_CLOUD_SETTINGS: CategorizedApplicationCloudSettingI
{
categoryName: 'Insights Explorer Page',
items: [
{ settingKey: 'insightsExplorerDefaultDateRangeType', settingName: 'Default Date Range', mobile: false, desktop: true }
{ settingKey: 'insightsExplorerDefaultDateRangeType', settingName: 'Default Date Range', mobile: false, desktop: true },
{ settingKey: 'showTagInInsightsExplorerPage', settingName: 'Show Transaction Tag', mobile: false, desktop: true }
]
},
{
@@ -240,6 +240,17 @@
v-model="insightsExplorerDefaultDateRangeType"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-value="value"
persistent-placeholder
:label="tt('Show Transaction Tag')"
:placeholder="tt('Show Transaction Tag')"
:items="enableDisableOptions"
v-model="showTagInInsightsExplorerPage"
/>
</v-col>
</v-row>
</v-card-text>
</v-form>
@@ -405,6 +416,11 @@ const insightsExplorerDefaultDateRangeType = computed<number>({
set: (value) => settingsStore.setInsightsExplorerDefaultDateRangeType(value)
});
const showTagInInsightsExplorerPage = computed<boolean>({
get: () => settingsStore.appSettings.showTagInInsightsExplorerPage,
set: (value) => settingsStore.setShowTagInInsightsExplorerPage(value)
});
function init(): void {
loadingAccounts.value = true;
@@ -49,6 +49,17 @@
<span v-if="item.type === TransactionType.Transfer && item.destinationAccount">{{ item.destinationAccount?.name }}</span>
</div>
</template>
<template #item.tags="{ item }">
<div class="d-flex">
<v-chip class="transaction-tag" size="small"
:key="tag.id" :prepend-icon="mdiPound"
:text="tag.name"
v-for="tag in item.tags"/>
<v-chip class="transaction-tag" size="small"
:text="tt('None')"
v-if="!item.tagIds || !item.tagIds.length"/>
</div>
</template>
<template #no-data>
<div v-if="loading && (!filteredTransactions || filteredTransactions.length < 1)">
<div class="ms-1" style="padding-top: 3px; padding-bottom: 3px" :key="itemIdx" v-for="itemIdx in skeletonData">
@@ -77,6 +88,7 @@ import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
import { useExplorersStore } from '@/stores/explorer.ts';
@@ -87,6 +99,8 @@ import {
type TransactionInsightDataItem
} from '@/models/transaction.ts';
import { replaceAll } from '@/lib/common.ts';
import {
getUtcOffsetByUtcOffsetMinutes,
getTimezoneOffsetMinutes,
@@ -95,7 +109,8 @@ import {
import {
mdiArrowRight,
mdiPencilBoxOutline
mdiPencilBoxOutline,
mdiPound
} from '@mdi/js';
interface InsightsExplorerDataTableTabProps {
@@ -117,6 +132,7 @@ const {
formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();
const settingsStore = useSettingsStore();
const userStore = useUserStore();
const explorersStore = useExplorersStore();
@@ -159,6 +175,11 @@ const dataTableHeaders = computed<object[]>(() => {
headers.push({ key: 'secondaryCategoryName', value: 'secondaryCategoryName', title: tt('Category'), sortable: true, nowrap: true });
headers.push({ key: 'sourceAmount', value: 'sourceAmount', title: tt('Amount'), sortable: true, nowrap: true });
headers.push({ key: 'sourceAccountName', value: 'sourceAccountName', title: tt('Account'), sortable: true, nowrap: true });
if (settingsStore.appSettings.showTagInInsightsExplorerPage) {
headers.push({ key: 'tags', value: 'tags', title: tt('Tags'), sortable: true, nowrap: true });
}
headers.push({ key: 'comment', value: 'comment', title: tt('Description'), sortable: true, nowrap: true });
return headers;
});
@@ -236,15 +257,24 @@ function buildExportResults(): { headers: string[], data: string[][] } | undefin
return undefined;
}
const includeTags = settingsStore.appSettings.showTagInInsightsExplorerPage;
const headers = [
tt('Transaction Time'),
tt('Type'),
tt('Category'),
tt('Amount'),
tt('Account')
];
if (includeTags) {
headers.push(tt('Tags'));
}
headers.push(tt('Description'));
return {
headers: [
tt('Transaction Time'),
tt('Type'),
tt('Category'),
tt('Amount'),
tt('Account'),
tt('Description')
],
headers: headers,
data: filteredTransactions.value
.map(transaction => {
const transactionTime = parseDateTimeFromUnixTimeWithTimezoneOffset(transaction.time, transaction.utcOffset);
@@ -266,14 +296,22 @@ function buildExportResults(): { headers: string[], data: string[][] } | undefin
const description = transaction.comment || '';
return [
const data = [
formatDateTimeToGregorianDefaultDateTime(transactionTime),
type,
categoryName,
displayAmount,
displayAccountName,
description
displayAccountName
];
if (includeTags) {
const tags = transaction.tags && transaction.tags.length ? transaction.tags.map(tag => replaceAll(tag.name, ';', ' ')).join(';') : tt('None');
data.push(tags);
}
data.push(description);
return data;
}
)
};
@@ -301,4 +339,17 @@ defineExpose({
.v-table.insights-explorer-table.loading-skeleton tr.v-data-table-rows-no-data > td {
padding: 0;
}
.v-table.insights-explorer-table .v-chip.transaction-tag {
margin-inline-end: 4px;
margin-top: 2px;
margin-bottom: 2px;
}
.v-table.insights-explorer-table .v-chip.transaction-tag > .v-chip__content {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
</style>