zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use the new popup select dialog

Browse Source
This commit is contained in:
MaysWind
2025-03-09 16:23:23 +08:00
parent 2bf8c0b501
commit 639bd9c5cd
12 changed files with 473 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/common.ts
+11 -1
View File
@@ -1,4 +1,4 @@
import type { TypeAndName, TypeAndDisplayName } from '@/core/base.ts';
import type { NameValue, TypeAndName, TypeAndDisplayName} from '@/core/base.ts';
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
export function isFunction(val: unknown): val is Function {
@@ -303,6 +303,16 @@ export function getItemByKeyValue<T>(src: Record<string, T>[] | Record<string, R
return null;
}
export function findNameByValue(items: NameValue[], value: string): string | null {
for (const item of items) {
if (item.value === value) {
return item.name;
}
}
return null;
}
export function findNameByType(items: TypeAndName[], type: number): string | null {
for (const item of items) {
if (item.type === type) {
src/mobile-main.ts
-3
View File
@@ -24,7 +24,6 @@ import Framework7Checkbox from 'framework7/components/checkbox';
import Framework7Radio from 'framework7/components/radio';
import Framework7Toggle from 'framework7/components/toggle';
import Framework7Range from 'framework7/components/range';
import Framework7SmartSelect from 'framework7/components/smart-select';
import Framework7Grid from 'framework7/components/grid';
import Framework7Picker from 'framework7/components/picker';
import Framework7InfiniteScroll from 'framework7/components/infinite-scroll';
@@ -61,7 +60,6 @@ import 'framework7/components/checkbox/css';
import 'framework7/components/radio/css';
import 'framework7/components/toggle/css';
import 'framework7/components/range/css';
import 'framework7/components/smart-select/css';
import 'framework7/components/grid/css';
import 'framework7/components/picker/css';
import 'framework7/components/infinite-scroll/css';
@@ -144,7 +142,6 @@ Framework7.use([
Framework7Radio,
Framework7Toggle,
Framework7Range,
Framework7SmartSelect,
Framework7Grid,
Framework7Picker,
Framework7InfiniteScroll,
src/styles/mobile/global.css
+8
View File
@@ -180,6 +180,14 @@ i.icon.la, i.icon.las, i.icon.lab {
text-overflow: ellipsis;
}
.settings-list .item-inner > .item-after {
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
display: block;
}
.login-page-fixed-bottom {
background-color: inherit !important;
}
src/views/base/settings/AppSettingsPageBase.ts
+20 -2
View File
@@ -7,21 +7,37 @@ import { useTransactionsStore } from '@/stores/transaction.ts';
import { useOverviewStore } from '@/stores/overview.ts';
import { useStatisticsStore } from '@/stores/statistics.ts';
import type { TypeAndDisplayName } from '@/core/base.ts';
import type { NameValue, TypeAndDisplayName } from '@/core/base.ts';
import type { LocalizedTimezoneInfo } from '@/core/timezone.ts';
export function useAppSettingPageBase() {
const { getAllTimezones, getAllTimezoneTypesUsedForStatistics, getAllCurrencySortingTypes, setTimeZone } = useI18n();
const { tt, getAllTimezones, getAllTimezoneTypesUsedForStatistics, getAllCurrencySortingTypes, setTimeZone } = useI18n();
const settingsStore = useSettingsStore();
const transactionsStore = useTransactionsStore();
const overviewStore = useOverviewStore();
const statisticsStore = useStatisticsStore();
const allThemes = computed<NameValue[]>(() => {
return [
{ name: tt('System Default'), value: 'auto' },
{ name: tt('Light'), value: 'light' },
{ name: tt('Dark'), value: 'dark' }
];
});
const allTimezones = computed<LocalizedTimezoneInfo[]>(() => getAllTimezones(true));
const allTimezoneTypesUsedForStatistics = computed<TypeAndDisplayName[]>(() => getAllTimezoneTypesUsedForStatistics());
const allCurrencySortingTypes = computed<TypeAndDisplayName[]>(() => getAllCurrencySortingTypes());
const allAutoSaveTransactionDraftTypes = computed<NameValue[]>(() => {
return [
{ name: tt('Disabled'), value: 'disabled' },
{ name: tt('Enabled'), value: 'enabled' },
{ name: tt('Show Confirmation Every Time'), value: 'confirmation' }
];
});
const timeZone = computed<string>({
get: () => settingsStore.appSettings.timeZone,
set: (value) => {
@@ -94,9 +110,11 @@ export function useAppSettingPageBase() {
return {
// computed states
allThemes,
allTimezones,
allTimezoneTypesUsedForStatistics,
allCurrencySortingTypes,
allAutoSaveTransactionDraftTypes,
timeZone,
isAutoUpdateExchangeRatesData,
showAccountBalance,
src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
+6 -12
View File
@@ -7,16 +7,12 @@
<v-row>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-title="name"
item-value="value"
persistent-placeholder
:label="tt('Theme')"
:placeholder="tt('Theme')"
:items="[
{ value: 'auto', displayName: tt('System Default') },
{ value: 'light', displayName: tt('Light') },
{ value: 'dark', displayName: tt('Dark') }
]"
:items="allThemes"
v-model="currentTheme"
/>
</v-col>
@@ -147,16 +143,12 @@
<v-row>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-title="name"
item-value="value"
persistent-placeholder
:label="tt('Automatically Save Draft')"
:placeholder="tt('Automatically Save Draft')"
:items="[
{ value: 'disabled', displayName: tt('Disabled') },
{ value: 'enabled', displayName: tt('Enabled') },
{ value: 'confirmation', displayName: tt('Show Confirmation Every Time') }
]"
:items="allAutoSaveTransactionDraftTypes"
v-model="autoSaveTransactionDraft"
/>
</v-col>
@@ -219,9 +211,11 @@ const theme = useTheme();
const { tt, getAllEnableDisableOptions } = useI18n();
const {
allThemes,
allTimezones,
allTimezoneTypesUsedForStatistics,
allCurrencySortingTypes,
allAutoSaveTransactionDraftTypes,
timeZone,
isAutoUpdateExchangeRatesData,
showAccountBalance,
src/views/mobile/SettingsPage.vue
+47 -22
View File
@@ -1,5 +1,5 @@
<template>
<f7-page @page:afterin="onPageAfterIn">
<f7-page>
<f7-navbar :title="tt('Settings')" :back-link="tt('Back')"></f7-navbar>
<f7-block-title class="margin-top">{{ currentNickName }}</f7-block-title>
@@ -16,28 +16,45 @@
</f7-list>
<f7-block-title>{{ tt('Application') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list strong inset dividers class="settings-list">
<f7-list-item
:key="currentLocale + '_theme'"
link="#"
:title="tt('Theme')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Theme'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="currentTheme">
<option value="auto">{{ tt('System Default') }}</option>
<option value="light">{{ tt('Light') }}</option>
<option value="dark">{{ tt('Dark') }}</option>
</select>
:after="findNameByValue(allThemes, currentTheme)"
@click="showThemePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="value" value-field="value"
title-field="name"
:title="tt('Theme')"
:enable-filter="true"
:filter-placeholder="tt('Theme')"
:filter-no-items-text="tt('No results')"
:items="allThemes"
v-model:show="showThemePopup"
v-model="currentTheme">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item :title="tt('Text Size')" link="/settings/textsize"></f7-list-item>
<f7-list-item
:key="currentLocale + '_timezone'"
link="#"
:title="tt('Timezone')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="timeZone">
<option :value="tz.name" :key="tz.name"
v-for="tz in allTimezones">{{ tz.displayNameWithUtcOffset }}</option>
</select>
:after="currentTimezoneName"
@click="showTimezonePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="name" value-field="name"
title-field="displayNameWithUtcOffset"
:title="tt('Timezone')"
:enable-filter="true"
:filter-placeholder="tt('Timezone')"
:filter-no-items-text="tt('No results')"
:items="allTimezones"
v-model:show="showTimezonePopup"
v-model="timeZone">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item :title="tt('Application Lock')" :after="isEnableApplicationLock ? tt('Enabled') : tt('Disabled')" link="/app_lock"></f7-list-item>
@@ -83,6 +100,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import { findNameByValue } from '@/lib/common.ts';
import { getVersion, getDesktopVersionPath } from '@/lib/version.ts';
import { isUserScheduledTransactionEnabled } from '@/lib/server_settings.ts';
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
@@ -91,9 +109,9 @@ const props = defineProps<{
f7router: Router.Router;
}>();
const { tt, getCurrentLanguageTag, formatUnixTimeToLongDate, initLocale } = useI18n();
const { tt, formatUnixTimeToLongDate, initLocale } = useI18n();
const { showToast, showConfirm } = useI18nUIComponents();
const { allTimezones, timeZone, isAutoUpdateExchangeRatesData, showAccountBalance } = useAppSettingPageBase();
const { allThemes, allTimezones, timeZone, isAutoUpdateExchangeRatesData, showAccountBalance } = useAppSettingPageBase();
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
@@ -102,8 +120,9 @@ const exchangeRatesStore = useExchangeRatesStore();
const version = `v${getVersion()}`;
const currentLocale = ref<string>(getCurrentLanguageTag());
const logouting = ref<boolean>(false);
const showThemePopup = ref<boolean>(false);
const showTimezonePopup = ref<boolean>(false);
const currentNickName = computed<string>(() => userStore.currentUserNickname || tt('User'));
@@ -117,6 +136,16 @@ const currentTheme = computed<string>({
}
});
const currentTimezoneName = computed<string>(() => {
for (const item of allTimezones.value) {
if (item.name === timeZone.value) {
return item.displayNameWithUtcOffset;
}
}
return '';
});
const isEnableAnimate = computed<boolean>({
get: () => settingsStore.appSettings.animate,
set: value => {
@@ -167,8 +196,4 @@ function logout(): void {
});
});
}
function onPageAfterIn(): void {
currentLocale.value = getCurrentLanguageTag();
}
</script>
src/views/mobile/SignupPage.vue
+14 -6
View File
@@ -104,16 +104,23 @@
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('First Day of Week')"
:title="currentDayOfWeekName"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('First Day of Week'), popupCloseLinkText: tt('Done') }"
@click="showFirstDayOfWeekPopup = true"
>
<select v-model="user.firstDayOfWeek">
<option :value="weekDay.type"
:key="weekDay.type"
v-for="weekDay in allWeekDays">{{ weekDay.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('First Day of Week')"
:enable-filter="true"
:filter-placeholder="tt('Date')"
:filter-no-items-text="tt('No results')"
:items="allWeekDays"
v-model:show="showFirstDayOfWeekPopup"
v-model="user.firstDayOfWeek">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
@@ -229,6 +236,7 @@ const rootStore = useRootStore();
const usePresetCategories = ref<boolean>(false);
const showLanguagePopup = ref<boolean>(false);
const showDefaultCurrencyPopup = ref<boolean>(false);
const showFirstDayOfWeekPopup = ref<boolean>(false);
const showPresetCategories = ref<boolean>(false);
const showPresetCategoriesMoreActionSheet = ref<boolean>(false);
const showPresetCategoriesChangeLocaleSheet = ref<boolean>(false);
src/views/mobile/accounts/EditPage.vue
+28 -12
View File
@@ -181,17 +181,24 @@
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Statement Date')"
:title="getAccountCreditCardStatementDate(account.creditCardStatementDate)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Statement Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Statement Date'), popupCloseLinkText: tt('Done') }"
v-if="isAccountSupportCreditCardStatementDate"
@click="accountContext.showCreditCardStatementDatePopup = true"
>
<select v-model="account.creditCardStatementDate">
<option :value="monthDay.day"
:key="monthDay.day"
v-for="monthDay in allAvailableMonthDays">{{ monthDay.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="day" value-field="day"
title-field="displayName"
:title="tt('Statement Date')"
:enable-filter="true"
:filter-placeholder="tt('Statement Date')"
:filter-no-items-text="tt('No results')"
:items="allAvailableMonthDays"
v-model:show="accountContext.showCreditCardStatementDatePopup"
v-model="account.creditCardStatementDate">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
@@ -305,17 +312,24 @@
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Statement Date')"
:title="getAccountCreditCardStatementDate(account.creditCardStatementDate)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Statement Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Statement Date'), popupCloseLinkText: tt('Done') }"
v-if="isAccountSupportCreditCardStatementDate"
@click="accountContext.showCreditCardStatementDatePopup = true"
>
<select v-model="account.creditCardStatementDate">
<option :value="monthDay.day"
:key="monthDay.day"
v-for="monthDay in allAvailableMonthDays">{{ monthDay.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="day" value-field="day"
title-field="displayName"
:title="tt('Statement Date')"
:enable-filter="true"
:filter-placeholder="tt('Statement Date')"
:filter-no-items-text="tt('No results')"
:items="allAvailableMonthDays"
v-model:show="accountContext.showCreditCardStatementDatePopup"
v-model="account.creditCardStatementDate">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item :title="tt('Visible')" v-if="editAccountId">
@@ -532,6 +546,7 @@ interface AccountContext {
showIconSelectionSheet: boolean;
showColorSelectionSheet: boolean;
showCurrencyPopup: boolean;
showCreditCardStatementDatePopup: boolean;
showBalanceSheet: boolean;
showBalanceDateTimeSheet: boolean;
balanceDateTimeSheetMode: string;
@@ -570,6 +585,7 @@ const DEFAULT_ACCOUNT_CONTEXT: AccountContext = {
showIconSelectionSheet: false,
showColorSelectionSheet: false,
showCurrencyPopup: false,
showCreditCardStatementDatePopup: false,
showBalanceSheet: false,
showBalanceDateTimeSheet: false,
balanceDateTimeSheetMode: 'time'
src/views/mobile/settings/PageSettingsPage.vue
+55 -19
View File
@@ -3,20 +3,29 @@
<f7-navbar :title="tt('Page Settings')" :back-link="tt('Back')"></f7-navbar>
<f7-block-title class="margin-top">{{ tt('Overview Page') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list strong inset dividers class="settings-list">
<f7-list-item>
<span>{{ tt('Show Amount') }}</span>
<f7-toggle :checked="showAmountInHomePage" @toggle:change="showAmountInHomePage = $event"></f7-toggle>
</f7-list-item>
<f7-list-item
link="#"
:title="tt('Timezone Used for Statistics')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="timezoneUsedForStatisticsInHomePage">
<option :value="timezoneType.type"
:key="timezoneType.type"
v-for="timezoneType in allTimezoneTypesUsedForStatistics">{{ timezoneType.displayName }}</option>
</select>
:after="findDisplayNameByType(allTimezoneTypesUsedForStatistics, timezoneUsedForStatisticsInHomePage)"
@click="showTimezoneUsedForStatisticsInHomePagePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Timezone Used for Statistics')"
:enable-filter="true"
:filter-placeholder="tt('Timezone Type')"
:filter-no-items-text="tt('No results')"
:items="allTimezoneTypesUsedForStatistics"
v-model:show="showTimezoneUsedForStatisticsInHomePagePopup"
v-model="timezoneUsedForStatisticsInHomePage">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
@@ -35,13 +44,22 @@
<f7-block-title>{{ tt('Transaction Edit Page') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list-item
link="#"
:title="tt('Automatically Save Draft')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Automatically Save Draft'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="autoSaveTransactionDraft">
<option value="disabled">{{ tt('Disabled') }}</option>
<option value="enabled">{{ tt('Enabled') }}</option>
<option value="confirmation">{{ tt('Show Confirmation Every Time') }}</option>
</select>
:after="findNameByValue(allAutoSaveTransactionDraftTypes, autoSaveTransactionDraft)"
@click="showAutoSaveTransactionDraftPopup = true"
>
<list-item-selection-popup value-type="item"
key-field="value" value-field="value"
title-field="name"
:title="tt('Automatically Save Draft')"
:enable-filter="true"
:filter-placeholder="tt('Automatically Save Draft')"
:filter-no-items-text="tt('No results')"
:items="allAutoSaveTransactionDraftTypes"
v-model:show="showAutoSaveTransactionDraftPopup"
v-model="autoSaveTransactionDraft">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item>
<span>{{ tt('Automatically Add Geolocation') }}</span>
@@ -52,19 +70,30 @@
<f7-block-title>{{ tt('Exchange Rates Data Page') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list-item
link="#"
:title="tt('Sort by')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Sort by'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="currencySortByInExchangeRatesPage">
<option :value="sortingType.type"
:key="sortingType.type"
v-for="sortingType in allCurrencySortingTypes">{{ sortingType.displayName }}</option>
</select>
:after="findDisplayNameByType(allCurrencySortingTypes, currencySortByInExchangeRatesPage)"
@click="showCurrencySortByInExchangeRatesPagePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Sort by')"
:enable-filter="true"
:filter-placeholder="tt('Sort by')"
:filter-no-items-text="tt('No results')"
:items="allCurrencySortingTypes"
v-model:show="showCurrencySortByInExchangeRatesPagePopup"
v-model="currencySortByInExchangeRatesPage">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
</f7-page>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase.ts';
@@ -72,6 +101,7 @@ const { tt } = useI18n();
const {
allTimezoneTypesUsedForStatistics,
allCurrencySortingTypes,
allAutoSaveTransactionDraftTypes,
showAmountInHomePage,
timezoneUsedForStatisticsInHomePage,
showTotalAmountInTransactionListPage,
@@ -80,4 +110,10 @@ const {
isAutoGetCurrentGeoLocation,
currencySortByInExchangeRatesPage
} = useAppSettingPageBase();
import { findNameByValue, findDisplayNameByType } from '@/lib/common.ts';
const showTimezoneUsedForStatisticsInHomePagePopup = ref<boolean>(false);
const showAutoSaveTransactionDraftPopup = ref<boolean>(false);
const showCurrencySortByInExchangeRatesPagePopup = ref<boolean>(false);
</script>
src/views/mobile/statistics/SettingsPage.vue
+102 -37
View File
@@ -3,25 +3,43 @@
<f7-navbar :title="tt('Statistics Settings')" :back-link="tt('Back')"></f7-navbar>
<f7-block-title class="margin-top">{{ tt('Common Settings') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list strong inset dividers class="settings-list">
<f7-list-item
link="#"
:title="tt('Default Chart Data Type')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Chart Data Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="defaultChartDataType">
<option :value="chartDataType.type"
:key="chartDataType.type"
v-for="chartDataType in allChartDataTypes">{{ chartDataType.displayName }}</option>
</select>
:after="findDisplayNameByType(allChartDataTypes, defaultChartDataType)"
@click="showDefaultChartDataTypePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Default Chart Data Type')"
:enable-filter="true"
:filter-placeholder="tt('Chart Data Type')"
:filter-no-items-text="tt('No results')"
:items="allChartDataTypes"
v-model:show="showDefaultChartDataTypePopup"
v-model="defaultChartDataType">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
:title="tt('Timezone Used for Date Range')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="defaultTimezoneType">
<option :value="timezoneType.type"
:key="timezoneType.type"
v-for="timezoneType in allTimezoneTypesUsedForStatistics">{{ timezoneType.displayName }}</option>
</select>
:after="findDisplayNameByType(allTimezoneTypesUsedForStatistics, defaultTimezoneType)"
@click="showDefaultTimezoneTypePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Timezone Used for Date Range')"
:enable-filter="true"
:filter-placeholder="tt('Timezone Type')"
:filter-no-items-text="tt('No results')"
:items="allTimezoneTypesUsedForStatistics"
v-model:show="showDefaultTimezoneTypePopup"
v-model="defaultTimezoneType">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item :title="tt('Default Account Filter')" link="/settings/filter/account?type=statisticsDefault"></f7-list-item>
@@ -29,55 +47,93 @@
<f7-list-item :title="tt('Default Transaction Category Filter')" link="/settings/filter/category?type=statisticsDefault"></f7-list-item>
<f7-list-item
link="#"
:title="tt('Default Sort Order')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Sort Order'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="defaultSortingType">
<option :value="sortingType.type"
:key="sortingType.type"
v-for="sortingType in allSortingTypes">{{ sortingType.displayName }}</option>
</select>
:after="findDisplayNameByType(allSortingTypes, defaultSortingType)"
@click="showDefaultSortingTypePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Default Sort Order')"
:enable-filter="true"
:filter-placeholder="tt('Sort Order')"
:filter-no-items-text="tt('No results')"
:items="allSortingTypes"
v-model:show="showDefaultSortingTypePopup"
v-model="defaultSortingType">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
<f7-block-title>{{ tt('Categorical Analysis Settings') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list-item
link="#"
:title="tt('Default Chart Type')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Chart Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="defaultCategoricalChartType">
<option :value="chartType.type"
:key="chartType.type"
v-for="chartType in allCategoricalChartTypes">{{ chartType.displayName }}</option>
</select>
:after="findDisplayNameByType(allCategoricalChartTypes, defaultCategoricalChartType)"
@click="showDefaultCategoricalChartTypePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Default Chart Type')"
:enable-filter="true"
:filter-placeholder="tt('Chart Type')"
:filter-no-items-text="tt('No results')"
:items="allCategoricalChartTypes"
v-model:show="showDefaultCategoricalChartTypePopup"
v-model="defaultCategoricalChartType">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
:title="tt('Default Date Range')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="defaultCategoricalChartDateRange">
<option :value="dateRange.type"
:key="dateRange.type"
v-for="dateRange in allCategoricalChartDateRanges">{{ dateRange.displayName }}</option>
</select>
:after="findDisplayNameByType(allCategoricalChartDateRanges, defaultCategoricalChartDateRange)"
@click="showDefaultCategoricalChartDateRangePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Default Date Range')"
:enable-filter="true"
:filter-placeholder="tt('Date Range')"
:filter-no-items-text="tt('No results')"
:items="allCategoricalChartDateRanges"
v-model:show="showDefaultCategoricalChartDateRangePopup"
v-model="defaultCategoricalChartDateRange">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
<f7-block-title>{{ tt('Trend Analysis Settings') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list-item
link="#"
:title="tt('Default Date Range')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
<select v-model="defaultTrendChartDateRange">
<option :value="dateRange.type"
:key="dateRange.type"
v-for="dateRange in allTrendChartDateRanges">{{ dateRange.displayName }}</option>
</select>
:after="findDisplayNameByType(allTrendChartDateRanges, defaultTrendChartDateRange)"
@click="showDefaultTrendChartDateRangePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Default Date Range')"
:enable-filter="true"
:filter-placeholder="tt('Date Range')"
:filter-no-items-text="tt('No results')"
:items="allTrendChartDateRanges"
v-model:show="showDefaultTrendChartDateRangePopup"
v-model="defaultTrendChartDateRange">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
</f7-page>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useStatisticsSettingPageBase } from '@/views/base/statistics/StatisticsSettingPageBase.ts';
@@ -96,4 +152,13 @@ const {
defaultCategoricalChartDateRange,
defaultTrendChartDateRange
} = useStatisticsSettingPageBase();
import { findDisplayNameByType } from '@/lib/common.ts';
const showDefaultChartDataTypePopup = ref<boolean>(false);
const showDefaultTimezoneTypePopup = ref<boolean>(false);
const showDefaultSortingTypePopup = ref<boolean>(false);
const showDefaultCategoricalChartTypePopup = ref<boolean>(false);
const showDefaultCategoricalChartDateRangePopup = ref<boolean>(false);
const showDefaultTrendChartDateRangePopup = ref<boolean>(false);
</script>
src/views/mobile/transactions/EditPage.vue
+14 -5
View File
@@ -301,16 +301,13 @@
<f7-list-item
:no-chevron="mode === TransactionEditPageMode.View"
link="#"
class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after"
:class="{ 'readonly': mode === TransactionEditPageMode.View }"
:header="tt('Transaction Timezone')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Transaction Timezone'), popupCloseLinkText: tt('Done') }"
v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction || (pageTypeAndMode?.type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate && transaction.templateType === TemplateType.Schedule.type)"
@click="showTimezonePopup = true"
>
<select v-model="transaction.timeZone">
<option :value="timezone.name" :key="timezone.name"
v-for="timezone in allTimezones">{{ timezone.displayNameWithUtcOffset }}</option>
</select>
<template #title>
<f7-block class="list-item-custom-title no-padding no-margin">
<span>{{ `(${transactionDisplayTimezone})` }}</span>
@@ -318,6 +315,17 @@
<span class="transaction-edit-timezone-name" v-else-if="!transaction.timeZone && transaction.timeZone !== ''">{{ transactionTimezoneTimeDifference }}</span>
</f7-block>
</template>
<list-item-selection-popup value-type="item"
key-field="name" value-field="name"
title-field="displayNameWithUtcOffset"
:title="tt('Transaction Timezone')"
:enable-filter="true"
:filter-placeholder="tt('Timezone')"
:filter-no-items-text="tt('No results')"
:items="allTimezones"
v-model:show="showTimezonePopup"
v-model="transaction.timeZone">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
@@ -594,6 +602,7 @@ const submitted = ref<boolean>(false);
const removingPictureId = ref<string | null>(null);
const transactionDateTimeSheetMode = ref<string>('time');
const showTimeInDefaultTimezone = ref<boolean>(false);
const showTimezonePopup = ref<boolean>(false);
const showGeoLocationActionSheet = ref<boolean>(false);
const showMoreActionSheet = ref<boolean>(false);
const showSourceAmountSheet = ref<boolean>(false);
src/views/mobile/users/UserProfilePage.vue
+168 -72
View File
@@ -111,16 +111,23 @@
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Editable Transaction Range')"
:title="findDisplayNameByType(allTransactionEditScopeTypes, newProfile.transactionEditScope)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Editable Transaction Range'), popupCloseLinkText: tt('Done') }"
@click="showEditableTransactionRangePopup = true"
>
<select v-model="newProfile.transactionEditScope">
<option :value="option.type"
:key="option.type"
v-for="option in allTransactionEditScopeTypes">{{ option.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Editable Transaction Range')"
:enable-filter="true"
:filter-placeholder="tt('Date Range')"
:filter-no-items-text="tt('No results')"
:items="allTransactionEditScopeTypes"
v-model:show="showEditableTransactionRangePopup"
v-model="newProfile.transactionEditScope">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="tt(extendInputInvalidProblemMessage || '')"></f7-list-item>
@@ -173,153 +180,230 @@
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('First Day of Week')"
:title="currentDayOfWeekName"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('First Day of Week'), popupCloseLinkText: tt('Done') }"
@click="showFirstDayOfWeekPopup = true"
>
<select v-model="newProfile.firstDayOfWeek">
<option :value="weekDay.type"
:key="weekDay.type"
v-for="weekDay in allWeekDays">{{ weekDay.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('First Day of Week')"
:enable-filter="true"
:filter-placeholder="tt('Date')"
:filter-no-items-text="tt('No results')"
:items="allWeekDays"
v-model:show="showFirstDayOfWeekPopup"
v-model="newProfile.firstDayOfWeek">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Long Date Format')"
:title="findDisplayNameByType(allLongDateFormats, newProfile.longDateFormat)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Long Date Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Long Date Format'), popupCloseLinkText: tt('Done') }"
@click="showLongDateFormatPopup = true"
>
<select v-model="newProfile.longDateFormat">
<option :value="format.type"
:key="format.type"
v-for="format in allLongDateFormats">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Long Date Format')"
:enable-filter="true"
:filter-placeholder="tt('Long Date Format')"
:filter-no-items-text="tt('No results')"
:items="allLongDateFormats"
v-model:show="showLongDateFormatPopup"
v-model="newProfile.longDateFormat">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Short Date Format')"
:title="findDisplayNameByType(allShortDateFormats, newProfile.shortDateFormat)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Short Date Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Short Date Format'), popupCloseLinkText: tt('Done') }"
@click="showShortDateFormatPopup = true"
>
<select v-model="newProfile.shortDateFormat">
<option :value="format.type"
:key="format.type"
v-for="format in allShortDateFormats">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Short Date Format')"
:enable-filter="true"
:filter-placeholder="tt('Short Date Format')"
:filter-no-items-text="tt('No results')"
:items="allShortDateFormats"
v-model:show="showShortDateFormatPopup"
v-model="newProfile.shortDateFormat">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Long Time Format')"
:title="findDisplayNameByType(allLongTimeFormats, newProfile.longTimeFormat)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Long Time Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Long Time Format'), popupCloseLinkText: tt('Done') }"
@click="showLongTimeFormatPopup = true"
>
<select v-model="newProfile.longTimeFormat">
<option :value="format.type"
:key="format.type"
v-for="format in allLongTimeFormats">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Long Time Format')"
:enable-filter="true"
:filter-placeholder="tt('Long Time Format')"
:filter-no-items-text="tt('No results')"
:items="allLongTimeFormats"
v-model:show="showLongTimeFormatPopup"
v-model="newProfile.longTimeFormat">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Short Time Format')"
:title="findDisplayNameByType(allShortTimeFormats, newProfile.shortTimeFormat)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Short Time Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Short Time Format'), popupCloseLinkText: tt('Done') }"
@click="showShortTimeFormatPopup = true"
>
<select v-model="newProfile.shortTimeFormat">
<option :value="format.type"
:key="format.type"
v-for="format in allShortTimeFormats">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Short Time Format')"
:enable-filter="true"
:filter-placeholder="tt('Short Time Format')"
:filter-no-items-text="tt('No results')"
:items="allShortTimeFormats"
v-model:show="showShortTimeFormatPopup"
v-model="newProfile.shortTimeFormat">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Currency Display Mode')"
:title="findDisplayNameByType(allCurrencyDisplayTypes, newProfile.currencyDisplayType)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Display Mode'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Currency Display Mode'), popupCloseLinkText: tt('Done') }"
@click="showCurrencyDisplayTypePopup = true"
>
<select v-model="newProfile.currencyDisplayType">
<option :value="format.type"
:key="format.type"
v-for="format in allCurrencyDisplayTypes">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Currency Display Mode')"
:enable-filter="true"
:filter-placeholder="tt('Currency Display Mode')"
:filter-no-items-text="tt('No results')"
:items="allCurrencyDisplayTypes"
v-model:show="showCurrencyDisplayTypePopup"
v-model="newProfile.currencyDisplayType">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Digit Grouping')"
:title="findDisplayNameByType(allDigitGroupingTypes, newProfile.digitGrouping)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Digit Grouping'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Digit Grouping'), popupCloseLinkText: tt('Done') }"
@click="showDigitGroupingPopup = true"
>
<select v-model="newProfile.digitGrouping">
<option :value="format.type"
:key="format.type"
v-for="format in allDigitGroupingTypes">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Digit Grouping')"
:enable-filter="true"
:filter-placeholder="tt('Digit Grouping')"
:filter-no-items-text="tt('No results')"
:items="allDigitGroupingTypes"
v-model:show="showDigitGroupingPopup"
v-model="newProfile.digitGrouping">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:disabled="!supportDigitGroupingSymbol"
:header="tt('Digit Grouping Symbol')"
:title="findDisplayNameByType(allDigitGroupingSymbols, newProfile.digitGroupingSymbol)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Digit Grouping Symbol'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Digit Grouping Symbol'), popupCloseLinkText: tt('Done') }"
@click="showDigitGroupingSymbolPopup = true"
>
<select v-model="newProfile.digitGroupingSymbol">
<option :value="format.type"
:key="format.type"
v-for="format in allDigitGroupingSymbols">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Digit Grouping Symbol')"
:enable-filter="true"
:filter-placeholder="tt('Digit Grouping Symbol')"
:filter-no-items-text="tt('No results')"
:items="allDigitGroupingSymbols"
v-model:show="showDigitGroupingSymbolPopup"
v-model="newProfile.digitGroupingSymbol">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Decimal Separator')"
:title="findDisplayNameByType(allDecimalSeparators, newProfile.decimalSeparator)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Decimal Separator'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Decimal Separator'), popupCloseLinkText: tt('Done') }"
@click="showDecimalSeparatorPopup = true"
>
<select v-model="newProfile.decimalSeparator">
<option :value="format.type"
:key="format.type"
v-for="format in allDecimalSeparators">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Decimal Separator')"
:enable-filter="true"
:filter-placeholder="tt('Decimal Separator')"
:filter-no-items-text="tt('No results')"
:items="allDecimalSeparators"
v-model:show="showDecimalSeparatorPopup"
v-model="newProfile.decimalSeparator">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Expense Amount Color')"
:title="findDisplayNameByType(allExpenseAmountColorTypes, newProfile.expenseAmountColor)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Color'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Expense Amount Color'), popupCloseLinkText: tt('Done') }"
@click="showExpenseAmountColorPopup = true"
>
<select v-model="newProfile.expenseAmountColor">
<option :value="format.type"
:key="format.type"
v-for="format in allExpenseAmountColorTypes">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Expense Amount Color')"
:enable-filter="true"
:filter-placeholder="tt('Color')"
:filter-no-items-text="tt('No results')"
:items="allExpenseAmountColorTypes"
v-model:show="showExpenseAmountColorPopup"
v-model="newProfile.expenseAmountColor">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Income Amount Color')"
:title="findDisplayNameByType(allIncomeAmountColorTypes, newProfile.incomeAmountColor)"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Color'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Income Amount Color'), popupCloseLinkText: tt('Done') }"
@click="showIncomeAmountColorPopup = true"
>
<select v-model="newProfile.incomeAmountColor">
<option :value="format.type"
:key="format.type"
v-for="format in allIncomeAmountColorTypes">{{ format.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Income Amount Color')"
:enable-filter="true"
:filter-placeholder="tt('Color')"
:filter-no-items-text="tt('No results')"
:items="allIncomeAmountColorTypes"
v-model:show="showIncomeAmountColorPopup"
v-model="newProfile.incomeAmountColor">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="tt(langAndRegionInputInvalidProblemMessage || '')"></f7-list-item>
@@ -418,8 +502,20 @@ const currentPassword = ref<string>('');
const loadingError = ref<unknown | null>(null);
const showInputPasswordSheet = ref<boolean>(false);
const showAccountSheet = ref<boolean>(false);
const showEditableTransactionRangePopup = ref<boolean>(false);
const showLanguagePopup = ref<boolean>(false);
const showDefaultCurrencyPopup = ref<boolean>(false);
const showFirstDayOfWeekPopup = ref<boolean>(false);
const showLongDateFormatPopup = ref<boolean>(false);
const showShortDateFormatPopup = ref<boolean>(false);
const showLongTimeFormatPopup = ref<boolean>(false);
const showShortTimeFormatPopup = ref<boolean>(false);
const showCurrencyDisplayTypePopup = ref<boolean>(false);
const showDigitGroupingPopup = ref<boolean>(false);
const showDigitGroupingSymbolPopup = ref<boolean>(false);
const showDecimalSeparatorPopup = ref<boolean>(false);
const showExpenseAmountColorPopup = ref<boolean>(false);
const showIncomeAmountColorPopup = ref<boolean>(false);
const showMoreActionSheet = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));