mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-21 02:04:26 +08:00
user settings supports language and date&time format
This commit is contained in:
MaysWind
@@ -51,7 +51,7 @@ export default {
|
||||
return this.$buildTime;
|
||||
}
|
||||
|
||||
return this.$utilities.formatUnixTime(this.$buildTime, this.$t('format.datetime.long'));
|
||||
return this.$utilities.formatUnixTime(this.$buildTime, this.$locale.getLongDateTimeFormat());
|
||||
},
|
||||
licenseLines() {
|
||||
return this.$licenses.license.replaceAll(/\r/g, '').split('\n');
|
||||
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
return '';
|
||||
}
|
||||
|
||||
return this.$utilities.formatUnixTime(this.exchangeRatesData.updateTime, this.$t('format.date.long'));
|
||||
return this.$utilities.formatUnixTime(this.exchangeRatesData.updateTime, this.$locale.getLongDateFormat());
|
||||
},
|
||||
exchangeRateMap() {
|
||||
const exchangeRateMap = {};
|
||||
|
||||
@@ -235,19 +235,19 @@ export default {
|
||||
|
||||
return {
|
||||
today: {
|
||||
displayTime: self.$utilities.formatUnixTime(self.dateRange.today.startTime, self.$t('format.date.long')),
|
||||
displayTime: self.$utilities.formatUnixTime(self.dateRange.today.startTime, self.$locale.getLongDateFormat()),
|
||||
},
|
||||
thisWeek: {
|
||||
startTime: self.$utilities.formatUnixTime(self.dateRange.thisWeek.startTime, self.$t('format.monthDay.long')),
|
||||
endTime: self.$utilities.formatUnixTime(self.dateRange.thisWeek.endTime, self.$t('format.monthDay.long'))
|
||||
startTime: self.$utilities.formatUnixTime(self.dateRange.thisWeek.startTime, self.$locale.getLongMonthDayFormat()),
|
||||
endTime: self.$utilities.formatUnixTime(self.dateRange.thisWeek.endTime, self.$locale.getLongMonthDayFormat())
|
||||
},
|
||||
thisMonth: {
|
||||
displayTime: self.$utilities.formatUnixTime(self.dateRange.thisMonth.startTime, 'MMMM'),
|
||||
startTime: self.$utilities.formatUnixTime(self.dateRange.thisMonth.startTime, self.$t('format.monthDay.long')),
|
||||
endTime: self.$utilities.formatUnixTime(self.dateRange.thisMonth.endTime, self.$t('format.monthDay.long'))
|
||||
startTime: self.$utilities.formatUnixTime(self.dateRange.thisMonth.startTime, self.$locale.getLongMonthDayFormat()),
|
||||
endTime: self.$utilities.formatUnixTime(self.dateRange.thisMonth.endTime, self.$locale.getLongMonthDayFormat())
|
||||
},
|
||||
thisYear: {
|
||||
displayTime: self.$utilities.formatUnixTime(self.dateRange.thisYear.startTime, self.$t('format.year.long'))
|
||||
displayTime: self.$utilities.formatUnixTime(self.dateRange.thisYear.startTime, self.$locale.getLongYearFormat())
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
@@ -200,6 +200,10 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
if (authResponse.user && authResponse.user.language) {
|
||||
self.$locale.setLanguage(authResponse.user.language);
|
||||
}
|
||||
|
||||
if (self.$settings.isAutoUpdateExchangeRatesData()) {
|
||||
self.$store.dispatch('getLatestExchangeRates', { silent: true, force: false });
|
||||
}
|
||||
@@ -244,10 +248,14 @@ export default {
|
||||
token: self.tempToken,
|
||||
passcode: self.twoFAVerifyType === 'passcode' ? self.passcode : null,
|
||||
recoveryCode: self.twoFAVerifyType === 'backupcode' ? self.backupCode : null
|
||||
}).then(() => {
|
||||
}).then(authResponse => {
|
||||
self.verifying = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (authResponse.user && authResponse.user.language) {
|
||||
self.$locale.setLanguage(authResponse.user.language);
|
||||
}
|
||||
|
||||
if (self.$settings.isAutoUpdateExchangeRatesData()) {
|
||||
self.$store.dispatch('getLatestExchangeRates', { silent: true, force: false });
|
||||
}
|
||||
|
||||
@@ -16,18 +16,6 @@
|
||||
<f7-block-title>{{ $t('Application') }}</f7-block-title>
|
||||
<f7-list strong inset dividers>
|
||||
<f7-list-item
|
||||
:key="currentLocale + '_lang'"
|
||||
:title="$t('Language')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
<select v-model="currentLocale">
|
||||
<option :value="locale"
|
||||
:key="locale"
|
||||
v-for="(lang, locale) in allLanguages">{{ lang.displayName }}</option>
|
||||
</select>
|
||||
</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') }">
|
||||
<select v-model="currentTimezone">
|
||||
@@ -57,7 +45,6 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:key="currentLocale + '_currency_display'"
|
||||
:title="$t('Currency Display Mode')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Display Mode'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
|
||||
<select v-model="currencyDisplayMode">
|
||||
@@ -117,20 +104,9 @@ export default {
|
||||
version() {
|
||||
return 'v' + this.$version;
|
||||
},
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfos();
|
||||
},
|
||||
allTimezones() {
|
||||
return this.$locale.getAllTimezones(true);
|
||||
},
|
||||
currentLocale: {
|
||||
get: function () {
|
||||
return this.$i18n.locale;
|
||||
},
|
||||
set: function (value) {
|
||||
this.$locale.setLanguage(value);
|
||||
}
|
||||
},
|
||||
currentTimezone: {
|
||||
get: function () {
|
||||
return this.$locale.getTimezone();
|
||||
@@ -144,7 +120,7 @@ export default {
|
||||
},
|
||||
exchangeRatesLastUpdateDate() {
|
||||
const exchangeRatesLastUpdateTime = this.$store.getters.exchangeRatesLastUpdateTime;
|
||||
return exchangeRatesLastUpdateTime ? this.$utilities.formatUnixTime(exchangeRatesLastUpdateTime, this.$t('format.date.long')) : '';
|
||||
return exchangeRatesLastUpdateTime ? this.$utilities.formatUnixTime(exchangeRatesLastUpdateTime, this.$locale.getLongDateFormat()) : '';
|
||||
},
|
||||
isAutoUpdateExchangeRatesData: {
|
||||
get: function () {
|
||||
|
||||
@@ -188,6 +188,7 @@ export default {
|
||||
confirmPassword: '',
|
||||
email: '',
|
||||
nickname: '',
|
||||
language: self.$i18n.locale,
|
||||
defaultCurrency: self.$store.state.defaultSetting.currency,
|
||||
firstDayOfWeek: self.$constants.datetime.allWeekDays[self.$t('default.firstDayOfWeek')] ? self.$constants.datetime.allWeekDays[self.$t('default.firstDayOfWeek')].type : 0
|
||||
},
|
||||
@@ -221,6 +222,7 @@ export default {
|
||||
const isCurrencyDefault = this.user.defaultCurrency === this.$store.state.defaultSetting.currency;
|
||||
const isFirstWeekDayDefault = this.user.firstDayOfWeek === (this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')] ? this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')].type : 0);
|
||||
|
||||
this.user.language = value;
|
||||
this.$locale.setLanguage(value);
|
||||
|
||||
if (isCurrencyDefault) {
|
||||
@@ -324,7 +326,7 @@ export default {
|
||||
|
||||
self.$store.dispatch('register', {
|
||||
user: self.user
|
||||
}).then(() => {
|
||||
}).then(response => {
|
||||
if (!self.$user.isUserLogined()) {
|
||||
self.submitting = false;
|
||||
self.$hideLoading();
|
||||
@@ -339,6 +341,10 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.user && response.user.language) {
|
||||
self.$locale.setLanguage(response.user.language);
|
||||
}
|
||||
|
||||
if (self.$settings.isAutoUpdateExchangeRatesData()) {
|
||||
self.$store.dispatch('getLatestExchangeRates', { silent: true, force: false });
|
||||
}
|
||||
|
||||
@@ -113,7 +113,11 @@ export default {
|
||||
self.$hideLoading();
|
||||
|
||||
self.$user.unlockTokenByWebAuthn(id, userName, userSecret);
|
||||
self.$store.dispatch('refreshTokenAndRevokeOldToken');
|
||||
self.$store.dispatch('refreshTokenAndRevokeOldToken').then(response => {
|
||||
if (response.user && response.user.language) {
|
||||
self.$locale.setLanguage(response.user.language);
|
||||
}
|
||||
});
|
||||
|
||||
if (self.$settings.isAutoUpdateExchangeRatesData()) {
|
||||
self.$store.dispatch('getLatestExchangeRates', { silent: true, force: false });
|
||||
@@ -136,34 +140,40 @@ export default {
|
||||
});
|
||||
},
|
||||
unlockByPin(pinCode) {
|
||||
if (!this.isPinCodeValid(pinCode)) {
|
||||
const self = this;
|
||||
|
||||
if (!self.isPinCodeValid(pinCode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.$ui.isModalShowing()) {
|
||||
if (self.$ui.isModalShowing()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const router = this.f7router;
|
||||
const user = this.$store.state.currentUserInfo;
|
||||
const router = self.f7router;
|
||||
const user = self.$store.state.currentUserInfo;
|
||||
|
||||
if (!user || !user.username) {
|
||||
this.$alert('An error has occurred');
|
||||
self.$alert('An error has occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.$user.unlockTokenByPinCode(user.username, pinCode);
|
||||
this.$store.dispatch('refreshTokenAndRevokeOldToken');
|
||||
self.$user.unlockTokenByPinCode(user.username, pinCode);
|
||||
self.$store.dispatch('refreshTokenAndRevokeOldToken').then(response => {
|
||||
if (response.user && response.user.language) {
|
||||
self.$locale.setLanguage(response.user.language);
|
||||
}
|
||||
});
|
||||
|
||||
if (this.$settings.isAutoUpdateExchangeRatesData()) {
|
||||
this.$store.dispatch('getLatestExchangeRates', { silent: true, force: false });
|
||||
if (self.$settings.isAutoUpdateExchangeRatesData()) {
|
||||
self.$store.dispatch('getLatestExchangeRates', { silent: true, force: false });
|
||||
}
|
||||
|
||||
router.refreshPage();
|
||||
} catch (ex) {
|
||||
this.$logger.error('failed to unlock by pin code', ex);
|
||||
this.$toast('PIN code is wrong');
|
||||
self.$logger.error('failed to unlock by pin code', ex);
|
||||
self.$toast('PIN code is wrong');
|
||||
}
|
||||
},
|
||||
relogin() {
|
||||
|
||||
@@ -217,10 +217,10 @@
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="dateRange.type === allDateRanges.Custom.type && query.dateType === allDateRanges.Custom.type && query.startTime && query.endTime">
|
||||
<span>{{ $utilities.formatUnixTime(query.startTime, $t('format.datetime.long-without-second')) }}</span>
|
||||
<span>{{ $utilities.formatUnixTime(query.startTime, $locale.getLongDateTimeFormat()) }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
<span>{{ $utilities.formatUnixTime(query.endTime, $t('format.datetime.long-without-second')) }}</span>
|
||||
<span>{{ $utilities.formatUnixTime(query.endTime, $locale.getLongDateTimeFormat()) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
@@ -618,15 +618,15 @@ export default {
|
||||
}
|
||||
|
||||
if (this.$utilities.isDateRangeMatchFullYears(query.startTime, query.endTime)) {
|
||||
const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.year.short'));
|
||||
const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.year.short'));
|
||||
const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$locale.getShortYearFormat());
|
||||
const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$locale.getShortYearFormat());
|
||||
|
||||
return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
|
||||
}
|
||||
|
||||
if (this.$utilities.isDateRangeMatchFullMonths(query.startTime, query.endTime)) {
|
||||
const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.yearMonth.short'));
|
||||
const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.yearMonth.short'));
|
||||
const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$locale.getShortYearMonthFormat());
|
||||
const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$locale.getShortYearMonthFormat());
|
||||
|
||||
return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
|
||||
}
|
||||
@@ -634,13 +634,13 @@ export default {
|
||||
const startTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.startTime));
|
||||
const endTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.endTime));
|
||||
|
||||
const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.date.short'));
|
||||
const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.date.short'));
|
||||
const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$locale.getShortDateFormat());
|
||||
const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$locale.getShortDateFormat());
|
||||
|
||||
if (displayStartTime === displayEndTime) {
|
||||
return displayStartTime;
|
||||
} else if (startTimeYear === endTimeYear) {
|
||||
const displayShortEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.monthDay.short'));
|
||||
const displayShortEndTime = this.$utilities.formatUnixTime(query.endTime, this.$locale.getShortMonthDayFormat());
|
||||
return `${displayStartTime} ~ ${displayShortEndTime}`;
|
||||
}
|
||||
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
link="#" no-chevron
|
||||
:class="{ 'readonly': mode === 'view' }"
|
||||
:header="$t('Transaction Time')"
|
||||
:title="$utilities.formatUnixTime($utilities.getActualUnixTimeForStore(transaction.time, $utilities.getTimezoneOffsetMinutes(), $utilities.getBrowserTimezoneOffsetMinutes()), this.$t('format.datetime.long'))"
|
||||
:title="$utilities.formatUnixTime($utilities.getActualUnixTimeForStore(transaction.time, $utilities.getTimezoneOffsetMinutes(), $utilities.getBrowserTimezoneOffsetMinutes()), $locale.getLongDateTimeFormat())"
|
||||
@click="showTransactionDateTimeSheet = true"
|
||||
>
|
||||
<date-time-selection-sheet v-model:show="showTransactionDateTimeSheet"
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
<f7-list-item>
|
||||
<template #title>
|
||||
<small>
|
||||
<span>{{ $utilities.formatTime(transactionMonthList.yearMonth, $t('format.yearMonth.long')) }}</span>
|
||||
<span>{{ $utilities.formatTime(transactionMonthList.yearMonth, $locale.getLongYearMonthFormat()) }}</span>
|
||||
</small>
|
||||
<small class="transaction-amount-statistics" v-if="showTotalAmountInTransactionListPage && transactionMonthList.totalAmount">
|
||||
<span class="text-color-red">
|
||||
@@ -202,7 +202,7 @@
|
||||
</div>
|
||||
<div class="item-footer">
|
||||
<div class="transaction-footer">
|
||||
<span>{{ $utilities.formatUnixTime(transaction.time, $t('format.hourMinute.long'), transaction.utcOffset, currentTimezoneOffsetMinutes) }}</span>
|
||||
<span>{{ $utilities.formatUnixTime(transaction.time, $locale.getShortTimeFormat(), transaction.utcOffset, currentTimezoneOffsetMinutes) }}</span>
|
||||
<span v-if="transaction.utcOffset !== currentTimezoneOffsetMinutes">{{ `(UTC${$utilities.getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)})` }}</span>
|
||||
<span v-if="transaction.sourceAccount">·</span>
|
||||
<span v-if="transaction.sourceAccount">{{ transaction.sourceAccount.name }}</span>
|
||||
@@ -252,10 +252,10 @@
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="dateRange.type === $constants.datetime.allDateRanges.Custom.type && query.dateType === $constants.datetime.allDateRanges.Custom.type && query.minTime && query.maxTime">
|
||||
<span>{{ $utilities.formatUnixTime(query.minTime, $t('format.datetime.long-without-second')) }}</span>
|
||||
<span>{{ $utilities.formatUnixTime(query.minTime, $locale.getLongDateTimeFormat()) }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
<span>{{ $utilities.formatUnixTime(query.maxTime, $t('format.datetime.long-without-second')) }}</span>
|
||||
<span>{{ $utilities.formatUnixTime(query.maxTime, $locale.getLongDateTimeFormat()) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
@@ -840,6 +840,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list.transaction-amount-list .transaction-amount-statistics {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list.transaction-amount-list .transaction-amount-statistics > span {
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
deviceType: this.$t(token.isCurrent ? 'Current' : 'Other Device'),
|
||||
deviceInfo: this.$utilities.parseDeviceInfo(token.userAgent),
|
||||
icon: this.getTokenIcon(token),
|
||||
createdAt: this.$utilities.formatUnixTime(token.createdAt, this.$t('format.datetime.long'))
|
||||
createdAt: this.$utilities.formatUnixTime(token.createdAt, this.$locale.getLongDateTimeFormat())
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -16,12 +16,20 @@
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Default Currency" title="Currency" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Default Account" title="Not Specified"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="First Day of Week" title="Week Day" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Editable Transaction Scope" title="All" link="#"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Default Language" title="Language" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Default Currency" title="Currency" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="First Day of Week" title="Week Day" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Long Date Format" title="YYYY-MM-DD" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Short Date Format" title="YYYY-MM-DD" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Long Time Format" title="HH:mm:ss" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Short Time Format" title="HH:mm" link="#"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
|
||||
<f7-list-input
|
||||
type="password"
|
||||
@@ -63,24 +71,6 @@
|
||||
</f7-list>
|
||||
|
||||
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Default Currency')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Default Currency'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<template #title>
|
||||
<f7-block class="no-padding no-margin">
|
||||
<span>{{ $t(`currency.${newProfile.defaultCurrency}`) }} </span>
|
||||
<small class="smaller">{{ newProfile.defaultCurrency }}</small>
|
||||
</f7-block>
|
||||
</template>
|
||||
<select autocomplete="transaction-currency" v-model="newProfile.defaultCurrency">
|
||||
<option :value="currency.code"
|
||||
:key="currency.code"
|
||||
v-for="currency in allCurrencies">{{ currency.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title"
|
||||
link="#" no-chevron
|
||||
@@ -103,19 +93,6 @@
|
||||
</two-column-list-item-selection-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('First Day of Week')"
|
||||
:title="getDayOfWeekName(newProfile.firstDayOfWeek)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('First Day of Week'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.firstDayOfWeek">
|
||||
<option :value="weekDay.type"
|
||||
:key="weekDay.type"
|
||||
v-for="weekDay in allWeekDays">{{ $t(`datetime.${weekDay.name}.long`) }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Editable Transaction Scope')"
|
||||
@@ -132,6 +109,105 @@
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="$t(extendInputInvalidProblemMessage)"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Language')"
|
||||
:title="currentLanguageName"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Language'), popupCloseLinkText: $t('Done') }">
|
||||
<select v-model="newProfile.language">
|
||||
<option :value="language.code"
|
||||
:key="language.code"
|
||||
v-for="language in allLanguages">{{ language.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Default Currency')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Default Currency'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<template #title>
|
||||
<f7-block class="no-padding no-margin">
|
||||
<span>{{ $t(`currency.${newProfile.defaultCurrency}`) }} </span>
|
||||
<small class="smaller">{{ newProfile.defaultCurrency }}</small>
|
||||
</f7-block>
|
||||
</template>
|
||||
<select autocomplete="transaction-currency" v-model="newProfile.defaultCurrency">
|
||||
<option :value="currency.code"
|
||||
:key="currency.code"
|
||||
v-for="currency in allCurrencies">{{ currency.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('First Day of Week')"
|
||||
:title="currentDayOfWeekName"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('First Day of Week'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.firstDayOfWeek">
|
||||
<option :value="weekDay.type"
|
||||
:key="weekDay.type"
|
||||
v-for="weekDay in allWeekDays">{{ $t(`datetime.${weekDay.name}.long`) }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Long Date Format')"
|
||||
:title="$utilities.getNameByKeyValue(allLongDateFormats, newProfile.longDateFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Long Date Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Long Date Format'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.longDateFormat">
|
||||
<option :value="format.type"
|
||||
:key="format.type"
|
||||
v-for="format in allLongDateFormats">{{ format.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Short Date Format')"
|
||||
:title="$utilities.getNameByKeyValue(allShortDateFormats, newProfile.shortDateFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Short Date Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Short Date Format'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.shortDateFormat">
|
||||
<option :value="format.type"
|
||||
:key="format.type"
|
||||
v-for="format in allShortDateFormats">{{ format.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Long Time Format')"
|
||||
:title="$utilities.getNameByKeyValue(allLongTimeFormats, newProfile.longTimeFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Long Time Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Long Time Format'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.longTimeFormat">
|
||||
<option :value="format.type"
|
||||
:key="format.type"
|
||||
v-for="format in allLongTimeFormats">{{ format.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Short Time Format')"
|
||||
:title="$utilities.getNameByKeyValue(allShortTimeFormats, newProfile.shortTimeFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Long Time Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Short Time Format'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.shortTimeFormat">
|
||||
<option :value="format.type"
|
||||
:key="format.type"
|
||||
v-for="format in allShortTimeFormats">{{ format.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="$t(langAndRegionInputInvalidProblemMessage)"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<password-input-sheet :title="$t('Modify Password')"
|
||||
:hint="$t('Please enter your current password when modifying your password')"
|
||||
:confirm-disabled="saving"
|
||||
@@ -155,18 +231,28 @@ export default {
|
||||
confirmPassword: '',
|
||||
email: '',
|
||||
nickname: '',
|
||||
defaultCurrency: '',
|
||||
defaultAccountId: '',
|
||||
transactionEditScope: 1,
|
||||
language: '',
|
||||
defaultCurrency: '',
|
||||
firstDayOfWeek: 0,
|
||||
transactionEditScope: 1
|
||||
longDateFormat: 0,
|
||||
shortDateFormat: 0,
|
||||
longTimeFormat: 0,
|
||||
shortTimeFormat: 0
|
||||
},
|
||||
oldProfile: {
|
||||
email: '',
|
||||
nickname: '',
|
||||
defaultCurrency: '',
|
||||
defaultAccountId: '',
|
||||
transactionEditScope: 1,
|
||||
language: '',
|
||||
defaultCurrency: '',
|
||||
firstDayOfWeek: 0,
|
||||
transactionEditScope: 1
|
||||
longDateFormat: 0,
|
||||
shortDateFormat: 0,
|
||||
longTimeFormat: 0,
|
||||
shortTimeFormat: 0
|
||||
},
|
||||
currentPassword: '',
|
||||
loading: true,
|
||||
@@ -177,6 +263,30 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
allLanguages() {
|
||||
const ret = [];
|
||||
const allLanguageInfo = this.$locale.getAllLanguageInfos();
|
||||
|
||||
ret.push({
|
||||
code: '',
|
||||
displayName: this.$t('System Default')
|
||||
});
|
||||
|
||||
for (let code in allLanguageInfo) {
|
||||
if (!Object.prototype.hasOwnProperty.call(allLanguageInfo, code)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const languageInfo = allLanguageInfo[code];
|
||||
|
||||
ret.push({
|
||||
code: code,
|
||||
displayName: languageInfo.displayName
|
||||
});
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
allCurrencies() {
|
||||
return this.$locale.getAllCurrencies();
|
||||
},
|
||||
@@ -192,6 +302,18 @@ export default {
|
||||
allWeekDays() {
|
||||
return this.$constants.datetime.allWeekDays;
|
||||
},
|
||||
allLongDateFormats() {
|
||||
return this.$locale.getAllLongDateFormats();
|
||||
},
|
||||
allShortDateFormats() {
|
||||
return this.$locale.getAllShortDateFormats();
|
||||
},
|
||||
allLongTimeFormats() {
|
||||
return this.$locale.getAllLongTimeFormats();
|
||||
},
|
||||
allShortTimeFormats() {
|
||||
return this.$locale.getAllShortTimeFormats();
|
||||
},
|
||||
allTransactionEditScopeTypes() {
|
||||
return [{
|
||||
value: 0,
|
||||
@@ -216,6 +338,20 @@ export default {
|
||||
name: 'This year or later'
|
||||
}];
|
||||
},
|
||||
currentLanguageName() {
|
||||
for (let i = 0; i < this.allLanguages.length; i++) {
|
||||
if (this.allLanguages[i].code === this.newProfile.language) {
|
||||
return this.allLanguages[i].displayName;
|
||||
}
|
||||
}
|
||||
|
||||
return this.$t('Unknown');
|
||||
},
|
||||
currentDayOfWeekName() {
|
||||
const weekName = this.$utilities.getNameByKeyValue(this.$constants.datetime.allWeekDays, this.newProfile.firstDayOfWeek, 'type', 'name');
|
||||
const i18nWeekNameKey = `datetime.${weekName}.long`;
|
||||
return this.$t(i18nWeekNameKey);
|
||||
},
|
||||
inputIsNotChanged() {
|
||||
return !!this.inputIsNotChangedProblemMessage;
|
||||
},
|
||||
@@ -225,16 +361,24 @@ export default {
|
||||
extendInputIsInvalid() {
|
||||
return !!this.extendInputInvalidProblemMessage;
|
||||
},
|
||||
langAndRegionInputIsInvalid() {
|
||||
return !!this.langAndRegionInputInvalidProblemMessage;
|
||||
},
|
||||
inputIsNotChangedProblemMessage() {
|
||||
if (!this.newProfile.password && !this.newProfile.confirmPassword && !this.newProfile.email && !this.newProfile.nickname) {
|
||||
return 'Nothing has been modified';
|
||||
} else if (!this.newProfile.password && !this.newProfile.confirmPassword &&
|
||||
this.newProfile.email === this.oldProfile.email &&
|
||||
this.newProfile.nickname === this.oldProfile.nickname &&
|
||||
this.newProfile.defaultCurrency === this.oldProfile.defaultCurrency &&
|
||||
this.newProfile.defaultAccountId === this.oldProfile.defaultAccountId &&
|
||||
this.newProfile.transactionEditScope === this.oldProfile.transactionEditScope &&
|
||||
this.newProfile.language === this.oldProfile.language &&
|
||||
this.newProfile.defaultCurrency === this.oldProfile.defaultCurrency &&
|
||||
this.newProfile.firstDayOfWeek === this.oldProfile.firstDayOfWeek &&
|
||||
this.newProfile.transactionEditScope === this.oldProfile.transactionEditScope) {
|
||||
this.newProfile.longDateFormat === this.oldProfile.longDateFormat &&
|
||||
this.newProfile.shortDateFormat === this.oldProfile.shortDateFormat &&
|
||||
this.newProfile.longTimeFormat === this.oldProfile.longTimeFormat &&
|
||||
this.newProfile.shortTimeFormat === this.oldProfile.shortTimeFormat) {
|
||||
return 'Nothing has been modified';
|
||||
} else if (!this.newProfile.password && this.newProfile.confirmPassword) {
|
||||
return 'Password cannot be empty';
|
||||
@@ -258,6 +402,9 @@ export default {
|
||||
}
|
||||
},
|
||||
extendInputInvalidProblemMessage() {
|
||||
return null;
|
||||
},
|
||||
langAndRegionInputInvalidProblemMessage() {
|
||||
if (!this.newProfile.defaultCurrency) {
|
||||
return 'Default currency cannot be empty';
|
||||
} else {
|
||||
@@ -277,21 +424,7 @@ export default {
|
||||
|
||||
Promise.all(promises).then(responses => {
|
||||
const profile = responses[1];
|
||||
|
||||
self.oldProfile.email = profile.email;
|
||||
self.oldProfile.nickname = profile.nickname;
|
||||
self.oldProfile.defaultCurrency = profile.defaultCurrency;
|
||||
self.oldProfile.defaultAccountId = profile.defaultAccountId;
|
||||
self.oldProfile.firstDayOfWeek = profile.firstDayOfWeek;
|
||||
self.oldProfile.transactionEditScope = profile.transactionEditScope;
|
||||
|
||||
self.newProfile.email = self.oldProfile.email
|
||||
self.newProfile.nickname = self.oldProfile.nickname;
|
||||
self.newProfile.defaultCurrency = self.oldProfile.defaultCurrency;
|
||||
self.newProfile.defaultAccountId = self.oldProfile.defaultAccountId;
|
||||
self.newProfile.firstDayOfWeek = self.oldProfile.firstDayOfWeek;
|
||||
self.newProfile.transactionEditScope = self.oldProfile.transactionEditScope;
|
||||
|
||||
self.setCurrentUserProfile(profile);
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
if (error.processed) {
|
||||
@@ -312,7 +445,7 @@ export default {
|
||||
|
||||
self.showInputPasswordSheet = false;
|
||||
|
||||
let problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage;
|
||||
let problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage || self.langAndRegionInputInvalidProblemMessage;
|
||||
|
||||
if (problemMessage) {
|
||||
self.$alert(problemMessage);
|
||||
@@ -330,11 +463,16 @@ export default {
|
||||
self.$store.dispatch('updateUserProfile', {
|
||||
profile: self.newProfile,
|
||||
currentPassword: self.currentPassword
|
||||
}).then(() => {
|
||||
}).then(response => {
|
||||
self.saving = false;
|
||||
self.$hideLoading();
|
||||
self.currentPassword = '';
|
||||
|
||||
if (response.user) {
|
||||
self.setCurrentUserProfile(response.user);
|
||||
self.$locale.setLanguage(response.user.language);
|
||||
}
|
||||
|
||||
self.$toast('Your profile has been successfully updated');
|
||||
router.back();
|
||||
}).catch(error => {
|
||||
@@ -347,10 +485,30 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
getDayOfWeekName(dayOfWeek) {
|
||||
const weekName = this.$utilities.getNameByKeyValue(this.$constants.datetime.allWeekDays, dayOfWeek, 'type', 'name');
|
||||
const i18nWeekNameKey = `datetime.${weekName}.long`;
|
||||
return this.$t(i18nWeekNameKey);
|
||||
setCurrentUserProfile(profile) {
|
||||
this.oldProfile.email = profile.email;
|
||||
this.oldProfile.nickname = profile.nickname;
|
||||
this.oldProfile.defaultAccountId = profile.defaultAccountId;
|
||||
this.oldProfile.transactionEditScope = profile.transactionEditScope;
|
||||
this.oldProfile.language = profile.language;
|
||||
this.oldProfile.defaultCurrency = profile.defaultCurrency;
|
||||
this.oldProfile.firstDayOfWeek = profile.firstDayOfWeek;
|
||||
this.oldProfile.longDateFormat = profile.longDateFormat;
|
||||
this.oldProfile.shortDateFormat = profile.shortDateFormat;
|
||||
this.oldProfile.longTimeFormat = profile.longTimeFormat;
|
||||
this.oldProfile.shortTimeFormat = profile.shortTimeFormat;
|
||||
|
||||
this.newProfile.email = this.oldProfile.email
|
||||
this.newProfile.nickname = this.oldProfile.nickname;
|
||||
this.newProfile.defaultAccountId = this.oldProfile.defaultAccountId;
|
||||
this.newProfile.transactionEditScope = this.oldProfile.transactionEditScope;
|
||||
this.newProfile.language = this.oldProfile.language;
|
||||
this.newProfile.defaultCurrency = this.oldProfile.defaultCurrency;
|
||||
this.newProfile.firstDayOfWeek = this.oldProfile.firstDayOfWeek;
|
||||
this.newProfile.longDateFormat = this.oldProfile.longDateFormat;
|
||||
this.newProfile.shortDateFormat = this.oldProfile.shortDateFormat;
|
||||
this.newProfile.longTimeFormat = this.oldProfile.longTimeFormat;
|
||||
this.newProfile.shortTimeFormat = this.oldProfile.shortTimeFormat;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user