support modifying statistics page default settings

2026-05-19 17:24:26 +08:00 · 2021-01-31 22:57:13 +08:00
parent 088170edb3
commit 989a754fe3
9 changed files with 222 additions and 6 deletions
@@ -0,0 +1,116 @@
+<template>
+    <f7-page>
+        <f7-navbar :title="$t('Statistics Settings')" :back-link="$t('Back')"></f7-navbar>
+
+        <f7-card>
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list>
+                    <f7-list-item
+                        :title="$t('Default Chart Type')"
+                        smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
+                        <select v-model="defaultChartType">
+                            <option :value="$constants.statistics.allChartTypes.Pie">{{ $t('Pie Chart') }}</option>
+                            <option :value="$constants.statistics.allChartTypes.Bar">{{ $t('Bar Chart') }}</option>
+                        </select>
+                    </f7-list-item>
+
+                    <f7-list-item
+                        :title="$t('Default Chart Data Type')"
+                        smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
+                        <select v-model="defaultChartDataType">
+                            <option v-for="chartDataType in allChartDataTypes"
+                                    :key="chartDataType.type"
+                                    :value="chartDataType.type">{{ chartDataType.name | localized }}</option>
+                        </select>
+                    </f7-list-item>
+
+                    <f7-list-item
+                        :title="$t('Default Date Range')"
+                        smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
+                        <select v-model="defaultDateRange">
+                            <option v-for="dateRange in allDateRanges"
+                                    :key="dateRange.type"
+                                    :value="dateRange.type">{{ dateRange.name | localized }}</option>
+                        </select>
+                    </f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+    </f7-page>
+</template>
+
+<script>
+export default {
+    computed: {
+        allChartDataTypes() {
+            return [
+                {
+                    type: this.$constants.statistics.allChartDataTypes.ExpenseByAccount,
+                    name: 'Expense By Account'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory,
+                    name: 'Expense By Primary Category'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory,
+                    name: 'Expense By Secondary Category'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.IncomeByAccount,
+                    name: 'Income By Account'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.IncomeByPrimaryCategory,
+                    name: 'Income By Primary Category'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory,
+                    name: 'Income By Secondary Category'
+                },
+            ];
+        },
+        allDateRanges() {
+            const allDateRanges = [];
+
+            for (let dateRangeField in this.$constants.datetime.allDateRanges) {
+                if (!Object.prototype.hasOwnProperty.call(this.$constants.datetime.allDateRanges, dateRangeField)) {
+                    continue;
+                }
+
+                const dateRangeType = this.$constants.datetime.allDateRanges[dateRangeField];
+
+                if (dateRangeType.type !== this.$constants.datetime.allDateRanges.Custom.type) {
+                    allDateRanges.push(dateRangeType);
+                }
+            }
+
+            return allDateRanges;
+        },
+        defaultChartType: {
+            get: function () {
+                return this.$settings.getStatisticsDefaultChartType();
+            },
+            set: function (value) {
+                this.$settings.setStatisticsDefaultChartType(value);
+            }
+        },
+        defaultChartDataType: {
+            get: function () {
+                return this.$settings.getStatisticsDefaultChartDataType();
+            },
+            set: function (value) {
+                this.$settings.setStatisticsDefaultChartDataType(value);
+            }
+        },
+        defaultDateRange: {
+            get: function () {
+                return this.$settings.getStatisticsDefaultDateRange();
+            },
+            set: function (value) {
+                this.$settings.setStatisticsDefaultDateRange(value);
+            }
+        }
+    }
+};
+</script>