zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

only months can be selected in transaction calendar mode

Browse Source
This commit is contained in:
MaysWind
2025-05-10 01:05:11 +08:00
parent c7b809415c
commit 1d2002e92f
9 changed files with 421 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/MonthSelectionBase.ts
+69
View File
@@ -0,0 +1,69 @@
import { ref, computed } from 'vue';
import type { YearMonth } from '@/core/datetime.ts';
import {
getYearMonthObjectFromUnixTime,
getYearMonthObjectFromString,
getYearMonthStringFromObject,
getCurrentYear,
getThisMonthFirstUnixTime
} from '@/lib/datetime.ts';
import { useI18n } from '@/locales/helpers.ts';
export interface CommonMonthSelectionProps {
modelValue?: string;
title?: string;
hint?: string;
show: boolean;
}
function getYearMonthValueFromProps(props: CommonMonthSelectionProps): YearMonth {
let value: YearMonth = getYearMonthObjectFromUnixTime(getThisMonthFirstUnixTime());
if (props.modelValue) {
const yearMonth = getYearMonthObjectFromString(props.modelValue);
if (yearMonth) {
value = yearMonth;
}
}
return value;
}
export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
const { isLongDateMonthAfterYear } = useI18n();
const yearRange = ref<number[]>([
2000,
getCurrentYear() + 1
]);
const monthValue = ref<YearMonth>(getYearMonthValueFromProps(props));
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
function getTextualYearMonth(): string | null {
if (!monthValue.value) {
return null;
}
if (monthValue.value.year <= 0 || monthValue.value.month < 0) {
throw new Error('Date is too early');
}
return getYearMonthStringFromObject(monthValue.value);
}
return {
// states
yearRange,
monthValue,
// computed states
isYearFirst,
// functions
getTextualYearMonth
};
}
src/components/desktop/MonthSelectionDialog.vue
+127
View File
@@ -0,0 +1,127 @@
<template>
<v-dialog class="month-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
<v-card class="pa-2 pa-sm-4 pa-md-4">
<template #title>
<div class="d-flex align-center justify-center">
<h4 class="text-h4">{{ title }}</h4>
</div>
</template>
<template #subtitle>
<div class="text-body-1 text-center text-wrap mt-6">
<p v-if="hint">{{ hint }}</p>
<slot></slot>
</div>
</template>
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
<v-row class="match-height">
<v-col>
<vue-date-picker inline month-picker auto-apply
month-name-format="long"
:clearable="false"
:dark="isDarkMode"
:year-range="yearRange"
:year-first="isYearFirst"
v-model="monthValue">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
</v-col>
</v-row>
</v-card-text>
<v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center gap-4">
<v-btn :disabled="!monthValue" @click="confirm">{{ tt('OK') }}</v-btn>
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { computed, watch } from 'vue';
import { useTheme } from 'vuetify';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonMonthSelectionProps, useMonthSelectionBase } from '@/components/base/MonthSelectionBase.ts';
import { ThemeType } from '@/core/theme.ts';
import { getYearMonthObjectFromString } from '@/lib/datetime.ts';
interface DesktopMonthSelectionProps extends CommonMonthSelectionProps {
persistent?: boolean;
}
const props = defineProps<DesktopMonthSelectionProps>();
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
(e: 'update:show', value: boolean): void;
(e: 'error', message: string): void;
}>();
const theme = useTheme();
const { tt, getMonthShortName } = useI18n();
const { yearRange, monthValue, isYearFirst, getTextualYearMonth } = useMonthSelectionBase(props);
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const showState = computed<boolean>({
get: () => props.show || false,
set: (value) => emit('update:show', value)
});
function confirm(): void {
try {
const finalMonthRange = getTextualYearMonth();
if (!finalMonthRange) {
return;
}
emit('update:modelValue', finalMonthRange);
} catch (ex: unknown) {
if (ex instanceof Error) {
emit('error', ex.message);
}
}
}
function cancel(): void {
emit('update:show', false);
}
watch(() => props.modelValue, (newValue) => {
if (newValue) {
const yearMonth = getYearMonthObjectFromString(newValue);
if (yearMonth) {
monthValue.value = yearMonth;
}
}
});
watch(() => props.show, (newValue) => {
if (newValue && props.modelValue) {
const yearMonth = getYearMonthObjectFromString(props.modelValue);
if (yearMonth) {
monthValue.value = yearMonth;
}
}
});
</script>
<style>
.month-selection-dialog .dp__preset_ranges {
white-space: nowrap !important;
}
.month-selection-dialog .dp__overlay {
width: 100% !important;
height: 100% !important;
}
</style>
src/components/mobile/MonthSelectionSheet.vue
+112
View File
@@ -0,0 +1,112 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-selection-sheet" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
</div>
<div class="padding-horizontal padding-bottom">
<p class="no-margin-top" v-if="hint">{{ hint }}</p>
<slot></slot>
<vue-date-picker inline month-picker auto-apply
month-name-format="long"
class="justify-content-center margin-bottom"
:clearable="false"
:dark="isDarkMode"
:year-range="yearRange"
:year-first="isYearFirst"
v-model="monthValue">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<f7-button large fill
:class="{ 'disabled': !monthValue }"
:text="tt('Continue')"
@click="confirm">
</f7-button>
<div class="margin-top text-align-center">
<f7-link @click="cancel" :text="tt('Cancel')"></f7-link>
</div>
</div>
</f7-page-content>
</f7-sheet>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
import { type CommonMonthSelectionProps, useMonthSelectionBase } from '@/components/base/MonthSelectionBase.ts';
import { useEnvironmentsStore } from '@/stores/environment.ts';
import { getYearMonthObjectFromString } from '@/lib/datetime.ts';
const props = defineProps<CommonMonthSelectionProps>();
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
(e: 'update:show', value: boolean): void;
}>();
const { tt, getMonthShortName } = useI18n();
const { showToast } = useI18nUIComponents();
const { yearRange, monthValue, isYearFirst, getTextualYearMonth } = useMonthSelectionBase(props);
const environmentsStore = useEnvironmentsStore();
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
function confirm(): void {
try {
const finalMonthRange = getTextualYearMonth();
if (!finalMonthRange) {
return;
}
emit('update:modelValue', finalMonthRange);
} catch (ex: unknown) {
if (ex instanceof Error) {
showToast(ex.message);
}
}
}
function cancel(): void {
emit('update:show', false);
}
function onSheetOpen(): void {
if (props.modelValue) {
const yearMonth = getYearMonthObjectFromString(props.modelValue);
if (yearMonth) {
monthValue.value = yearMonth;
}
}
}
function onSheetClosed(): void {
emit('update:show', false);
}
</script>
<style>
.month-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative {
width: 100% !important;
}
.month-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative .dp__selection_grid_header .dp--year-mode-picker .dp--arrow-btn-nav {
display: flex;
}
.month-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative .dp__selection_grid_header .dp--year-mode-picker .dp--year-select+.dp--arrow-btn-nav {
justify-content: end;
}
</style>
src/desktop-main.ts
+2
View File
@@ -93,6 +93,7 @@ import SnackBar from '@/components/desktop/SnackBar.vue';
import PieChartComponent from '@/components/desktop/PieChart.vue';
import TrendsChartComponent from '@/components/desktop/TrendsChart.vue';
import DateRangeSelectionDialog from '@/components/desktop/DateRangeSelectionDialog.vue';
import MonthSelectionDialog from '@/components/desktop/MonthSelectionDialog.vue';
import MonthRangeSelectionDialog from '@/components/desktop/MonthRangeSelectionDialog.vue';
import SwitchToMobileDialog from '@/components/desktop/SwitchToMobileDialog.vue';
@@ -468,6 +469,7 @@ app.component('SnackBar', SnackBar);
app.component('PieChart', PieChartComponent);
app.component('TrendsChart', TrendsChartComponent);
app.component('DateRangeSelectionDialog', DateRangeSelectionDialog);
app.component('MonthSelectionDialog', MonthSelectionDialog);
app.component('MonthRangeSelectionDialog', MonthRangeSelectionDialog);
app.component('SwitchToMobileDialog', SwitchToMobileDialog);
src/lib/datetime.ts
+4
View File
@@ -175,6 +175,10 @@ export function getCurrentYear(): number {
return moment().year();
}
export function getCurrentYearAndMonth(): string {
return getYearAndMonth(moment());
}
export function getCurrentDay(): number {
return moment().date();
}
src/mobile-main.ts
+2
View File
@@ -93,6 +93,7 @@ import PasscodeInputSheet from '@/components/mobile/PasscodeInputSheet.vue';
import DateTimeSelectionSheet from '@/components/mobile/DateTimeSelectionSheet.vue';
import DateSelectionSheet from '@/components/mobile/DateSelectionSheet.vue';
import DateRangeSelectionSheet from '@/components/mobile/DateRangeSelectionSheet.vue';
import MonthSelectionSheet from '@/components/mobile/MonthSelectionSheet.vue';
import MonthRangeSelectionSheet from '@/components/mobile/MonthRangeSelectionSheet.vue';
import ListItemSelectionSheet from '@/components/mobile/ListItemSelectionSheet.vue';
import ListItemSelectionPopup from '@/components/mobile/ListItemSelectionPopup.vue';
@@ -178,6 +179,7 @@ app.component('PasscodeInputSheet', PasscodeInputSheet);
app.component('DateTimeSelectionSheet', DateTimeSelectionSheet);
app.component('DateSelectionSheet', DateSelectionSheet);
app.component('DateRangeSelectionSheet', DateRangeSelectionSheet);
app.component('MonthSelectionSheet', MonthSelectionSheet);
app.component('MonthRangeSelectionSheet', MonthRangeSelectionSheet);
app.component('ListItemSelectionSheet', ListItemSelectionSheet);
app.component('ListItemSelectionPopup', ListItemSelectionPopup);
src/views/base/transactions/TransactionListPageBase.ts
+13 -2
View File
@@ -27,12 +27,14 @@ import {
getLocalDatetimeFromUnixTime,
getActualUnixTimeForStore,
getDummyUnixTimeForLocalUsage,
getCurrentYearAndMonth,
parseDateFromUnixTime,
getUnixTime,
getYearAndMonth,
getYear,
getMonth,
getDay,
getYearMonthFirstUnixTime,
getDay,
getUnixTime,
isDateRangeMatchOneMonth
} from '@/lib/datetime.ts';
@@ -171,6 +173,14 @@ export function useTransactionListPageBase() {
const queryMinTime = computed<string>(() => formatUnixTimeToLongDateTime(query.value.minTime));
const queryMaxTime = computed<string>(() => formatUnixTimeToLongDateTime(query.value.maxTime));
const queryMonthlyData = computed<boolean>(() => isDateRangeMatchOneMonth(query.value.minTime, query.value.maxTime));
const queryMonth = computed<string>(() => {
if (!query.value.minTime || !query.value.maxTime) {
return getCurrentYearAndMonth();
}
return getYearAndMonth(parseDateFromUnixTime(query.value.minTime));
});
const queryAllFilterCategoryIds = computed<Record<string, boolean>>(() => transactionsStore.allFilterCategoryIds);
const queryAllFilterAccountIds = computed<Record<string, boolean>>(() => transactionsStore.allFilterAccountIds);
const queryAllFilterTagIds = computed<Record<string, boolean>>(() => transactionsStore.allFilterTagIds);
@@ -373,6 +383,7 @@ export function useTransactionListPageBase() {
queryMinTime,
queryMaxTime,
queryMonthlyData,
queryMonth,
queryAllFilterCategoryIds,
queryAllFilterAccountIds,
queryAllFilterTagIds,
src/views/desktop/transactions/ListPage.vue
+46 -2
View File
@@ -603,6 +603,13 @@
v-model:show="showCustomDateRangeDialog"
@dateRange:change="changeCustomDateFilter"
@error="onShowDateRangeError" />
<month-selection-dialog :title="tt('Custom Date Range')"
:model-value="queryMonth"
v-model:show="showCustomMonthDialog"
@update:modelValue="changeCustomMonthDateFilter"
@error="onShowDateRangeError" />
<edit-dialog ref="editDialog" :type="TransactionEditPageType.Transaction" />
<import-dialog ref="importDialog" :persistent="true" />
@@ -678,9 +685,11 @@ import {
parseDateFromUnixTime,
getYear,
getMonth,
getSpecifiedDayFirstUnixTime,
getBrowserTimezoneOffsetMinutes,
getActualUnixTimeForStore,
getSpecifiedDayFirstUnixTime,
getYearMonthFirstUnixTime,
getYearMonthLastUnixTime,
getShiftedDateRangeAndDateType,
getShiftedDateRangeAndDateTypeForBillingCycle,
getDateTypeByDateRange,
@@ -787,6 +796,7 @@ const {
queryMinTime,
queryMaxTime,
queryMonthlyData,
queryMonth,
queryAllFilterCategoryIds,
queryAllFilterAccountIds,
queryAllFilterTagIds,
@@ -851,6 +861,7 @@ const amountMenuState = ref<boolean>(false);
const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
const showNav = ref<boolean>(display.mdAndUp.value);
const showCustomDateRangeDialog = ref<boolean>(false);
const showCustomMonthDialog = ref<boolean>(false);
const showFilterAccountDialog = ref<boolean>(false);
const showFilterCategoryDialog = ref<boolean>(false);
const showFilterTagDialog = ref<boolean>(false);
@@ -1236,7 +1247,12 @@ function changeDateFilter(dateRange: TimeRangeAndDateType | number | null): void
customMinDatetime.value = query.value.minTime;
}
showCustomDateRangeDialog.value = true;
if (pageType.value === TransactionListPageType.Calendar.type) {
showCustomMonthDialog.value = true;
} else {
showCustomDateRangeDialog.value = true;
}
return;
}
@@ -1313,6 +1329,34 @@ function changeCustomDateFilter(minTime: number, maxTime: number): void {
updateUrlWhenChanged(changed);
}
function changeCustomMonthDateFilter(yearMonth: string): void {
if (!yearMonth) {
return;
}
const minTime = getYearMonthFirstUnixTime(yearMonth);
const maxTime = getYearMonthLastUnixTime(yearMonth);
const dateType = getDateTypeByDateRange(minTime, maxTime, firstDayOfWeek.value, DateRangeScene.Normal);
if (pageType.value === TransactionListPageType.Calendar.type) {
currentCalendarDate.value = getMonthFirstDayOrCurrentDayShortDate(minTime);
}
if (query.value.dateType === dateType && query.value.maxTime === maxTime && query.value.minTime === minTime) {
showCustomMonthDialog.value = false;
return;
}
const changed = transactionsStore.updateTransactionListFilter({
dateType: dateType,
maxTime: maxTime,
minTime: minTime
});
showCustomMonthDialog.value = false;
updateUrlWhenChanged(changed);
}
function shiftDateRange(startTime: number, endTime: number, scale: number): void {
if (pageType.value === TransactionListPageType.List.type && recentDateRangeIndex.value === 0) { // first item is "All"
return;
src/views/mobile/transactions/ListPage.vue
+46 -3
View File
@@ -342,6 +342,12 @@
@dateRange:change="changeCustomDateFilter">
</date-range-selection-sheet>
<month-selection-sheet :title="tt('Custom Date Range')"
:model-value="queryMonth"
v-model:show="showCustomMonthSheet"
@update:modelValue="changeCustomMonthDateFilter">
</month-selection-sheet>
<f7-popover class="category-popover-menu"
v-model:opened="showCategoryPopover"
@popover:open="onPopoverOpen">
@@ -603,9 +609,13 @@ import {
import {
getCurrentUnixTime,
parseDateFromUnixTime,
getSpecifiedDayFirstUnixTime,
getBrowserTimezoneOffsetMinutes,
getActualUnixTimeForStore,
getYear,
getMonth,
getSpecifiedDayFirstUnixTime,
getYearMonthFirstUnixTime,
getYearMonthLastUnixTime,
getShiftedDateRangeAndDateType,
getShiftedDateRangeAndDateTypeForBillingCycle,
getDateTypeByDateRange,
@@ -613,7 +623,7 @@ import {
getDateRangeByDateType,
getDateRangeByBillingCycleDateType,
getFullMonthDateRange,
getMonthFirstDayOrCurrentDayShortDate, getYear, getMonth
getMonthFirstDayOrCurrentDayShortDate
} from '@/lib/datetime.ts';
import {
categoryTypeToTransactionType,
@@ -660,6 +670,7 @@ const {
queryMinTime,
queryMaxTime,
queryMonthlyData,
queryMonth,
queryAllFilterCategoryIds,
queryAllFilterAccountIds,
queryAllFilterTagIds,
@@ -700,6 +711,7 @@ const showCategoryPopover = ref<boolean>(false);
const showAccountPopover = ref<boolean>(false);
const showMorePopover = ref<boolean>(false);
const showCustomDateRangeSheet = ref<boolean>(false);
const showCustomMonthSheet = ref<boolean>(false);
const showDeleteActionSheet = ref<boolean>(false);
const allTransactionTagFilterTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionTagFilterTypes());
@@ -941,7 +953,12 @@ function changeDateFilter(dateType: number): void {
customMinDatetime.value = query.value.minTime;
}
showCustomDateRangeSheet.value = true;
if (pageType.value === TransactionListPageType.Calendar.type) {
showCustomMonthSheet.value = true;
} else {
showCustomDateRangeSheet.value = true;
}
showDatePopover.value = false;
return;
} else if (query.value.dateType === dateType) {
@@ -1019,6 +1036,32 @@ function changeCustomDateFilter(minTime: number, maxTime: number): void {
}
}
function changeCustomMonthDateFilter(yearMonth: string): void {
if (!yearMonth) {
return;
}
const minTime = getYearMonthFirstUnixTime(yearMonth);
const maxTime = getYearMonthLastUnixTime(yearMonth);
const dateType = getDateTypeByDateRange(minTime, maxTime, firstDayOfWeek.value, DateRangeScene.Normal);
if (pageType.value === TransactionListPageType.Calendar.type) {
currentCalendarDate.value = getMonthFirstDayOrCurrentDayShortDate(minTime);
}
const changed = transactionsStore.updateTransactionListFilter({
dateType: dateType,
maxTime: maxTime,
minTime: minTime
});
showCustomMonthSheet.value = false;
if (changed) {
reload();
}
}
function shiftDateRange(minTime: number, maxTime: number, scale: number): void {
if (query.value.dateType === DateRange.All.type) {
return;