mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-17 00:12:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

use popover-close property to close popover

Browse Source
This commit is contained in:
MaysWind
2025-12-05 22:54:05 +08:00
parent eccea273e6
commit ee8aa2bb8e
5 changed files with 104 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/statistics/TransactionPage.vue
+15 -28
View File
@@ -14,14 +14,14 @@
</f7-navbar>
<f7-popover class="chart-data-type-popover-menu"
v-model:opened="showChartDataTypePopover"
@popover:open="scrollPopoverToSelectedItem">
<f7-list dividers>
<f7-list-group>
<f7-list-item group-title>
<small>{{ tt('Categorical Analysis') }}</small>
</f7-list-item>
<f7-list-item :title="tt(dataType.name)"
<f7-list-item link="#" no-chevron popover-close
:title="tt(dataType.name)"
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type }"
:key="dataType.type"
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.CategoricalAnalysis)"
@@ -35,7 +35,8 @@
<f7-list-item group-title>
<small>{{ tt('Trend Analysis') }}</small>
</f7-list-item>
<f7-list-item :title="tt(dataType.name)"
<f7-list-item link="#" no-chevron popover-close
:title="tt(dataType.name)"
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type }"
:key="dataType.type"
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.TrendAnalysis)"
@@ -49,7 +50,8 @@
<f7-list-item group-title>
<small>{{ tt('Asset Trends') }}</small>
</f7-list-item>
<f7-list-item :title="tt(dataType.name)"
<f7-list-item link="#" no-chevron popover-close
:title="tt(dataType.name)"
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.AssetTrends && query.chartDataType === dataType.type }"
:key="dataType.type"
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.AssetTrends)"
@@ -278,10 +280,10 @@
</f7-card-content>
</f7-card>
<f7-popover class="sorting-type-popover-menu"
v-model:opened="showSortingTypePopover">
<f7-popover class="sorting-type-popover-menu">
<f7-list dividers>
<f7-list-item :title="sortingType.displayName"
<f7-list-item link="#" no-chevron popover-close
:title="sortingType.displayName"
:class="{ 'list-item-selected': query.sortingType === sortingType.type }"
:key="sortingType.type"
v-for="sortingType in allSortingTypes"
@@ -318,10 +320,10 @@
</f7-toolbar>
<f7-popover class="date-popover-menu"
v-model:opened="showDatePopover"
@popover:open="scrollPopoverToSelectedItem">
<f7-list dividers>
<f7-list-item :title="dateRange.displayName"
<f7-list-item link="#" no-chevron popover-close
:title="dateRange.displayName"
:class="{ 'list-item-selected': queryDateType === dateRange.type }"
:key="dateRange.type"
v-for="dateRange in allDateRanges"
@@ -342,10 +344,10 @@
</f7-popover>
<f7-popover class="date-aggregation-popover-menu"
v-model:opened="showDateAggregationPopover"
@popover:open="scrollPopoverToSelectedItem">
<f7-list dividers v-if="analysisType === StatisticsAnalysisType.TrendAnalysis">
<f7-list-item :title="aggregationType.displayName"
<f7-list-item link="#" no-chevron popover-close
:title="aggregationType.displayName"
:class="{ 'list-item-selected': trendDateAggregationType === aggregationType.type }"
:key="aggregationType.type"
v-for="aggregationType in allTrendAnalysisDateAggregationTypes"
@@ -356,7 +358,8 @@
</f7-list-item>
</f7-list>
<f7-list dividers v-else-if="analysisType === StatisticsAnalysisType.AssetTrends">
<f7-list-item :title="aggregationType.displayName"
<f7-list-item link="#" no-chevron popover-close
:title="aggregationType.displayName"
:class="{ 'list-item-selected': assetTrendsDateAggregationType === aggregationType.type }"
:key="aggregationType.type"
v-for="aggregationType in allAssetTrendsDateAggregationTypes"
@@ -496,10 +499,6 @@ const statisticsStore = useStatisticsStore();
const loadingError = ref<unknown | null>(null);
const reloading = ref<boolean>(false);
const showChartDataTypePopover = ref<boolean>(false);
const showSortingTypePopover = ref<boolean>(false);
const showDatePopover = ref<boolean>(false);
const showDateAggregationPopover = ref<boolean>(false);
const showCustomDateRangeSheet = ref<boolean>(false);
const showCustomMonthRangeSheet = ref<boolean>(false);
const showMoreActionSheet = ref<boolean>(false);
@@ -674,8 +673,6 @@ function setChartDataType(type: number, chartDataType: number): void {
chartDataType: chartDataType
});
showChartDataTypePopover.value = false;
if (analysisTypeChanged) {
reload();
}
@@ -683,32 +680,26 @@ function setChartDataType(type: number, chartDataType: number): void {
function setSortingType(type: number): void {
if (type < ChartSortingType.Amount.type || type > ChartSortingType.Name.type) {
showSortingTypePopover.value = false;
return;
}
statisticsStore.updateTransactionStatisticsFilter({
sortingType: type
});
showSortingTypePopover.value = false;
}
function setTrendDateAggregationType(type: number): void {
trendDateAggregationType.value = type;
showDateAggregationPopover.value = false;
}
function setAssetTrendsDateAggregationType(type: number): void {
assetTrendsDateAggregationType.value = type;
showDateAggregationPopover.value = false;
}
function setDateFilter(dateType: number): void {
if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
if (dateType === DateRange.Custom.type) { // Custom
showCustomDateRangeSheet.value = true;
showDatePopover.value = false;
return;
} else if (query.value.categoricalChartDateType === dateType) {
return;
@@ -716,7 +707,6 @@ function setDateFilter(dateType: number): void {
} else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
if (dateType === DateRange.Custom.type) { // Custom
showCustomMonthRangeSheet.value = true;
showDatePopover.value = false;
return;
} else if (query.value.trendChartDateType === dateType) {
return;
@@ -724,7 +714,6 @@ function setDateFilter(dateType: number): void {
} else if (analysisType.value === StatisticsAnalysisType.AssetTrends) {
if (dateType === DateRange.Custom.type) { // Custom
showCustomDateRangeSheet.value = true;
showDatePopover.value = false;
return;
} else if (query.value.assetTrendsChartDateType === dateType) {
return;
@@ -759,8 +748,6 @@ function setDateFilter(dateType: number): void {
});
}
showDatePopover.value = false;
if (changed) {
reload();
}