code refactor

src/components/base/MonthRangeSelectionBase.ts

@@ -1,11 +1,11 @@
 import { ref, computed } from 'vue';
 
-import type { YearMonth } from '@/core/datetime.ts';
+import type { Year0BasedMonth } from '@/core/datetime.ts';
 
 import {
-    getYearMonthObjectFromUnixTime,
-    getYearMonthObjectFromString,
-    getYearMonthStringFromObject,
+    getYear0BasedMonthObjectFromUnixTime,
+    getYear0BasedMonthObjectFromString,
+    getYearMonthStringFromYear0BasedMonthObject,
     getCurrentUnixTime,
     getCurrentYear,
     getThisYearFirstUnixTime,
@@ -15,6 +15,11 @@ import {
 
 import { useI18n } from '@/locales/helpers.ts';
 
+export interface MonthSelectionValue {
+    year: number;
+    month: number; // 0-based month (0 = January, 11 = December)
+}
+
 export interface CommonMonthRangeSelectionProps {
     minTime?: string;
     maxTime?: string;
@@ -23,12 +28,12 @@ export interface CommonMonthRangeSelectionProps {
     show: boolean;
 }
 
-function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDate: YearMonth; maxDate: YearMonth } {
-    let minDate: YearMonth = getYearMonthObjectFromUnixTime(getThisYearFirstUnixTime());
-    let maxDate: YearMonth = getYearMonthObjectFromUnixTime(getCurrentUnixTime());
+function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDate: MonthSelectionValue; maxDate: MonthSelectionValue } {
+    let minDate: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getThisYearFirstUnixTime());
+    let maxDate: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getCurrentUnixTime());
 
     if (props.minTime) {
-        const yearMonth = getYearMonthObjectFromString(props.minTime);
+        const yearMonth = getYear0BasedMonthObjectFromString(props.minTime);
 
         if (yearMonth) {
             minDate = yearMonth;
@@ -36,7 +41,7 @@ function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDat
     }
 
     if (props.maxTime) {
-        const yearMonth = getYearMonthObjectFromString(props.maxTime);
+        const yearMonth = getYear0BasedMonthObjectFromString(props.maxTime);
 
         if (yearMonth) {
             maxDate = yearMonth;
@@ -44,8 +49,14 @@ function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDat
     }
 
     return {
-        minDate,
-        maxDate
+        minDate: {
+            year: minDate.year,
+            month: minDate.month0base
+        },
+        maxDate: {
+            year: maxDate.year,
+            month: maxDate.month0base
+        }
     };
 }
 
@@ -58,14 +69,33 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
         getCurrentYear() + 1
     ]);
 
-    const dateRange = ref<YearMonth[]>([
+    const dateRange = ref<MonthSelectionValue[]>([
         minDate,
         maxDate
     ]);
 
     const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
-    const beginDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthFirstUnixTime(dateRange.value[0])));
-    const endDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthLastUnixTime(dateRange.value[1])));
+    const beginDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthFirstUnixTime({
+        year: dateRange.value[0].year,
+        month0base: dateRange.value[0].month
+    })));
+    const endDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthLastUnixTime({
+        year: dateRange.value[1].year,
+        month0base: dateRange.value[1].month
+    })));
+
+    function getMonthSelectionValue(yearMonth: string): MonthSelectionValue | null {
+        const yearMonthObj = getYear0BasedMonthObjectFromString(yearMonth);
+
+        if (!yearMonthObj) {
+            return null;
+        }
+
+        return {
+            year: yearMonthObj.year,
+            month: yearMonthObj.month0base
+        };
+    }
 
     function getFinalMonthRange(): { minYearMonth: string, maxYearMonth: string } | null {
         if (!dateRange.value[0] || !dateRange.value[1]) {
@@ -76,8 +106,14 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
             throw new Error('Date is too early');
         }
 
-        const minYearMonth = getYearMonthStringFromObject(dateRange.value[0]);
-        const maxYearMonth = getYearMonthStringFromObject(dateRange.value[1]);
+        const minYearMonth = getYearMonthStringFromYear0BasedMonthObject({
+            year: dateRange.value[0].year,
+            month0base: dateRange.value[0].month
+        });
+        const maxYearMonth = getYearMonthStringFromYear0BasedMonthObject({
+            year: dateRange.value[1].year,
+            month0base: dateRange.value[1].month
+        });
 
         return {
             minYearMonth,
@@ -94,6 +130,7 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
         beginDateTime,
         endDateTime,
         // functions
+        getMonthSelectionValue,
         getFinalMonthRange
     };
 }

