modify style

This commit is contained in:
MaysWind
2023-08-20 22:39:46 +08:00
parent 579322578b
commit 67b69a45cc
6 changed files with 172 additions and 162 deletions
+41 -7
View File
@@ -10,22 +10,22 @@
> >
<template #selection> <template #selection>
<div class="d-flex align-center text-truncate cursor-pointer"> <div class="d-flex align-center text-truncate cursor-pointer">
<span class="text-truncate" v-if="showPrimaryName">{{ primaryItemDisplayName }}</span> <span class="text-truncate" v-if="!selectedPrimaryItem && !selectedSecondaryItem">{{ noItemDisplayName }}</span>
<v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="showPrimaryName" /> <span class="text-truncate" v-if="showPrimaryName && selectedPrimaryItem">{{ primaryItemDisplayName }}</span>
<v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="showPrimaryName && selectedPrimaryItem && selectedSecondaryItem" />
<ItemIcon class="mr-2" icon-type="account" size="21.5px" <ItemIcon class="mr-2" icon-type="account" size="21.5px"
:icon-id="selectedSecondaryItem ? selectedSecondaryItem[secondaryIconField] : null" :icon-id="selectedSecondaryItem ? selectedSecondaryItem[secondaryIconField] : null"
:color="selectedSecondaryItem ? selectedSecondaryItem[secondaryColorField] : null" :color="selectedSecondaryItem ? selectedSecondaryItem[secondaryColorField] : null"
v-if="selectedSecondaryItem && showSecondaryIcon" /> v-if="selectedSecondaryItem && showSecondaryIcon" />
<span class="text-truncate">{{ secondaryItemDisplayName }}</span> <span class="text-truncate" v-if="selectedSecondaryItem">{{ secondaryItemDisplayName }}</span>
</div> </div>
</template> </template>
<template #no-data> <template #no-data>
<div ref="dropdownMenu" class="two-column-list-container"> <div ref="dropdownMenu" class="two-column-list-container">
<div class="primary-list-container"> <div class="primary-list-container">
<v-list> <v-list :class="{ 'list-item-with-header': !!primaryHeaderField, 'list-item-with-footer': !!primaryFooterField }">
<v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }" <v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
:title="$tIf(item[primaryTitleField], primaryTitleI18n)"
:key="primaryKeyField ? item[primaryKeyField] : item" :key="primaryKeyField ? item[primaryKeyField] : item"
v-for="item in items" v-for="item in items"
@click="onPrimaryItemClicked(item)"> @click="onPrimaryItemClicked(item)">
@@ -33,13 +33,18 @@
<ItemIcon class="mr-2" :icon-type="primaryIconType" <ItemIcon class="mr-2" :icon-type="primaryIconType"
:icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon> :icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon>
</template> </template>
<template #title>
<div class="list-item-header" v-if="primaryHeaderField">{{ $tIf(item[primaryHeaderField], primaryHeaderI18n) }}</div>
<div>{{ $tIf(item[primaryTitleField], primaryTitleI18n) }}</div>
<div class="list-item-footer" v-if="primaryFooterField">{{ $tIf(item[primaryFooterField], primaryFooterI18n) }}</div>
</template>
</v-list-item> </v-list-item>
</v-list> </v-list>
</div> </div>
<div class="secondary-list-container"> <div class="secondary-list-container">
<v-list v-if="selectedPrimaryItem && primarySubItemsField && selectedPrimaryItem[primarySubItemsField]"> <v-list :class="{ 'list-item-with-header': !!secondaryHeaderField, 'list-item-with-footer': !!secondaryFooterField }"
v-if="selectedPrimaryItem && primarySubItemsField && selectedPrimaryItem[primarySubItemsField]">
<v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }" <v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
:title="$tIf(subItem[secondaryTitleField], secondaryTitleI18n)"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem" :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in selectedPrimaryItem[primarySubItemsField]" v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
@click="onSecondaryItemClicked(subItem)"> @click="onSecondaryItemClicked(subItem)">
@@ -47,6 +52,11 @@
<ItemIcon class="mr-2" :icon-type="secondaryIconType" <ItemIcon class="mr-2" :icon-type="secondaryIconType"
:icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon> :icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon>
</template> </template>
<template #title>
<div class="list-item-header" v-if="secondaryHeaderField">{{ $tIf(subItem[secondaryHeaderField], secondaryHeaderI18n) }}</div>
<div>{{ $tIf(subItem[secondaryTitleField], secondaryTitleI18n) }}</div>
<div class="list-item-footer" v-if="secondaryFooterField">{{ $tIf(subItem[secondaryFooterField], secondaryFooterI18n) }}</div>
</template>
</v-list-item> </v-list-item>
</v-list> </v-list>
</div> </div>
@@ -80,6 +90,8 @@ export default {
'primaryValueField', 'primaryValueField',
'primaryTitleField', 'primaryTitleField',
'primaryTitleI18n', 'primaryTitleI18n',
'primaryHeaderField',
'primaryHeaderI18n',
'primaryFooterField', 'primaryFooterField',
'primaryFooterI18n', 'primaryFooterI18n',
'primaryIconField', 'primaryIconField',
@@ -90,6 +102,8 @@ export default {
'secondaryValueField', 'secondaryValueField',
'secondaryTitleField', 'secondaryTitleField',
'secondaryTitleI18n', 'secondaryTitleI18n',
'secondaryHeaderField',
'secondaryHeaderI18n',
'secondaryFooterField', 'secondaryFooterField',
'secondaryFooterI18n', 'secondaryFooterI18n',
'secondaryIconField', 'secondaryIconField',
@@ -234,4 +248,24 @@ export default {
max-height: 310px; max-height: 310px;
overflow-y: scroll; overflow-y: scroll;
} }
.two-column-select-menu .list-item-with-header > .v-list-item,
.two-column-select-menu .list-item-with-footer > .v-list-item {
min-height: 58px;
padding-top: 6px;
padding-bottom: 6px;
}
.two-column-select-menu .list-item-with-header.list-item-with-footer > .v-list-item {
min-height: 78px;
padding-top: 8px;
padding-bottom: 8px;
}
.two-column-select-menu .list-item-header,
.two-column-select-menu .list-item-footer {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
font-size: 0.75rem;
line-height: 1.2rem;
}
</style> </style>
+72
View File
@@ -13,6 +13,7 @@ import {
isNumber, isNumber,
getTextBefore, getTextBefore,
getTextAfter, getTextAfter,
copyObjectTo,
copyArrayTo copyArrayTo
} from './common.js'; } from './common.js';
@@ -37,6 +38,11 @@ import {
numericCurrencyToString numericCurrencyToString
} from './currency.js'; } from './currency.js';
import {
getCategorizedAccounts,
getAllFilteredAccountsBalance
} from '@/lib/account.js';
import logger from './logger.js'; import logger from './logger.js';
import services from './services.js'; import services from './services.js';
@@ -988,6 +994,71 @@ function getDisplayCurrencyPrependAndAppendText(currencyCode, currencyDisplayMod
}; };
} }
function getCategorizedAccountsWithDisplayBalance(exchangeRatesStore, allVisibleAccounts, showAccountBalance, defaultCurrency, options, translateFn) {
const categorizedAccounts = copyObjectTo(getCategorizedAccounts(allVisibleAccounts), {});
for (let category in categorizedAccounts) {
if (!Object.prototype.hasOwnProperty.call(categorizedAccounts, category)) {
continue;
}
const accountCategory = categorizedAccounts[category];
if (accountCategory.accounts) {
for (let i = 0; i < accountCategory.accounts.length; i++) {
const account = accountCategory.accounts[i];
if (showAccountBalance && account.isAsset) {
account.displayBalance = getDisplayCurrency(account.balance, account.currency, options, translateFn);
} else if (showAccountBalance && account.isLiability) {
account.displayBalance = getDisplayCurrency(-account.balance, account.currency, options, translateFn);
} else {
account.displayBalance = '***';
}
}
}
if (showAccountBalance) {
const accountsBalance = getAllFilteredAccountsBalance(categorizedAccounts, account => account.category === accountCategory.category);
let totalBalance = 0;
let hasUnCalculatedAmount = false;
for (let i = 0; i < accountsBalance.length; i++) {
if (accountsBalance[i].currency === defaultCurrency) {
if (accountsBalance[i].isAsset) {
totalBalance += accountsBalance[i].balance;
} else if (accountsBalance[i].isLiability) {
totalBalance -= accountsBalance[i].balance;
}
} else {
const balance = exchangeRatesStore.getExchangedAmount(accountsBalance[i].balance, accountsBalance[i].currency, defaultCurrency);
if (!isNumber(balance)) {
hasUnCalculatedAmount = true;
continue;
}
if (accountsBalance[i].isAsset) {
totalBalance += Math.floor(balance);
} else if (accountsBalance[i].isLiability) {
totalBalance -= Math.floor(balance);
}
}
}
if (hasUnCalculatedAmount) {
totalBalance = totalBalance + '+';
}
accountCategory.displayBalance = getDisplayCurrency(totalBalance, defaultCurrency, options, translateFn);
} else {
accountCategory.displayBalance = '***';
}
}
return categorizedAccounts;
}
function joinMultiText(textArray, translateFn) { function joinMultiText(textArray, translateFn) {
if (!textArray || !textArray.length) { if (!textArray || !textArray.length) {
return ''; return '';
@@ -1231,6 +1302,7 @@ export function i18nFunctions(i18nGlobal) {
getEnableDisableOptions: () => getEnableDisableOptions(i18nGlobal.t), getEnableDisableOptions: () => getEnableDisableOptions(i18nGlobal.t),
getDisplayCurrency: (value, currencyCode, options) => getDisplayCurrency(value, currencyCode, options, i18nGlobal.t), getDisplayCurrency: (value, currencyCode, options) => getDisplayCurrency(value, currencyCode, options, i18nGlobal.t),
getDisplayCurrencyPrependAndAppendText: (currencyCode, currencyDisplayMode) => getDisplayCurrencyPrependAndAppendText(currencyCode, currencyDisplayMode, i18nGlobal.t), getDisplayCurrencyPrependAndAppendText: (currencyCode, currencyDisplayMode) => getDisplayCurrencyPrependAndAppendText(currencyCode, currencyDisplayMode, i18nGlobal.t),
getCategorizedAccountsWithDisplayBalance: (exchangeRatesStore, allVisibleAccounts, showAccountBalance, defaultCurrency, options) => getCategorizedAccountsWithDisplayBalance(exchangeRatesStore, allVisibleAccounts, showAccountBalance, defaultCurrency, options, i18nGlobal.t),
joinMultiText: (textArray) => joinMultiText(textArray, i18nGlobal.t), joinMultiText: (textArray) => joinMultiText(textArray, i18nGlobal.t),
setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force), setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force),
setTimeZone: (timezone) => setTimeZone(timezone), setTimeZone: (timezone) => setTimeZone(timezone),
+4 -4
View File
@@ -92,11 +92,11 @@ export function setTransactionModelByTransaction(transaction, transaction2, allC
transaction.type = transaction2.type; transaction.type = transaction2.type;
if (transaction.type === transactionConstants.allTransactionTypes.Expense) { if (transaction.type === transactionConstants.allTransactionTypes.Expense) {
transaction.expenseCategory = transaction2.categoryId; transaction.expenseCategory = transaction2.categoryId || '';
} else if (transaction.type === transactionConstants.allTransactionTypes.Income) { } else if (transaction.type === transactionConstants.allTransactionTypes.Income) {
transaction.incomeCategory = transaction2.categoryId; transaction.incomeCategory = transaction2.categoryId || '';
} else if (transaction.type === transactionConstants.allTransactionTypes.Transfer) { } else if (transaction.type === transactionConstants.allTransactionTypes.Transfer) {
transaction.transferCategory = transaction2.categoryId; transaction.transferCategory = transaction2.categoryId || '';
} }
if (setContextData) { if (setContextData) {
@@ -118,7 +118,7 @@ export function setTransactionModelByTransaction(transaction, transaction2, allC
if (transaction2.destinationAmount) { if (transaction2.destinationAmount) {
transaction.destinationAmount = transaction2.destinationAmount; transaction.destinationAmount = transaction2.destinationAmount;
} else { } else {
transaction.destinationAccountId = 0; transaction.destinationAmount = 0;
} }
transaction.hideAmount = transaction2.hideAmount; transaction.hideAmount = transaction2.hideAmount;
@@ -81,7 +81,7 @@
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name" secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color" secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
:readonly="mode === 'view'" :readonly="mode === 'view'"
:disabled="loading || submitting" :disabled="loading || submitting || !hasAvailableExpenseCategories"
:show-primary-name="true" :show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')" :label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Expense]" :items="allCategories[allCategoryTypes.Expense]"
@@ -95,7 +95,7 @@
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name" secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color" secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
:readonly="mode === 'view'" :readonly="mode === 'view'"
:disabled="loading || submitting" :disabled="loading || submitting || !hasAvailableIncomeCategories"
:show-primary-name="true" :show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')" :label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Income]" :items="allCategories[allCategoryTypes.Income]"
@@ -109,7 +109,7 @@
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name" secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color" secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
:readonly="mode === 'view'" :readonly="mode === 'view'"
:disabled="loading || submitting" :disabled="loading || submitting || !hasAvailableTransferCategories"
:show-primary-name="true" :show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')" :label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Transfer]" :items="allCategories[allCategoryTypes.Transfer]"
@@ -117,84 +117,40 @@
</two-column-select> </two-column-select>
</v-col> </v-col>
<v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12"> <v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
<v-select <two-column-select primary-key-field="id" primary-value-field="category"
item-title="name" primary-title-field="name" primary-footer-field="displayBalance"
item-value="id" primary-icon-field="icon" primary-icon-type="account"
persistent-placeholder primary-sub-items-field="accounts"
:readonly="mode === 'view'" :primary-title-i18n="true"
:disabled="loading || submitting || !allVisibleAccounts.length" secondary-key-field="id" secondary-value-field="id"
:label="$t(sourceAccountTitle)" secondary-title-field="name" secondary-footer-field="displayBalance"
:placeholder="$t(sourceAccountTitle)" secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:items="allVisibleAccounts" :readonly="mode === 'view'"
:no-data-text="$t('No results')" :disabled="loading || submitting || !allVisibleAccounts.length"
v-model="transaction.sourceAccountId" :show-secondary-icon="true"
> :label="$t(sourceAccountTitle)"
<template #selection="{ item }"> :placeholder="$t(sourceAccountTitle)"
<v-label class="cursor-pointer" v-if="item && item.value !== 0 && item.value !== '0'"> :items="categorizedAccounts"
<ItemIcon class="mr-2" icon-type="account" size="23px" v-model="transaction.sourceAccountId">
:icon-id="getAccountNameByKeyValue(transaction.sourceAccountId, 'id', 'icon')" </two-column-select>
:color="getAccountNameByKeyValue(transaction.sourceAccountId, 'id', 'color')"
v-if="getAccountNameByKeyValue(transaction.sourceAccountId, 'id', 'icon')" />
<span>{{ getAccountNameByKeyValue(transaction.sourceAccountId, 'id', 'name', $t('Not Specified')) }}</span>
</v-label>
<v-label v-if="!item || item.value === 0 || item.value === '0'">{{ $t('Not Specified') }}</v-label>
</template>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<ItemIcon icon-type="account"
:icon-id="item.raw.icon" :color="item.raw.color"
v-if="item.raw" />
<span class="ml-2">{{ item.title }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
</v-col> </v-col>
<v-col cols="12" md="6" v-if="transaction.type === allTransactionTypes.Transfer"> <v-col cols="12" md="6" v-if="transaction.type === allTransactionTypes.Transfer">
<v-select <two-column-select primary-key-field="id" primary-value-field="category"
item-title="name" primary-title-field="name" primary-footer-field="displayBalance"
item-value="id" primary-icon-field="icon" primary-icon-type="account"
persistent-placeholder primary-sub-items-field="accounts"
:readonly="mode === 'view'" :primary-title-i18n="true"
:disabled="loading || submitting || !allVisibleAccounts.length" secondary-key-field="id" secondary-value-field="id"
:label="$t('Destination Account')" secondary-title-field="name" secondary-footer-field="displayBalance"
:placeholder="$t('Destination Account')" secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:items="allVisibleAccounts" :readonly="mode === 'view'"
:no-data-text="$t('No results')" :disabled="loading || submitting || !allVisibleAccounts.length"
v-model="transaction.destinationAccountId" :show-secondary-icon="true"
> :label="$t('Destination Account')"
<template #selection="{ item }"> :placeholder="$t('Destination Account')"
<v-label class="cursor-pointer" v-if="item && item.value !== 0 && item.value !== '0'"> :items="categorizedAccounts"
<ItemIcon class="mr-2" icon-type="account" size="23px" v-model="transaction.destinationAccountId">
:icon-id="getAccountNameByKeyValue(transaction.destinationAccountId, 'id', 'icon')" </two-column-select>
:color="getAccountNameByKeyValue(transaction.destinationAccountId, 'id', 'color')"
v-if="getAccountNameByKeyValue(transaction.destinationAccountId, 'id', 'icon')" />
<span>{{ getAccountNameByKeyValue(transaction.destinationAccountId, 'id', 'name', $t('Not Specified')) }}</span>
</v-label>
<v-label v-if="!item || item.value === 0 || item.value === '0'">{{ $t('Not Specified') }}</v-label>
</template>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<ItemIcon icon-type="account"
:icon-id="item.raw.icon" :color="item.raw.color"
v-if="item.raw" />
<span class="ml-2">{{ item.title }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
</v-col> </v-col>
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<date-time-select <date-time-select
@@ -352,6 +308,9 @@ import {
import { import {
getUtcOffsetByUtcOffsetMinutes getUtcOffsetByUtcOffsetMinutes
} from '@/lib/datetime.js'; } from '@/lib/datetime.js';
import {
getFirstAvailableCategoryId
} from '@/lib/category.js';
import { setTransactionModelByTransaction } from '@/lib/transaction.js'; import { setTransactionModelByTransaction } from '@/lib/transaction.js';
import { getMapProvider } from '@/lib/server_settings.js'; import { getMapProvider } from '@/lib/server_settings.js';
@@ -460,6 +419,12 @@ export default {
allVisibleAccounts() { allVisibleAccounts() {
return this.accountsStore.allVisiblePlainAccounts; return this.accountsStore.allVisiblePlainAccounts;
}, },
categorizedAccounts() {
return this.$locale.getCategorizedAccountsWithDisplayBalance(this.exchangeRatesStore, this.allVisibleAccounts, this.showAccountBalance, this.defaultCurrency, {
currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
});
},
allAccountsMap() { allAccountsMap() {
return this.accountsStore.allAccountsMap; return this.accountsStore.allAccountsMap;
}, },
@@ -477,7 +442,7 @@ export default {
return false; return false;
} }
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Expense]); const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Expense]);
return firstAvailableCategoryId !== ''; return firstAvailableCategoryId !== '';
}, },
hasAvailableIncomeCategories() { hasAvailableIncomeCategories() {
@@ -485,7 +450,7 @@ export default {
return false; return false;
} }
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Income]); const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Income]);
return firstAvailableCategoryId !== ''; return firstAvailableCategoryId !== '';
}, },
hasAvailableTransferCategories() { hasAvailableTransferCategories() {
@@ -493,7 +458,7 @@ export default {
return false; return false;
} }
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Transfer]); const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Transfer]);
return firstAvailableCategoryId !== ''; return firstAvailableCategoryId !== '';
}, },
transactionDisplayTimezone() { transactionDisplayTimezone() {
@@ -522,6 +487,9 @@ export default {
return this.$t('No Location'); return this.$t('No Location');
} }
}, },
showAccountBalance() {
return this.settingsStore.appSettings.showAccountBalance;
},
mapProvider() { mapProvider() {
return getMapProvider(); return getMapProvider();
}, },
@@ -224,11 +224,11 @@ import { useAccountsStore } from '@/stores/account.js';
import datetimeConstants from '@/consts/datetime.js'; import datetimeConstants from '@/consts/datetime.js';
import { getNameByKeyValue } from '@/lib/common.js'; import { getNameByKeyValue } from '@/lib/common.js';
import { getCategorizedAccounts } from '@/lib/account.js';
import { import {
mdiAccount mdiAccount
} from '@mdi/js'; } from '@mdi/js';
import {getCategorizedAccounts} from "@/lib/account";
export default { export default {
data() { data() {
+4 -68
View File
@@ -342,8 +342,6 @@ import categoryConstants from '@/consts/category.js';
import transactionConstants from '@/consts/transaction.js'; import transactionConstants from '@/consts/transaction.js';
import logger from '@/lib/logger.js'; import logger from '@/lib/logger.js';
import { import {
isNumber,
copyObjectTo,
getNameByKeyValue getNameByKeyValue
} from '@/lib/common.js'; } from '@/lib/common.js';
import { import {
@@ -352,10 +350,6 @@ import {
getUtcOffsetByUtcOffsetMinutes, getUtcOffsetByUtcOffsetMinutes,
getActualUnixTimeForStore getActualUnixTimeForStore
} from '@/lib/datetime.js'; } from '@/lib/datetime.js';
import {
getCategorizedAccounts,
getAllFilteredAccountsBalance
} from '@/lib/account.js';
import { import {
getTransactionPrimaryCategoryName, getTransactionPrimaryCategoryName,
getTransactionSecondaryCategoryName, getTransactionSecondaryCategoryName,
@@ -458,68 +452,10 @@ export default {
return this.accountsStore.allAccountsMap; return this.accountsStore.allAccountsMap;
}, },
categorizedAccounts() { categorizedAccounts() {
const categorizedAccounts = copyObjectTo(getCategorizedAccounts(this.allVisibleAccounts), {}); return this.$locale.getCategorizedAccountsWithDisplayBalance(this.exchangeRatesStore, this.allVisibleAccounts, this.showAccountBalance, this.defaultCurrency, {
currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
for (let category in categorizedAccounts) { enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
if (!Object.prototype.hasOwnProperty.call(categorizedAccounts, category)) { });
continue;
}
const accountCategory = categorizedAccounts[category];
if (accountCategory.accounts) {
for (let i = 0; i < accountCategory.accounts.length; i++) {
const account = accountCategory.accounts[i];
if (this.showAccountBalance && account.isAsset) {
account.displayBalance = this.getDisplayCurrency(account.balance, account.currency);
} else if (this.showAccountBalance && account.isLiability) {
account.displayBalance = this.getDisplayCurrency(-account.balance, account.currency);
} else {
account.displayBalance = '***';
}
}
}
if (this.showAccountBalance) {
const accountsBalance = getAllFilteredAccountsBalance(categorizedAccounts, account => account.category === accountCategory.category);
let totalBalance = 0;
let hasUnCalculatedAmount = false;
for (let i = 0; i < accountsBalance.length; i++) {
if (accountsBalance[i].currency === this.defaultCurrency) {
if (accountsBalance[i].isAsset) {
totalBalance += accountsBalance[i].balance;
} else if (accountsBalance[i].isLiability) {
totalBalance -= accountsBalance[i].balance;
}
} else {
const balance = this.exchangeRatesStore.getExchangedAmount(accountsBalance[i].balance, accountsBalance[i].currency, this.defaultCurrency);
if (!isNumber(balance)) {
hasUnCalculatedAmount = true;
continue;
}
if (accountsBalance[i].isAsset) {
totalBalance += Math.floor(balance);
} else if (accountsBalance[i].isLiability) {
totalBalance -= Math.floor(balance);
}
}
}
if (hasUnCalculatedAmount) {
totalBalance = totalBalance + '+';
}
accountCategory.displayBalance = this.getDisplayCurrency(totalBalance, this.defaultCurrency);
} else {
accountCategory.displayBalance = '***';
}
}
return categorizedAccounts;
}, },
allCategories() { allCategories() {
return this.transactionCategoriesStore.allTransactionCategories; return this.transactionCategoriesStore.allTransactionCategories;