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

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>