support toggle whether show total amount in transaction list page

src/lib/settings.js

@@ -16,6 +16,7 @@ const defaultSettings = {
     thousandsSeparator: true,
     currencyDisplayMode: currencyConstants.defaultCurrencyDisplayMode,
     showAmountInHomePage: true,
+    showTotalAmountInTransactionListPage: true,
     showAccountBalance: true,
     statistics: {
         defaultChartType: statisticsConstants.defaultChartType,
@@ -145,6 +146,8 @@ export default {
     setCurrencyDisplayMode: value => setOption('currencyDisplayMode', value),
     isShowAmountInHomePage: () => getOption('showAmountInHomePage'),
     setShowAmountInHomePage: value => setOption('showAmountInHomePage', value),
+    isShowTotalAmountInTransactionListPage: () => getOption('showTotalAmountInTransactionListPage'),
+    setShowTotalAmountInTransactionListPage: value => setOption('showTotalAmountInTransactionListPage', value),
     isShowAccountBalance: () => getOption('showAccountBalance'),
     setShowAccountBalance: value => setOption('showAccountBalance', value),
     getStatisticsDefaultChartType: () => getSubOption('statistics', 'defaultChartType'),

src/locales/en.js

@@ -848,6 +848,7 @@ export default {
     'Currency Symbol': 'Currency Symbol',
     'Show Amount In Home Page': 'Show Amount In Home Page',
     'Show Account Balance': 'Show Account Balance',
+    'Show Total Amount In Transaction List Page': 'Show Total Amount In Transaction List Page',
     'Enable Animate': 'Enable Animate',
     'Enable Auto Dark Mode': 'Enable Auto Dark Mode',
     'Use preset transaction categories': 'Use preset transaction categories',

src/locales/zh_Hans.js

@@ -848,6 +848,7 @@ export default {
     'Currency Symbol': '货币符号',
     'Show Amount In Home Page': '首页显示金额',
     'Show Account Balance': '显示账户余额',
+    'Show Total Amount In Transaction List Page': '交易列表页显示总金额',
     'Enable Animate': '启用动画',
     'Enable Auto Dark Mode': '启用自动深色模式',
     'Use preset transaction categories': '使用预设交易分类',

src/views/mobile/Settings.vue

@@ -79,6 +79,11 @@
                         <f7-toggle :checked="showAccountBalance" @toggle:change="showAccountBalance = $event"></f7-toggle>
                     </f7-list-item>
 
+                    <f7-list-item>
+                        <span>{{ $t('Show Total Amount In Transaction List Page') }}</span>
+                        <f7-toggle :checked="showTotalAmountInTransactionListPage" @toggle:change="showTotalAmountInTransactionListPage = $event"></f7-toggle>
+                    </f7-list-item>
+
                     <f7-list-item :title="$t('Statistics Settings')" link="/statistic/settings"></f7-list-item>
 
                     <f7-list-item>
@@ -181,6 +186,14 @@ export default {
                 this.$settings.setShowAccountBalance(value);
             }
         },
+        showTotalAmountInTransactionListPage: {
+            get: function () {
+                return this.$settings.isShowTotalAmountInTransactionListPage();
+            },
+            set: function (value) {
+                this.$settings.setShowTotalAmountInTransactionListPage(value);
+            }
+        },
         isEnableAnimate: {
             get: function () {
                 return this.$settings.isEnableAnimate();

src/views/mobile/transactions/List.vue

@@ -43,7 +43,7 @@
             <f7-card-header>
                 <div class="full-line">
                     <small class="card-header-content">YYYY-MM</small>
-                    <small class="transaction-amount-statistics">
+                    <small class="transaction-amount-statistics" v-if="showTotalAmountInTransactionListPage">
                         <span>0.00 USD</span>
                         <span>0.00 USD</span>
                     </small>
@@ -170,7 +170,7 @@
             <f7-card-header>
                 <div class="full-line">
                     <small class="card-header-content">YYYY-MM</small>
-                    <small class="transaction-amount-statistics">
+                    <small class="transaction-amount-statistics" v-if="showTotalAmountInTransactionListPage">
                         <span>0.00 USD</span>
                         <span>0.00 USD</span>
                     </small>
@@ -266,7 +266,7 @@
                         <small class="card-header-content">
                             <span>{{ transactionMonthList.yearMonth | moment($t('format.yearMonth.long')) }}</span>
                         </small>
-                        <small class="transaction-amount-statistics" v-if="transactionMonthList.totalAmount">
+                        <small class="transaction-amount-statistics" v-if="showTotalAmountInTransactionListPage && transactionMonthList.totalAmount">
                             <span class="text-color-red">
                                 {{ transactionMonthList.totalAmount.income | currency(defaultCurrency) | income(transactionMonthList.totalAmount.incompleteIncome) }}
                             </span>
@@ -505,11 +505,14 @@
 <script>
 export default {
     data() {
+        const self = this;
+
         return {
             loading: true,
             loadingError: null,
             loadingMore: false,
             transactionToDelete: null,
+            showTotalAmountInTransactionListPage: self.$settings.isShowTotalAmountInTransactionListPage(),
             showDatePopover: false,
             showTypePopover: false,
             showCategoryPopover: false,