show transaction tags in insights explorer page
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user