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

support calendar display type (Gregorian and Buddhist)

Browse Source
This commit is contained in:
MaysWind
2025-08-28 00:31:59 +08:00
parent c099443783
commit 411130db4e
47 changed files with 769 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/DateRangeSelectionBase.ts
+2 -12
View File
@@ -1,10 +1,9 @@
import { ref, computed } from 'vue';
import { type TimeRangeAndDateType, type PresetDateRange, type UnixTimeRange, type WeekDayValue, DateRange } from '@/core/datetime.ts';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
import {
getCurrentUnixTime,
getAllowedYearRange,
getLocalDatetimeFromUnixTime,
getUnixTimeFromLocalDatetime,
getTodayFirstUnixTime,
@@ -46,21 +45,16 @@ function getDateRangeFromProps(props: CommonDateRangeSelectionProps): { minDate:
}
export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps) {
const { tt, getAllMinWeekdayNames, formatUnixTimeToLongDateTime, isLongDateMonthAfterYear, isLongTime24HourFormat } = useI18n();
const { tt, formatUnixTimeToLongDateTime } = useI18n();
const userStore = useUserStore();
const { minDate, maxDate } = getDateRangeFromProps(props);
const yearRange = ref<number[]>(getAllowedYearRange());
const dateRange = ref<Date[]>([
getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(minDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())),
getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(maxDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
]);
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
const beginDateTime = computed<string>(() => {
const actualBeginUnixTime = getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateRange.value[0]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
return formatUnixTimeToLongDateTime(actualBeginUnixTime);
@@ -123,12 +117,8 @@ export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps)
return {
// states
yearRange,
dateRange,
// computed states
dayNames,
isYearFirst,
is24Hour,
beginDateTime,
endDateTime,
presetRanges,
src/components/base/DateTimeSelectionBase.ts
-19
View File
@@ -2,12 +2,7 @@ import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useUserStore } from '@/stores/user.ts';
import { type NameValue } from '@/core/base.ts';
import { type WeekDayValue } from '@/core/datetime.ts';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
import { getAllowedYearRange } from '@/lib/datetime.ts';
export interface TimePickerValue {
value: string;
@@ -16,9 +11,7 @@ export interface TimePickerValue {
export function useDateTimeSelectionBase() {
const {
getAllMinWeekdayNames,
getAllMeridiemIndicators,
isLongDateMonthAfterYear,
isLongTime24HourFormat,
isLongTimeMeridiemIndicatorFirst,
isLongTimeHourTwoDigits,
@@ -26,22 +19,14 @@ export function useDateTimeSelectionBase() {
isLongTimeSecondTwoDigits
} = useI18n();
const userStore = useUserStore();
const is24Hour = ref<boolean>(isLongTime24HourFormat());
const isHourTwoDigits = ref<boolean>(isLongTimeHourTwoDigits());
const isMinuteTwoDigits = ref<boolean>(isLongTimeMinuteTwoDigits());
const isSecondTwoDigits = ref<boolean>(isLongTimeSecondTwoDigits());
const isMeridiemIndicatorFirst = ref<boolean>(isLongTimeMeridiemIndicatorFirst() || false);
const yearRange = ref<number[]>(getAllowedYearRange());
const meridiemItems = computed<NameValue[]>(() => getAllMeridiemIndicators());
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
function getDisplayTimeValue(value: number, forceTwoDigits: boolean): string {
if (forceTwoDigits && value < 10) {
return `0${value}`;
@@ -96,12 +81,8 @@ export function useDateTimeSelectionBase() {
isMinuteTwoDigits,
isSecondTwoDigits,
isMeridiemIndicatorFirst,
yearRange,
// computed
meridiemItems,
firstDayOfWeek,
dayNames,
isYearFirst,
// functions
getDisplayTimeValue,
generateAllHours,
src/components/base/FiscalYearStartSelectionBase.ts
+9 -24
View File
@@ -2,11 +2,9 @@ import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useUserStore } from '@/stores/user.ts';
import { type WeekDayValue } from '@/core/datetime.ts';
import type { MonthDay } from '@/core/datetime.ts';
import { FiscalYearStart } from '@/core/fiscalyear.ts';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
import {
getLocalDatetimeFromUnixTime,
getThisYearFirstUnixTime,
@@ -39,12 +37,7 @@ function getFiscalYearStartFromProps(props: CommonFiscalYearStartSelectionProps)
}
export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSelectionProps) {
const {
getAllMinWeekdayNames,
formatGregorianCalendarMonthDashDayToLongMonthDay
} = useI18n();
const userStore = useUserStore();
const { formatGregorianCalendarMonthDashDayToLongMonthDay } = useI18n();
const disabledDates = (date: Date) => {
// Disable February 29 (leap day)
@@ -53,18 +46,15 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
const selectedFiscalYearStart = ref<number>(getFiscalYearStartFromProps(props));
const selectedFiscalYearStartValue = computed<string>({
const selectedFiscalYearStartValue = computed<Date>({
get: () => {
const fiscalYearStart = FiscalYearStart.valueOf(selectedFiscalYearStart.value);
const monthDay: MonthDay = fiscalYearStart?.toMonthDay() ?? FiscalYearStart.Default.toMonthDay();
if (fiscalYearStart) {
return fiscalYearStart.toMonthDashDayString();
} else {
return FiscalYearStart.Default.toMonthDashDayString();
}
return new Date(new Date().getFullYear(), monthDay.month - 1, monthDay.day);
},
set: (value: string) => {
const fiscalYearStart = FiscalYearStart.parse(value);
set: (value: Date) => {
const fiscalYearStart = FiscalYearStart.of(value.getMonth() + 1, value.getDate());
if (fiscalYearStart) {
selectedFiscalYearStart.value = fiscalYearStart.value;
@@ -87,9 +77,6 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
const allowedMinDate = computed<Date>(() => getLocalDatetimeFromUnixTime(getThisYearFirstUnixTime()));
const allowedMaxDate = computed<Date>(() => getLocalDatetimeFromUnixTime(getThisYearLastUnixTime()));
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
return {
// constants
disabledDates,
@@ -99,8 +86,6 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
selectedFiscalYearStartValue,
displayFiscalYearStartDate,
allowedMinDate,
allowedMaxDate,
firstDayOfWeek,
dayNames
allowedMaxDate
};
}
src/components/base/MonthRangeSelectionBase.ts
+10 -52
View File
@@ -7,7 +7,6 @@ import {
getYear0BasedMonthObjectFromString,
getYearMonthStringFromYear0BasedMonthObject,
getCurrentUnixTime,
getAllowedYearRange,
getThisYearFirstUnixTime,
getYearMonthFirstUnixTime,
getYearMonthLastUnixTime
@@ -15,11 +14,6 @@ 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?: TextualYearMonth;
maxTime?: TextualYearMonth;
@@ -28,7 +22,7 @@ export interface CommonMonthRangeSelectionProps {
show: boolean;
}
function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDate: MonthSelectionValue; maxDate: MonthSelectionValue } {
function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDate: Year0BasedMonth; maxDate: Year0BasedMonth } {
let minDate: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getThisYearFirstUnixTime());
let maxDate: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getCurrentUnixTime());
@@ -49,67 +43,34 @@ function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDat
}
return {
minDate: {
year: minDate.year,
month: minDate.month0base
},
maxDate: {
year: maxDate.year,
month: maxDate.month0base
}
minDate: minDate,
maxDate: maxDate
};
}
export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps) {
const { formatUnixTimeToLongYearMonth, isLongDateMonthAfterYear } = useI18n();
const { formatUnixTimeToLongYearMonth } = useI18n();
const { minDate, maxDate } = getMonthRangeFromProps(props);
const yearRange = ref<number[]>(getAllowedYearRange());
const dateRange = ref<MonthSelectionValue[]>([
const dateRange = ref<Year0BasedMonth[]>([
minDate,
maxDate
]);
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
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: TextualYearMonth): MonthSelectionValue | null {
const yearMonthObj = getYear0BasedMonthObjectFromString(yearMonth);
if (!yearMonthObj) {
return null;
}
return {
year: yearMonthObj.year,
month: yearMonthObj.month0base
};
}
const beginDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthFirstUnixTime(dateRange.value[0])));
const endDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthLastUnixTime(dateRange.value[1])));
function getFinalMonthRange(): { minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | '' } | null {
if (!dateRange.value[0] || !dateRange.value[1]) {
return null;
}
if (dateRange.value[0].year <= 0 || dateRange.value[0].month < 0 || dateRange.value[1].year <= 0 || dateRange.value[1].month < 0) {
if (dateRange.value[0].year <= 0 || dateRange.value[0].month0base < 0 || dateRange.value[1].year <= 0 || dateRange.value[1].month0base < 0) {
throw new Error('Date is too early');
}
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
});
const minYearMonth = getYearMonthStringFromYear0BasedMonthObject(dateRange.value[0]);
const maxYearMonth = getYearMonthStringFromYear0BasedMonthObject(dateRange.value[1]);
return {
minYearMonth,
@@ -119,14 +80,11 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
return {
// states
yearRange,
dateRange,
// computed states
isYearFirst,
beginDateTime,
endDateTime,
// functions
getMonthSelectionValue,
getFinalMonthRange
};
}
src/components/base/MonthSelectionBase.ts
-82
View File
@@ -1,82 +0,0 @@
import { ref, computed } from 'vue';
import type { Year0BasedMonth } from '@/core/datetime.ts';
import {
getYear0BasedMonthObjectFromUnixTime,
getAllowedYearRange,
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?: Year0BasedMonth;
title?: string;
hint?: string;
show: boolean;
}
function getYearMonthValueFromProps(props: CommonMonthSelectionProps): MonthSelectionValue {
let value: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getThisMonthFirstUnixTime());
if (props.modelValue) {
value = props.modelValue;
}
return {
year: value.year,
month: value.month0base
};
}
export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
const { isLongDateMonthAfterYear } = useI18n();
const yearRange = ref<number[]>(getAllowedYearRange());
const monthValue = ref<MonthSelectionValue>(getYearMonthValueFromProps(props));
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
function getMonthSelectionValue(yearMonth: Year0BasedMonth): MonthSelectionValue | null {
if (!yearMonth) {
return null;
}
return {
year: yearMonth.year,
month: yearMonth.month0base
};
}
function getYear0BasedMonth(): Year0BasedMonth | null {
if (!monthValue.value) {
return null;
}
if (monthValue.value.year <= 0 || monthValue.value.month < 0) {
throw new Error('Date is too early');
}
return {
year: monthValue.value.year,
month0base: monthValue.value.month
};
}
return {
// states
yearRange,
monthValue,
// computed states
isYearFirst,
// functions
getMonthSelectionValue,
getYear0BasedMonth
};
}
src/components/common/DateTimePicker.vue
+133
View File
@@ -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>
src/components/common/MonthPicker.vue
+110
View File
@@ -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>
src/components/common/TransactionCalendar.vue
+115
View File
@@ -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>
src/components/desktop/DateRangeSelectionDialog.vue
+8 -31
View File
@@ -18,29 +18,12 @@
</div>
</template>
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
<vue-date-picker inline enable-seconds auto-apply
month-name-format="long"
six-weeks="center"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:year-range="yearRange"
:day-names="dayNames"
:year-first="isYearFirst"
:is24="is24Hour"
:range="{ partialRange: false }"
:preset-dates="presetRanges"
v-model="dateRange">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</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>
<date-time-picker :is-dark-mode="isDarkMode"
:enable-time-picker="true"
:vertical="true"
:preset-dates="presetRanges"
v-model="dateRange">
</date-time-picker>
</v-card-text>
<v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center gap-4">
@@ -59,9 +42,6 @@ import { useTheme } from 'vuetify';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@/components/base/DateRangeSelectionBase.ts';
import { useUserStore } from '@/stores/user.ts';
import { type WeekDayValue } from '@/core/datetime.ts';
import { ThemeType } from '@/core/theme.ts';
import {
@@ -84,13 +64,10 @@ const emit = defineEmits<{
const theme = useTheme();
const { tt, getMonthShortName } = useI18n();
const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
const userStore = useUserStore();
const { tt } = useI18n();
const { dateRange, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const showState = computed<boolean>({
get: () => props.show || false,
set: (value) => emit('update:show', value)
src/components/desktop/DateSelect.vue
+32 -45
View File
@@ -6,48 +6,35 @@
:clearable="modelValue ? clearable : false"
:label="label"
:menu-props="{ contentClass: 'date-select-menu' }"
v-model="dateTime"
v-model="displayTime"
>
<template #selection>
<span class="text-truncate cursor-pointer">{{ displayTime }}</span>
</template>
<template #no-data>
<vue-date-picker inline vertical auto-apply
ref="datepicker"
month-name-format="long"
model-type="yyyy-MM-dd"
:clearable="true"
:enable-time-picker="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:year-range="yearRange"
:day-names="dayNames"
:year-first="isYearFirst"
v-model="dateTime">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<date-time-picker :is-dark-mode="isDarkMode"
:enable-time-picker="false"
:clearable="true"
v-model="dateTime">
</date-time-picker>
</template>
</v-select>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { computed } from 'vue';
import { useTheme } from 'vuetify';
import { useI18n } from '@/locales/helpers.ts';
import { useUserStore } from '@/stores/user.ts';
import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
import { type TextualYearMonthDay } from '@/core/datetime.ts';
import { ThemeType } from '@/core/theme.ts';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
import { getAllowedYearRange } from '@/lib/datetime.ts';
import {
getLocalDateFromYearDashMonthDashDay,
getGregorianCalendarYearAndMonthFromLocalDate
} from '@/lib/datetime.ts';
const props = defineProps<{
modelValue?: TextualYearMonthDay;
@@ -59,32 +46,32 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: TextualYearMonthDay): void;
(e: 'update:modelValue', value: TextualYearMonthDay | ''): void;
}>();
const theme = useTheme();
const { tt, getAllMinWeekdayNames, getMonthShortName, formatGregorianCalendarYearDashMonthDashDayToLongDate, isLongDateMonthAfterYear } = useI18n();
const { tt, formatGregorianCalendarYearDashMonthDashDayToLongDate } = useI18n();
const userStore = useUserStore();
const yearRange = ref<number[]>(getAllowedYearRange());
const dateTime = computed<string>({
get: () => props.modelValue ?? '',
set: (value: string) => emit('update:modelValue', value as TextualYearMonthDay)
const dateTime = computed<Date | null>({
get: () => props.modelValue ? getLocalDateFromYearDashMonthDashDay(props.modelValue) : null,
set: (value: Date | null) => emit('update:modelValue', value ? getGregorianCalendarYearAndMonthFromLocalDate(value) : '')
});
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
const displayTime = computed<string>(() => {
if (props.modelValue) {
return formatGregorianCalendarYearDashMonthDashDayToLongDate(props.modelValue);
} else if (props.noDataText) {
return props.noDataText;
} else {
return tt('Unspecified');
const displayTime = computed<string>({
get: () => {
if (props.modelValue) {
return formatGregorianCalendarYearDashMonthDashDayToLongDate(props.modelValue);
} else if (props.noDataText) {
return props.noDataText;
} else {
return tt('Unspecified');
}
},
set: (value: string) => {
if (!value) {
dateTime.value = null;
}
}
});
</script>
src/components/desktop/DateTimeSelect.vue
+9 -31
View File
@@ -12,28 +12,11 @@
</template>
<template #no-data>
<vue-date-picker inline vertical enable-seconds auto-apply
ref="datepicker"
month-name-format="long"
:clearable="false"
:enable-time-picker="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:year-range="yearRange"
:day-names="dayNames"
:year-first="isYearFirst"
:is24="is24Hour"
v-model="dateTime">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</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>
<date-time-picker :is-dark-mode="isDarkMode"
:enable-time-picker="false"
:vertical="true"
v-model="dateTime">
</date-time-picker>
<div class="date-time-select-time-picker-container">
<v-btn class="px-3" color="primary" variant="flat"
v-if="!is24Hour && isMeridiemIndicatorFirst"
@@ -50,6 +33,7 @@
:hide-no-data="true"
v-model="currentHour"
@update:focused="onFocused(hourInput, $event)"
@click="onFocused(hourInput, true)"
@keydown="onKeyDown('hour', $event)"
/>
<span>:</span>
@@ -63,6 +47,7 @@
:hide-no-data="true"
v-model="currentMinute"
@update:focused="onFocused(minuteInput, $event)"
@click="onFocused(minuteInput, true)"
@keydown="onKeyDown('minute', $event)"
/>
<span>:</span>
@@ -76,6 +61,7 @@
:hide-no-data="true"
v-model="currentSecond"
@update:focused="onFocused(secondInput, $event)"
@click="onFocused(secondInput, true)"
@keydown="onKeyDown('second', $event)"
/>
<v-btn class="px-3" color="primary" variant="flat"
@@ -124,11 +110,7 @@ const emit = defineEmits<{
}>();
const theme = useTheme();
const {
tt,
getMonthShortName,
formatUnixTimeToLongDateTime
} = useI18n();
const { tt, formatUnixTimeToLongDateTime } = useI18n();
const {
is24Hour,
@@ -136,10 +118,6 @@ const {
isMinuteTwoDigits,
isSecondTwoDigits,
isMeridiemIndicatorFirst,
yearRange,
firstDayOfWeek,
dayNames,
isYearFirst,
getDisplayTimeValue,
generateAllHours,
generateAllMinutesOrSeconds
src/components/desktop/FiscalYearStartSelect.vue
+10 -29
View File
@@ -12,29 +12,16 @@
</template>
<template #no-data>
<vue-date-picker inline auto-apply disable-year-select
month-name-format="long"
model-type="MM-dd"
six-weeks="center"
:config="{ noSwipe: true }"
:month-change-on-scroll="false"
:enable-time-picker="false"
:min-date="allowedMinDate"
:max-date="allowedMaxDate"
:disabled-dates="disabledDates"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:day-names="dayNames"
v-model="selectedFiscalYearStartValue"
>
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<date-time-picker :is-dark-mode="isDarkMode"
:vertical="true"
:enable-time-picker="false"
:disable-year-select="true"
:no-swipe-and-scroll="true"
:min-date="allowedMinDate"
:max-date="allowedMaxDate"
:disabled-dates="disabledDates"
v-model="selectedFiscalYearStartValue">
</date-time-picker>
</template>
</v-select>
</template>
@@ -43,8 +30,6 @@
import { computed, watch } from 'vue';
import { useTheme } from 'vuetify';
import { useI18n } from '@/locales/helpers.ts';
import {
type CommonFiscalYearStartSelectionProps,
type CommonFiscalYearStartSelectionEmits,
@@ -56,8 +41,6 @@ import { ThemeType } from '@/core/theme.ts';
const props = defineProps<CommonFiscalYearStartSelectionProps>();
const emit = defineEmits<CommonFiscalYearStartSelectionEmits>();
const { getMonthShortName } = useI18n();
const theme = useTheme();
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
@@ -69,8 +52,6 @@ const {
displayFiscalYearStartDate,
allowedMinDate,
allowedMaxDate,
firstDayOfWeek,
dayNames
} = useFiscalYearStartSelectionBase(props);
watch(() => props.modelValue, (newValue) => {
src/components/desktop/MonthRangeSelectionDialog.vue
+8 -32
View File
@@ -20,36 +20,10 @@
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
<v-row class="match-height">
<v-col cols="12" md="6">
<vue-date-picker inline month-picker auto-apply
month-name-format="long"
:clearable="false"
:dark="isDarkMode"
:year-range="yearRange"
:year-first="isYearFirst"
v-model="dateRange[0]">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<month-picker :is-dark-mode="isDarkMode" v-model="dateRange[0]"></month-picker>
</v-col>
<v-col cols="12" md="6">
<vue-date-picker inline month-picker auto-apply
month-name-format="long"
:clearable="false"
:dark="isDarkMode"
:year-range="yearRange"
:year-first="isYearFirst"
v-model="dateRange[1]">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<month-picker :is-dark-mode="isDarkMode" v-model="dateRange[1]"></month-picker>
</v-col>
</v-row>
</v-card-text>
@@ -73,6 +47,8 @@ import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from
import { ThemeType } from '@/core/theme.ts';
import { type TextualYearMonth } from '@/core/datetime.ts';
import { getYear0BasedMonthObjectFromString } from '@/lib/datetime.ts';
interface DesktopMonthRangeSelectionProps extends CommonMonthRangeSelectionProps {
persistent?: boolean;
}
@@ -86,8 +62,8 @@ const emit = defineEmits<{
const theme = useTheme();
const { tt, getMonthShortName } = useI18n();
const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getMonthSelectionValue, getFinalMonthRange } = useMonthRangeSelectionBase(props);
const { tt } = useI18n();
const { dateRange, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const showState = computed<boolean>({
@@ -117,7 +93,7 @@ function cancel(): void {
watch(() => props.minTime, (newValue) => {
if (newValue) {
const yearMonth = getMonthSelectionValue(newValue);
const yearMonth = getYear0BasedMonthObjectFromString(newValue);
if (yearMonth) {
dateRange.value[0] = yearMonth;
@@ -127,7 +103,7 @@ watch(() => props.minTime, (newValue) => {
watch(() => props.maxTime, (newValue) => {
if (newValue) {
const yearMonth = getMonthSelectionValue(newValue);
const yearMonth = getYear0BasedMonthObjectFromString(newValue);
if (yearMonth) {
dateRange.value[1] = yearMonth;
src/components/desktop/MonthSelectionDialog.vue
+21 -44
View File
@@ -15,20 +15,7 @@
<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>
<month-picker :is-dark-mode="isDarkMode" v-model="monthValue"></month-picker>
</v-col>
</v-row>
</v-card-text>
@@ -43,20 +30,24 @@
</template>
<script setup lang="ts">
import { computed, watch } from 'vue';
import { ref, 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 type { Year0BasedMonth } from '@/core/datetime.ts';
interface DesktopMonthSelectionProps extends CommonMonthSelectionProps {
persistent?: boolean;
}
import { getYear0BasedMonthObjectFromUnixTime, getThisMonthFirstUnixTime } from '@/lib/datetime.ts';
const props = defineProps<{
modelValue?: Year0BasedMonth;
title?: string;
hint?: string;
show: boolean;
persistent?: boolean;
}>();
const props = defineProps<DesktopMonthSelectionProps>();
const emit = defineEmits<{
(e: 'update:modelValue', value: Year0BasedMonth): void;
(e: 'update:show', value: boolean): void;
@@ -65,8 +56,9 @@ const emit = defineEmits<{
const theme = useTheme();
const { tt, getMonthShortName } = useI18n();
const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getYear0BasedMonth } = useMonthSelectionBase(props);
const { tt } = useI18n();
const monthValue = ref<Year0BasedMonth>(getYear0BasedMonthObjectFromUnixTime(getThisMonthFirstUnixTime()));
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const showState = computed<boolean>({
@@ -75,19 +67,12 @@ const showState = computed<boolean>({
});
function confirm(): void {
try {
const finalMonthRange = getYear0BasedMonth();
if (!finalMonthRange) {
return;
}
emit('update:modelValue', finalMonthRange);
} catch (ex: unknown) {
if (ex instanceof Error) {
emit('error', ex.message);
}
if (monthValue.value.year <= 0 || monthValue.value.month0base < 0) {
emit('error', 'Date is too early');
return;
}
emit('update:modelValue', monthValue.value);
}
function cancel(): void {
@@ -96,21 +81,13 @@ function cancel(): void {
watch(() => props.modelValue, (newValue) => {
if (newValue) {
const yearMonth = getMonthSelectionValue(newValue);
if (yearMonth) {
monthValue.value = yearMonth;
}
monthValue.value = newValue;
}
});
watch(() => props.show, (newValue) => {
if (newValue && props.modelValue) {
const yearMonth = getMonthSelectionValue(props.modelValue);
if (yearMonth) {
monthValue.value = yearMonth;
}
monthValue.value = props.modelValue;
}
});
</script>
src/components/mobile/DateRangeSelectionSheet.vue
+13 -39
View File
@@ -14,31 +14,13 @@
<span>{{ endDateTime }}</span>
</p>
<slot></slot>
<vue-date-picker inline enable-seconds auto-apply
ref="datetimepicker"
month-name-format="long"
six-weeks="center"
class="justify-content-center margin-bottom"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:year-range="yearRange"
:day-names="dayNames"
:year-first="isYearFirst"
:is24="is24Hour"
:range="{ partialRange: false }"
:preset-dates="presetRanges"
v-model="dateRange">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</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>
<date-time-picker ref="datetimepicker"
datetime-picker-class="justify-content-center margin-bottom"
:is-dark-mode="isDarkMode"
:enable-time-picker="true"
:preset-dates="presetRanges"
v-model="dateRange">
</date-time-picker>
<f7-button large fill
:class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
:text="tt('Continue')"
@@ -53,17 +35,14 @@
</template>
<script setup lang="ts">
import DateTimePicker from '@/components/common/DateTimePicker.vue';
import { computed, useTemplateRef } from 'vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@/components/base/DateRangeSelectionBase.ts';
import { useEnvironmentsStore } from '@/stores/environment.ts';
import { useUserStore } from '@/stores/user.ts';
import { type WeekDayValue } from '@/core/datetime.ts';
import {
getLocalDatetimeFromUnixTime,
@@ -72,7 +51,7 @@ import {
getBrowserTimezoneOffsetMinutes
} from '@/lib/datetime.ts';
type VueDatePickerType = InstanceType<typeof VueDatePicker>;
type DateTimePickerType = InstanceType<typeof DateTimePicker>;
const props = defineProps<CommonDateRangeSelectionProps>();
const emit = defineEmits<{
@@ -80,16 +59,14 @@ const emit = defineEmits<{
(e: 'dateRange:change', minUnixTime: number, maxUnixTime: number): void;
}>();
const { tt, getMonthShortName } = useI18n();
const { tt } = useI18n();
const { showToast } = useI18nUIComponents();
const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
const { dateRange, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
const environmentsStore = useEnvironmentsStore();
const userStore = useUserStore();
const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
const datetimepicker = useTemplateRef<DateTimePickerType>('datetimepicker');
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
function confirm(): void {
try {
@@ -121,10 +98,7 @@ function onSheetOpen(): void {
}
window.dispatchEvent(new Event('resize')); // fix vue-datepicker preset max-width
if (datetimepicker.value) {
datetimepicker.value.switchView('calendar');
}
datetimepicker.value?.switchView('calendar');
}
function onSheetClosed(): void {
src/components/mobile/DateSelectionSheet.vue
+18 -35
View File
@@ -12,26 +12,12 @@
</f7-toolbar>
<f7-page-content>
<div class="block block-outline no-margin no-padding">
<vue-date-picker inline auto-apply
month-name-format="long"
model-type="yyyy-MM-dd"
six-weeks="center"
class="justify-content-center"
:enable-time-picker="false"
:clearable="true"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:year-range="yearRange"
:day-names="dayNames"
:year-first="isYearFirst"
v-model="dateTime">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<date-time-picker datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
:enable-time-picker="false"
:clearable="true"
v-model="dateTime">
</date-time-picker>
</div>
</f7-page-content>
</f7-sheet>
@@ -43,11 +29,13 @@ import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useEnvironmentsStore } from '@/stores/environment.ts';
import { useUserStore } from '@/stores/user.ts';
import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
import { getAllowedYearRange } from '@/lib/datetime.ts';
import { type TextualYearMonthDay } from '@/core/datetime.ts';
import {
getLocalDateFromYearDashMonthDashDay,
getGregorianCalendarYearAndMonthFromLocalDate
} from '@/lib/datetime.ts';
const props = defineProps<{
modelValue?: TextualYearMonthDay;
@@ -55,35 +43,30 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: TextualYearMonthDay): void;
(e: 'update:modelValue', value: TextualYearMonthDay | ''): void;
(e: 'update:show', value: boolean): void;
}>();
const { tt, getAllMinWeekdayNames, getMonthShortName, isLongDateMonthAfterYear } = useI18n();
const { tt } = useI18n();
const environmentsStore = useEnvironmentsStore();
const userStore = useUserStore();
const yearRange = ref<number[]>(getAllowedYearRange());
const dateTime = ref<string>('');
const dateTime = ref<Date | null>(null);
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
function clear(): void {
dateTime.value = '';
dateTime.value = null;
confirm();
}
function confirm(): void {
emit('update:modelValue', dateTime.value as TextualYearMonthDay);
emit('update:modelValue', dateTime.value ? getGregorianCalendarYearAndMonthFromLocalDate(dateTime.value) : '');
emit('update:show', false);
}
function onSheetOpen(): void {
dateTime.value = props.modelValue ?? '';
dateTime.value = props.modelValue ? getLocalDateFromYearDashMonthDashDay(props.modelValue) : null;
}
function onSheetClosed(): void {
src/components/mobile/DateTimeSelectionSheet.vue
+14 -38
View File
@@ -12,27 +12,13 @@
</f7-toolbar>
<f7-page-content class="padding-bottom">
<div class="block block-outline no-margin no-padding">
<vue-date-picker inline enable-seconds auto-apply
ref="datetimepicker"
month-name-format="long"
six-weeks="center"
class="justify-content-center"
:enable-time-picker="false"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:year-range="yearRange"
:day-names="dayNames"
:year-first="isYearFirst"
v-model="dateTime"
v-show="mode === 'date'">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<date-time-picker ref="datetimepicker"
datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
:enable-time-picker="false"
v-model="dateTime"
v-show="mode === 'date'">
</date-time-picker>
</div>
<div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
<div id="time-picker-container" class="time-picker-container">
@@ -115,8 +101,8 @@
</template>
<script setup lang="ts">
import DateTimePicker from '@/components/common/DateTimePicker.vue';
import { ref, computed, nextTick, useTemplateRef, watch } from 'vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
@@ -137,7 +123,7 @@ import {
getCombinedDateAndTimeValues
} from '@/lib/datetime.ts';
type VueDatePickerType = InstanceType<typeof VueDatePicker>;
type DateTimePickerType = InstanceType<typeof DateTimePicker>;
const props = defineProps<{
modelValue: number;
@@ -150,11 +136,7 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
}>();
const {
tt,
getMonthShortName,
formatUnixTimeToLongDateTime
} = useI18n();
const { tt, formatUnixTimeToLongDateTime } = useI18n();
const { showToast } = useI18nUIComponents();
const {
@@ -163,11 +145,7 @@ const {
isMinuteTwoDigits,
isSecondTwoDigits,
isMeridiemIndicatorFirst,
yearRange,
meridiemItems,
firstDayOfWeek,
dayNames,
isYearFirst,
getDisplayTimeValue,
generateAllHours,
generateAllMinutesOrSeconds
@@ -175,7 +153,7 @@ const {
const environmentsStore = useEnvironmentsStore();
const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
const datetimepicker = useTemplateRef<DateTimePickerType>('datetimepicker');
let resetTimePickerItemPositionItemsClass: string | undefined = undefined;
let resetTimePickerItemPositionItemClass: string | undefined = undefined;
@@ -455,9 +433,7 @@ function onSheetOpen(): void {
});
}
if (datetimepicker.value) {
datetimepicker.value.switchView('calendar');
}
datetimepicker.value?.switchView('calendar');
}
function onSheetClosed(): void {
@@ -465,8 +441,8 @@ function onSheetClosed(): void {
}
watch(mode, (newValue) => {
if (newValue === 'date' && datetimepicker.value) {
datetimepicker.value.switchView('calendar');
if (newValue === 'date') {
datetimepicker.value?.switchView('calendar');
} else if (newValue === 'time') {
nextTick(() => {
initTimePickerStyle();
src/components/mobile/FiscalYearStartSelectionSheet.vue
+11 -26
View File
@@ -12,29 +12,16 @@
</f7-toolbar>
<f7-page-content>
<div class="block block-outline no-margin no-padding">
<vue-date-picker inline auto-apply disable-year-select
month-name-format="long"
model-type="MM-dd"
six-weeks="center"
class="justify-content-center"
:config="{ noSwipe: true }"
:month-change-on-scroll="false"
:enable-time-picker="false"
:min-date="allowedMinDate"
:max-date="allowedMaxDate"
:disabled-dates="disabledDates"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:day-names="dayNames"
v-model="selectedFiscalYearStartValue">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<date-time-picker datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
:enable-time-picker="false"
:disable-year-select="true"
:no-swipe-and-scroll="true"
:min-date="allowedMinDate"
:max-date="allowedMaxDate"
:disabled-dates="disabledDates"
v-model="selectedFiscalYearStartValue">
</date-time-picker>
</div>
</f7-page-content>
</f7-sheet>
@@ -67,7 +54,7 @@ interface MobileFiscalYearStartSelectionSheetEmits extends CommonFiscalYearStart
const props = defineProps<MobileFiscalYearStartSelectionSheetProps>();
const emit = defineEmits<MobileFiscalYearStartSelectionSheetEmits>();
const { tt, getMonthShortName } = useI18n();
const { tt } = useI18n();
const environmentsStore = useEnvironmentsStore();
const userStore = useUserStore();
@@ -78,8 +65,6 @@ const {
selectedFiscalYearStartValue,
allowedMinDate,
allowedMaxDate,
firstDayOfWeek,
dayNames
} = useFiscalYearStartSelectionBase(props);
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
src/components/mobile/MonthRangeSelectionSheet.vue
+8 -20
View File
@@ -14,22 +14,8 @@
<span>{{ endDateTime }}</span>
</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"
:range="{ partialRange: false }"
v-model="dateRange">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
</vue-date-picker>
<month-picker month-picker-class="justify-content-center margin-bottom"
:is-dark-mode="isDarkMode" v-model="dateRange"></month-picker>
<f7-button large fill
:class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
:text="tt('Continue')"
@@ -54,15 +40,17 @@ import { useEnvironmentsStore } from '@/stores/environment.ts';
import { type TextualYearMonth } from '@/core/datetime.ts';
import { getYear0BasedMonthObjectFromString } from '@/lib/datetime.ts';
const props = defineProps<CommonMonthRangeSelectionProps>();
const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
(e: 'dateRange:change', minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | ''): void;
}>();
const { tt, getMonthShortName } = useI18n();
const { tt } = useI18n();
const { showToast } = useI18nUIComponents();
const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getMonthSelectionValue, getFinalMonthRange } = useMonthRangeSelectionBase(props);
const { dateRange, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
const environmentsStore = useEnvironmentsStore();
@@ -90,7 +78,7 @@ function cancel(): void {
function onSheetOpen(): void {
if (props.minTime) {
const yearMonth = getMonthSelectionValue(props.minTime);
const yearMonth = getYear0BasedMonthObjectFromString(props.minTime);
if (yearMonth) {
dateRange.value[0] = yearMonth;
@@ -98,7 +86,7 @@ function onSheetOpen(): void {
}
if (props.maxTime) {
const yearMonth = getMonthSelectionValue(props.maxTime);
const yearMonth = getYear0BasedMonthObjectFromString(props.maxTime);
if (yearMonth) {
dateRange.value[1] = yearMonth;
src/components/mobile/MonthSelectionSheet.vue
+20 -37
View File
@@ -9,21 +9,8 @@
<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>
<month-picker month-picker-class="justify-content-center margin-bottom"
:is-dark-mode="isDarkMode" v-model="monthValue"></month-picker>
<f7-button large fill
:class="{ 'disabled': !monthValue }"
:text="tt('Continue')"
@@ -38,43 +25,43 @@
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { ref, 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 type { Year0BasedMonth } from '@/core/datetime.ts';
import { useEnvironmentsStore } from '@/stores/environment.ts';
const props = defineProps<CommonMonthSelectionProps>();
import { getYear0BasedMonthObjectFromUnixTime, getThisMonthFirstUnixTime } from '@/lib/datetime.ts';
const props = defineProps<{
modelValue?: Year0BasedMonth;
title?: string;
hint?: string;
show: boolean;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: Year0BasedMonth): void;
(e: 'update:show', value: boolean): void;
}>();
const { tt, getMonthShortName } = useI18n();
const { tt } = useI18n();
const { showToast } = useI18nUIComponents();
const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getYear0BasedMonth } = useMonthSelectionBase(props);
const environmentsStore = useEnvironmentsStore();
const monthValue = ref<Year0BasedMonth>(getYear0BasedMonthObjectFromUnixTime(getThisMonthFirstUnixTime()));
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
function confirm(): void {
try {
const finalMonthRange = getYear0BasedMonth();
if (!finalMonthRange) {
return;
}
emit('update:modelValue', finalMonthRange);
} catch (ex: unknown) {
if (ex instanceof Error) {
showToast(ex.message);
}
if (monthValue.value.year <= 0 || monthValue.value.month0base < 0) {
showToast('Date is too early');
return;
}
emit('update:modelValue', monthValue.value);
}
function cancel(): void {
@@ -83,11 +70,7 @@ function cancel(): void {
function onSheetOpen(): void {
if (props.modelValue) {
const yearMonth = getMonthSelectionValue(props.modelValue);
if (yearMonth) {
monthValue.value = yearMonth;
}
monthValue.value = props.modelValue;
}
}