migrate transaction list page to composition API and typescript

This commit is contained in:
MaysWind
2025-02-09 15:07:06 +08:00
parent bb3a0c4444
commit 596787b998
12 changed files with 1875 additions and 2453 deletions
+4 -4
View File
@@ -545,7 +545,7 @@ export function getShiftedDateRangeAndDateType(minTime: number, maxTime: number,
};
}
export function getShiftedDateRangeAndDateTypeForBillingCycle(minTime: number, maxTime: number, scale: number, firstDayOfWeek: number, scene: number, statementDate: number): TimeRangeAndDateType | null {
export function getShiftedDateRangeAndDateTypeForBillingCycle(minTime: number, maxTime: number, scale: number, firstDayOfWeek: number, scene: number, statementDate: number | undefined | null): TimeRangeAndDateType | null {
if (!statementDate || !DateRange.PreviousBillingCycle.isAvailableForScene(scene) || !DateRange.CurrentBillingCycle.isAvailableForScene(scene)) {
return null;
}
@@ -588,7 +588,7 @@ export function getDateTypeByDateRange(minTime: number, maxTime: number, firstDa
return newDateType;
}
export function getDateTypeByBillingCycleDateRange(minTime: number, maxTime: number, firstDayOfWeek: number, scene: DateRangeScene, statementDate: number): number | null {
export function getDateTypeByBillingCycleDateRange(minTime: number, maxTime: number, firstDayOfWeek: number, scene: DateRangeScene, statementDate: number | undefined | null): number | null {
if (!statementDate || !DateRange.PreviousBillingCycle.isAvailableForScene(scene) || !DateRange.CurrentBillingCycle.isAvailableForScene(scene)) {
return null;
}
@@ -605,7 +605,7 @@ export function getDateTypeByBillingCycleDateRange(minTime: number, maxTime: num
return null;
}
export function getDateRangeByDateType(dateType: number, firstDayOfWeek: number): TimeRangeAndDateType | null {
export function getDateRangeByDateType(dateType: number | undefined, firstDayOfWeek: number): TimeRangeAndDateType | null {
let maxTime = 0;
let minTime = 0;
@@ -671,7 +671,7 @@ export function getDateRangeByDateType(dateType: number, firstDayOfWeek: number)
};
}
export function getDateRangeByBillingCycleDateType(dateType: number, firstDayOfWeek: number, statementDate: number): TimeRangeAndDateType | null {
export function getDateRangeByBillingCycleDateType(dateType: number, firstDayOfWeek: number, statementDate: number | undefined | null): TimeRangeAndDateType | null {
let maxTime = 0;
let minTime = 0;
+1 -39
View File
@@ -3,7 +3,7 @@ import { TransactionType } from '@/core/transaction.ts';
import { Account } from '@/models/account.ts';
import { TransactionCategory } from '@/models/transaction_category.ts';
import { TransactionTag } from '@/models/transaction_tag.ts';
import {Transaction, TransactionPicture} from '@/models/transaction.ts';
import { Transaction, TransactionPicture } from '@/models/transaction.ts';
import {
isNumber
@@ -30,14 +30,6 @@ export interface SetTransactionOptions {
comment?: string;
}
function getDisplayAmount(amount: number, currency: string, hideAmount: boolean, formatAmountWithCurrencyFunc: (value: number | string, currencyCode?: string) => string): string {
if (hideAmount) {
return formatAmountWithCurrencyFunc('***', currency);
}
return formatAmountWithCurrencyFunc(amount, currency);
}
export function setTransactionModelByTransaction(transaction: Transaction, transaction2: Transaction | null | undefined, allCategories: Record<number, TransactionCategory[]>, allCategoriesMap: Record<string, TransactionCategory>, allVisibleAccounts: Account[], allAccountsMap: Record<string, Account>, allTagsMap: Record<string, TransactionTag>, defaultAccountId: string, options: SetTransactionOptions, setContextData: boolean, convertContextTime: boolean): void {
if (!options.type && options.categoryId && options.categoryId !== '0' && allCategoriesMap[options.categoryId]) {
const category = allCategoriesMap[options.categoryId];
@@ -190,33 +182,3 @@ export function setTransactionModelByTransaction(transaction: Transaction, trans
}
}
}
export function getTransactionDisplayAmount(transaction: Transaction, allFilterAccountIdsCount: number, allFilterAccountIds: Record<string, boolean>, formatAmountWithCurrencyFunc: (value: number | string, currencyCode?: string) => string): string {
if (allFilterAccountIdsCount < 1) {
if (transaction.sourceAccount) {
return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount, formatAmountWithCurrencyFunc);
}
} else if (allFilterAccountIdsCount === 1) {
if (transaction.sourceAccount && (allFilterAccountIds[transaction.sourceAccount.id] || allFilterAccountIds[transaction.sourceAccount.parentId])) {
return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
} else if (transaction.destinationAccount && (allFilterAccountIds[transaction.destinationAccount.id] || allFilterAccountIds[transaction.destinationAccount.parentId])) {
return getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
}
} else { // allFilterAccountIdsCount > 1
if (transaction.sourceAccount && transaction.destinationAccount) {
if ((allFilterAccountIds[transaction.sourceAccount.id] || allFilterAccountIds[transaction.sourceAccount.parentId])
&& !allFilterAccountIds[transaction.destinationAccount.id] && !allFilterAccountIds[transaction.destinationAccount.parentId]) {
return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
} else if ((allFilterAccountIds[transaction.destinationAccount.id] || allFilterAccountIds[transaction.destinationAccount.parentId])
&& !allFilterAccountIds[transaction.sourceAccount.id] && !allFilterAccountIds[transaction.sourceAccount.parentId]) {
return getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
}
}
}
if (transaction.sourceAccount) {
return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount, formatAmountWithCurrencyFunc);
}
return '';
}
+1 -1
View File
@@ -45,7 +45,7 @@ export function getCssValue(element: HTMLElement | null, name: string): string {
return computedStyle.getPropertyValue(name);
}
export function scrollToSelectedItem(parentEl: HTMLElement | null, containerSelector: string | null, selectedItemSelector: string): void {
export function scrollToSelectedItem(parentEl: HTMLElement | null | undefined, containerSelector: string | null, selectedItemSelector: string): void {
if (!parentEl) {
return;
}
+39 -62
View File
@@ -1,13 +1,12 @@
import { type Ref, watch } from 'vue';
import { useI18n as useVueI18n } from 'vue-i18n';
import { f7, f7ready } from 'framework7-vue';
import type { Dialog, Picker, Router } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { FontSize, FONT_SIZE_PREVIEW_CLASSNAME_PREFIX } from '@/core/font.ts';
import { getNumberValue } from '../common.ts';
import { isEnableAnimate } from '../settings.ts';
// @ts-expect-error the above file is migrating to ts
import { translateError } from '@/locales/helper.js';
export interface Framework7Dom {
length: number;
@@ -19,34 +18,6 @@ export interface Framework7Dom {
css(property: string): string | number;
}
type TranslateFunction = (message: string) => string;
export function showAlert(message: string, confirmCallback: ((dialog: Dialog.Dialog, e: Event) => void) | undefined, translateFn: TranslateFunction): void {
f7ready((f7) => {
f7.dialog.create({
title: translateFn('global.app.title'),
text: translateError(message, translateFn),
animate: isEnableAnimate(),
buttons: [
{
text: translateFn('OK'),
onClick: confirmCallback
}
]
}).open();
});
}
export function showToast(message: string, timeout: number | undefined, translateFn: TranslateFunction): void {
f7ready((f7) => {
f7.toast.create({
text: translateError(message, translateFn),
position: 'center',
closeTimeout: timeout || 1500
}).open();
});
}
export function showLoading(delayConditionFunc?: () => boolean, delayMills?: number): void {
if (!delayConditionFunc) {
f7ready((f7) => {
@@ -82,26 +53,6 @@ export function createInlinePicker(containerEl: string, inputEl: string, cols: P
});
}
export function routeBackOnError(f7router: Router.Router, errorPropertyName: string): void {
// @ts-expect-error vue SFC would be migrated to composition API and this function would be removed in the future
const self = this;
const router = f7router;
const unwatch = self.$watch(errorPropertyName, () => {
if (self[errorPropertyName]) {
setTimeout(() => {
if (unwatch) {
unwatch();
}
router.back();
}, 200);
}
}, {
immediate: true
});
}
export function isModalShowing(): number {
return f7.$('.modal-in').length;
}
@@ -190,7 +141,7 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
}
export function useI18nUIComponents() {
const { t } = useVueI18n();
const { tt, te } = useI18n();
function routeBackOnError<T>(f7router: Router.Router, errorRef: Ref<T>): void {
const unwatch = watch(errorRef, (newValue) => {
@@ -208,19 +159,15 @@ export function useI18nUIComponents() {
});
}
function showConfirm(message: string, confirmCallback?: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback?: ((dialog: Dialog.Dialog, e: Event) => void) | undefined): void {
function showAlert(message: string, confirmCallback?: (dialog: Dialog.Dialog, e: Event) => void): void {
f7ready((f7) => {
f7.dialog.create({
title: t('global.app.title'),
text: t(message),
title: tt('global.app.title'),
text: te(message),
animate: isEnableAnimate(),
buttons: [
{
text: t('Cancel'),
onClick: cancelCallback
},
{
text: t('OK'),
text: tt('OK'),
onClick: confirmCallback
}
]
@@ -228,10 +175,40 @@ export function useI18nUIComponents() {
});
}
function showConfirm(message: string, confirmCallback?: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback?: (dialog: Dialog.Dialog, e: Event) => void): void {
f7ready((f7) => {
f7.dialog.create({
title: tt('global.app.title'),
text: tt(message),
animate: isEnableAnimate(),
buttons: [
{
text: tt('Cancel'),
onClick: cancelCallback
},
{
text: tt('OK'),
onClick: confirmCallback
}
]
}).open();
});
}
function showToast(message: string, timeout?: number): void {
f7ready((f7) => {
f7.toast.create({
text: te(message),
position: 'center',
closeTimeout: timeout || 1500
}).open();
});
}
return {
showAlert: (message: string, confirmCallback?: (dialog: Dialog.Dialog, e: Event) => void) => showAlert(message, confirmCallback, t),
showAlert: showAlert,
showConfirm: showConfirm,
showToast: (message: string, timeout?: number): void => showToast(message, timeout, t),
showToast: showToast,
routeBackOnError
}
}