From 94af9be5e4611aea00135a4ea0912799fa61cc32 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 10 Jan 2021 22:06:26 +0800
Subject: [PATCH] support hiding amount in home page

---
 src/lib/settings.js           |  3 +++
 src/locales/en.js             |  1 +
 src/locales/zh_Hans.js        |  1 +
 src/views/mobile/Home.vue     | 34 +++++++++++++++++++++++++---------
 src/views/mobile/Settings.vue | 13 +++++++++++++
 5 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/lib/settings.js b/src/lib/settings.js
index 9704e4f7..786b7304 100644
--- a/src/lib/settings.js
+++ b/src/lib/settings.js
@@ -11,6 +11,7 @@ const defaultSettings = {
     autoUpdateExchangeRatesData: true,
     thousandsSeparator: true,
     currencyDisplayMode: 'symbol', // or 'none' or 'code' or 'name'
+    showAmountInHomePage: true,
     showAccountBalance: true,
     animate: true,
     autoDarkMode: true
@@ -88,6 +89,8 @@ export default {
     setEnableThousandsSeparator: value => setOption('thousandsSeparator', value),
     getCurrencyDisplayMode: () => getOption('currencyDisplayMode'),
     setCurrencyDisplayMode: value => setOption('currencyDisplayMode', value),
+    isShowAmountInHomePage: () => getOption('showAmountInHomePage'),
+    setShowAmountInHomePage: value => setOption('showAmountInHomePage', value),
     isShowAccountBalance: () => getOption('showAccountBalance'),
     setShowAccountBalance: value => setOption('showAccountBalance', value),
     isEnableAnimate: () => getOption('animate'),
diff --git a/src/locales/en.js b/src/locales/en.js
index 8d1954f8..01917764 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -593,6 +593,7 @@ export default {
     'Currency Code': 'Currency Code',
     'Currency Name': 'Currency Name',
     'Currency Symbol': 'Currency Symbol',
+    'Show Amount In Home Page': 'Show Amount In Home Page',
     'Show Account Balance': 'Show Account Balance',
     'Enable Animate': 'Enable Animate',
     'Enable Auto Dark Mode': 'Enable Auto Dark Mode',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 5eb64c5e..274b5f42 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -593,6 +593,7 @@ export default {
     'Currency Code': '货币代码',
     'Currency Name': '货币名称',
     'Currency Symbol': '货币符号',
+    'Show Amount In Home Page': '首页显示金额',
     'Show Account Balance': '显示账户余额',
     'Enable Animate': '启用动画',
     'Enable Auto Dark Mode': '启用自动深色模式',
diff --git a/src/views/mobile/Home.vue b/src/views/mobile/Home.vue
index 23e0151a..679fb6b9 100644
--- a/src/views/mobile/Home.vue
+++ b/src/views/mobile/Home.vue
@@ -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>
diff --git a/src/views/mobile/Settings.vue b/src/views/mobile/Settings.vue
index b04baf73..549aceac 100644
--- a/src/views/mobile/Settings.vue
+++ b/src/views/mobile/Settings.vue
@@ -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();