src/components/base/MonthSelectionBase.ts

@@ -1,17 +1,22 @@
 import { ref, computed } from 'vue';
 
-import type { YearMonth } from '@/core/datetime.ts';
+import type { Year0BasedMonth } from '@/core/datetime.ts';
 
 import {
-    getYearMonthObjectFromUnixTime,
-    getYearMonthObjectFromString,
-    getYearMonthStringFromObject,
+    getYear0BasedMonthObjectFromUnixTime,
+    getYear0BasedMonthObjectFromString,
+    getYearMonthStringFromYear0BasedMonthObject,
     getCurrentYear,
     getThisMonthFirstUnixTime
 } from '@/lib/datetime.ts';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+export interface MonthSelectionValue {
+    year: number;
+    month: number; // 0-based month (0 = January, 11 = December)
+}
+
 export interface CommonMonthSelectionProps {
     modelValue?: string;
     title?: string;
@@ -19,18 +24,21 @@ export interface CommonMonthSelectionProps {
     show: boolean;
 }
 
-function getYearMonthValueFromProps(props: CommonMonthSelectionProps): YearMonth {
-    let value: YearMonth = getYearMonthObjectFromUnixTime(getThisMonthFirstUnixTime());
+function getYearMonthValueFromProps(props: CommonMonthSelectionProps): MonthSelectionValue {
+    let value: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getThisMonthFirstUnixTime());
 
     if (props.modelValue) {
-        const yearMonth = getYearMonthObjectFromString(props.modelValue);
+        const yearMonth = getYear0BasedMonthObjectFromString(props.modelValue);
 
         if (yearMonth) {
             value = yearMonth;
         }
     }
 
-    return value;
+    return {
+        year: value.year,
+        month: value.month0base
+    };
 }
 
 export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
@@ -41,10 +49,23 @@ export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
         getCurrentYear() + 1
     ]);
 
-    const monthValue = ref<YearMonth>(getYearMonthValueFromProps(props));
+    const monthValue = ref<MonthSelectionValue>(getYearMonthValueFromProps(props));
 
     const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 
+    function getMonthSelectionValue(yearMonth: string): MonthSelectionValue | null {
+        const yearMonthObj = getYear0BasedMonthObjectFromString(yearMonth);
+
+        if (!yearMonthObj) {
+            return null;
+        }
+
+        return {
+            year: yearMonthObj.year,
+            month: yearMonthObj.month0base
+        };
+    }
+
     function getTextualYearMonth(): string | null {
         if (!monthValue.value) {
             return null;
@@ -54,7 +75,10 @@ export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
             throw new Error('Date is too early');
         }
 
-        return getYearMonthStringFromObject(monthValue.value);
+        return getYearMonthStringFromYear0BasedMonthObject({
+            year: monthValue.value.year,
+            month0base: monthValue.value.month
+        });
     }
 
     return {
@@ -64,6 +88,7 @@ export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
         // computed states
         isYearFirst,
         // functions
+        getMonthSelectionValue,
         getTextualYearMonth
     };
 }

src/components/base/TrendsChartBase.ts

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from '@/locales/helpers.ts';
 
 import type {
-    YearMonth,
+    Year1BasedMonth,
     TimeRangeAndDateType,
     YearUnixTime,
     YearQuarterUnixTime,
@@ -16,7 +16,7 @@ import type { YearMonthItems } from '@/models/transaction.ts';
 
 import { getAllDateRanges } from '@/lib/statistics.ts';
 
-export interface CommonTrendsChartProps<T extends YearMonth> {
+export interface CommonTrendsChartProps<T extends Year1BasedMonth> {
     items: YearMonthItems<T>[];
     startYearMonth: string;
     endYearMonth: string;
@@ -39,7 +39,7 @@ export interface TrendsBarChartClickEvent {
     dateRange: TimeRangeAndDateType;
 }
 
-export function useTrendsChartBase<T extends YearMonth>(props: CommonTrendsChartProps<T>) {
+export function useTrendsChartBase<T extends Year1BasedMonth>(props: CommonTrendsChartProps<T>) {
     const { tt } = useI18n();
 
     const allDateRanges = computed<YearUnixTime[] | FiscalYearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[]>(() => getAllDateRanges(props.items, props.startYearMonth, props.endYearMonth, props.fiscalYearStart, props.dateAggregationType));