mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-17 08:14:25 +08:00
add chart date type settings for trend analysis
This commit is contained in:
MaysWind
@@ -17,18 +17,6 @@
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Date Range')"
|
||||
:placeholder="$t('Default Date Range')"
|
||||
:items="allDateRanges"
|
||||
v-model="defaultDateRange"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
item-title="displayName"
|
||||
@@ -74,6 +62,18 @@
|
||||
v-model="defaultCategoricalChartType"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Date Range')"
|
||||
:placeholder="$t('Default Date Range')"
|
||||
:items="allCategoricalChartDateRanges"
|
||||
v-model="defaultCategoricalChartDateRange"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-form>
|
||||
@@ -96,6 +96,18 @@
|
||||
v-model="defaultTrendChartType"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Default Date Range')"
|
||||
:placeholder="$t('Default Date Range')"
|
||||
:items="allTrendChartDateRanges"
|
||||
v-model="defaultTrendChartDateRange"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-form>
|
||||
@@ -116,7 +128,7 @@
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.js';
|
||||
|
||||
import statisticsConstants from '@/consts/statistics.js';
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
|
||||
import AccountFilterSettingsCard from '@/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue';
|
||||
import CategoryFilterSettingsCard from '@/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue';
|
||||
@@ -131,20 +143,23 @@ export default {
|
||||
allChartDataTypes() {
|
||||
return this.$locale.getAllStatisticsChartDataTypes();
|
||||
},
|
||||
allTimezoneTypesUsedForStatistics() {
|
||||
return this.$locale.getAllTimezoneTypesUsedForStatistics();
|
||||
},
|
||||
allSortingTypes() {
|
||||
return this.$locale.getAllStatisticsSortingTypes();
|
||||
},
|
||||
allCategoricalChartTypes() {
|
||||
return this.$locale.getAllCategoricalChartTypes();
|
||||
},
|
||||
allCategoricalChartDateRanges() {
|
||||
return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, false);
|
||||
},
|
||||
allTrendChartTypes() {
|
||||
return this.$locale.getAllTrendChartTypes();
|
||||
},
|
||||
allDateRanges() {
|
||||
return this.$locale.getAllDateRanges(false);
|
||||
},
|
||||
allTimezoneTypesUsedForStatistics() {
|
||||
return this.$locale.getAllTimezoneTypesUsedForStatistics();
|
||||
allTrendChartDateRanges() {
|
||||
return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.TrendAnalysis, false);
|
||||
},
|
||||
defaultChartDataType: {
|
||||
get: function () {
|
||||
@@ -154,14 +169,6 @@ export default {
|
||||
this.settingsStore.setStatisticsDefaultChartDataType(value);
|
||||
}
|
||||
},
|
||||
defaultDateRange: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultDataRangeType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultDateRange(value);
|
||||
}
|
||||
},
|
||||
defaultTimezoneType: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultTimezoneType;
|
||||
@@ -186,6 +193,14 @@ export default {
|
||||
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;
|
||||
@@ -193,7 +208,15 @@ export default {
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultTrendChartType(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultTrendChartDateRange: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultTrendChartDataRangeType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultTrendChartDateRange(value);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -58,8 +58,8 @@
|
||||
<v-btn-group class="ml-4" color="default" density="comfortable" variant="outlined" divided
|
||||
v-if="analysisType === allAnalysisTypes.CategoricalAnalysis">
|
||||
<v-btn :icon="icons.left"
|
||||
:disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
|
||||
@click="shiftDateRange(query.startTime, query.endTime, -1)"/>
|
||||
:disabled="loading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
|
||||
@click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, -1)"/>
|
||||
<v-menu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<v-btn :disabled="loading || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
|
||||
@@ -67,13 +67,13 @@
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item :key="dateRange.type" :value="dateRange.type"
|
||||
:append-icon="(query.dateType === dateRange.type ? icons.check : null)"
|
||||
v-for="dateRange in allDateRanges">
|
||||
:append-icon="(query.categoricalChartDateType === dateRange.type ? icons.check : null)"
|
||||
v-for="dateRange in allDateRangesArray">
|
||||
<v-list-item-title
|
||||
class="cursor-pointer"
|
||||
@click="setDateFilter(dateRange.type)">
|
||||
{{ $t(dateRange.name) }}
|
||||
<div class="statistics-custom-datetime-range" v-if="dateRange.type === allDateRanges.Custom.type && query.dateType === allDateRanges.Custom.type && query.startTime && query.endTime">
|
||||
{{ dateRange.displayName }}
|
||||
<div class="statistics-custom-datetime-range" v-if="dateRange.type === allDateRanges.Custom.type && query.categoricalChartDateType === allDateRanges.Custom.type && query.categoricalChartStartTime && query.categoricalChartEndTime">
|
||||
<span>{{ queryStartTime }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
@@ -84,8 +84,8 @@
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn :icon="icons.right"
|
||||
:disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
|
||||
@click="shiftDateRange(query.startTime, query.endTime, 1)"/>
|
||||
:disabled="loading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
|
||||
@click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, 1)"/>
|
||||
</v-btn-group>
|
||||
|
||||
<v-btn density="compact" color="default" variant="text" size="24"
|
||||
@@ -231,8 +231,8 @@
|
||||
</v-row>
|
||||
|
||||
<date-range-selection-dialog :title="$t('Custom Date Range')"
|
||||
:min-time="query.startTime"
|
||||
:max-time="query.endTime"
|
||||
:min-time="query.categoricalChartStartTime"
|
||||
:max-time="query.categoricalChartEndTime"
|
||||
v-model:show="showCustomDateRangeDialog"
|
||||
@dateRange:change="setCustomDateFilter" />
|
||||
|
||||
@@ -263,7 +263,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
|
||||
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
import statisticsConstants from '@/consts/statistics.js';
|
||||
import { isArray, limitText, formatPercent } from '@/lib/common.js'
|
||||
import { limitText, formatPercent } from '@/lib/common.js'
|
||||
import {
|
||||
getShiftedDateRangeAndDateType,
|
||||
getDateRangeByDateType
|
||||
@@ -360,10 +360,10 @@ export default {
|
||||
}
|
||||
},
|
||||
queryStartTime() {
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.startTime);
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartStartTime);
|
||||
},
|
||||
queryEndTime() {
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime);
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartEndTime);
|
||||
},
|
||||
allAnalysisTypes() {
|
||||
return statisticsConstants.allAnalysisTypes;
|
||||
@@ -392,6 +392,9 @@ export default {
|
||||
allDateRanges() {
|
||||
return datetimeConstants.allDateRanges;
|
||||
},
|
||||
allDateRangesArray() {
|
||||
return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, true);
|
||||
},
|
||||
showAccountBalance() {
|
||||
return this.settingsStore.appSettings.showAccountBalance;
|
||||
},
|
||||
@@ -566,7 +569,7 @@ export default {
|
||||
if (dateType === this.allDateRanges.Custom.type) { // Custom
|
||||
this.showCustomDateRangeDialog = true;
|
||||
return;
|
||||
} else if (this.query.dateType === dateType) {
|
||||
} else if (this.query.categoricalChartDateType === dateType) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -577,9 +580,9 @@ export default {
|
||||
}
|
||||
|
||||
this.statisticsStore.updateTransactionStatisticsFilter({
|
||||
dateType: dateRange.dateType,
|
||||
startTime: dateRange.minTime,
|
||||
endTime: dateRange.maxTime
|
||||
categoricalChartDateType: dateRange.dateType,
|
||||
categoricalChartStartTime: dateRange.minTime,
|
||||
categoricalChartEndTime: dateRange.maxTime
|
||||
});
|
||||
|
||||
this.reload(null);
|
||||
@@ -590,9 +593,9 @@ export default {
|
||||
}
|
||||
|
||||
this.statisticsStore.updateTransactionStatisticsFilter({
|
||||
dateType: this.allDateRanges.Custom.type,
|
||||
startTime: startTime,
|
||||
endTime: endTime
|
||||
categoricalChartDateType: this.allDateRanges.Custom.type,
|
||||
categoricalChartStartTime: startTime,
|
||||
categoricalChartEndTime: endTime
|
||||
});
|
||||
|
||||
this.showCustomDateRangeDialog = false;
|
||||
@@ -600,16 +603,16 @@ export default {
|
||||
this.reload(null);
|
||||
},
|
||||
shiftDateRange(startTime, endTime, scale) {
|
||||
if (this.query.dateType === this.allDateRanges.All.type) {
|
||||
if (this.query.categoricalChartDateType === this.allDateRanges.All.type) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek);
|
||||
const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
|
||||
|
||||
this.statisticsStore.updateTransactionStatisticsFilter({
|
||||
dateType: newDateRange.dateType,
|
||||
startTime: newDateRange.minTime,
|
||||
endTime: newDateRange.maxTime
|
||||
categoricalChartDateType: newDateRange.dateType,
|
||||
categoricalChartStartTime: newDateRange.minTime,
|
||||
categoricalChartEndTime: newDateRange.maxTime
|
||||
});
|
||||
|
||||
this.reload(null);
|
||||
@@ -620,7 +623,7 @@ export default {
|
||||
return this.$t(this.allDateRanges.All.name);
|
||||
}
|
||||
|
||||
return this.$locale.getDateRangeDisplayName(this.userStore, query.dateType, query.startTime, query.endTime);
|
||||
return this.$locale.getDateRangeDisplayName(this.userStore, query.categoricalChartDateType, query.categoricalChartStartTime, query.categoricalChartEndTime);
|
||||
},
|
||||
clickPieChartItem(item) {
|
||||
this.$router.push(this.getItemLinkUrl(item));
|
||||
|
||||
@@ -753,7 +753,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek);
|
||||
const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
|
||||
|
||||
this.transactionsStore.updateTransactionListFilter({
|
||||
dateType: newDateRange.dateType,
|
||||
|
||||
@@ -14,16 +14,6 @@
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:title="$t('Default Date Range')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
<select v-model="defaultDateRange">
|
||||
<option :value="dateRange.type"
|
||||
:key="dateRange.type"
|
||||
v-for="dateRange in allDateRanges">{{ dateRange.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:title="$t('Timezone Used for Date Range')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
@@ -60,6 +50,16 @@
|
||||
v-for="chartType in allCategoricalChartTypes">{{ chartType.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:title="$t('Default Date Range')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
<select v-model="defaultCategoricalChartDateRange">
|
||||
<option :value="dateRange.type"
|
||||
:key="dateRange.type"
|
||||
v-for="dateRange in allCategoricalChartDateRanges">{{ dateRange.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-block-title>{{ $t('Trend Analysis Settings') }}</f7-block-title>
|
||||
@@ -73,6 +73,16 @@
|
||||
v-for="chartType in allTrendChartTypes">{{ chartType.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:title="$t('Default Date Range')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
<select v-model="defaultTrendChartDateRange">
|
||||
<option :value="dateRange.type"
|
||||
:key="dateRange.type"
|
||||
v-for="dateRange in allTrendChartDateRanges">{{ dateRange.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-page>
|
||||
</template>
|
||||
@@ -81,26 +91,31 @@
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.js';
|
||||
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapStores(useSettingsStore),
|
||||
allChartDataTypes() {
|
||||
return this.$locale.getAllStatisticsChartDataTypes();
|
||||
},
|
||||
allTimezoneTypesUsedForStatistics() {
|
||||
return this.$locale.getAllTimezoneTypesUsedForStatistics();
|
||||
},
|
||||
allSortingTypes() {
|
||||
return this.$locale.getAllStatisticsSortingTypes();
|
||||
},
|
||||
allCategoricalChartTypes() {
|
||||
return this.$locale.getAllCategoricalChartTypes();
|
||||
},
|
||||
allCategoricalChartDateRanges() {
|
||||
return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, false);
|
||||
},
|
||||
allTrendChartTypes() {
|
||||
return this.$locale.getAllTrendChartTypes();
|
||||
},
|
||||
allDateRanges() {
|
||||
return this.$locale.getAllDateRanges(false);
|
||||
},
|
||||
allTimezoneTypesUsedForStatistics() {
|
||||
return this.$locale.getAllTimezoneTypesUsedForStatistics();
|
||||
allTrendChartDateRanges() {
|
||||
return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.TrendAnalysis, false);
|
||||
},
|
||||
defaultChartDataType: {
|
||||
get: function () {
|
||||
@@ -110,14 +125,6 @@ export default {
|
||||
this.settingsStore.setStatisticsDefaultChartDataType(value);
|
||||
}
|
||||
},
|
||||
defaultDateRange: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultDataRangeType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultDateRange(value);
|
||||
}
|
||||
},
|
||||
defaultTimezoneType: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultTimezoneType;
|
||||
@@ -142,6 +149,14 @@ export default {
|
||||
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;
|
||||
@@ -149,7 +164,15 @@ export default {
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultTrendChartType(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultTrendChartDateRange: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.statistics.defaultTrendChartDataRangeType;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setStatisticsDefaultTrendChartDateRange(value);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -187,13 +187,13 @@
|
||||
</f7-popover>
|
||||
|
||||
<f7-toolbar tabbar bottom class="toolbar-item-auto-size">
|
||||
<f7-link :class="{ 'disabled': reloading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, -1)">
|
||||
<f7-link :class="{ 'disabled': reloading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, -1)">
|
||||
<f7-icon f7="arrow_left_square"></f7-icon>
|
||||
</f7-link>
|
||||
<f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': reloading || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" popover-open=".date-popover-menu">
|
||||
<span :class="{ 'tabbar-item-changed': query.maxTime > 0 || query.minTime > 0 }">{{ dateRangeName(query) }}</span>
|
||||
</f7-link>
|
||||
<f7-link :class="{ 'disabled': reloading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, 1)">
|
||||
<f7-link :class="{ 'disabled': reloading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, 1)">
|
||||
<f7-icon f7="arrow_right_square"></f7-icon>
|
||||
</f7-link>
|
||||
<f7-link class="tabbar-text-with-ellipsis" :key="chartType.type"
|
||||
@@ -206,16 +206,16 @@
|
||||
v-model:opened="showDatePopover"
|
||||
@popover:open="scrollPopoverToSelectedItem">
|
||||
<f7-list dividers>
|
||||
<f7-list-item :title="$t(dateRange.name)"
|
||||
:class="{ 'list-item-selected': query.dateType === dateRange.type }"
|
||||
<f7-list-item :title="dateRange.displayName"
|
||||
:class="{ 'list-item-selected': query.categoricalChartDateType === dateRange.type }"
|
||||
:key="dateRange.type"
|
||||
v-for="dateRange in allDateRanges"
|
||||
v-for="dateRange in allDateRangesArray"
|
||||
@click="setDateFilter(dateRange.type)">
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoricalChartDateType === dateRange.type"></f7-icon>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="dateRange.type === allDateRanges.Custom.type && query.dateType === allDateRanges.Custom.type && query.startTime && query.endTime">
|
||||
<div v-if="dateRange.type === allDateRanges.Custom.type && query.categoricalChartDateType === allDateRanges.Custom.type && query.categoricalChartStartTime && query.categoricalChartEndTime">
|
||||
<span>{{ queryStartTime }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
@@ -227,8 +227,8 @@
|
||||
</f7-popover>
|
||||
|
||||
<date-range-selection-sheet :title="$t('Custom Date Range')"
|
||||
:min-time="query.startTime"
|
||||
:max-time="query.endTime"
|
||||
:min-time="query.categoricalChartStartTime"
|
||||
:max-time="query.categoricalChartEndTime"
|
||||
v-model:show="showCustomDateRangeSheet"
|
||||
@dateRange:change="setCustomDateFilter">
|
||||
</date-range-selection-sheet>
|
||||
@@ -304,10 +304,10 @@ export default {
|
||||
return this.$t(querySortingTypeName);
|
||||
},
|
||||
queryStartTime() {
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.startTime);
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartStartTime);
|
||||
},
|
||||
queryEndTime() {
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime);
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartEndTime);
|
||||
},
|
||||
allChartTypes() {
|
||||
return this.$locale.getAllCategoricalChartTypes();
|
||||
@@ -324,6 +324,9 @@ export default {
|
||||
allDateRanges() {
|
||||
return datetimeConstants.allDateRanges;
|
||||
},
|
||||
allDateRangesArray() {
|
||||
return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, true);
|
||||
},
|
||||
showAccountBalance() {
|
||||
return this.settingsStore.appSettings.showAccountBalance;
|
||||
},
|
||||
@@ -465,7 +468,7 @@ export default {
|
||||
this.showCustomDateRangeSheet = true;
|
||||
this.showDatePopover = false;
|
||||
return;
|
||||
} else if (this.query.dateType === dateType) {
|
||||
} else if (this.query.categoricalChartDateType === dateType) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -476,9 +479,9 @@ export default {
|
||||
}
|
||||
|
||||
this.statisticsStore.updateTransactionStatisticsFilter({
|
||||
dateType: dateRange.dateType,
|
||||
startTime: dateRange.minTime,
|
||||
endTime: dateRange.maxTime
|
||||
categoricalChartDateType: dateRange.dateType,
|
||||
categoricalChartStartTime: dateRange.minTime,
|
||||
categoricalChartEndTime: dateRange.maxTime
|
||||
});
|
||||
|
||||
this.showDatePopover = false;
|
||||
@@ -490,9 +493,9 @@ export default {
|
||||
}
|
||||
|
||||
this.statisticsStore.updateTransactionStatisticsFilter({
|
||||
dateType: this.allDateRanges.Custom.type,
|
||||
startTime: startTime,
|
||||
endTime: endTime
|
||||
categoricalChartDateType: this.allDateRanges.Custom.type,
|
||||
categoricalChartStartTime: startTime,
|
||||
categoricalChartEndTime: endTime
|
||||
});
|
||||
|
||||
this.showCustomDateRangeSheet = false;
|
||||
@@ -500,16 +503,16 @@ export default {
|
||||
this.reload(null);
|
||||
},
|
||||
shiftDateRange(startTime, endTime, scale) {
|
||||
if (this.query.dateType === this.allDateRanges.All.type) {
|
||||
if (this.query.categoricalChartDateType === this.allDateRanges.All.type) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek);
|
||||
const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
|
||||
|
||||
this.statisticsStore.updateTransactionStatisticsFilter({
|
||||
dateType: newDateRange.dateType,
|
||||
startTime: newDateRange.minTime,
|
||||
endTime: newDateRange.maxTime
|
||||
categoricalChartDateType: newDateRange.dateType,
|
||||
categoricalChartStartTime: newDateRange.minTime,
|
||||
categoricalChartEndTime: newDateRange.maxTime
|
||||
});
|
||||
|
||||
this.reload(null);
|
||||
@@ -520,7 +523,7 @@ export default {
|
||||
return this.$t(this.allDateRanges.All.name);
|
||||
}
|
||||
|
||||
return this.$locale.getDateRangeDisplayName(this.userStore, query.dateType, query.startTime, query.endTime);
|
||||
return this.$locale.getDateRangeDisplayName(this.userStore, query.categoricalChartDateType, query.categoricalChartStartTime, query.categoricalChartEndTime);
|
||||
},
|
||||
clickPieChartItem(item) {
|
||||
this.f7router.navigate(this.getItemLinkUrl(item));
|
||||
|
||||
@@ -253,10 +253,10 @@
|
||||
v-model:opened="showDatePopover"
|
||||
@popover:open="scrollPopoverToSelectedItem">
|
||||
<f7-list dividers>
|
||||
<f7-list-item :title="$t(dateRange.name)"
|
||||
<f7-list-item :title="dateRange.displayName"
|
||||
:class="{ 'list-item-selected': query.dateType === dateRange.type }"
|
||||
:key="dateRange.type"
|
||||
v-for="dateRange in allDateRanges"
|
||||
v-for="dateRange in allDateRangesArray"
|
||||
@click="changeDateFilter(dateRange.type)">
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
|
||||
@@ -562,6 +562,9 @@ export default {
|
||||
allDateRanges() {
|
||||
return datetimeConstants.allDateRanges;
|
||||
},
|
||||
allDateRangesArray() {
|
||||
return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, true);
|
||||
},
|
||||
showTotalAmountInTransactionListPage() {
|
||||
return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
|
||||
}
|
||||
@@ -830,7 +833,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
const newDateRange = getShiftedDateRangeAndDateType(minTime, maxTime, scale, this.firstDayOfWeek);
|
||||
const newDateRange = getShiftedDateRangeAndDateType(minTime, maxTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
|
||||
|
||||
this.transactionsStore.updateTransactionListFilter({
|
||||
dateType: newDateRange.dateType,
|
||||
|
||||
Reference in New Issue
Block a user