modify style
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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),
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user