support hiding amount in home page

This commit is contained in:
MaysWind
2021-01-10 22:06:26 +08:00
parent cfed32b314
commit 94af9be5e4
5 changed files with 43 additions and 9 deletions
+25 -9
View File
@@ -22,11 +22,11 @@
<div slot="after">
<div class="text-color-red">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.today">{{ transactionOverview.today.incomeAmount | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.today">{{ transactionOverview.today.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
</div>
<div class="text-color-teal">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.today">{{ transactionOverview.today.expenseAmount | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.today">{{ transactionOverview.today.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
</div>
</div>
</f7-list-item>
@@ -49,11 +49,11 @@
<div slot="after">
<div class="text-color-red">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisWeek">{{ transactionOverview.thisWeek.incomeAmount | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisWeek">{{ transactionOverview.thisWeek.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
</div>
<div class="text-color-teal">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisWeek">{{ transactionOverview.thisWeek.expenseAmount | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisWeek">{{ transactionOverview.thisWeek.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
</div>
</div>
</f7-list-item>
@@ -76,11 +76,11 @@
<div slot="after">
<div class="text-color-red">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisMonth">{{ transactionOverview.thisMonth.incomeAmount | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisMonth">{{ transactionOverview.thisMonth.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
</div>
<div class="text-color-teal">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisMonth">{{ transactionOverview.thisMonth.expenseAmount | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisMonth">{{ transactionOverview.thisMonth.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
</div>
</div>
</f7-list-item>
@@ -100,11 +100,11 @@
<div slot="after">
<div class="text-color-red">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisYear">{{ transactionOverview.thisYear.incomeAmount | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisYear">{{ transactionOverview.thisYear.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
</div>
<div class="text-color-teal">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisYear">{{ transactionOverview.thisYear.expenseAmount | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisYear">{{ transactionOverview.thisYear.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
</div>
</div>
</f7-list-item>
@@ -143,7 +143,8 @@ export default {
return {
dateRange: self.getCurrentDateRange(),
loading: true
loading: true,
showAmountInHomePage: this.$settings.isShowAmountInHomePage()
};
},
computed: {
@@ -174,6 +175,8 @@ export default {
},
methods: {
onPageAfterIn() {
this.showAmountInHomePage = this.$settings.isShowAmountInHomePage();
const newDateRange = this.getCurrentDateRange();
if (newDateRange.today.startTime !== this.dateRange.today.startTime ||
@@ -205,6 +208,10 @@ export default {
}
});
},
toggleShowAmountInHomePage() {
this.showAmountInHomePage = !this.showAmountInHomePage;
this.$settings.setShowAmountInHomePage(this.showAmountInHomePage);
},
getCurrentDateRange() {
const self = this;
@@ -227,6 +234,15 @@ export default {
}
};
}
},
filters: {
amount(amount, showAmount) {
if (!showAmount) {
return '***';
}
return amount;
}
}
}
</script>
+13
View File
@@ -58,6 +58,11 @@
</select>
</f7-list-item>
<f7-list-item>
<span>{{ $t('Show Amount In Home Page') }}</span>
<f7-toggle :checked="showAmountInHomePage" @toggle:change="showAmountInHomePage = $event"></f7-toggle>
</f7-list-item>
<f7-list-item>
<span>{{ $t('Show Account Balance') }}</span>
<f7-toggle :checked="showAccountBalance" @toggle:change="showAccountBalance = $event"></f7-toggle>
@@ -139,6 +144,14 @@ export default {
this.$settings.setCurrencyDisplayMode(value);
}
},
showAmountInHomePage: {
get: function () {
return this.$settings.isShowAmountInHomePage();
},
set: function (value) {
this.$settings.setShowAmountInHomePage(value);
}
},
showAccountBalance: {
get: function () {
return this.$settings.isShowAccountBalance();