mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-16 07:57:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

support setting expense / income amount color

Browse Source
This commit is contained in:
MaysWind
2024-07-13 20:46:42 +08:00
parent 84a96d80b7
commit b1343ba92a
29 changed files with 586 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/SignupPage.vue
+1 -1
View File
@@ -223,7 +223,7 @@
:append-icon="icons.next"
@click="switchToNextTab"
v-if="currentStep === 'basicSetting'">{{ $t('Next') }}</v-btn>
<v-btn color="expense"
<v-btn color="teal"
:disabled="submitting || navigateToHomePage"
:append-icon="!submitting ? icons.submit : null"
@click="submit"
src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
+1 -1
View File
@@ -16,7 +16,7 @@
</v-btn>
</v-card-text>
<v-card-text class="mt-1 pb-1">
<div class="font-weight-semibold text-truncate text-red text-h4 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
<div class="font-weight-semibold text-truncate text-h4 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
<v-skeleton-loader class="skeleton-no-margin mt-4 mb-8" type="text" width="120px" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
<div class="text-truncate text-h5 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
<v-skeleton-loader class="skeleton-no-margin mb-1" style="padding-bottom: 2px" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue
+16 -8
View File
@@ -25,6 +25,8 @@
</template>
<script>
import { useTheme } from 'vuetify';
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/setting.js';
import { useUserStore } from '@/stores/user.js';
@@ -34,6 +36,7 @@ import {
parseDateFromUnixTime,
getMonthName
} from '@/lib/datetime.js';
import { getExpenseAndIncomeAmountColor } from '@/lib/ui.js';
export default {
props: [
@@ -77,6 +80,8 @@ export default {
let minAmount = 0;
let maxAmount = 0;
const expenseIncomeAmountColor = getExpenseAndIncomeAmountColor(this.userStore.currentUserExpenseAmountColor, this.userStore.currentUserIncomeAmountColor, this.isDarkMode);
if (self.data) {
for (let i = 0; i < self.data.length; i++) {
const item = self.data[i];
@@ -119,9 +124,7 @@ export default {
},
formatter: params => {
let incomeAmount = 0;
let incomeColor = '#cc4a66';
let expenseAmount = 0;
let expenseColor = '#4dd291';
for (let i = 0; i < params.length; i++) {
const param = params[i];
@@ -130,10 +133,8 @@ export default {
if (param.seriesId === 'seriesIncome') {
incomeAmount = self.getDisplayIncomeAmount(data);
incomeColor = param.color;
} else if (param.seriesId === 'seriesExpense') {
expenseAmount = self.getDisplayExpenseAmount(data);
expenseColor = param.color;
}
}
@@ -145,11 +146,11 @@ export default {
`</thead>` +
`<tbody>` +
`<tr>` +
`<td><span class="overview-monthly-chart-tooltip-indicator mr-1" style="background-color: ${incomeColor}"></span><span class="mr-4">${self.$t('Income')}</span></td>` +
`<td><span class="overview-monthly-chart-tooltip-indicator bg-income mr-1"></span><span class="mr-4">${self.$t('Income')}</span></td>` +
`<td><strong>${incomeAmount}</strong></td>` +
`</tr>` +
`<tr>` +
`<td><span class="overview-monthly-chart-tooltip-indicator mr-1" style="background-color: ${expenseColor}"></span><span class="mr-4">${self.$t('Expense')}</span></td>` +
`<td><span class="overview-monthly-chart-tooltip-indicator bg-expense mr-1"></span><span class="mr-4">${self.$t('Expense')}</span></td>` +
`<td><strong>${expenseAmount}</strong></td>` +
`</tr>` +
`</tbody>` +
@@ -221,7 +222,7 @@ export default {
yAxisIndex: 0,
stack: 'Total',
itemStyle: {
color: '#cc4a66',
color: expenseIncomeAmountColor.incomeAmountColor,
borderRadius: 16
},
emphasis: {
@@ -240,7 +241,7 @@ export default {
yAxisIndex: 1,
stack: 'Total',
itemStyle: {
color: '#4dd291',
color: expenseIncomeAmountColor.expenseAmountColor,
borderRadius: 16
},
emphasis: {
@@ -256,6 +257,13 @@ export default {
};
}
},
setup() {
const theme = useTheme();
return {
globalTheme: theme
};
},
methods: {
clickItem: function (e) {
if (!this.enableClickItem || !this.data || e.componentType !== 'series') {
src/views/desktop/transactions/ListPage.vue
+1 -1
View File
@@ -93,7 +93,7 @@
{{ currentMonthTotalAmount.income }}
</span>
<span class="text-subtitle-1 ml-3">{{ $t('Total Expense') }}</span>
<span class="text-income ml-2" v-if="loading">
<span class="text-expense ml-2" v-if="loading">
<v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
</span>
<span class="text-expense ml-2" v-else-if="!loading">
src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+48 -3
View File
@@ -257,6 +257,32 @@
v-model="newProfile.currencyDisplayType"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-value="type"
persistent-placeholder
:disabled="loading || saving"
:label="$t('Expense Amount Color')"
:placeholder="$t('Expense Amount Color')"
:items="allExpenseAmountColorTypes"
v-model="newProfile.expenseAmountColor"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-value="type"
persistent-placeholder
:disabled="loading || saving"
:label="$t('Income Amount Color')"
:placeholder="$t('Income Amount Color')"
:items="allIncomeAmountColorTypes"
v-model="newProfile.incomeAmountColor"
/>
</v-col>
</v-row>
</v-card-text>
@@ -290,6 +316,7 @@ import datetimeConstants from '@/consts/datetime.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';
import {
mdiAccount
@@ -317,7 +344,9 @@ export default {
decimalSeparator: 0,
digitGroupingSymbol: 0,
digitGrouping: 0,
currencyDisplayType: 0
currencyDisplayType: 0,
expenseAmountColor: 0,
incomeAmountColor: 0
},
oldProfile: {
email: '',
@@ -334,7 +363,9 @@ export default {
decimalSeparator: 0,
digitGroupingSymbol: 0,
digitGrouping: 0,
currencyDisplayType: 0
currencyDisplayType: 0,
expenseAmountColor: 0,
incomeAmountColor: 0
},
emailVerified: false,
loading: true,
@@ -389,6 +420,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();
},
@@ -424,7 +461,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 {
return null;
@@ -503,6 +542,8 @@ export default {
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
}
self.$refs.snackbar.showMessage('Your profile has been successfully updated');
@@ -555,6 +596,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;
@@ -571,6 +614,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;
}
}
};
src/views/mobile/HomePage.vue
+8 -8
View File
@@ -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>
src/views/mobile/settings/TextSizeSettingsPage.vue
+2 -2
View File
@@ -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>
src/views/mobile/statistics/TransactionPage.vue
+1 -1
View File
@@ -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>
src/views/mobile/transactions/EditPage.vue
+2 -2
View File
@@ -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
};
src/views/mobile/transactions/ListPage.vue
+3 -3
View File
@@ -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>
src/views/mobile/users/UserProfilePage.vue
+50 -3
View File
@@ -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;
}
}
};