mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 16:07:33 +08:00
migrate app settings page to composition API and typescript
This commit is contained in:
MaysWind
+114
-152
@@ -1,212 +1,174 @@
|
||||
<template>
|
||||
<f7-page @page:afterin="onPageAfterIn">
|
||||
<f7-navbar :title="$t('Settings')" :back-link="$t('Back')"></f7-navbar>
|
||||
<f7-navbar :title="tt('Settings')" :back-link="tt('Back')"></f7-navbar>
|
||||
|
||||
<f7-block-title class="margin-top">{{ currentNickName }}</f7-block-title>
|
||||
<f7-list strong inset dividers>
|
||||
<f7-list-item :title="$t('User Profile')" link="/user/profile"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transaction Categories')" link="/category/all"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transaction Tags')" link="/tag/list"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transaction Templates')" link="/template/list"></f7-list-item>
|
||||
<f7-list-item :title="$t('Scheduled Transactions')" link="/schedule/list" v-if="isUserScheduledTransactionEnabled"></f7-list-item>
|
||||
<f7-list-item :title="$t('Data Management')" link="/user/data/management"></f7-list-item>
|
||||
<f7-list-item :title="$t('Two-Factor Authentication')" link="/user/2fa"></f7-list-item>
|
||||
<f7-list-item :title="$t('Device & Sessions')" link="/user/sessions"></f7-list-item>
|
||||
<f7-list-button :class="{ 'disabled': logouting }" @click="logout">{{ $t('Log Out') }}</f7-list-button>
|
||||
<f7-list-item :title="tt('User Profile')" link="/user/profile"></f7-list-item>
|
||||
<f7-list-item :title="tt('Transaction Categories')" link="/category/all"></f7-list-item>
|
||||
<f7-list-item :title="tt('Transaction Tags')" link="/tag/list"></f7-list-item>
|
||||
<f7-list-item :title="tt('Transaction Templates')" link="/template/list"></f7-list-item>
|
||||
<f7-list-item :title="tt('Scheduled Transactions')" link="/schedule/list" v-if="isUserScheduledTransactionEnabled()"></f7-list-item>
|
||||
<f7-list-item :title="tt('Data Management')" link="/user/data/management"></f7-list-item>
|
||||
<f7-list-item :title="tt('Two-Factor Authentication')" link="/user/2fa"></f7-list-item>
|
||||
<f7-list-item :title="tt('Device & Sessions')" link="/user/sessions"></f7-list-item>
|
||||
<f7-list-button :class="{ 'disabled': logouting }" @click="logout">{{ tt('Log Out') }}</f7-list-button>
|
||||
</f7-list>
|
||||
|
||||
<f7-block-title>{{ $t('Application') }}</f7-block-title>
|
||||
<f7-block-title>{{ tt('Application') }}</f7-block-title>
|
||||
<f7-list strong inset dividers>
|
||||
<f7-list-item
|
||||
:key="currentLocale + '_theme'"
|
||||
:title="$t('Theme')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Theme'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
<select v-model="theme">
|
||||
<option value="auto">{{ $t('System Default') }}</option>
|
||||
<option value="light">{{ $t('Light') }}</option>
|
||||
<option value="dark">{{ $t('Dark') }}</option>
|
||||
: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>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Text Size')" link="/settings/textsize"></f7-list-item>
|
||||
<f7-list-item :title="tt('Text Size')" link="/settings/textsize"></f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:key="currentLocale + '_timezone'"
|
||||
:title="$t('Timezone')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
: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>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Application Lock')" :after="isEnableApplicationLock ? $t('Enabled') : $t('Disabled')" link="/app_lock"></f7-list-item>
|
||||
<f7-list-item :title="tt('Application Lock')" :after="isEnableApplicationLock ? tt('Enabled') : tt('Disabled')" link="/app_lock"></f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Exchange Rates Data')" :after="exchangeRatesLastUpdateDate" link="/exchange_rates"></f7-list-item>
|
||||
<f7-list-item :title="tt('Exchange Rates Data')" :after="exchangeRatesLastUpdateDate" link="/exchange_rates"></f7-list-item>
|
||||
|
||||
<f7-list-item>
|
||||
<span>{{ $t('Auto-update Exchange Rates Data') }}</span>
|
||||
<span>{{ tt('Auto-update Exchange Rates Data') }}</span>
|
||||
<f7-toggle :checked="isAutoUpdateExchangeRatesData" @toggle:change="isAutoUpdateExchangeRatesData = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item>
|
||||
<span>{{ $t('Show Account Balance') }}</span>
|
||||
<span>{{ tt('Show Account Balance') }}</span>
|
||||
<f7-toggle :checked="showAccountBalance" @toggle:change="showAccountBalance = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Page Settings')" link="/settings/page"></f7-list-item>
|
||||
<f7-list-item :title="tt('Page Settings')" link="/settings/page"></f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Statistics Settings')" link="/statistic/settings"></f7-list-item>
|
||||
<f7-list-item :title="tt('Statistics Settings')" link="/statistic/settings"></f7-list-item>
|
||||
|
||||
<f7-list-item>
|
||||
<span>{{ $t('Enable Animation') }}</span>
|
||||
<span>{{ tt('Enable Animation') }}</span>
|
||||
<f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Switch to Desktop Version')" @click="switchToDesktopVersion"></f7-list-item>
|
||||
<f7-list-item :title="tt('Switch to Desktop Version')" @click="switchToDesktopVersion"></f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('About')" link="/about" :after="version"></f7-list-item>
|
||||
<f7-list-item :title="tt('About')" link="/about" :after="version"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import type { Router } from 'framework7/types';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
|
||||
import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase.ts';
|
||||
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useTransactionsStore } from '@/stores/transaction.js';
|
||||
import { useOverviewStore } from '@/stores/overview.ts';
|
||||
import { useStatisticsStore } from '@/stores/statistics.js';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { getDesktopVersionPath } from '@/lib/version.ts';
|
||||
import { getVersion, getDesktopVersionPath } from '@/lib/version.ts';
|
||||
import { isUserScheduledTransactionEnabled } from '@/lib/server_settings.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
const self = this;
|
||||
const { tt, getCurrentLanguageTag, formatUnixTimeToLongDate, initLocale } = useI18n();
|
||||
const { showToast, showConfirm } = useI18nUIComponents();
|
||||
const { allTimezones, timeZone, isAutoUpdateExchangeRatesData, showAccountBalance } = useAppSettingPageBase();
|
||||
|
||||
return {
|
||||
currentLocale: self.$locale.getCurrentLanguageTag(),
|
||||
logouting: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useUserStore, useTransactionsStore, useOverviewStore, useStatisticsStore, useExchangeRatesStore),
|
||||
version() {
|
||||
return 'v' + this.$version;
|
||||
},
|
||||
allTimezones() {
|
||||
return this.$locale.getAllTimezones(true);
|
||||
},
|
||||
currentNickName() {
|
||||
return this.userStore.currentUserNickname || this.$t('User');
|
||||
},
|
||||
isUserScheduledTransactionEnabled() {
|
||||
return isUserScheduledTransactionEnabled();
|
||||
},
|
||||
theme: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.theme;
|
||||
},
|
||||
set: function (value) {
|
||||
if (value !== this.settingsStore.appSettings.theme) {
|
||||
this.settingsStore.setTheme(value);
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
},
|
||||
timeZone: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.timeZone;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setTimeZone(value);
|
||||
this.$locale.setTimeZone(value);
|
||||
this.transactionsStore.updateTransactionListInvalidState(true);
|
||||
this.overviewStore.updateTransactionOverviewInvalidState(true);
|
||||
this.statisticsStore.updateTransactionStatisticsInvalidState(true);
|
||||
}
|
||||
},
|
||||
exchangeRatesLastUpdateDate() {
|
||||
const exchangeRatesLastUpdateTime = this.exchangeRatesStore.exchangeRatesLastUpdateTime;
|
||||
return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
|
||||
},
|
||||
isAutoUpdateExchangeRatesData: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.autoUpdateExchangeRatesData;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setAutoUpdateExchangeRatesData(value);
|
||||
}
|
||||
},
|
||||
isEnableApplicationLock() {
|
||||
return this.settingsStore.appSettings.applicationLock;
|
||||
},
|
||||
showAccountBalance: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.showAccountBalance;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setShowAccountBalance(value);
|
||||
}
|
||||
},
|
||||
isEnableAnimate: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.animate;
|
||||
},
|
||||
set: function (value) {
|
||||
if (value !== this.settingsStore.appSettings.animate) {
|
||||
this.settingsStore.setEnableAnimate(value);
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPageAfterIn() {
|
||||
this.currentLocale = this.$locale.getCurrentLanguageTag();
|
||||
},
|
||||
logout() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
const rootStore = useRootStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
const exchangeRatesStore = useExchangeRatesStore();
|
||||
|
||||
self.$confirm('Are you sure you want to log out?', () => {
|
||||
self.logouting = true;
|
||||
self.$showLoading(() => self.logouting);
|
||||
const props = defineProps<{
|
||||
f7router: Router.Router;
|
||||
}>();
|
||||
|
||||
self.rootStore.logout().then(() => {
|
||||
self.logouting = false;
|
||||
self.$hideLoading();
|
||||
const version = `v${getVersion()}`;
|
||||
|
||||
self.settingsStore.clearAppSettings();
|
||||
const currentLocale = ref<string>(getCurrentLanguageTag());
|
||||
const logouting = ref<boolean>(false);
|
||||
|
||||
const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
const currentNickName = computed<string>(() => userStore.currentUserNickname || tt('User'));
|
||||
|
||||
setExpenseAndIncomeAmountColor(self.userStore.currentUserExpenseAmountColor, self.userStore.currentUserIncomeAmountColor);
|
||||
|
||||
router.navigate('/');
|
||||
}).catch(error => {
|
||||
self.logouting = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
switchToDesktopVersion() {
|
||||
this.$confirm('Are you sure you want to switch to desktop version?', () => {
|
||||
window.location.replace(getDesktopVersionPath());
|
||||
});
|
||||
const currentTheme = computed<string>({
|
||||
get: () => settingsStore.appSettings.theme,
|
||||
set: value => {
|
||||
if (value !== settingsStore.appSettings.theme) {
|
||||
settingsStore.setTheme(value);
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const isEnableAnimate = computed<boolean>({
|
||||
get: () => settingsStore.appSettings.animate,
|
||||
set: value => {
|
||||
if (value !== settingsStore.appSettings.animate) {
|
||||
settingsStore.setEnableAnimate(value);
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const isEnableApplicationLock = computed<boolean>(() => settingsStore.appSettings.applicationLock);
|
||||
|
||||
const exchangeRatesLastUpdateDate = computed<string>(() => {
|
||||
const exchangeRatesLastUpdateTime = exchangeRatesStore.exchangeRatesLastUpdateTime;
|
||||
return exchangeRatesLastUpdateTime ? formatUnixTimeToLongDate(exchangeRatesLastUpdateTime) : '';
|
||||
});
|
||||
|
||||
function switchToDesktopVersion() {
|
||||
showConfirm('Are you sure you want to switch to desktop version?', () => {
|
||||
window.location.replace(getDesktopVersionPath());
|
||||
});
|
||||
}
|
||||
|
||||
function logout() {
|
||||
showConfirm('Are you sure you want to log out?', () => {
|
||||
logouting.value = true;
|
||||
showLoading(() => logouting.value);
|
||||
|
||||
rootStore.logout().then(() => {
|
||||
logouting.value = false;
|
||||
hideLoading();
|
||||
|
||||
settingsStore.clearAppSettings();
|
||||
|
||||
const localeDefaultSettings = initLocale(userStore.currentUserLanguage, settingsStore.appSettings.timeZone);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(userStore.currentUserExpenseAmountColor, userStore.currentUserIncomeAmountColor);
|
||||
|
||||
props.f7router.navigate('/');
|
||||
}).catch(error => {
|
||||
logouting.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onPageAfterIn() {
|
||||
currentLocale.value = getCurrentLanguageTag();
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<f7-page>
|
||||
<f7-navbar :title="$t('Page Settings')" :back-link="$t('Back')"></f7-navbar>
|
||||
<f7-navbar :title="tt('Page Settings')" :back-link="tt('Back')"></f7-navbar>
|
||||
|
||||
<f7-block-title class="margin-top">{{ $t('Overview Page') }}</f7-block-title>
|
||||
<f7-block-title class="margin-top">{{ tt('Overview Page') }}</f7-block-title>
|
||||
<f7-list strong inset dividers>
|
||||
<f7-list-item>
|
||||
<span>{{ $t('Show Amount') }}</span>
|
||||
<span>{{ tt('Show Amount') }}</span>
|
||||
<f7-toggle :checked="showAmountInHomePage" @toggle:change="showAmountInHomePage = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:title="$t('Timezone Used for Statistics')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
: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"
|
||||
@@ -20,40 +20,40 @@
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-block-title>{{ $t('Transaction List Page') }}</f7-block-title>
|
||||
<f7-block-title>{{ tt('Transaction List Page') }}</f7-block-title>
|
||||
<f7-list strong inset dividers>
|
||||
<f7-list-item>
|
||||
<span>{{ $t('Show Monthly Total Amount') }}</span>
|
||||
<span>{{ tt('Show Monthly Total Amount') }}</span>
|
||||
<f7-toggle :checked="showTotalAmountInTransactionListPage" @toggle:change="showTotalAmountInTransactionListPage = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
<f7-list-item>
|
||||
<span>{{ $t('Show Transaction Tag') }}</span>
|
||||
<span>{{ tt('Show Transaction Tag') }}</span>
|
||||
<f7-toggle :checked="showTagInTransactionListPage" @toggle:change="showTagInTransactionListPage = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-block-title>{{ $t('Transaction Edit Page') }}</f7-block-title>
|
||||
<f7-block-title>{{ tt('Transaction Edit Page') }}</f7-block-title>
|
||||
<f7-list strong inset dividers>
|
||||
<f7-list-item
|
||||
:title="$t('Automatically Save Draft')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Automatically Save Draft'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
: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">{{ $t('Disabled') }}</option>
|
||||
<option value="enabled">{{ $t('Enabled') }}</option>
|
||||
<option value="confirmation">{{ $t('Show Confirmation Every Time') }}</option>
|
||||
<option value="disabled">{{ tt('Disabled') }}</option>
|
||||
<option value="enabled">{{ tt('Enabled') }}</option>
|
||||
<option value="confirmation">{{ tt('Show Confirmation Every Time') }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
<f7-list-item>
|
||||
<span>{{ $t('Automatically Add Geolocation') }}</span>
|
||||
<span>{{ tt('Automatically Add Geolocation') }}</span>
|
||||
<f7-toggle :checked="isAutoGetCurrentGeoLocation" @toggle:change="isAutoGetCurrentGeoLocation = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-block-title>{{ $t('Exchange Rates Data Page') }}</f7-block-title>
|
||||
<f7-block-title>{{ tt('Exchange Rates Data Page') }}</f7-block-title>
|
||||
<f7-list strong inset dividers>
|
||||
<f7-list-item
|
||||
:title="$t('Sort by')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Sort by'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
: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"
|
||||
@@ -64,82 +64,20 @@
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useTransactionsStore } from '@/stores/transaction.js';
|
||||
import { useOverviewStore } from '@/stores/overview.ts';
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase.ts';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapStores(useSettingsStore, useTransactionsStore, useOverviewStore),
|
||||
allTimezoneTypesUsedForStatistics() {
|
||||
return this.$locale.getAllTimezoneTypesUsedForStatistics();
|
||||
},
|
||||
allCurrencySortingTypes() {
|
||||
return this.$locale.getAllCurrencySortingTypes();
|
||||
},
|
||||
showAmountInHomePage: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.showAmountInHomePage;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setShowAmountInHomePage(value);
|
||||
}
|
||||
},
|
||||
timezoneUsedForStatisticsInHomePage: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.timezoneUsedForStatisticsInHomePage;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setTimezoneUsedForStatisticsInHomePage(value);
|
||||
this.overviewStore.updateTransactionOverviewInvalidState(true);
|
||||
}
|
||||
},
|
||||
showTotalAmountInTransactionListPage: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setShowTotalAmountInTransactionListPage(value);
|
||||
}
|
||||
},
|
||||
showTagInTransactionListPage: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.showTagInTransactionListPage;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setShowTagInTransactionListPage(value);
|
||||
}
|
||||
},
|
||||
autoSaveTransactionDraft: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.autoSaveTransactionDraft;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setAutoSaveTransactionDraft(value);
|
||||
|
||||
if (value === 'disabled') {
|
||||
this.transactionsStore.clearTransactionDraft();
|
||||
}
|
||||
}
|
||||
},
|
||||
isAutoGetCurrentGeoLocation: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.autoGetCurrentGeoLocation;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setAutoGetCurrentGeoLocation(value);
|
||||
}
|
||||
},
|
||||
currencySortByInExchangeRatesPage: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.currencySortByInExchangeRatesPage;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setCurrencySortByInExchangeRatesPage(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const { tt } = useI18n();
|
||||
const {
|
||||
allTimezoneTypesUsedForStatistics,
|
||||
allCurrencySortingTypes,
|
||||
showAmountInHomePage,
|
||||
timezoneUsedForStatisticsInHomePage,
|
||||
showTotalAmountInTransactionListPage,
|
||||
showTagInTransactionListPage,
|
||||
autoSaveTransactionDraft,
|
||||
isAutoGetCurrentGeoLocation,
|
||||
currencySortByInExchangeRatesPage
|
||||
} = useAppSettingPageBase();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user