support hiding amount in home page

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'),

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',

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': '启用自动深色模式',

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>

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();