mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 15:07: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/views/base/transactions/TransactionListPageBase.ts
-8
View File
@@ -26,12 +26,10 @@ import {
getTimezoneOffsetMinutes,
getBrowserTimezoneOffsetMinutes,
getLocalDatetimeFromUnixTime,
getActualUnixTimeForStore,
getDummyUnixTimeForLocalUsage,
getCurrentDateTime,
parseDateTimeFromUnixTime,
getYearMonthFirstUnixTime,
getUnixTimeFromLocalDatetime,
isDateRangeMatchOneMonth
} from '@/lib/datetime.ts';
@@ -257,11 +255,6 @@ export function useTransactionListPageBase() {
return null;
});
function noTransactionInMonthDay(date: Date): boolean {
const dateTime = parseDateTimeFromUnixTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(date), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
return !currentMonthTransactionData.value || !currentMonthTransactionData.value.dailyTotalAmounts || !currentMonthTransactionData.value.dailyTotalAmounts[dateTime.getGregorianCalendarDay()];
}
const canAddTransaction = computed<boolean>(() => {
if (query.value.accountIds && queryAllFilterAccountIdsCount.value === 1) {
const account = allAccountsMap.value[query.value.accountIds];
@@ -395,7 +388,6 @@ export function useTransactionListPageBase() {
transactionCalendarMinDate,
transactionCalendarMaxDate,
currentMonthTransactionData,
noTransactionInMonthDay,
canAddTransaction,
// functions
getDisplayTime,
src/views/base/users/UserProfilePageBase.ts
+5 -5
View File
@@ -63,11 +63,11 @@ export function useUserProfilePageBase() {
const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
const allCalendarDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCalendarDisplayTypes());
const allDateDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllDateDisplayTypes());
const allLongDateFormats = computed<TypeAndDisplayName[]>(() => getAllLongDateFormats(DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType));
const allShortDateFormats = computed<TypeAndDisplayName[]>(() => getAllShortDateFormats(DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType));
const allLongTimeFormats = computed<TypeAndDisplayName[]>(() => getAllLongTimeFormats());
const allShortTimeFormats = computed<TypeAndDisplayName[]>(() => getAllShortTimeFormats());
const allFiscalYearFormats = computed<TypeAndDisplayName[]>(() => getAllFiscalYearFormats());
const allLongDateFormats = computed<TypeAndDisplayName[]>(() => getAllLongDateFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType || DateDisplayType.Default.calendarType));
const allShortDateFormats = computed<TypeAndDisplayName[]>(() => getAllShortDateFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType || DateDisplayType.Default.calendarType));
const allLongTimeFormats = computed<TypeAndDisplayName[]>(() => getAllLongTimeFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default));
const allShortTimeFormats = computed<TypeAndDisplayName[]>(() => getAllShortTimeFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default));
const allFiscalYearFormats = computed<TypeAndDisplayName[]>(() => getAllFiscalYearFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType || DateDisplayType.Default.calendarType));
const allCurrencyDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCurrencyDisplayTypes(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DecimalSeparator.valueOf(newProfile.value.decimalSeparator)?.symbol || DecimalSeparator.Default.symbol));
const allNumeralSystemTypes = computed<TypeAndDisplayName[]>(() => getAllNumeralSystemTypes());
const allDecimalSeparators = computed<TypeAndDisplayName[]>(() => getAllDecimalSeparators());
src/views/desktop/transactions/ListPage.vue
+9 -40
View File
@@ -165,32 +165,13 @@
</v-card-text>
<v-card-text class="transaction-calendar-container pt-0" v-if="pageType === TransactionListPageType.Calendar.type">
<vue-date-picker inline auto-apply model-type="yyyy-MM-dd"
month-name-format="long"
:config="{ noSwipe: true }"
:readonly="loading"
:disable-month-year-select="true"
:month-change-on-scroll="false"
:month-change-on-arrows="false"
:enable-time-picker="false"
:hide-offset-dates="true"
:min-date="transactionCalendarMinDate"
:max-date="transactionCalendarMaxDate"
:disabled-dates="noTransactionInMonthDay"
:prevent-min-max-navigation="true"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:day-names="dayNames"
v-model="currentCalendarDate">
<template #day="{ day }">
<div class="transaction-calendar-daily-amounts d-flex flex-column align-center justify-center w-100">
<span :class="{ 'font-weight-bold': currentMonthTransactionData && currentMonthTransactionData.dailyTotalAmounts[day] }">{{ day }}</span>
<span class="text-income" v-if="currentMonthTransactionData && currentMonthTransactionData.dailyTotalAmounts[day] && currentMonthTransactionData.dailyTotalAmounts[day].income">{{ getDisplayMonthTotalAmount(currentMonthTransactionData.dailyTotalAmounts[day].income, defaultCurrency, '', currentMonthTransactionData.dailyTotalAmounts[day].incompleteIncome) }}</span>
<span class="text-expense" v-if="currentMonthTransactionData && currentMonthTransactionData.dailyTotalAmounts[day] && currentMonthTransactionData.dailyTotalAmounts[day].expense">{{ getDisplayMonthTotalAmount(currentMonthTransactionData.dailyTotalAmounts[day].expense, defaultCurrency, '', currentMonthTransactionData.dailyTotalAmounts[day].incompleteExpense) }}</span>
</div>
</template>
</vue-date-picker>
<transaction-calendar day-has-transaction-class="font-weight-bold"
:readonly="loading" :is-dark-mode="isDarkMode"
:default-currency="defaultCurrency"
:min-date="transactionCalendarMinDate"
:max-date="transactionCalendarMaxDate"
:dailyTotalAmounts="currentMonthTransactionData?.dailyTotalAmounts"
v-model="currentCalendarDate"></transaction-calendar>
</v-card-text>
<v-table class="transaction-table" :hover="!loading">
@@ -629,7 +610,7 @@
@dateRange:change="changeCustomDateFilter"
@error="onShowDateRangeError" />
<month-selection-dialog :title="tt('Custom Date Range')"
<month-selection-dialog :title="tt('Select Month')"
:model-value="queryMonth"
v-model:show="showCustomMonthDialog"
@update:modelValue="changeCustomMonthDateFilter"
@@ -704,8 +685,7 @@ import type { TransactionTemplate } from '@/models/transaction_template.ts';
import {
isObject,
isString,
isNumber,
arrangeArrayWithNewStartIndex
isNumber
} from '@/lib/common.ts';
import {
getCurrentUnixTime,
@@ -792,7 +772,6 @@ const theme = useTheme();
const {
tt,
getAllLongWeekdayNames,
getAllRecentMonthDateRanges,
getAllTransactionTagFilterTypes,
getWeekdayLongName
@@ -837,7 +816,6 @@ const {
transactionCalendarMinDate,
transactionCalendarMaxDate,
currentMonthTransactionData,
noTransactionInMonthDay,
canAddTransaction,
getDisplayTime,
getDisplayLongDate,
@@ -896,7 +874,6 @@ const showFilterCategoryDialog = ref<boolean>(false);
const showFilterTagDialog = ref<boolean>(false);
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllLongWeekdayNames(), firstDayOfWeek.value));
const recentMonthDateRanges = computed<LocalizedRecentMonthDateRange[]>(() => getAllRecentMonthDateRanges(pageType.value === TransactionListPageType.List.type, true));
@@ -1889,12 +1866,4 @@ init(props);
.transaction-calendar-container .dp__main .dp__calendar .dp__calendar_row > .dp__calendar_item {
overflow: hidden;
}
.transaction-calendar-container .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/views/mobile/transactions/ListPage.vue
+10 -39
View File
@@ -67,33 +67,13 @@
</f7-toolbar>
<f7-block class="transaction-calendar-container margin-vertical" v-if="pageType === TransactionListPageType.Calendar.type">
<vue-date-picker inline auto-apply model-type="yyyy-MM-dd"
month-name-format="long"
class="justify-content-center"
:config="{ noSwipe: true }"
:readonly="loading"
:disable-month-year-select="true"
:month-change-on-scroll="false"
:month-change-on-arrows="false"
:enable-time-picker="false"
:hide-offset-dates="true"
:min-date="transactionCalendarMinDate"
:max-date="transactionCalendarMaxDate"
:disabled-dates="noTransactionInMonthDay"
:prevent-min-max-navigation="true"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:day-names="dayNames"
v-model="currentCalendarDate">
<template #day="{ day }">
<div class="transaction-calendar-daily-amounts display-flex flex-direction-column align-items-center justify-content-center">
<span>{{ day }}</span>
<small class="text-income" v-if="currentMonthTransactionData && currentMonthTransactionData.dailyTotalAmounts[day] && currentMonthTransactionData.dailyTotalAmounts[day].income">{{ getDisplayMonthTotalAmount(currentMonthTransactionData.dailyTotalAmounts[day].income, false, '', currentMonthTransactionData.dailyTotalAmounts[day].incompleteIncome) }}</small>
<small class="text-expense" v-if="currentMonthTransactionData && currentMonthTransactionData.dailyTotalAmounts[day] && currentMonthTransactionData.dailyTotalAmounts[day].expense">{{ getDisplayMonthTotalAmount(currentMonthTransactionData.dailyTotalAmounts[day].expense, false, '', currentMonthTransactionData.dailyTotalAmounts[day].incompleteExpense) }}</small>
</div>
</template>
</vue-date-picker>
<transaction-calendar calendar-class="justify-content-center" week-day-name-type="short"
:readonly="loading" :is-dark-mode="isDarkMode"
:default-currency="false"
:min-date="transactionCalendarMinDate"
:max-date="transactionCalendarMaxDate"
:dailyTotalAmounts="currentMonthTransactionData?.dailyTotalAmounts"
v-model="currentCalendarDate"></transaction-calendar>
</f7-block>
<div class="skeleton-text" v-if="loading">
@@ -351,7 +331,7 @@
@dateRange:change="changeCustomDateFilter">
</date-range-selection-sheet>
<month-selection-sheet :title="tt('Custom Date Range')"
<month-selection-sheet :title="tt('Select Month')"
:model-value="queryMonth"
v-model:show="showCustomMonthSheet"
@update:modelValue="changeCustomMonthDateFilter">
@@ -632,8 +612,7 @@ import type { TransactionCategory } from '@/models/transaction_category.ts';
import type { Transaction } from '@/models/transaction.ts';
import {
isNumber,
arrangeArrayWithNewStartIndex
isNumber
} from '@/lib/common.ts';
import {
getCurrentUnixTime,
@@ -665,7 +644,6 @@ const props = defineProps<{
const {
tt,
getCurrentLanguageTextDirection,
getAllShortWeekdayNames,
getAllTransactionTagFilterTypes,
getWeekdayShortName,
formatUnixTimeToDayOfMonth
@@ -713,7 +691,6 @@ const {
transactionCalendarMinDate,
transactionCalendarMaxDate,
currentMonthTransactionData,
noTransactionInMonthDay,
canAddTransaction,
getDisplayTime,
getDisplayLongYearMonth,
@@ -745,7 +722,6 @@ const showDeleteActionSheet = ref<boolean>(false);
const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllShortWeekdayNames(), firstDayOfWeek.value));
const allTransactionTagFilterTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionTagFilterTypes());
@@ -1697,12 +1673,7 @@ html[dir="rtl"] .list.transaction-info-list li.transaction-info .transaction-foo
white-space: nowrap;
}
.transaction-calendar-container .dp__main .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > small {
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.transaction-calendar-container .dp__main .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span.transaction-calendar-daily-amount {
font-size: var(--ebk-transaction-calendar-amount-font-size);
}
</style>
src/views/mobile/users/UserProfilePage.vue
+1 -1
View File
@@ -226,7 +226,7 @@
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Calendar')"
:header="tt('Calendar Display Type')"
:title="findDisplayNameByType(allCalendarDisplayTypes, newProfile.calendarDisplayType)"
@click="showCalendarDisplayTypePopup = true"
>