mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 15:07:33 +08:00
support calendar display type (Gregorian and Buddhist)
This commit is contained in:
MaysWind
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<vue-date-picker ref="datetimepicker"
|
||||
inline auto-apply
|
||||
enable-seconds
|
||||
six-weeks="center"
|
||||
:class="datetimePickerClass"
|
||||
:config="noSwipeAndScroll ? { noSwipe: true } : undefined"
|
||||
:dark="isDarkMode"
|
||||
:vertical="vertical"
|
||||
:enable-time-picker="enableTimePicker"
|
||||
:disable-year-select="disableYearSelect"
|
||||
:clearable="!!clearable"
|
||||
:year-range="yearRange"
|
||||
:day-names="dayNames"
|
||||
:week-start="firstDayOfWeek"
|
||||
:year-first="isYearFirst"
|
||||
:is24="is24Hour"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:disabled-dates="disabledDates"
|
||||
:month-change-on-scroll="!noSwipeAndScroll"
|
||||
:range="isDateRange ? { partialRange: false } : undefined"
|
||||
:preset-dates="presetRanges"
|
||||
v-model="dateTime">
|
||||
<template #year="{ value }">
|
||||
{{ getDisplayYear(value) }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ getDisplayYear(value) }}
|
||||
</template>
|
||||
<template #month="{ value }">
|
||||
{{ getDisplayMonth(value) }}
|
||||
</template>
|
||||
<template #month-overlay-value="{ value }">
|
||||
{{ getDisplayMonth(value) }}
|
||||
</template>
|
||||
<template #day="{ date }">
|
||||
{{ getDisplayDay(date) }}
|
||||
</template>
|
||||
<template #am-pm-button="{ toggle, value }">
|
||||
<button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ tt(`datetime.${value}.content`) }}</button>
|
||||
</template>
|
||||
</vue-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, useTemplateRef } from 'vue';
|
||||
import VueDatePicker, { type MenuView } from '@vuepic/vue-datepicker';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
|
||||
import { type PresetDateRange, type WeekDayValue } from '@/core/datetime.ts';
|
||||
import { isArray, arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
|
||||
import { getAllowedYearRange, getYearMonthDayDateTime } from '@/lib/datetime.ts';
|
||||
|
||||
type VueDatePickerType = InstanceType<typeof VueDatePicker>;
|
||||
type SupportedModelValue = Date | Date[] | null;
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: SupportedModelValue;
|
||||
datetimePickerClass?: string;
|
||||
isDarkMode: boolean;
|
||||
enableTimePicker: boolean;
|
||||
disableYearSelect?: boolean;
|
||||
vertical?: boolean;
|
||||
noSwipeAndScroll?: boolean;
|
||||
clearable?: boolean;
|
||||
minDate?: Date;
|
||||
maxDate?: Date;
|
||||
disabledDates?: (date: Date) => boolean;
|
||||
presetRanges?: PresetDateRange[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: SupportedModelValue): void;
|
||||
}>();
|
||||
|
||||
const {
|
||||
tt,
|
||||
getAllMinWeekdayNames,
|
||||
isLongDateMonthAfterYear,
|
||||
isLongTime24HourFormat,
|
||||
getCalendarShortYearFromUnixTime,
|
||||
getCalendarShortMonthFromUnixTime,
|
||||
getCalendarDayOfMonthFromUnixTime
|
||||
} = useI18n();
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
|
||||
|
||||
const yearRange = getAllowedYearRange();
|
||||
|
||||
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
|
||||
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
|
||||
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
|
||||
const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
|
||||
|
||||
const dateTime = computed<SupportedModelValue>({
|
||||
get: () => props.modelValue,
|
||||
set: (value: SupportedModelValue) => emit('update:modelValue', value)
|
||||
});
|
||||
|
||||
const isDateRange = computed<boolean>(() => isArray(props.modelValue));
|
||||
|
||||
function switchView(viewType: MenuView): void {
|
||||
datetimepicker.value?.switchView(viewType);
|
||||
}
|
||||
|
||||
function getDisplayYear(year: number): string {
|
||||
return getCalendarShortYearFromUnixTime(getYearMonthDayDateTime(year, 1, 1).getUnixTime());
|
||||
}
|
||||
|
||||
function getDisplayMonth(month: number): string {
|
||||
if (isArray(dateTime.value)) {
|
||||
return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].getFullYear(), month + 1, 1).getUnixTime());
|
||||
} else if (dateTime.value) {
|
||||
return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.getFullYear(), month + 1, 1).getUnixTime());
|
||||
} else {
|
||||
return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(new Date().getFullYear(), month + 1, 1).getUnixTime());
|
||||
}
|
||||
}
|
||||
|
||||
function getDisplayDay(date: Date): string {
|
||||
return getCalendarDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime());
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
switchView
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<vue-date-picker inline auto-apply
|
||||
month-picker
|
||||
:class="monthPickerClass"
|
||||
:dark="isDarkMode"
|
||||
:clearable="!!clearable"
|
||||
:year-range="yearRange"
|
||||
:year-first="isYearFirst"
|
||||
:range="isDateRange ? { partialRange: false } : undefined"
|
||||
v-model="dateTime">
|
||||
<!-- @vue-expect-error It seems to be a bug in vue-date-picker (https://github.com/Vuepic/vue-datepicker/issues/1154), when using the month picker, it does not provide the value and text props in the slot, but provides the year. -->
|
||||
<template #year="{ year }">
|
||||
{{ getDisplayYear(year) }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ getDisplayYear(value) }}
|
||||
</template>
|
||||
<template #month="{ value }">
|
||||
{{ getDisplayMonth(value) }}
|
||||
</template>
|
||||
<template #month-overlay-value="{ value }">
|
||||
{{ getDisplayMonth(value) }}
|
||||
</template>
|
||||
</vue-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import type { Year0BasedMonth } from '@/core/datetime.ts';
|
||||
|
||||
import { isArray } from '@/lib/common.ts';
|
||||
import { getAllowedYearRange, getYearMonthDayDateTime } from '@/lib/datetime.ts';
|
||||
|
||||
export interface MonthSelectionValue {
|
||||
year: number;
|
||||
month: number; // 0-based month (0 = January, 11 = December)
|
||||
}
|
||||
|
||||
type SupportedModelValue = Year0BasedMonth | Year0BasedMonth[];
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: SupportedModelValue;
|
||||
monthPickerClass?: string;
|
||||
isDarkMode: boolean;
|
||||
clearable?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: SupportedModelValue): void;
|
||||
}>();
|
||||
|
||||
const {
|
||||
isLongDateMonthAfterYear,
|
||||
getCalendarShortYearFromUnixTime,
|
||||
getCalendarShortMonthFromUnixTime
|
||||
} = useI18n();
|
||||
|
||||
const yearRange = getAllowedYearRange();
|
||||
|
||||
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
|
||||
|
||||
const dateTime = computed<MonthSelectionValue | MonthSelectionValue[]>({
|
||||
get: () => {
|
||||
if (isArray(props.modelValue)) {
|
||||
return props.modelValue.map(item => getMonthSelectionValueFromYear0BasedMonth(item));
|
||||
} else {
|
||||
return getMonthSelectionValueFromYear0BasedMonth(props.modelValue);
|
||||
}
|
||||
},
|
||||
set: (value: MonthSelectionValue | MonthSelectionValue[]) => {
|
||||
if (isArray(value)) {
|
||||
emit('update:modelValue', value.map(item => getYear0BasedMonthFromMonthSelectionValue(item)));
|
||||
} else {
|
||||
emit('update:modelValue', getYear0BasedMonthFromMonthSelectionValue(value));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const isDateRange = computed<boolean>(() => isArray(props.modelValue));
|
||||
|
||||
function getMonthSelectionValueFromYear0BasedMonth(value: Year0BasedMonth): MonthSelectionValue {
|
||||
return {
|
||||
year: value.year,
|
||||
month: value.month0base
|
||||
};
|
||||
}
|
||||
|
||||
function getYear0BasedMonthFromMonthSelectionValue(value: MonthSelectionValue): Year0BasedMonth {
|
||||
return {
|
||||
year: value.year,
|
||||
month0base: value.month
|
||||
};
|
||||
}
|
||||
|
||||
function getDisplayYear(year: number): string {
|
||||
return getCalendarShortYearFromUnixTime(getYearMonthDayDateTime(year, 1, 1).getUnixTime());
|
||||
}
|
||||
|
||||
function getDisplayMonth(month: number): string {
|
||||
if (isArray(dateTime.value)) {
|
||||
return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].year, month + 1, 1).getUnixTime());
|
||||
} else {
|
||||
return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.year, month + 1, 1).getUnixTime());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<vue-date-picker inline auto-apply
|
||||
model-type="yyyy-MM-dd"
|
||||
:class="`transaction-calendar ${calendarClass}`"
|
||||
:config="{ noSwipe: true }"
|
||||
:readonly="readonly"
|
||||
:dark="isDarkMode"
|
||||
:enable-time-picker="false"
|
||||
:clearable="false"
|
||||
:day-names="dayNames"
|
||||
:week-start="firstDayOfWeek"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:disabled-dates="noTransactionInMonthDay"
|
||||
:prevent-min-max-navigation="true"
|
||||
:hide-offset-dates="true"
|
||||
:disable-month-year-select="true"
|
||||
:month-change-on-scroll="false"
|
||||
:month-change-on-arrows="false"
|
||||
v-model="dateTime">
|
||||
<template #day="{ day, date }">
|
||||
<div class="transaction-calendar-daily-amounts">
|
||||
<span :class="dayHasTransactionClass && dailyTotalAmounts && dailyTotalAmounts[day] ? dayHasTransactionClass : undefined">{{ getDisplayDay(date) }}</span>
|
||||
<span class="transaction-calendar-daily-amount text-income" v-if="dailyTotalAmounts && dailyTotalAmounts[day] && dailyTotalAmounts[day].income">{{ getDisplayMonthTotalAmount(dailyTotalAmounts[day].income, defaultCurrency, '', dailyTotalAmounts[day].incompleteIncome) }}</span>
|
||||
<span class="transaction-calendar-daily-amount text-expense" v-if="dailyTotalAmounts && dailyTotalAmounts[day] && dailyTotalAmounts[day].expense">{{ getDisplayMonthTotalAmount(dailyTotalAmounts[day].expense, defaultCurrency, '', dailyTotalAmounts[day].incompleteExpense) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</vue-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, } from 'vue';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import type { TransactionTotalAmount } from '@/stores/transaction.ts';
|
||||
|
||||
import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
|
||||
import { INCOMPLETE_AMOUNT_SUFFIX } from '@/consts/numeral.ts';
|
||||
|
||||
import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
|
||||
import {
|
||||
getTimezoneOffsetMinutes,
|
||||
getBrowserTimezoneOffsetMinutes,
|
||||
getUnixTimeFromLocalDatetime,
|
||||
getActualUnixTimeForStore,
|
||||
getYearMonthDayDateTime,
|
||||
parseDateTimeFromUnixTime
|
||||
} from '@/lib/datetime.ts';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: TextualYearMonthDay | '';
|
||||
isDarkMode: boolean;
|
||||
defaultCurrency: string | false;
|
||||
minDate: Date;
|
||||
maxDate: Date;
|
||||
weekDayNameType?: 'long' | 'short';
|
||||
dailyTotalAmounts?: Record<string, TransactionTotalAmount>;
|
||||
readonly?: boolean;
|
||||
calendarClass?: string;
|
||||
dayHasTransactionClass?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void;
|
||||
}>();
|
||||
|
||||
const {
|
||||
getAllLongWeekdayNames,
|
||||
getAllShortWeekdayNames,
|
||||
getCalendarDayOfMonthFromUnixTime,
|
||||
formatAmountToLocalizedNumeralsWithCurrency
|
||||
} = useI18n();
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(props.weekDayNameType === 'short' ? getAllShortWeekdayNames() : getAllLongWeekdayNames(), firstDayOfWeek.value));
|
||||
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
|
||||
|
||||
const dateTime = computed<TextualYearMonthDay | ''>({
|
||||
get: () => props.modelValue,
|
||||
set: (value: TextualYearMonthDay | '') => emit('update:modelValue', value)
|
||||
});
|
||||
|
||||
function noTransactionInMonthDay(date: Date): boolean {
|
||||
const dateTime = parseDateTimeFromUnixTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(date), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
|
||||
return !props.dailyTotalAmounts || !props.dailyTotalAmounts[dateTime.getGregorianCalendarDay()];
|
||||
}
|
||||
|
||||
function getDisplayMonthTotalAmount(amount: number, currency: string | false, symbol: string, incomplete: boolean): string {
|
||||
const displayAmount = formatAmountToLocalizedNumeralsWithCurrency(amount, currency);
|
||||
return symbol + displayAmount + (incomplete ? INCOMPLETE_AMOUNT_SUFFIX : '');
|
||||
}
|
||||
|
||||
function getDisplayDay(date: Date): string {
|
||||
return getCalendarDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime());
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transaction-calendar-daily-amounts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.transaction-calendar .dp__main .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user