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

support changing account category order

Browse Source
This commit is contained in:
MaysWind
2026-01-04 22:50:13 +08:00
parent 6e369f39a4
commit 0ce66d9070
50 changed files with 575 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/accounts/AccountEditPageBase.ts
+9 -2
View File
@@ -2,6 +2,7 @@ import { ref, computed, watch } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
import type { TypeAndDisplayName } from '@/core/base.ts';
@@ -25,13 +26,16 @@ export interface DayAndDisplayName {
export function useAccountEditPageBase() {
const { tt, getAllAccountCategories, getAllAccountTypes, getMonthdayShortName } = useI18n();
const settingsStore = useSettingsStore();
const userStore = useUserStore();
const defaultAccountCategory = AccountCategory.values(settingsStore.appSettings.accountCategoryOrders)[0] ?? AccountCategory.Default;
const editAccountId = ref<string | null>(null);
const clientSessionId = ref<string>('');
const loading = ref<boolean>(false);
const submitting = ref<boolean>(false);
const account = ref<Account>(Account.createNewAccount(userStore.currentUserDefaultCurrency, getCurrentUnixTimeForNewAccount()));
const account = ref<Account>(Account.createNewAccount(defaultAccountCategory, userStore.currentUserDefaultCurrency, getCurrentUnixTimeForNewAccount()));
const subAccounts = ref<Account[]>([]);
const title = computed<string>(() => {
@@ -72,7 +76,8 @@ export function useAccountEditPageBase() {
const inputIsEmpty = computed<boolean>(() => !!inputEmptyProblemMessage.value);
const allAccountCategories = computed<LocalizedAccountCategory[]>(() => getAllAccountCategories());
const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
const allAccountCategories = computed<LocalizedAccountCategory[]>(() => getAllAccountCategories(customAccountCategoryOrder.value));
const allAccountTypes = computed<TypeAndDisplayName[]>(() => getAllAccountTypes());
const allAvailableMonthDays = computed<DayAndDisplayName[]>(() => {
@@ -181,6 +186,8 @@ export function useAccountEditPageBase() {
});
return {
// constants
defaultAccountCategory,
// states
editAccountId,
clientSessionId,
src/views/base/accounts/AccountListPageBase.ts
+6 -1
View File
@@ -8,7 +8,7 @@ import { useAccountsStore } from '@/stores/account.ts';
import type { HiddenAmount, NumberWithSuffix } from '@/core/numeral.ts';
import type { WeekDayValue } from '@/core/datetime.ts';
import { type AccountCategory, AccountType } from '@/core/account.ts';
import { AccountCategory, AccountType } from '@/core/account.ts';
import type { Account, CategorizedAccount } from '@/models/account.ts';
import { isObject, isNumber, isString } from '@/lib/common.ts';
@@ -29,6 +29,9 @@ export function useAccountListPageBase() {
set: (value) => settingsStore.setShowAccountBalance(value)
});
const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
const defaultAccountCategory = computed<AccountCategory>(() => AccountCategory.values(customAccountCategoryOrder.value)[0] ?? AccountCategory.Default);
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
@@ -90,6 +93,8 @@ export function useAccountListPageBase() {
displayOrderModified,
// computed states
showAccountBalance,
customAccountCategoryOrder,
defaultAccountCategory,
firstDayOfWeek,
fiscalYearStart,
defaultCurrency,
src/views/base/accounts/MoveAllTransactionsPageBase.ts
+2 -1
View File
@@ -19,9 +19,10 @@ export function useMoveAllTransactionsPageBase() {
const toAccountName = ref<string>('');
const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value, customAccountCategoryOrder.value));
const displayToAccountName = computed<string>(() => {
if (!toAccountId.value) {
src/views/base/settings/AccountCategoryDisplayOrderSettingsPageBase.ts
+63
View File
@@ -0,0 +1,63 @@
import { ref } from 'vue';
import { AccountCategory } from '@/core/account.ts';
import { useSettingsStore } from '@/stores/setting.ts';
export function useAccountCategoryDisplayOrderSettingsPageBase() {
const settingsStore = useSettingsStore();
const accountCategories = ref<AccountCategory[]>(AccountCategory.values(settingsStore.appSettings.accountCategoryOrders));
function isDisplayOrderModified(): boolean {
const currentOrders = AccountCategory.values(settingsStore.appSettings.accountCategoryOrders);
if (currentOrders.length !== accountCategories.value.length) {
return true;
}
for (let i = 0; i < currentOrders.length; i++) {
const accountCategory = accountCategories.value[i];
const currentCategory = currentOrders[i];
if (!accountCategory || !currentCategory) {
return true;
}
if (accountCategory.type !== currentCategory.type) {
return true;
}
}
return false;
}
function loadDisplayOrderFromSettings(): void {
accountCategories.value = AccountCategory.values(settingsStore.appSettings.accountCategoryOrders);
}
function saveDisplayOrderToSettings(): void {
const displayOrders = accountCategories.value.map(category => category.type).join(',');
const defaultOrders = AccountCategory.values('').map(category => category.type).join(',');
if (displayOrders === defaultOrders) {
settingsStore.setAccountCategoryOrders('');
} else {
settingsStore.setAccountCategoryOrders(displayOrders);
}
}
function resetDisplayOrderToDefault(): void {
accountCategories.value = AccountCategory.values('');
}
return {
// states
accountCategories,
// functions
isDisplayOrderModified,
loadDisplayOrderFromSettings,
saveDisplayOrderToSettings,
resetDisplayOrderToDefault
};
}
src/views/base/settings/AccountFilterSettingPageBase.ts
+6 -4
View File
@@ -7,7 +7,7 @@ import { useStatisticsStore } from '@/stores/statistics.ts';
import { useOverviewStore } from '@/stores/overview.ts';
import { keys, keysIfValueEquals, values } from '@/core/base.ts';
import type {Account, CategorizedAccount} from '@/models/account.ts';
import type { Account, CategorizedAccount } from '@/models/account.ts';
import {
filterCategorizedAccounts,
@@ -49,11 +49,12 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType, select
return type === 'statisticsDefault' || type === 'statisticsCurrent' || type === 'homePageOverview' || type === 'transactionListCurrent' || type === 'custom';
});
const allCategorizedAccounts = computed<Record<number, CategorizedAccount>>(() => filterCategorizedAccounts(accountsStore.allCategorizedAccountsMap, filterContent.value, showHidden.value));
const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
const allCategorizedAccounts = computed<CategorizedAccount[]>(() => filterCategorizedAccounts(accountsStore.allCategorizedAccountsMap, customAccountCategoryOrder.value, filterContent.value, showHidden.value));
const allVisibleAccountMap = computed<Record<string, Account>>(() => {
const accountMap: Record<string, Account> = {};
for (const accountCategory of values(allCategorizedAccounts.value)) {
for (const accountCategory of allCategorizedAccounts.value) {
for (const account of accountCategory.accounts) {
accountMap[account.id] = account;
@@ -69,7 +70,7 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType, select
});
const hasAnyAvailableAccount = computed<boolean>(() => accountsStore.allAvailableAccountsCount > 0);
const hasAnyVisibleAccount = computed<boolean>(() => {
for (const accountCategory of values(allCategorizedAccounts.value)) {
for (const accountCategory of allCategorizedAccounts.value) {
if (accountCategory.accounts.length > 0) {
return true;
}
@@ -204,6 +205,7 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType, select
title,
applyText,
allowHiddenAccount,
customAccountCategoryOrder,
allCategorizedAccounts,
allVisibleAccountMap,
hasAnyAvailableAccount,
src/views/base/settings/AppCloudSyncPageBase.ts
+1
View File
@@ -61,6 +61,7 @@ export const ALL_APPLICATION_CLOUD_SETTINGS: CategorizedApplicationCloudSettingI
categoryName: 'Account List Page',
items: [
{ settingKey: 'totalAmountExcludeAccountIds', settingName: 'Accounts Included in Total', mobile: true, desktop: true },
{ settingKey: 'accountCategoryOrders', settingName: 'Account Category Order', mobile: true, desktop: true },
{ settingKey: 'hideCategoriesWithoutAccounts', settingName: 'Hide Categories Without Accounts', mobile: false, desktop: true }
]
},
src/views/base/settings/AppSettingsPageBase.ts
+9
View File
@@ -134,6 +134,14 @@ export function useAppSettingPageBase() {
return getIncludedAccountsDisplayContent(excludeAccountIds, accountsStore.allVisiblePlainAccounts);
});
const accountCategorysDisplayOrderContent = computed<string>(() => {
if (!settingsStore.appSettings.accountCategoryOrders) {
return tt('Default');
}
return tt('Custom');
});
const transactionCategoriesIncludedInHomePageOverviewDisplayContent = computed<string>(() => {
const excludeAccountIds = settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage;
return getIncludedTransactionCategoriesDisplayContent(excludeAccountIds);
@@ -237,6 +245,7 @@ export function useAppSettingPageBase() {
currencySortByInExchangeRatesPage,
accountsIncludedInHomePageOverviewDisplayContent,
accountsIncludedInTotalDisplayContent,
accountCategorysDisplayOrderContent,
transactionCategoriesIncludedInHomePageOverviewDisplayContent
};
}
src/views/base/transactions/TransactionEditPageBase.ts
+2 -1
View File
@@ -96,6 +96,7 @@ export function useTransactionEditPageBase(type: TransactionEditPageType, initMo
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(transaction.value.time));
const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
const defaultAccountId = computed<string>(() => userStore.currentUserDefaultAccountId);
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
@@ -105,7 +106,7 @@ export function useTransactionEditPageBase(type: TransactionEditPageType, initMo
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
const allAccountsMap = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value, customAccountCategoryOrder.value));
const allCategories = computed<Record<number, TransactionCategory[]>>(() => transactionCategoriesStore.allTransactionCategories);
const allCategoriesMap = computed<Record<string, TransactionCategory>>(() => transactionCategoriesStore.allTransactionCategoriesMap);
const allTags = computed<TransactionTag[]>(() => transactionTagsStore.allTransactionTags);
src/views/base/users/UserProfilePageBase.ts
+1 -1
View File
@@ -68,7 +68,7 @@ export function useUserProfilePageBase() {
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value));
const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value, settingsStore.appSettings.accountCategoryOrders));
const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
const allCalendarDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCalendarDisplayTypes());
const allDateDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllDateDisplayTypes());
src/views/desktop/accounts/ListPage.vue
+4 -2
View File
@@ -31,7 +31,7 @@
<v-tabs show-arrows class="account-category-tabs my-4" direction="vertical"
:disabled="loading" v-model="activeAccountCategoryType">
<v-tab class="tab-text-truncate" :key="accountCategory.type" :value="accountCategory.type"
v-for="accountCategory in AccountCategory.values()"
v-for="accountCategory in AccountCategory.values(customAccountCategoryOrder)"
v-show="!hideAccountCategoriesWithoutAccounts || (allCategorizedAccountsMap[accountCategory.type] && allCategorizedAccountsMap[accountCategory.type]!.accounts.length > 0)">
<ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
<div class="d-flex flex-column text-truncate ms-2">
@@ -372,6 +372,8 @@ const {
showHidden,
displayOrderModified,
showAccountBalance,
customAccountCategoryOrder,
defaultAccountCategory,
firstDayOfWeek,
fiscalYearStart,
allAccounts,
@@ -394,7 +396,7 @@ const reconciliationStatementDialog = useTemplateRef<ReconciliationStatementDial
const moveAllTransactionsDialog = useTemplateRef<MoveAllTransactionsDialogType>('moveAllTransactionsDialog');
const clearAllTransactionsDialog = useTemplateRef<ClearAllTransactionsDialogType>('clearAllTransactionsDialog');
const activeAccountCategoryType = ref<number>(AccountCategory.Default.type);
const activeAccountCategoryType = ref<number>(defaultAccountCategory.value.type);
const activeTab = ref<string>('accountPage');
const activeSubAccount = ref<Record<string, string>>({});
const accountToShowReconciliationStatement = ref<Account | null>(null);
src/views/desktop/accounts/list/dialogs/EditDialog.vue
+3 -2
View File
@@ -229,6 +229,7 @@ type SnackBarType = InstanceType<typeof SnackBar>;
const { tt } = useI18n();
const {
defaultAccountCategory,
editAccountId,
clientSessionId,
loading,
@@ -279,7 +280,7 @@ const accountAmountTitle = computed<string>(() => {
const isAccountModified = computed<boolean>(() => {
if (!editAccountId.value) {
return !account.value.equals(Account.createNewAccount(userStore.currentUserDefaultCurrency, account.value.balanceTime ?? getCurrentUnixTimeForNewAccount()));
return !account.value.equals(Account.createNewAccount(defaultAccountCategory, userStore.currentUserDefaultCurrency, account.value.balanceTime ?? getCurrentUnixTimeForNewAccount()));
} else {
return true;
}
@@ -293,7 +294,7 @@ function open(options?: { id?: string, currentAccount?: Account, category?: numb
loading.value = true;
submitting.value = false;
const newAccount = Account.createNewAccount(userStore.currentUserDefaultCurrency, getCurrentUnixTimeForNewAccount());
const newAccount = Account.createNewAccount(defaultAccountCategory, userStore.currentUserDefaultCurrency, getCurrentUnixTimeForNewAccount());
account.value.fillFrom(newAccount);
subAccounts.value = [];
currentAccountIndex.value = -1;
src/views/desktop/app/settings/dialogs/AccountCategoryDisplayOrderDialog.vue
+113
View File
@@ -0,0 +1,113 @@
<template>
<v-dialog width="600" :persistent="isDisplayOrderModified()" v-model="showState">
<v-card class="pa-sm-1 pa-md-2">
<template #title>
<div class="d-flex align-center justify-center">
<div class="d-flex align-center">
<h4 class="text-h4">{{ tt('Account Category Order') }}</h4>
</div>
<v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ms-2" :icon="true">
<v-icon :icon="mdiDotsVertical" />
<v-menu activator="parent">
<v-list>
<v-list-item :prepend-icon="mdiRestore"
:title="tt('Reset to Default')"
@click="resetDisplayOrderToDefault"></v-list-item>
</v-list>
</v-menu>
</v-btn>
</div>
</template>
<v-card-text class="d-flex flex-column flex-md-row flex-grow-1 overflow-y-auto">
<v-table hover density="comfortable" class="w-100 table-striped">
<draggable-list tag="tbody"
item-key="id"
handle=".drag-handle"
ghost-class="dragging-item"
v-model="accountCategories">
<template #item="{ element }">
<tr class="text-sm">
<td>
<div class="d-flex align-center">
<div class="d-flex align-center">
<span>{{ tt(element.name) }}</span>
</div>
<v-spacer/>
<span class="ms-2">
<v-icon class="drag-handle" :icon="mdiDrag"/>
<v-tooltip activator="parent">{{ tt('Drag to Reorder') }}</v-tooltip>
</span>
</div>
</td>
</tr>
</template>
</draggable-list>
</v-table>
</v-card-text>
<v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
<v-btn :disabled="!isDisplayOrderModified()" @click="saveDisplayOrder">{{ tt('Save') }}</v-btn>
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useAccountCategoryDisplayOrderSettingsPageBase } from '@/views/base/settings/AccountCategoryDisplayOrderSettingsPageBase.ts';
import {
mdiDotsVertical,
mdiRestore,
mdiDrag
} from '@mdi/js';
const { tt } = useI18n();
const {
accountCategories,
isDisplayOrderModified,
loadDisplayOrderFromSettings,
saveDisplayOrderToSettings,
resetDisplayOrderToDefault
} = useAccountCategoryDisplayOrderSettingsPageBase();
let resolveFunc: (() => void) | null = null;
let rejectFunc: (() => void) | null = null;
const showState = ref<boolean>(false);
function open(): Promise<void> {
loadDisplayOrderFromSettings();
showState.value = true;
return new Promise<void>((resolve, reject) => {
resolveFunc = resolve;
rejectFunc = reject;
});
}
function saveDisplayOrder(): void {
saveDisplayOrderToSettings();
resolveFunc?.();
showState.value = false;
}
function cancel(): void {
rejectFunc?.();
showState.value = false;
}
defineExpose({
open
});
</script>
src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
+19
View File
@@ -277,6 +277,19 @@
@click="showAccountsIncludedInTotalDialog = true"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field
class="always-cursor-pointer"
item-title="displayName"
item-value="type"
persistent-placeholder
:readonly="true"
:label="tt('Account Category Order')"
:placeholder="tt('Account Category Order')"
:model-value="accountCategorysDisplayOrderContent"
@click="accountCategorysDisplayOrderDialog?.open()"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
@@ -332,6 +345,8 @@
@settings:change="showAccountsIncludedInTotalDialog = false" />
</v-dialog>
<account-category-display-order-dialog ref="accountCategorysDisplayOrderDialog" />
<snack-bar ref="snackbar" />
</template>
@@ -339,6 +354,7 @@
import SnackBar from '@/components/desktop/SnackBar.vue';
import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
import AccountCategoryDisplayOrderDialog from '@/views/desktop/app/settings/dialogs/AccountCategoryDisplayOrderDialog.vue';
import { ref, computed, useTemplateRef } from 'vue';
import { useTheme } from 'vuetify';
@@ -358,6 +374,7 @@ import { CategoryType } from '@/core/category.ts';
import { getSystemTheme } from '@/lib/ui/common.ts';
type SnackBarType = InstanceType<typeof SnackBar>;
type AccountCategoryDisplayOrderDialogType = InstanceType<typeof AccountCategoryDisplayOrderDialog>;
const theme = useTheme();
@@ -386,6 +403,7 @@ const {
currencySortByInExchangeRatesPage,
accountsIncludedInHomePageOverviewDisplayContent,
accountsIncludedInTotalDisplayContent,
accountCategorysDisplayOrderContent,
transactionCategoriesIncludedInHomePageOverviewDisplayContent
} = useAppSettingPageBase();
@@ -394,6 +412,7 @@ const accountsStore = useAccountsStore();
const transactionCategoriesStore = useTransactionCategoriesStore();
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const accountCategorysDisplayOrderDialog = useTemplateRef<AccountCategoryDisplayOrderDialogType>('accountCategorysDisplayOrderDialog');
const showAccountsIncludedInHomePageOverviewDialog = ref<boolean>(false);
const showTransactionCategoriesIncludedInHomePageOverviewDialog = ref<boolean>(false);
src/views/desktop/common/cards/AccountFilterSettingsCard.vue
+2 -1
View File
@@ -181,6 +181,7 @@ const {
title,
applyText,
allowHiddenAccount,
customAccountCategoryOrder,
allCategorizedAccounts,
allVisibleAccountMap,
hasAnyAvailableAccount,
@@ -194,7 +195,7 @@ const accountsStore = useAccountsStore();
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const expandAccountCategories = ref<number[]>(AccountCategory.values().map(category => category.type));
const expandAccountCategories = ref<number[]>(AccountCategory.values(customAccountCategoryOrder.value).map(category => category.type));
function init(): void {
accountsStore.loadAllAccounts({
src/views/desktop/transactions/import/dialogs/BatchReplaceAllTypesDialog.vue
+2 -1
View File
@@ -279,9 +279,10 @@ let resolveFunc: ((response: BatchReplaceAllTypesDialogResponse) => void) | null
let rejectFunc: ((reason?: unknown) => void) | null = null;
const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value, customAccountCategoryOrder.value));
const allCategories = computed<Record<number, TransactionCategory[]>>(() => transactionCategoriesStore.allTransactionCategories);
const allTags = computed<TransactionTag[]>(() => transactionTagsStore.allTransactionTags);
src/views/desktop/transactions/import/dialogs/BatchReplaceDialog.vue
+2 -1
View File
@@ -269,9 +269,10 @@ let resolveFunc: ((response: BatchReplaceDialogResponse) => void) | null = null;
let rejectFunc: ((reason?: unknown) => void) | null = null;
const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value, customAccountCategoryOrder.value));
const allCategories = computed<Record<number, TransactionCategory[]>>(() => transactionCategoriesStore.allTransactionCategories);
const allTags = computed<TransactionTag[]>(() => transactionTagsStore.allTransactionTags);
src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
+2 -1
View File
@@ -539,13 +539,14 @@ const currentDescriptionFilterValue = ref<string | null>(null);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
const coordinateDisplayType = computed<number>(() => userStore.currentUserCoordinateDisplayType);
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value, customAccountCategoryOrder.value));
const allAccountsMap = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
const allAccountsMapByName = computed<Record<string, Account>>(() => getAccountMapByName(accountsStore.allAccounts));
const allCategories = computed<Record<number, TransactionCategory[]>>(() => transactionCategoriesStore.allTransactionCategories);
src/views/mobile/accounts/ListPage.vue
+2 -1
View File
@@ -68,7 +68,7 @@
</f7-list>
<div :key="accountCategory.type"
v-for="accountCategory in AccountCategory.values()"
v-for="accountCategory in AccountCategory.values(customAccountCategoryOrder)"
v-show="!loading && ((showHidden && hasAccount(accountCategory, false)) || hasAccount(accountCategory, true))">
<f7-list strong inset dividers sortable class="list-has-group-title account-list margin-vertical"
:sortable-enabled="sortable"
@@ -246,6 +246,7 @@ const {
showHidden,
displayOrderModified,
showAccountBalance,
customAccountCategoryOrder,
allCategorizedAccountsMap,
allAccountCount,
netAssets,
src/views/mobile/settings/AccountCategoryDisplayOrderSettingsPage.vue
+117
View File
@@ -0,0 +1,117 @@
<template>
<f7-page>
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt('Account Category Order')"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !isDisplayOrderModified() }" @click="saveDisplayOrder"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-list strong inset dividers sortable sortable-enabled class="margin-top"
@sortable:sort="onSort">
<f7-list-item :id="getAccountCategoryDomId(accountCategory)"
:key="accountCategory.type"
:title="tt(accountCategory.name)"
v-for="accountCategory in accountCategories">
</f7-list-item>
</f7-list>
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
<f7-actions-group>
<f7-actions-button @click="resetToDefault()">{{ tt('Reset to Default') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
</f7-actions-group>
</f7-actions>
</f7-page>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { Router } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
import { useAccountCategoryDisplayOrderSettingsPageBase } from '@/views/base/settings/AccountCategoryDisplayOrderSettingsPageBase.ts';
import { AccountCategory } from '@/core/account.ts';
const props = defineProps<{
f7router: Router.Router;
}>();
const { tt } = useI18n();
const { showToast } = useI18nUIComponents();
const {
accountCategories,
isDisplayOrderModified,
loadDisplayOrderFromSettings,
saveDisplayOrderToSettings,
resetDisplayOrderToDefault
} = useAccountCategoryDisplayOrderSettingsPageBase();
const showMoreActionSheet = ref<boolean>(false);
function getAccountCategoryDomId(accountCategory: AccountCategory): string {
return 'account_category_' + accountCategory.type;
}
function parseAccountCategoryTypeFromDomId(domId: string): string | null {
if (!domId || domId.indexOf('account_category_') !== 0) {
return null;
}
return domId.substring(17); // account_category_
}
function init(): void {
loadDisplayOrderFromSettings();
}
function saveDisplayOrder(): void {
saveDisplayOrderToSettings();
showToast('Account category order saved');
props.f7router.back();
}
function resetToDefault() {
resetDisplayOrderToDefault();
showMoreActionSheet.value = false;
}
function onSort(event: { el: { id: string }, from: number, to: number }): void {
if (!event || !event.el || !event.el.id) {
showToast('Unable to move account category');
return;
}
const type = parseAccountCategoryTypeFromDomId(event.el.id);
if (!type) {
showToast('Unable to move account category');
return;
}
let currentAccountCategory: AccountCategory | null = null;
for (const accountCategory of accountCategories.value) {
if (accountCategory.type.toString() === type) {
currentAccountCategory = accountCategory;
break;
}
}
if (!currentAccountCategory || !accountCategories.value[event.to]) {
showToast('Unable to move account category');
return;
}
accountCategories.value.splice(event.to, 0, accountCategories.value.splice(event.from, 1)[0] as AccountCategory);
}
init();
</script>
src/views/mobile/settings/AccountFilterSettingsPage.vue
+2 -1
View File
@@ -178,6 +178,7 @@ const {
filterAccountIds,
title,
allowHiddenAccount,
customAccountCategoryOrder,
allCategorizedAccounts,
allVisibleAccountMap,
hasAnyAvailableAccount,
@@ -195,7 +196,7 @@ const showMoreActionSheet = ref<boolean>(false);
function getCollapseStates(): Record<number, CollapseState> {
const collapseStates: Record<number, CollapseState> = {};
const allCategories = AccountCategory.values();
const allCategories = AccountCategory.values(customAccountCategoryOrder.value);
for (const accountCategory of allCategories) {
collapseStates[accountCategory.type] = {
src/views/mobile/settings/PageSettingsPage.vue
+13
View File
@@ -153,6 +153,18 @@
<div v-else-if="!loadingAccounts">{{ accountsIncludedInTotalDisplayContent }}</div>
</template>
</f7-list-item>
<f7-list-item
class="item-truncate-after-text"
link="/settings/account_category_display_order">
<template #after-title>
<div class="item-actual-title">
<span>{{ tt('Account Category Order') }}</span>
</div>
</template>
<template #after>
<div>{{ accountCategorysDisplayOrderContent }}</div>
</template>
</f7-list-item>
</f7-list>
<f7-block-title>{{ tt('Exchange Rates Data Page') }}</f7-block-title>
@@ -221,6 +233,7 @@ const {
currencySortByInExchangeRatesPage,
accountsIncludedInHomePageOverviewDisplayContent,
accountsIncludedInTotalDisplayContent,
accountCategorysDisplayOrderContent,
transactionCategoriesIncludedInHomePageOverviewDisplayContent
} = useAppSettingPageBase();