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

code refactor

Browse Source
This commit is contained in:
MaysWind
2025-06-09 00:29:29 +08:00
parent ee47ee91c3
commit 2c730b3e25
16 changed files with 210 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/MonthRangeSelectionBase.ts
+53 -16
View File
@@ -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
+35 -10
View File
@@ -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 -3
View File
@@ -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));
src/components/desktop/MonthRangeSelectionDialog.vue
+3 -4
View File
@@ -71,7 +71,6 @@ import { useI18n } from '@/locales/helpers.ts';
import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';
import { ThemeType } from '@/core/theme.ts';
import { getYearMonthObjectFromString } from '@/lib/datetime.ts';
interface DesktopMonthRangeSelectionProps extends CommonMonthRangeSelectionProps {
persistent?: boolean;
@@ -87,7 +86,7 @@ const emit = defineEmits<{
const theme = useTheme();
const { tt, getMonthShortName } = useI18n();
const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getMonthSelectionValue, getFinalMonthRange } = useMonthRangeSelectionBase(props);
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const showState = computed<boolean>({
@@ -117,7 +116,7 @@ function cancel(): void {
watch(() => props.minTime, (newValue) => {
if (newValue) {
const yearMonth = getYearMonthObjectFromString(newValue);
const yearMonth = getMonthSelectionValue(newValue);
if (yearMonth) {
dateRange.value[0] = yearMonth;
@@ -127,7 +126,7 @@ watch(() => props.minTime, (newValue) => {
watch(() => props.maxTime, (newValue) => {
if (newValue) {
const yearMonth = getYearMonthObjectFromString(newValue);
const yearMonth = getMonthSelectionValue(newValue);
if (yearMonth) {
dateRange.value[1] = yearMonth;
src/components/desktop/MonthSelectionDialog.vue
+3 -4
View File
@@ -50,7 +50,6 @@ 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;
@@ -66,7 +65,7 @@ const emit = defineEmits<{
const theme = useTheme();
const { tt, getMonthShortName } = useI18n();
const { yearRange, monthValue, isYearFirst, getTextualYearMonth } = useMonthSelectionBase(props);
const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getTextualYearMonth } = useMonthSelectionBase(props);
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const showState = computed<boolean>({
@@ -96,7 +95,7 @@ function cancel(): void {
watch(() => props.modelValue, (newValue) => {
if (newValue) {
const yearMonth = getYearMonthObjectFromString(newValue);
const yearMonth = getMonthSelectionValue(newValue);
if (yearMonth) {
monthValue.value = yearMonth;
@@ -106,7 +105,7 @@ watch(() => props.modelValue, (newValue) => {
watch(() => props.show, (newValue) => {
if (newValue && props.modelValue) {
const yearMonth = getYearMonthObjectFromString(props.modelValue);
const yearMonth = getMonthSelectionValue(props.modelValue);
if (yearMonth) {
monthValue.value = yearMonth;
src/components/desktop/TrendsChart.vue
+7 -7
View File
@@ -14,7 +14,7 @@ import { type CommonTrendsChartProps, type TrendsBarChartClickEvent, useTrendsCh
import { useUserStore } from '@/stores/user.ts';
import { type YearMonth, DateRangeScene } from '@/core/datetime.ts';
import { type Year1BasedMonth, DateRangeScene } from '@/core/datetime.ts';
import type { ColorValue } from '@/core/color.ts';
import { ThemeType } from '@/core/theme.ts';
import { TrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
@@ -35,7 +35,7 @@ import {
sortStatisticsItems
} from '@/lib/statistics.ts';
interface DesktopTrendsChartProps<T extends YearMonth> extends CommonTrendsChartProps<T> {
interface DesktopTrendsChartProps<T extends Year1BasedMonth> extends CommonTrendsChartProps<T> {
skeleton?: boolean;
type: number;
showValue?: boolean;
@@ -155,14 +155,14 @@ const allSeries = computed<TrendsChartDataItem[]>(() => {
dateRangeKey = dataItem.year.toString();
} else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
const fiscalYear = getFiscalYearFromUnixTime(
getYearMonthFirstUnixTime({ year: dataItem.year, month: dataItem.month - 1 }),
getYearMonthFirstUnixTime({ year: dataItem.year, month1base: dataItem.month1base }),
props.fiscalYearStart
);
dateRangeKey = fiscalYear.toString();
} else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month1base - 1) / 3) + 1}`;
} else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
dateRangeKey = `${dataItem.year}-${dataItem.month}`;
dateRangeKey = `${dataItem.year}-${dataItem.month1base}`;
}
const dataItems = dateRangeAmountMap[dateRangeKey] || [];
@@ -181,8 +181,8 @@ const allSeries = computed<TrendsChartDataItem[]>(() => {
dateRangeKey = dateRange.year.toString();
} else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
} else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month' in dateRange) {
dateRangeKey = `${dateRange.year}-${dateRange.month + 1}`;
} else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month0base' in dateRange) {
dateRangeKey = `${dateRange.year}-${dateRange.month0base + 1}`;
}
let amount = 0;
src/components/mobile/MonthRangeSelectionSheet.vue
+3 -5
View File
@@ -52,8 +52,6 @@ import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from
import { useEnvironmentsStore } from '@/stores/environment.ts';
import { getYearMonthObjectFromString } from '@/lib/datetime.ts';
const props = defineProps<CommonMonthRangeSelectionProps>();
const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
@@ -62,7 +60,7 @@ const emit = defineEmits<{
const { tt, getMonthShortName } = useI18n();
const { showToast } = useI18nUIComponents();
const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getMonthSelectionValue, getFinalMonthRange } = useMonthRangeSelectionBase(props);
const environmentsStore = useEnvironmentsStore();
@@ -90,7 +88,7 @@ function cancel(): void {
function onSheetOpen(): void {
if (props.minTime) {
const yearMonth = getYearMonthObjectFromString(props.minTime);
const yearMonth = getMonthSelectionValue(props.minTime);
if (yearMonth) {
dateRange.value[0] = yearMonth;
@@ -98,7 +96,7 @@ function onSheetOpen(): void {
}
if (props.maxTime) {
const yearMonth = getYearMonthObjectFromString(props.maxTime);
const yearMonth = getMonthSelectionValue(props.maxTime);
if (yearMonth) {
dateRange.value[1] = yearMonth;
src/components/mobile/MonthSelectionSheet.vue
+2 -4
View File
@@ -46,8 +46,6 @@ import { type CommonMonthSelectionProps, useMonthSelectionBase } from '@/compone
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;
@@ -56,7 +54,7 @@ const emit = defineEmits<{
const { tt, getMonthShortName } = useI18n();
const { showToast } = useI18nUIComponents();
const { yearRange, monthValue, isYearFirst, getTextualYearMonth } = useMonthSelectionBase(props);
const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getTextualYearMonth } = useMonthSelectionBase(props);
const environmentsStore = useEnvironmentsStore();
@@ -84,7 +82,7 @@ function cancel(): void {
function onSheetOpen(): void {
if (props.modelValue) {
const yearMonth = getYearMonthObjectFromString(props.modelValue);
const yearMonth = getMonthSelectionValue(props.modelValue);
if (yearMonth) {
monthValue.value = yearMonth;
src/components/mobile/TrendsBarChart.vue
+7 -7
View File
@@ -95,7 +95,7 @@ import { type CommonTrendsChartProps, type TrendsBarChartClickEvent, useTrendsCh
import { useUserStore } from '@/stores/user.ts';
import { type YearMonth, type UnixTimeRange, DateRangeScene } from '@/core/datetime.ts';
import { type Year1BasedMonth, type UnixTimeRange, DateRangeScene } from '@/core/datetime.ts';
import { ChartDateAggregationType } from '@/core/statistics.ts';
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
@@ -138,7 +138,7 @@ interface TrendsBarChartData {
readonly legends: TrendsBarChartLegend[];
}
interface MobileTrendsChartProps<T extends YearMonth> extends CommonTrendsChartProps<T> {
interface MobileTrendsChartProps<T extends Year1BasedMonth> extends CommonTrendsChartProps<T> {
loading?: boolean;
}
@@ -191,14 +191,14 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
dateRangeKey = dataItem.year.toString();
} else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
const fiscalYear = getFiscalYearFromUnixTime(
getYearMonthFirstUnixTime({ year: dataItem.year, month: dataItem.month - 1 }),
getYearMonthFirstUnixTime({ year: dataItem.year, month1base: dataItem.month1base }),
props.fiscalYearStart
);
dateRangeKey = fiscalYear.toString();
} else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month1base - 1) / 3) + 1}`;
} else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
dateRangeKey = `${dataItem.year}-${dataItem.month}`;
dateRangeKey = `${dataItem.year}-${dataItem.month1base}`;
}
if (dateRangeItemMap[dateRangeKey]) {
@@ -229,8 +229,8 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
dateRangeKey = dateRange.year.toString();
} else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
} else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month' in dateRange) {
dateRangeKey = `${dateRange.year}-${dateRange.month + 1}`;
} else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month0base' in dateRange) {
dateRangeKey = `${dateRange.year}-${dateRange.month0base + 1}`;
}
let displayDateRange = '';