mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-17 00:12:11 +08:00
support setting expense / income amount color
This commit is contained in:
MaysWind
@@ -54,11 +54,11 @@
|
||||
</template>
|
||||
<template #after>
|
||||
<div class="overview-transaction-amount">
|
||||
<div class="text-color-red text-align-right">
|
||||
<div class="text-income text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ getDisplayIncomeAmount(transactionOverview.today) }}</small>
|
||||
</div>
|
||||
<div class="text-color-teal text-align-right">
|
||||
<div class="text-expense text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ getDisplayExpenseAmount(transactionOverview.today) }}</small>
|
||||
</div>
|
||||
@@ -87,11 +87,11 @@
|
||||
</template>
|
||||
<template #after>
|
||||
<div class="overview-transaction-amount">
|
||||
<div class="text-color-red text-align-right">
|
||||
<div class="text-income text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ getDisplayIncomeAmount(transactionOverview.thisWeek) }}</small>
|
||||
</div>
|
||||
<div class="text-color-teal text-align-right">
|
||||
<div class="text-expense text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ getDisplayExpenseAmount(transactionOverview.thisWeek) }}</small>
|
||||
</div>
|
||||
@@ -120,11 +120,11 @@
|
||||
</template>
|
||||
<template #after>
|
||||
<div class="overview-transaction-amount">
|
||||
<div class="text-color-red text-align-right">
|
||||
<div class="text-income text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ getDisplayIncomeAmount(transactionOverview.thisMonth) }}</small>
|
||||
</div>
|
||||
<div class="text-color-teal text-align-right">
|
||||
<div class="text-expense text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ getDisplayExpenseAmount(transactionOverview.thisMonth) }}</small>
|
||||
</div>
|
||||
@@ -150,11 +150,11 @@
|
||||
</template>
|
||||
<template #after>
|
||||
<div class="overview-transaction-amount">
|
||||
<div class="text-color-red text-align-right">
|
||||
<div class="text-income text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ getDisplayIncomeAmount(transactionOverview.thisYear) }}</small>
|
||||
</div>
|
||||
<div class="text-color-teal text-align-right">
|
||||
<div class="text-expense text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ getDisplayExpenseAmount(transactionOverview.thisYear) }}</small>
|
||||
</div>
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
<template #title>
|
||||
<small>{{ currentLongYearMonth }}</small>
|
||||
<small class="transaction-amount-statistics">
|
||||
<span class="text-color-red">{{ `+${getDisplayAmount('12345')}` }}</span>
|
||||
<span class="text-color-teal">{{ `-${getDisplayAmount('67890')}` }}</span>
|
||||
<span class="text-income">{{ `+${getDisplayAmount('12345')}` }}</span>
|
||||
<span class="text-expense">{{ `-${getDisplayAmount('67890')}` }}</span>
|
||||
</small>
|
||||
<f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
|
||||
</template>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="display-flex full-line">
|
||||
<div :class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-color-red': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
|
||||
<div :class="{ 'statistics-list-item-overview-amount': true, 'text-expense': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-income': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
|
||||
<span v-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
|
||||
{{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency) }}
|
||||
</span>
|
||||
|
||||
@@ -561,8 +561,8 @@ export default {
|
||||
sourceAmountClass() {
|
||||
const classes = {
|
||||
'readonly': this.mode === 'view',
|
||||
'text-color-teal': this.transaction.type === this.allTransactionTypes.Expense,
|
||||
'text-color-red': this.transaction.type === this.allTransactionTypes.Income,
|
||||
'text-expense': this.transaction.type === this.allTransactionTypes.Expense,
|
||||
'text-income': this.transaction.type === this.allTransactionTypes.Income,
|
||||
'text-color-primary': this.transaction.type === this.allTransactionTypes.Transfer
|
||||
};
|
||||
|
||||
|
||||
@@ -137,10 +137,10 @@
|
||||
<span>{{ getDisplayYearMonth(transactionMonthList) }}</span>
|
||||
</small>
|
||||
<small class="transaction-amount-statistics" v-if="showTotalAmountInTransactionListPage && transactionMonthList.totalAmount">
|
||||
<span class="text-color-red">
|
||||
<span class="text-income">
|
||||
{{ getDisplayMonthTotalAmount(transactionMonthList.totalAmount.income, defaultCurrency, '+', transactionMonthList.totalAmount.incompleteIncome) }}
|
||||
</span>
|
||||
<span class="text-color-teal">
|
||||
<span class="text-expense">
|
||||
{{ getDisplayMonthTotalAmount(transactionMonthList.totalAmount.expense, defaultCurrency, '-', transactionMonthList.totalAmount.incompleteExpense) }}
|
||||
</span>
|
||||
</small>
|
||||
@@ -199,7 +199,7 @@
|
||||
</div>
|
||||
<div class="item-after">
|
||||
<div class="transaction-amount" v-if="transaction.sourceAccount"
|
||||
:class="{ 'text-color-teal': transaction.type === allTransactionTypes.Expense, 'text-color-red': transaction.type === allTransactionTypes.Income }">
|
||||
:class="{ 'text-expense': transaction.type === allTransactionTypes.Expense, 'text-income': transaction.type === allTransactionTypes.Income }">
|
||||
<span>{{ getTransactionDisplayAmount(transaction) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,6 +33,8 @@
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Digit Grouping Symbol" title="Comma (,)" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Digit Grouping" title="Thousands Separator" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Currency Display Mode" title="Currency Symbol" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Expense Amount Color" title="Amount Color" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Income Amount Color" title="Amount Color" link="#"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
|
||||
@@ -262,6 +264,32 @@
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Expense Amount Color')"
|
||||
:title="getNameByKeyValue(allExpenseAmountColorTypes, newProfile.expenseAmountColor, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Color'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Expense Amount Color'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.expenseAmountColor">
|
||||
<option :value="format.type"
|
||||
:key="format.type"
|
||||
v-for="format in allExpenseAmountColorTypes">{{ format.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Income Amount Color')"
|
||||
:title="getNameByKeyValue(allIncomeAmountColorTypes, newProfile.incomeAmountColor, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Color'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Income Amount Color'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.incomeAmountColor">
|
||||
<option :value="format.type"
|
||||
:key="format.type"
|
||||
v-for="format in allIncomeAmountColorTypes">{{ format.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="$t(langAndRegionInputInvalidProblemMessage)"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
@@ -297,6 +325,7 @@ import { useAccountsStore } from '@/stores/account.js';
|
||||
import { getNameByKeyValue } from '@/lib/common.js';
|
||||
import { getCategorizedAccounts } from '@/lib/account.js';
|
||||
import { isUserVerifyEmailEnabled } from '@/lib/server_settings.js';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
@@ -321,7 +350,9 @@ export default {
|
||||
decimalSeparator: 0,
|
||||
digitGroupingSymbol: 0,
|
||||
digitGrouping: 0,
|
||||
currencyDisplayType: 0
|
||||
currencyDisplayType: 0,
|
||||
expenseAmountColor: 0,
|
||||
incomeAmountColor: 0
|
||||
},
|
||||
oldProfile: {
|
||||
email: '',
|
||||
@@ -338,7 +369,9 @@ export default {
|
||||
decimalSeparator: 0,
|
||||
digitGroupingSymbol: 0,
|
||||
digitGrouping: 0,
|
||||
currencyDisplayType: 0
|
||||
currencyDisplayType: 0,
|
||||
expenseAmountColor: 0,
|
||||
incomeAmountColor: 0
|
||||
},
|
||||
emailVerified: false,
|
||||
currentPassword: '',
|
||||
@@ -395,6 +428,12 @@ export default {
|
||||
allCurrencyDisplayTypes() {
|
||||
return this.$locale.getAllCurrencyDisplayTypes(this.settingsStore, this.userStore);
|
||||
},
|
||||
allExpenseAmountColorTypes() {
|
||||
return this.$locale.getAllExpenseAmountColors();
|
||||
},
|
||||
allIncomeAmountColorTypes() {
|
||||
return this.$locale.getAllIncomeAmountColors();
|
||||
},
|
||||
allTransactionEditScopeTypes() {
|
||||
return this.$locale.getAllTransactionEditScopeTypes();
|
||||
},
|
||||
@@ -443,7 +482,9 @@ export default {
|
||||
this.newProfile.decimalSeparator === this.oldProfile.decimalSeparator &&
|
||||
this.newProfile.digitGroupingSymbol === this.oldProfile.digitGroupingSymbol &&
|
||||
this.newProfile.digitGrouping === this.oldProfile.digitGrouping &&
|
||||
this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType) {
|
||||
this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType &&
|
||||
this.newProfile.expenseAmountColor === this.oldProfile.expenseAmountColor &&
|
||||
this.newProfile.incomeAmountColor === this.oldProfile.incomeAmountColor) {
|
||||
return 'Nothing has been modified';
|
||||
} else if (!this.newProfile.password && this.newProfile.confirmPassword) {
|
||||
return 'Password cannot be blank';
|
||||
@@ -538,6 +579,8 @@ export default {
|
||||
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
self.$toast('Your profile has been successfully updated');
|
||||
@@ -596,6 +639,8 @@ export default {
|
||||
this.oldProfile.digitGroupingSymbol = profile.digitGroupingSymbol;
|
||||
this.oldProfile.digitGrouping = profile.digitGrouping;
|
||||
this.oldProfile.currencyDisplayType = profile.currencyDisplayType;
|
||||
this.oldProfile.expenseAmountColor = profile.expenseAmountColor;
|
||||
this.oldProfile.incomeAmountColor = profile.incomeAmountColor;
|
||||
|
||||
this.newProfile.email = this.oldProfile.email
|
||||
this.newProfile.nickname = this.oldProfile.nickname;
|
||||
@@ -612,6 +657,8 @@ export default {
|
||||
this.newProfile.digitGroupingSymbol = this.oldProfile.digitGroupingSymbol;
|
||||
this.newProfile.digitGrouping = this.oldProfile.digitGrouping;
|
||||
this.newProfile.currencyDisplayType = this.oldProfile.currencyDisplayType;
|
||||
this.newProfile.expenseAmountColor = this.oldProfile.expenseAmountColor;
|
||||
this.newProfile.incomeAmountColor = this.oldProfile.incomeAmountColor;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user