mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-18 16:54:25 +08:00
migrate statistics setting page to composition API and typescript
This commit is contained in:
MaysWind
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Statistics Settings')">
|
||||
<v-card :title="tt('Statistics Settings')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
@@ -10,8 +10,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Chart Data Type')"
|
||||
:placeholder="$t('Default Chart Data Type')"
|
||||
:label="tt('Default Chart Data Type')"
|
||||
:placeholder="tt('Default Chart Data Type')"
|
||||
:items="allChartDataTypes"
|
||||
v-model="defaultChartDataType"
|
||||
/>
|
||||
@@ -22,8 +22,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Timezone Used for Date Range')"
|
||||
:placeholder="$t('Timezone Used for Date Range')"
|
||||
:label="tt('Timezone Used for Date Range')"
|
||||
:placeholder="tt('Timezone Used for Date Range')"
|
||||
:items="allTimezoneTypesUsedForStatistics"
|
||||
v-model="defaultTimezoneType"
|
||||
/>
|
||||
@@ -34,8 +34,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Sort Order')"
|
||||
:placeholder="$t('Default Sort Order')"
|
||||
:label="tt('Default Sort Order')"
|
||||
:placeholder="tt('Default Sort Order')"
|
||||
:items="allSortingTypes"
|
||||
v-model="defaultSortingType"
|
||||
/>
|
||||
@@ -47,7 +47,7 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Categorical Analysis Settings')">
|
||||
<v-card :title="tt('Categorical Analysis Settings')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
@@ -56,8 +56,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Chart Type')"
|
||||
:placeholder="$t('Default Chart Type')"
|
||||
:label="tt('Default Chart Type')"
|
||||
:placeholder="tt('Default Chart Type')"
|
||||
:items="allCategoricalChartTypes"
|
||||
v-model="defaultCategoricalChartType"
|
||||
/>
|
||||
@@ -68,8 +68,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Date Range')"
|
||||
:placeholder="$t('Default Date Range')"
|
||||
:label="tt('Default Date Range')"
|
||||
:placeholder="tt('Default Date Range')"
|
||||
:items="allCategoricalChartDateRanges"
|
||||
v-model="defaultCategoricalChartDateRange"
|
||||
/>
|
||||
@@ -81,7 +81,7 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Trend Analysis Settings')">
|
||||
<v-card :title="tt('Trend Analysis Settings')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
@@ -90,8 +90,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Chart Type')"
|
||||
:placeholder="$t('Default Chart Type')"
|
||||
:label="tt('Default Chart Type')"
|
||||
:placeholder="tt('Default Chart Type')"
|
||||
:items="allTrendChartTypes"
|
||||
v-model="defaultTrendChartType"
|
||||
/>
|
||||
@@ -102,8 +102,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Date Range')"
|
||||
:placeholder="$t('Default Date Range')"
|
||||
:label="tt('Default Date Range')"
|
||||
:placeholder="tt('Default Date Range')"
|
||||
:items="allTrendChartDateRanges"
|
||||
v-model="defaultTrendChartDateRange"
|
||||
/>
|
||||
@@ -124,101 +124,29 @@
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
|
||||
import { DateRangeScene } from '@/core/datetime.ts';
|
||||
import { StatisticsAnalysisType } from '@/core/statistics.ts';
|
||||
|
||||
<script setup lang="ts">
|
||||
import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
|
||||
import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AccountFilterSettingsCard,
|
||||
CategoryFilterSettingsCard
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useSettingsStore),
|
||||
allChartDataTypes() {
|
||||
return this.$locale.getAllStatisticsChartDataTypes(StatisticsAnalysisType.CategoricalAnalysis);
|
||||
},
|
||||
allTimezoneTypesUsedForStatistics() {
|
||||
return this.$locale.getAllTimezoneTypesUsedForStatistics();
|
||||
},
|
||||
allSortingTypes() {
|
||||
return this.$locale.getAllStatisticsSortingTypes();
|
||||
},
|
||||
allCategoricalChartTypes() {
|
||||
return this.$locale.getAllCategoricalChartTypes();
|
||||
},
|
||||
allCategoricalChartDateRanges() {
|
||||
return this.$locale.getAllDateRanges(DateRangeScene.Normal, false);
|
||||
},
|
||||
allTrendChartTypes() {
|
||||
return this.$locale.getAllTrendChartTypes();
|
||||
},
|
||||
allTrendChartDateRanges() {
|
||||
return this.$locale.getAllDateRanges(DateRangeScene.TrendAnalysis, false);
|
||||
},
|
||||
defaultChartDataType: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultChartDataType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultChartDataType(value);
|
||||
}
|
||||
},
|
||||
defaultTimezoneType: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultTimezoneType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultTimezoneType(value);
|
||||
}
|
||||
},
|
||||
defaultSortingType: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultSortingType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsSortingType(value);
|
||||
}
|
||||
},
|
||||
defaultCategoricalChartType: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultCategoricalChartType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultCategoricalChartType(value);
|
||||
}
|
||||
},
|
||||
defaultCategoricalChartDateRange: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultCategoricalChartDataRangeType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultCategoricalChartDateRange(value);
|
||||
}
|
||||
},
|
||||
defaultTrendChartType: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultTrendChartType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultTrendChartType(value);
|
||||
}
|
||||
},
|
||||
defaultTrendChartDateRange: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultTrendChartDataRangeType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultTrendChartDateRange(value);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useStatisticsSettingPageBase } from '@/views/base/statistics/StatisticsSettingPageBase.ts';
|
||||
|
||||
const { tt } = useI18n();
|
||||
const {
|
||||
allChartDataTypes,
|
||||
allTimezoneTypesUsedForStatistics,
|
||||
allSortingTypes,
|
||||
allCategoricalChartTypes,
|
||||
allCategoricalChartDateRanges,
|
||||
allTrendChartTypes,
|
||||
allTrendChartDateRanges,
|
||||
defaultChartDataType,
|
||||
defaultTimezoneType,
|
||||
defaultSortingType,
|
||||
defaultCategoricalChartType,
|
||||
defaultCategoricalChartDateRange,
|
||||
defaultTrendChartType,
|
||||
defaultTrendChartDateRange
|
||||
} = useStatisticsSettingPageBase();
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user