MaysWind
302 lines
13 KiB
Vue
302 lines
13 KiB
Vue
<template>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-card :title="$t('Basic Settings')">
|
|
<v-form>
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
persistent-placeholder
|
|
:label="$t('Theme')"
|
|
:placeholder="$t('Theme')"
|
|
:items="[
|
|
{ value: 'auto', displayName: $t('System Default') },
|
|
{ value: 'light', displayName: $t('Light') },
|
|
{ value: 'dark', displayName: $t('Dark') }
|
|
]"
|
|
v-model="theme"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6">
|
|
<v-autocomplete
|
|
item-title="displayNameWithUtcOffset"
|
|
item-value="name"
|
|
auto-select-first
|
|
persistent-placeholder
|
|
:label="$t('Timezone')"
|
|
:placeholder="$t('Timezone')"
|
|
:items="allTimezones"
|
|
:no-data-text="$t('No results')"
|
|
v-model="timeZone"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
persistent-placeholder
|
|
:label="$t('Auto-update Exchange Rates Data')"
|
|
:placeholder="$t('Auto-update Exchange Rates Data')"
|
|
:items="enableDisableOptions"
|
|
v-model="isAutoUpdateExchangeRatesData"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
persistent-placeholder
|
|
:label="$t('Enable Thousands Separator')"
|
|
:placeholder="$t('Enable Thousands Separator')"
|
|
:items="enableDisableOptions"
|
|
v-model="isEnableThousandsSeparator"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
persistent-placeholder
|
|
:label="$t('Currency Display Mode')"
|
|
:placeholder="$t('Currency Display Mode')"
|
|
:items="[
|
|
{ value: allCurrencyDisplayModes.None, displayName: $t('None') },
|
|
{ value: allCurrencyDisplayModes.Symbol, displayName: $t('Currency Symbol') },
|
|
{ value: allCurrencyDisplayModes.Code, displayName: $t('Currency Code') },
|
|
{ value: allCurrencyDisplayModes.Name, displayName: $t('Currency Name') }
|
|
]"
|
|
v-model="currencyDisplayMode"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
persistent-placeholder
|
|
:label="$t('Show Account Balance')"
|
|
:placeholder="$t('Show Account Balance')"
|
|
:items="enableDisableOptions"
|
|
v-model="showAccountBalance"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-form>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12">
|
|
<v-card :title="$t('Overview Page')">
|
|
<v-form>
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
persistent-placeholder
|
|
:label="$t('Show Amount')"
|
|
:placeholder="$t('Show Amount')"
|
|
:items="enableDisableOptions"
|
|
v-model="showAmountInHomePage"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-form>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12">
|
|
<v-card :title="$t('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')"
|
|
:items="[ 5, 10, 15, 20, 25, 30, 50 ]"
|
|
v-model="itemsCountInTransactionListPage"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
persistent-placeholder
|
|
:label="$t('Show Monthly Total Amount')"
|
|
:placeholder="$t('Show Monthly Total Amount')"
|
|
:items="enableDisableOptions"
|
|
v-model="showTotalAmountInTransactionListPage"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-form>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12">
|
|
<v-card :title="$t('Transaction Edit Page')">
|
|
<v-form>
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
persistent-placeholder
|
|
:label="$t('Automatically Add Geolocation')"
|
|
:placeholder="$t('Automatically Add Geolocation')"
|
|
:items="enableDisableOptions"
|
|
v-model="isAutoGetCurrentGeoLocation"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-form>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script>
|
|
import { useTheme } from 'vuetify';
|
|
|
|
import { mapStores } from 'pinia';
|
|
import { useRootStore } from '@/stores/index.js';
|
|
import { useSettingsStore } from '@/stores/setting.js';
|
|
import { useUserStore } from '@/stores/user.js';
|
|
import { useTransactionsStore } from '@/stores/transaction.js';
|
|
import { useOverviewStore } from '@/stores/overview.js';
|
|
import { useStatisticsStore } from '@/stores/statistics.js';
|
|
import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
|
|
|
|
import currencyConstants from '@/consts/currency.js';
|
|
import { getSystemTheme } from '@/lib/ui.js';
|
|
|
|
export default {
|
|
computed: {
|
|
...mapStores(useRootStore, useSettingsStore, useUserStore, useTransactionsStore, useOverviewStore, useStatisticsStore, useExchangeRatesStore),
|
|
enableDisableOptions() {
|
|
return this.$locale.getEnableDisableOptions();
|
|
},
|
|
allTimezones() {
|
|
return this.$locale.getAllTimezones(true);
|
|
},
|
|
allCurrencyDisplayModes() {
|
|
return currencyConstants.allCurrencyDisplayModes;
|
|
},
|
|
theme: {
|
|
get: function () {
|
|
return this.settingsStore.appSettings.theme;
|
|
},
|
|
set: function (value) {
|
|
if (value !== this.settingsStore.appSettings.theme) {
|
|
this.settingsStore.setTheme(value);
|
|
|
|
if (value === 'light' || value === '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);
|
|
}
|
|
},
|
|
isEnableThousandsSeparator: {
|
|
get: function () {
|
|
return this.settingsStore.appSettings.thousandsSeparator;
|
|
},
|
|
set: function (value) {
|
|
this.settingsStore.setEnableThousandsSeparator(value);
|
|
}
|
|
},
|
|
currencyDisplayMode: {
|
|
get: function () {
|
|
return this.settingsStore.appSettings.currencyDisplayMode;
|
|
},
|
|
set: function (value) {
|
|
this.settingsStore.setCurrencyDisplayMode(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);
|
|
}
|
|
},
|
|
showTotalAmountInTransactionListPage: {
|
|
get: function () {
|
|
return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
|
|
},
|
|
set: function (value) {
|
|
this.settingsStore.setShowTotalAmountInTransactionListPage(value);
|
|
}
|
|
},
|
|
itemsCountInTransactionListPage: {
|
|
get: function () {
|
|
return this.settingsStore.appSettings.itemsCountInTransactionListPage;
|
|
},
|
|
set: function (value) {
|
|
this.settingsStore.setItemsCountInTransactionListPage(value);
|
|
}
|
|
},
|
|
isAutoGetCurrentGeoLocation: {
|
|
get: function () {
|
|
return this.settingsStore.appSettings.autoGetCurrentGeoLocation;
|
|
},
|
|
set: function (value) {
|
|
this.settingsStore.setAutoGetCurrentGeoLocation(value);
|
|
}
|
|
}
|
|
},
|
|
setup() {
|
|
const theme = useTheme();
|
|
|
|
return {
|
|
globalTheme: theme
|
|
};
|
|
}
|
|
};
|
|
</script>
|