migrate app settings page to composition API and typescript
This commit is contained in:
MaysWind
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Basic Settings')">
|
||||
<v-card :title="tt('Basic Settings')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
@@ -10,14 +10,14 @@
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
persistent-placeholder
|
||||
:label="$t('Theme')"
|
||||
:placeholder="$t('Theme')"
|
||||
:label="tt('Theme')"
|
||||
:placeholder="tt('Theme')"
|
||||
:items="[
|
||||
{ value: 'auto', displayName: $t('System Default') },
|
||||
{ value: 'light', displayName: $t('Light') },
|
||||
{ value: 'dark', displayName: $t('Dark') }
|
||||
{ value: 'auto', displayName: tt('System Default') },
|
||||
{ value: 'light', displayName: tt('Light') },
|
||||
{ value: 'dark', displayName: tt('Dark') }
|
||||
]"
|
||||
v-model="theme"
|
||||
v-model="currentTheme"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
@@ -27,10 +27,10 @@
|
||||
item-value="name"
|
||||
auto-select-first
|
||||
persistent-placeholder
|
||||
:label="$t('Timezone')"
|
||||
:placeholder="$t('Timezone')"
|
||||
:label="tt('Timezone')"
|
||||
:placeholder="tt('Timezone')"
|
||||
:items="allTimezones"
|
||||
:no-data-text="$t('No results')"
|
||||
:no-data-text="tt('No results')"
|
||||
v-model="timeZone"
|
||||
/>
|
||||
</v-col>
|
||||
@@ -40,8 +40,8 @@
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
persistent-placeholder
|
||||
:label="$t('Auto-update Exchange Rates Data')"
|
||||
:placeholder="$t('Auto-update Exchange Rates Data')"
|
||||
:label="tt('Auto-update Exchange Rates Data')"
|
||||
:placeholder="tt('Auto-update Exchange Rates Data')"
|
||||
:items="enableDisableOptions"
|
||||
v-model="isAutoUpdateExchangeRatesData"
|
||||
/>
|
||||
@@ -52,8 +52,8 @@
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
persistent-placeholder
|
||||
:label="$t('Show Account Balance')"
|
||||
:placeholder="$t('Show Account Balance')"
|
||||
:label="tt('Show Account Balance')"
|
||||
:placeholder="tt('Show Account Balance')"
|
||||
:items="enableDisableOptions"
|
||||
v-model="showAccountBalance"
|
||||
/>
|
||||
@@ -65,7 +65,7 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Overview Page')">
|
||||
<v-card :title="tt('Overview Page')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
@@ -74,8 +74,8 @@
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
persistent-placeholder
|
||||
:label="$t('Show Amount')"
|
||||
:placeholder="$t('Show Amount')"
|
||||
:label="tt('Show Amount')"
|
||||
:placeholder="tt('Show Amount')"
|
||||
:items="enableDisableOptions"
|
||||
v-model="showAmountInHomePage"
|
||||
/>
|
||||
@@ -86,8 +86,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Timezone Used for Statistics')"
|
||||
:placeholder="$t('Timezone Used for Statistics')"
|
||||
:label="tt('Timezone Used for Statistics')"
|
||||
:placeholder="tt('Timezone Used for Statistics')"
|
||||
:items="allTimezoneTypesUsedForStatistics"
|
||||
v-model="timezoneUsedForStatisticsInHomePage"
|
||||
/>
|
||||
@@ -99,15 +99,15 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Transaction List Page')">
|
||||
<v-card :title="tt('Transaction List Page')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
persistent-placeholder
|
||||
:label="$t('Transactions Per Page')"
|
||||
:placeholder="$t('Transactions Per Page')"
|
||||
:label="tt('Transactions Per Page')"
|
||||
:placeholder="tt('Transactions Per Page')"
|
||||
:items="[ 5, 10, 15, 20, 25, 30, 50 ]"
|
||||
v-model="itemsCountInTransactionListPage"
|
||||
/>
|
||||
@@ -117,8 +117,8 @@
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
persistent-placeholder
|
||||
:label="$t('Show Monthly Total Amount')"
|
||||
:placeholder="$t('Show Monthly Total Amount')"
|
||||
:label="tt('Show Monthly Total Amount')"
|
||||
:placeholder="tt('Show Monthly Total Amount')"
|
||||
:items="enableDisableOptions"
|
||||
v-model="showTotalAmountInTransactionListPage"
|
||||
/>
|
||||
@@ -128,8 +128,8 @@
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
persistent-placeholder
|
||||
:label="$t('Show Transaction Tag')"
|
||||
:placeholder="$t('Show Transaction Tag')"
|
||||
:label="tt('Show Transaction Tag')"
|
||||
:placeholder="tt('Show Transaction Tag')"
|
||||
:items="enableDisableOptions"
|
||||
v-model="showTagInTransactionListPage"
|
||||
/>
|
||||
@@ -141,7 +141,7 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Transaction Edit Page')">
|
||||
<v-card :title="tt('Transaction Edit Page')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
@@ -150,12 +150,12 @@
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
persistent-placeholder
|
||||
:label="$t('Automatically Save Draft')"
|
||||
:placeholder="$t('Automatically Save Draft')"
|
||||
:label="tt('Automatically Save Draft')"
|
||||
:placeholder="tt('Automatically Save Draft')"
|
||||
:items="[
|
||||
{ value: 'disabled', displayName: $t('Disabled') },
|
||||
{ value: 'enabled', displayName: $t('Enabled') },
|
||||
{ value: 'confirmation', displayName: $t('Show Confirmation Every Time') }
|
||||
{ value: 'disabled', displayName: tt('Disabled') },
|
||||
{ value: 'enabled', displayName: tt('Enabled') },
|
||||
{ value: 'confirmation', displayName: tt('Show Confirmation Every Time') }
|
||||
]"
|
||||
v-model="autoSaveTransactionDraft"
|
||||
/>
|
||||
@@ -166,8 +166,8 @@
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
persistent-placeholder
|
||||
:label="$t('Automatically Add Geolocation')"
|
||||
:placeholder="$t('Automatically Add Geolocation')"
|
||||
:label="tt('Automatically Add Geolocation')"
|
||||
:placeholder="tt('Automatically Add Geolocation')"
|
||||
:items="enableDisableOptions"
|
||||
v-model="isAutoGetCurrentGeoLocation"
|
||||
/>
|
||||
@@ -179,7 +179,7 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Exchange Rates Data Page')">
|
||||
<v-card :title="tt('Exchange Rates Data Page')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
@@ -188,8 +188,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:label="$t('Sort by')"
|
||||
:placeholder="$t('Sort by')"
|
||||
:label="tt('Sort by')"
|
||||
:placeholder="tt('Sort by')"
|
||||
:items="allCurrencySortingTypes"
|
||||
v-model="currencySortByInExchangeRatesPage"
|
||||
/>
|
||||
@@ -202,156 +202,54 @@
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase.ts';
|
||||
|
||||
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 { ThemeType } from '@/core/theme.ts';
|
||||
import { getSystemTheme } from '@/lib/ui/common.ts';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useUserStore, useTransactionsStore, useOverviewStore, useStatisticsStore, useExchangeRatesStore),
|
||||
enableDisableOptions() {
|
||||
return this.$locale.getEnableDisableOptions();
|
||||
},
|
||||
allTimezones() {
|
||||
return this.$locale.getAllTimezones(true);
|
||||
},
|
||||
allTimezoneTypesUsedForStatistics() {
|
||||
return this.$locale.getAllTimezoneTypesUsedForStatistics(this.timeZone);
|
||||
},
|
||||
allCurrencySortingTypes() {
|
||||
return this.$locale.getAllCurrencySortingTypes();
|
||||
},
|
||||
theme: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.theme;
|
||||
},
|
||||
set: function (value) {
|
||||
if (value !== this.settingsStore.appSettings.theme) {
|
||||
this.settingsStore.setTheme(value);
|
||||
const theme = useTheme();
|
||||
|
||||
if (value === ThemeType.Light || value === ThemeType.Dark) {
|
||||
this.globalTheme.global.name.value = value;
|
||||
} else {
|
||||
this.globalTheme.global.name.value = getSystemTheme();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
isAutoUpdateExchangeRatesData: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.autoUpdateExchangeRatesData;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setAutoUpdateExchangeRatesData(value);
|
||||
}
|
||||
},
|
||||
showAccountBalance: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.showAccountBalance;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setShowAccountBalance(value);
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
itemsCountInTransactionListPage: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.itemsCountInTransactionListPage;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setItemsCountInTransactionListPage(value);
|
||||
}
|
||||
},
|
||||
autoSaveTransactionDraft: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.autoSaveTransactionDraft;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setAutoSaveTransactionDraft(value);
|
||||
const { tt, getAllEnableDisableOptions } = useI18n();
|
||||
const {
|
||||
allTimezones,
|
||||
allTimezoneTypesUsedForStatistics,
|
||||
allCurrencySortingTypes,
|
||||
timeZone,
|
||||
isAutoUpdateExchangeRatesData,
|
||||
showAccountBalance,
|
||||
showAmountInHomePage,
|
||||
itemsCountInTransactionListPage,
|
||||
timezoneUsedForStatisticsInHomePage,
|
||||
showTotalAmountInTransactionListPage,
|
||||
showTagInTransactionListPage,
|
||||
autoSaveTransactionDraft,
|
||||
isAutoGetCurrentGeoLocation,
|
||||
currencySortByInExchangeRatesPage
|
||||
} = useAppSettingPageBase();
|
||||
|
||||
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 settingsStore = useSettingsStore();
|
||||
|
||||
const enableDisableOptions = computed(() => getAllEnableDisableOptions());
|
||||
|
||||
const currentTheme = computed<string>({
|
||||
get: () => settingsStore.appSettings.theme,
|
||||
set: (value: string) => {
|
||||
if (value !== settingsStore.appSettings.theme) {
|
||||
settingsStore.setTheme(value);
|
||||
|
||||
if (value === ThemeType.Light || value === ThemeType.Dark) {
|
||||
theme.global.name.value = value;
|
||||
} else {
|
||||
theme.global.name.value = getSystemTheme();
|
||||
}
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const theme = useTheme();
|
||||
|
||||
return {
|
||||
globalTheme: theme
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user