zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify style

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/TwoColumnSelect.vue
+41 -7
View File
@@ -10,22 +10,22 @@
>
<template #selection>
<div class="d-flex align-center text-truncate cursor-pointer">
<span class="text-truncate" v-if="showPrimaryName">{{ primaryItemDisplayName }}</span>
<v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="showPrimaryName" />
<span class="text-truncate" v-if="!selectedPrimaryItem && !selectedSecondaryItem">{{ noItemDisplayName }}</span>
<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"
:icon-id="selectedSecondaryItem ? selectedSecondaryItem[secondaryIconField] : null"
:color="selectedSecondaryItem ? selectedSecondaryItem[secondaryColorField] : null"
v-if="selectedSecondaryItem && showSecondaryIcon" />
<span class="text-truncate">{{ secondaryItemDisplayName }}</span>
<span class="text-truncate" v-if="selectedSecondaryItem">{{ secondaryItemDisplayName }}</span>
</div>
</template>
<template #no-data>
<div ref="dropdownMenu" class="two-column-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 }"
:title="$tIf(item[primaryTitleField], primaryTitleI18n)"
:key="primaryKeyField ? item[primaryKeyField] : item"
v-for="item in items"
@click="onPrimaryItemClicked(item)">
@@ -33,13 +33,18 @@
<ItemIcon class="mr-2" :icon-type="primaryIconType"
:icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon>
</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>
</div>
<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) }"
:title="$tIf(subItem[secondaryTitleField], secondaryTitleI18n)"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
@click="onSecondaryItemClicked(subItem)">
@@ -47,6 +52,11 @@
<ItemIcon class="mr-2" :icon-type="secondaryIconType"
:icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon>
</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>
</div>
@@ -80,6 +90,8 @@ export default {
'primaryValueField',
'primaryTitleField',
'primaryTitleI18n',
'primaryHeaderField',
'primaryHeaderI18n',
'primaryFooterField',
'primaryFooterI18n',
'primaryIconField',
@@ -90,6 +102,8 @@ export default {
'secondaryValueField',
'secondaryTitleField',
'secondaryTitleI18n',
'secondaryHeaderField',
'secondaryHeaderI18n',
'secondaryFooterField',
'secondaryFooterI18n',
'secondaryIconField',
@@ -234,4 +248,24 @@ export default {
max-height: 310px;
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>
src/lib/i18n.js
+72
View File
@@ -13,6 +13,7 @@ import {
isNumber,
getTextBefore,
getTextAfter,
copyObjectTo,
copyArrayTo
} from './common.js';
@@ -37,6 +38,11 @@ import {
numericCurrencyToString
} from './currency.js';
import {
getCategorizedAccounts,
getAllFilteredAccountsBalance
} from '@/lib/account.js';
import logger from './logger.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) {
if (!textArray || !textArray.length) {
return '';
@@ -1231,6 +1302,7 @@ export function i18nFunctions(i18nGlobal) {
getEnableDisableOptions: () => getEnableDisableOptions(i18nGlobal.t),
getDisplayCurrency: (value, currencyCode, options) => getDisplayCurrency(value, currencyCode, options, 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),
setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force),
setTimeZone: (timezone) => setTimeZone(timezone),
src/lib/transaction.js
+4 -4
View File
@@ -92,11 +92,11 @@ export function setTransactionModelByTransaction(transaction, transaction2, allC
transaction.type = transaction2.type;
if (transaction.type === transactionConstants.allTransactionTypes.Expense) {
transaction.expenseCategory = transaction2.categoryId;
transaction.expenseCategory = transaction2.categoryId || '';
} else if (transaction.type === transactionConstants.allTransactionTypes.Income) {
transaction.incomeCategory = transaction2.categoryId;
transaction.incomeCategory = transaction2.categoryId || '';
} else if (transaction.type === transactionConstants.allTransactionTypes.Transfer) {
transaction.transferCategory = transaction2.categoryId;
transaction.transferCategory = transaction2.categoryId || '';
}
if (setContextData) {
@@ -118,7 +118,7 @@ export function setTransactionModelByTransaction(transaction, transaction2, allC
if (transaction2.destinationAmount) {
transaction.destinationAmount = transaction2.destinationAmount;
} else {
transaction.destinationAccountId = 0;
transaction.destinationAmount = 0;
}
transaction.hideAmount = transaction2.hideAmount;
src/views/desktop/transactions/list/dialogs/EditDialog.vue
+50 -82
View File
@@ -81,7 +81,7 @@
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:disabled="loading || submitting || !hasAvailableExpenseCategories"
:show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Expense]"
@@ -95,7 +95,7 @@
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:disabled="loading || submitting || !hasAvailableIncomeCategories"
:show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Income]"
@@ -109,7 +109,7 @@
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:disabled="loading || submitting || !hasAvailableTransferCategories"
:show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Transfer]"
@@ -117,84 +117,40 @@
</two-column-select>
</v-col>
<v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
<v-select
item-title="name"
item-value="id"
persistent-placeholder
:readonly="mode === 'view'"
:disabled="loading || submitting || !allVisibleAccounts.length"
:label="$t(sourceAccountTitle)"
:placeholder="$t(sourceAccountTitle)"
:items="allVisibleAccounts"
:no-data-text="$t('No results')"
v-model="transaction.sourceAccountId"
>
<template #selection="{ item }">
<v-label class="cursor-pointer" v-if="item && item.value !== 0 && item.value !== '0'">
<ItemIcon class="mr-2" icon-type="account" size="23px"
:icon-id="getAccountNameByKeyValue(transaction.sourceAccountId, 'id', 'icon')"
: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>
<two-column-select primary-key-field="id" primary-value-field="category"
primary-title-field="name" primary-footer-field="displayBalance"
primary-icon-field="icon" primary-icon-type="account"
primary-sub-items-field="accounts"
:primary-title-i18n="true"
secondary-key-field="id" secondary-value-field="id"
secondary-title-field="name" secondary-footer-field="displayBalance"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:readonly="mode === 'view'"
:disabled="loading || submitting || !allVisibleAccounts.length"
:show-secondary-icon="true"
:label="$t(sourceAccountTitle)"
:placeholder="$t(sourceAccountTitle)"
:items="categorizedAccounts"
v-model="transaction.sourceAccountId">
</two-column-select>
</v-col>
<v-col cols="12" md="6" v-if="transaction.type === allTransactionTypes.Transfer">
<v-select
item-title="name"
item-value="id"
persistent-placeholder
:readonly="mode === 'view'"
:disabled="loading || submitting || !allVisibleAccounts.length"
:label="$t('Destination Account')"
:placeholder="$t('Destination Account')"
:items="allVisibleAccounts"
:no-data-text="$t('No results')"
v-model="transaction.destinationAccountId"
>
<template #selection="{ item }">
<v-label class="cursor-pointer" v-if="item && item.value !== 0 && item.value !== '0'">
<ItemIcon class="mr-2" icon-type="account" size="23px"
:icon-id="getAccountNameByKeyValue(transaction.destinationAccountId, 'id', 'icon')"
: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>
<two-column-select primary-key-field="id" primary-value-field="category"
primary-title-field="name" primary-footer-field="displayBalance"
primary-icon-field="icon" primary-icon-type="account"
primary-sub-items-field="accounts"
:primary-title-i18n="true"
secondary-key-field="id" secondary-value-field="id"
secondary-title-field="name" secondary-footer-field="displayBalance"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:readonly="mode === 'view'"
:disabled="loading || submitting || !allVisibleAccounts.length"
:show-secondary-icon="true"
:label="$t('Destination Account')"
:placeholder="$t('Destination Account')"
:items="categorizedAccounts"
v-model="transaction.destinationAccountId">
</two-column-select>
</v-col>
<v-col cols="12" md="6">
<date-time-select
@@ -352,6 +308,9 @@ import {
import {
getUtcOffsetByUtcOffsetMinutes
} from '@/lib/datetime.js';
import {
getFirstAvailableCategoryId
} from '@/lib/category.js';
import { setTransactionModelByTransaction } from '@/lib/transaction.js';
import { getMapProvider } from '@/lib/server_settings.js';
@@ -460,6 +419,12 @@ export default {
allVisibleAccounts() {
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() {
return this.accountsStore.allAccountsMap;
},
@@ -477,7 +442,7 @@ export default {
return false;
}
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Expense]);
const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Expense]);
return firstAvailableCategoryId !== '';
},
hasAvailableIncomeCategories() {
@@ -485,7 +450,7 @@ export default {
return false;
}
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Income]);
const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Income]);
return firstAvailableCategoryId !== '';
},
hasAvailableTransferCategories() {
@@ -493,7 +458,7 @@ export default {
return false;
}
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Transfer]);
const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Transfer]);
return firstAvailableCategoryId !== '';
},
transactionDisplayTimezone() {
@@ -522,6 +487,9 @@ export default {
return this.$t('No Location');
}
},
showAccountBalance() {
return this.settingsStore.appSettings.showAccountBalance;
},
mapProvider() {
return getMapProvider();
},
src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+1 -1
View File
@@ -224,11 +224,11 @@ import { useAccountsStore } from '@/stores/account.js';
import datetimeConstants from '@/consts/datetime.js';
import { getNameByKeyValue } from '@/lib/common.js';
import { getCategorizedAccounts } from '@/lib/account.js';
import {
mdiAccount
} from '@mdi/js';
import {getCategorizedAccounts} from "@/lib/account";
export default {
data() {
src/views/mobile/transactions/EditPage.vue
+4 -68
View File
@@ -342,8 +342,6 @@ import categoryConstants from '@/consts/category.js';
import transactionConstants from '@/consts/transaction.js';
import logger from '@/lib/logger.js';
import {
isNumber,
copyObjectTo,
getNameByKeyValue
} from '@/lib/common.js';
import {
@@ -352,10 +350,6 @@ import {
getUtcOffsetByUtcOffsetMinutes,
getActualUnixTimeForStore
} from '@/lib/datetime.js';
import {
getCategorizedAccounts,
getAllFilteredAccountsBalance
} from '@/lib/account.js';
import {
getTransactionPrimaryCategoryName,
getTransactionSecondaryCategoryName,
@@ -458,68 +452,10 @@ export default {
return this.accountsStore.allAccountsMap;
},
categorizedAccounts() {
const categorizedAccounts = copyObjectTo(getCategorizedAccounts(this.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 (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;
return this.$locale.getCategorizedAccountsWithDisplayBalance(this.exchangeRatesStore, this.allVisibleAccounts, this.showAccountBalance, this.defaultCurrency, {
currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
});
},
allCategories() {
return this.transactionCategoriesStore.allTransactionCategories;