add settings page
This commit is contained in:
MaysWind
@@ -1,13 +1,62 @@
|
||||
<template>
|
||||
<v-row class="match-height">
|
||||
app settings
|
||||
</v-row>
|
||||
<div>
|
||||
<v-tabs show-arrows class="text-uppercase" v-model="activeTab">
|
||||
<v-tab value="basicSetting">
|
||||
<v-icon size="20" start :icon="icons.basicSetting"/>
|
||||
{{ $t('Basic') }}
|
||||
</v-tab>
|
||||
<v-tab value="applicationLockSetting">
|
||||
<v-icon size="20" start :icon="icons.applicationLockSetting"/>
|
||||
{{ $t('Application Lock') }}
|
||||
</v-tab>
|
||||
<v-tab value="statisticsSetting">
|
||||
<v-icon size="20" start :icon="icons.statisticsSetting"/>
|
||||
{{ $t('Statistics') }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-divider />
|
||||
<v-window class="mt-5 disable-tab-transition" v-model="activeTab">
|
||||
<v-window-item value="basicSetting">
|
||||
<app-basic-setting-tab/>
|
||||
</v-window-item>
|
||||
|
||||
<v-window-item value="applicationLockSetting">
|
||||
<app-lock-seting-tab/>
|
||||
</v-window-item>
|
||||
|
||||
<v-window-item value="statisticsSetting">
|
||||
<app-statistics-setting-tab/>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
import AppBasicSettingTab from './settings/AppBasicSettingTab.vue';
|
||||
import AppLockSetingTab from './settings/AppLockSetingTab.vue';
|
||||
import AppStatisticsSettingTab from './settings/AppStatisticsSettingTab.vue';
|
||||
|
||||
import {
|
||||
mdiCogOutline,
|
||||
mdiLockOpenOutline,
|
||||
mdiChartPieOutline
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppBasicSettingTab,
|
||||
AppLockSetingTab,
|
||||
AppStatisticsSettingTab
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'basicSetting',
|
||||
icons: {
|
||||
basicSetting: mdiCogOutline,
|
||||
applicationLockSetting: mdiLockOpenOutline,
|
||||
statisticsSetting: mdiChartPieOutline
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
<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"
|
||||
: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"
|
||||
: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"
|
||||
: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"
|
||||
: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"
|
||||
: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"
|
||||
: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"
|
||||
: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
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
: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"
|
||||
: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 { useExchangeRatesStore } from '@/stores/exchangeRates.js';
|
||||
|
||||
import currencyConstants from '@/consts/currency.js';
|
||||
import { getSystemTheme } from '@/lib/ui.js';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useUserStore, useExchangeRatesStore),
|
||||
enableDisableOptions() {
|
||||
return [{
|
||||
value: true,
|
||||
displayName: this.$t('Enable')
|
||||
},{
|
||||
value: false,
|
||||
displayName: this.$t('Disable')
|
||||
}];
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
isAutoGetCurrentGeoLocation: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.autoGetCurrentGeoLocation;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setAutoGetCurrentGeoLocation(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
const theme = useTheme();
|
||||
|
||||
return {
|
||||
globalTheme: theme
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Application Lock')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
</v-card-text>
|
||||
</v-form>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card :title="$t('Statistics Settings')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
</v-card-text>
|
||||
</v-form>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user