only months can be selected in transaction calendar mode

src/components/base/MonthSelectionBase.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;