mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-17 16:24:25 +08:00
Code Issues 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/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>