migrate user profile page to composition API and typescript
This commit is contained in:
MaysWind
@@ -62,6 +62,12 @@ export interface LocalizedMeridiemIndicator {
|
||||
readonly displayValues: string[];
|
||||
}
|
||||
|
||||
export interface LocalizedDateTimeFormat extends TypeAndDisplayName {
|
||||
readonly type: number;
|
||||
readonly format: string;
|
||||
readonly displayName: string;
|
||||
}
|
||||
|
||||
export interface LocalizedDateRange extends TypeAndDisplayName {
|
||||
readonly type: number;
|
||||
readonly displayName: string;
|
||||
|
||||
+2
-125
@@ -2,11 +2,10 @@ import moment from 'moment-timezone';
|
||||
|
||||
import { DEFAULT_LANGUAGE, ALL_LANGUAGES } from '@/locales/index.ts';
|
||||
|
||||
import { Month, WeekDay, MeridiemIndicator, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE } from '@/core/datetime.ts';
|
||||
import { Month, WeekDay, MeridiemIndicator, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange } from '@/core/datetime.ts';
|
||||
import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
|
||||
import { DecimalSeparator, DigitGroupingSymbol, DigitGroupingType } from '@/core/numeral.ts';
|
||||
import { CurrencyDisplayType, CurrencySortingType } from '@/core/currency.ts';
|
||||
import { PresetAmountColor } from '@/core/color.ts';
|
||||
import { CurrencyDisplayType, CurrencySortingType } from '@/core/currency.ts'
|
||||
import { AccountType, AccountCategory } from '@/core/account.ts';
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import { TransactionEditScopeType, TransactionTagFilterType } from '@/core/transaction.ts';
|
||||
@@ -30,7 +29,6 @@ import {
|
||||
isPM,
|
||||
parseDateFromUnixTime,
|
||||
formatUnixTime,
|
||||
formatCurrentTime,
|
||||
getYear,
|
||||
getTimezoneOffset,
|
||||
getTimezoneOffsetMinutes,
|
||||
@@ -67,42 +65,6 @@ function getLanguageDisplayName(translateFn, languageName) {
|
||||
return translateFn(`language.${languageName}`);
|
||||
}
|
||||
|
||||
function getAllLanguageInfoArray(translateFn, includeSystemDefault) {
|
||||
const ret = [];
|
||||
|
||||
for (const languageTag in ALL_LANGUAGES) {
|
||||
if (!Object.prototype.hasOwnProperty.call(ALL_LANGUAGES, languageTag)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const languageInfo = ALL_LANGUAGES[languageTag];
|
||||
let displayName = languageInfo.displayName;
|
||||
let languageNameInCurrentLanguage = getLanguageDisplayName(translateFn, languageInfo.name);
|
||||
|
||||
if (languageNameInCurrentLanguage && languageNameInCurrentLanguage !== displayName) {
|
||||
displayName = `${languageNameInCurrentLanguage} (${displayName})`;
|
||||
}
|
||||
|
||||
ret.push({
|
||||
languageTag: languageTag,
|
||||
displayName: displayName
|
||||
});
|
||||
}
|
||||
|
||||
ret.sort(function (lang1, lang2) {
|
||||
return lang1.languageTag.localeCompare(lang2.languageTag);
|
||||
});
|
||||
|
||||
if (includeSystemDefault) {
|
||||
ret.splice(0, 0, {
|
||||
languageTag: '',
|
||||
displayName: translateFn('System Default')
|
||||
});
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getLanguageInfo(locale) {
|
||||
return ALL_LANGUAGES[locale];
|
||||
}
|
||||
@@ -302,26 +264,6 @@ function getAllMinWeekdayNames(translateFn) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getAllLongDateFormats(translateFn) {
|
||||
const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
|
||||
return getDateTimeFormats(translateFn, LongDateFormat.all(), LongDateFormat.values(), 'format.longDate', defaultLongDateFormatTypeName, LongDateFormat.Default);
|
||||
}
|
||||
|
||||
function getAllShortDateFormats(translateFn) {
|
||||
const defaultShortDateFormatTypeName = translateFn('default.shortDateFormat');
|
||||
return getDateTimeFormats(translateFn, ShortDateFormat.all(), ShortDateFormat.values(), 'format.shortDate', defaultShortDateFormatTypeName, ShortDateFormat.Default);
|
||||
}
|
||||
|
||||
function getAllLongTimeFormats(translateFn) {
|
||||
const defaultLongTimeFormatTypeName = translateFn('default.longTimeFormat');
|
||||
return getDateTimeFormats(translateFn, LongTimeFormat.all(), LongTimeFormat.values(), 'format.longTime', defaultLongTimeFormatTypeName, LongTimeFormat.Default);
|
||||
}
|
||||
|
||||
function getAllShortTimeFormats(translateFn) {
|
||||
const defaultShortTimeFormatTypeName = translateFn('default.shortTimeFormat');
|
||||
return getDateTimeFormats(translateFn, ShortTimeFormat.all(), ShortTimeFormat.values(), 'format.shortTime', defaultShortTimeFormatTypeName, ShortTimeFormat.Default);
|
||||
}
|
||||
|
||||
function getMonthdayOrdinal(monthDay, translateFn) {
|
||||
return translateFn(`datetime.monthDayOrdinal.${monthDay}`);
|
||||
}
|
||||
@@ -445,31 +387,6 @@ function formatYearQuarter(translateFn, year, quarter) {
|
||||
}
|
||||
}
|
||||
|
||||
function getDateTimeFormats(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType) {
|
||||
const defaultFormat = getDateTimeFormat(translateFn, allFormatMap, allFormatArray,
|
||||
localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE);
|
||||
const ret = [];
|
||||
|
||||
ret.push({
|
||||
type: LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE,
|
||||
format: defaultFormat,
|
||||
displayName: `${translateFn('Language Default')} (${formatCurrentTime(defaultFormat)})`
|
||||
});
|
||||
|
||||
for (let i = 0; i < allFormatArray.length; i++) {
|
||||
const formatType = allFormatArray[i];
|
||||
const format = translateFn(`${localeFormatPathPrefix}.${formatType.key}`);
|
||||
|
||||
ret.push({
|
||||
type: formatType.type,
|
||||
format: format,
|
||||
displayName: formatCurrentTime(format)
|
||||
});
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getDateTimeFormat(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, formatTypeValue) {
|
||||
const type = getDateTimeFormatType(allFormatMap, allFormatArray, formatTypeValue, localeDefaultFormatTypeName, systemDefaultFormatType);
|
||||
return translateFn(`${localeFormatPathPrefix}.${type.key}`);
|
||||
@@ -974,39 +891,6 @@ function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRat
|
||||
return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions);
|
||||
}
|
||||
|
||||
function getAllExpenseIncomeAmountColors(translateFn, expenseOrIncome) {
|
||||
const ret = [];
|
||||
let defaultAmountName = '';
|
||||
|
||||
if (expenseOrIncome === 1) { // expense
|
||||
defaultAmountName = PresetAmountColor.DefaultExpenseColor.name;
|
||||
} else if (expenseOrIncome === 2) { // income
|
||||
defaultAmountName = PresetAmountColor.DefaultIncomeColor.name;
|
||||
}
|
||||
|
||||
if (defaultAmountName) {
|
||||
defaultAmountName = translateFn('color.amount.' + defaultAmountName);
|
||||
}
|
||||
|
||||
ret.push({
|
||||
type: PresetAmountColor.SystemDefaultType,
|
||||
displayName: translateFn('System Default') + (defaultAmountName ? ` (${defaultAmountName})` : '')
|
||||
});
|
||||
|
||||
const allPresetAmountColors = PresetAmountColor.values();
|
||||
|
||||
for (let i = 0; i < allPresetAmountColors.length; i++) {
|
||||
const amountColor = allPresetAmountColors[i];
|
||||
|
||||
ret.push({
|
||||
type: amountColor.type,
|
||||
displayName: translateFn('color.amount.' + amountColor.name)
|
||||
});
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getAllAccountCategories(translateFn) {
|
||||
const ret = [];
|
||||
const allCategories = AccountCategory.values();
|
||||
@@ -1373,14 +1257,9 @@ export function translateError(message, translateFn) {
|
||||
|
||||
export function i18nFunctions(i18nGlobal) {
|
||||
return {
|
||||
getAllLanguageInfoArray: (includeSystemDefault) => getAllLanguageInfoArray(i18nGlobal.t, includeSystemDefault),
|
||||
getDefaultCurrency: () => getDefaultCurrency(i18nGlobal.t),
|
||||
getDefaultFirstDayOfWeek: () => getDefaultFirstDayOfWeek(i18nGlobal.t),
|
||||
getCurrencyName: (currencyCode) => getCurrencyName(currencyCode, i18nGlobal.t),
|
||||
getAllLongDateFormats: () => getAllLongDateFormats(i18nGlobal.t),
|
||||
getAllShortDateFormats: () => getAllShortDateFormats(i18nGlobal.t),
|
||||
getAllLongTimeFormats: () => getAllLongTimeFormats(i18nGlobal.t),
|
||||
getAllShortTimeFormats: () => getAllShortTimeFormats(i18nGlobal.t),
|
||||
getMonthdayShortName: (monthDay) => getMonthdayShortName(monthDay, i18nGlobal.t),
|
||||
getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
|
||||
getWeekdayLongName: (weekDay) => getWeekdayLongName(weekDay, i18nGlobal.t),
|
||||
@@ -1420,8 +1299,6 @@ export function i18nFunctions(i18nGlobal) {
|
||||
formatAmount: (userStore, value, currencyCode) => getFormattedAmount(value, i18nGlobal.t, userStore, currencyCode),
|
||||
formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
|
||||
getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
|
||||
getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
|
||||
getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),
|
||||
getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),
|
||||
getAllAccountTypes: () => getAllAccountTypes(i18nGlobal.t),
|
||||
getAllCategoricalChartTypes: () => getAllCategoricalChartTypes(i18nGlobal.t),
|
||||
|
||||
+71
-1
@@ -9,6 +9,7 @@ import {
|
||||
type DateFormat,
|
||||
type TimeFormat,
|
||||
type LocalizedMeridiemIndicator,
|
||||
type LocalizedDateTimeFormat,
|
||||
type LocalizedDateRange,
|
||||
type LocalizedRecentMonthDateRange,
|
||||
Month,
|
||||
@@ -19,7 +20,8 @@ import {
|
||||
LongTimeFormat,
|
||||
ShortTimeFormat,
|
||||
DateRange,
|
||||
DateRangeScene
|
||||
DateRangeScene,
|
||||
LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE
|
||||
} from '@/core/datetime.ts';
|
||||
|
||||
import {
|
||||
@@ -44,6 +46,10 @@ import {
|
||||
CurrencySortingType
|
||||
} from '@/core/currency.ts';
|
||||
|
||||
import {
|
||||
PresetAmountColor
|
||||
} from '@/core/color.ts';
|
||||
|
||||
import {
|
||||
type LocalizedAccountCategory,
|
||||
AccountType,
|
||||
@@ -98,6 +104,7 @@ import {
|
||||
import {
|
||||
isPM,
|
||||
formatUnixTime,
|
||||
formatCurrentTime,
|
||||
getTimezoneOffset,
|
||||
getTimezoneOffsetMinutes,
|
||||
getBrowserTimezoneOffset,
|
||||
@@ -706,6 +713,30 @@ export function useI18n() {
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getLocalizedDateTimeFormats<T extends DateFormat | TimeFormat>(type: string, allFormatMap: Record<string, T>, allFormatArray: T[], languageDefaultTypeNameKey: string, systemDefaultFormatType: T): LocalizedDateTimeFormat[] {
|
||||
const defaultFormat = getLocalizedDateTimeFormat<T>(type, allFormatMap, allFormatArray, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE, languageDefaultTypeNameKey, systemDefaultFormatType);
|
||||
const ret: LocalizedDateTimeFormat[] = [];
|
||||
|
||||
ret.push({
|
||||
type: LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE,
|
||||
format: defaultFormat,
|
||||
displayName: `${t('Language Default')} (${formatCurrentTime(defaultFormat)})`
|
||||
});
|
||||
|
||||
for (let i = 0; i < allFormatArray.length; i++) {
|
||||
const formatType = allFormatArray[i];
|
||||
const format = t(`format.${type}.${formatType.key}`);
|
||||
|
||||
ret.push({
|
||||
type: formatType.type,
|
||||
format: format,
|
||||
displayName: formatCurrentTime(format)
|
||||
});
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getAllDateRanges(scene: DateRangeScene, includeCustom?: boolean, includeBillingCycle?: boolean): LocalizedDateRange[] {
|
||||
const ret: LocalizedDateRange[] = [];
|
||||
const allDateRanges = DateRange.values();
|
||||
@@ -869,6 +900,39 @@ export function useI18n() {
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getAllExpenseIncomeAmountColors(categoryType: CategoryType): TypeAndDisplayName[] {
|
||||
const ret: TypeAndDisplayName[] = [];
|
||||
let defaultAmountName = '';
|
||||
|
||||
if (categoryType === CategoryType.Expense) {
|
||||
defaultAmountName = PresetAmountColor.DefaultExpenseColor.name;
|
||||
} else if (categoryType === CategoryType.Income) { // income
|
||||
defaultAmountName = PresetAmountColor.DefaultIncomeColor.name;
|
||||
}
|
||||
|
||||
if (defaultAmountName) {
|
||||
defaultAmountName = t('color.amount.' + defaultAmountName);
|
||||
}
|
||||
|
||||
ret.push({
|
||||
type: PresetAmountColor.SystemDefaultType,
|
||||
displayName: t('System Default') + (defaultAmountName ? ` (${defaultAmountName})` : '')
|
||||
});
|
||||
|
||||
const allPresetAmountColors = PresetAmountColor.values();
|
||||
|
||||
for (let i = 0; i < allPresetAmountColors.length; i++) {
|
||||
const amountColor = allPresetAmountColors[i];
|
||||
|
||||
ret.push({
|
||||
type: amountColor.type,
|
||||
displayName: t('color.amount.' + amountColor.name)
|
||||
});
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getAllAccountCategories(): LocalizedAccountCategory[] {
|
||||
const ret: LocalizedAccountCategory[] = [];
|
||||
const allCategories = AccountCategory.values();
|
||||
@@ -1359,6 +1423,10 @@ export function useI18n() {
|
||||
getAllShortWeekdayNames,
|
||||
getAllMinWeekdayNames,
|
||||
getAllWeekDays,
|
||||
getAllLongDateFormats: () => getLocalizedDateTimeFormats<LongDateFormat>('longDate', LongDateFormat.all(), LongDateFormat.values(), 'longDateFormat', LongDateFormat.Default),
|
||||
getAllShortDateFormats: () => getLocalizedDateTimeFormats<ShortDateFormat>('shortDate', ShortDateFormat.all(), ShortDateFormat.values(), 'shortDateFormat', ShortDateFormat.Default),
|
||||
getAllLongTimeFormats: () => getLocalizedDateTimeFormats<LongTimeFormat>('longTime', LongTimeFormat.all(), LongTimeFormat.values(), 'longTimeFormat', LongTimeFormat.Default),
|
||||
getAllShortTimeFormats: () => getLocalizedDateTimeFormats<ShortTimeFormat>('shortTime', ShortTimeFormat.all(), ShortTimeFormat.values(), 'shortTimeFormat', ShortTimeFormat.Default),
|
||||
getAllDateRanges,
|
||||
getAllRecentMonthDateRanges,
|
||||
getAllTimezones,
|
||||
@@ -1368,6 +1436,8 @@ export function useI18n() {
|
||||
getAllDigitGroupingTypes,
|
||||
getAllCurrencyDisplayTypes,
|
||||
getAllCurrencySortingTypes: () => getLocalizedDisplayNameAndType(CurrencySortingType.values()),
|
||||
getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(CategoryType.Expense),
|
||||
getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(CategoryType.Income),
|
||||
getAllAccountCategories,
|
||||
getAllAccountTypes: () => getLocalizedDisplayNameAndType(AccountType.values()),
|
||||
getAllCategoricalChartTypes: () => getLocalizedDisplayNameAndType(CategoricalChartType.values()),
|
||||
|
||||
@@ -215,6 +215,16 @@ export class Account implements AccountInfoResponse {
|
||||
|
||||
return accounts;
|
||||
}
|
||||
|
||||
public static findAccountNameById(accounts: Account[], accountId: string, defaultName?: string): string | undefined {
|
||||
for (const account of accounts) {
|
||||
if (account.id === accountId) {
|
||||
return account.name;
|
||||
}
|
||||
}
|
||||
|
||||
return defaultName;
|
||||
}
|
||||
}
|
||||
|
||||
export interface AccountCreateRequest {
|
||||
|
||||
+47
-26
@@ -15,18 +15,18 @@ export class User {
|
||||
public defaultCurrency: string;
|
||||
public firstDayOfWeek: number;
|
||||
|
||||
public defaultAccountId?: string;
|
||||
public transactionEditScope?: number;
|
||||
public longDateFormat?: number;
|
||||
public shortDateFormat?: number;
|
||||
public longTimeFormat?: number;
|
||||
public shortTimeFormat?: number;
|
||||
public decimalSeparator?: number;
|
||||
public digitGroupingSymbol?: number;
|
||||
public digitGrouping?: number;
|
||||
public currencyDisplayType?: number;
|
||||
public expenseAmountColor?: number;
|
||||
public incomeAmountColor?: number;
|
||||
public defaultAccountId: string = '';
|
||||
public transactionEditScope: number = 1;
|
||||
public longDateFormat: number = 0;
|
||||
public shortDateFormat: number = 0;
|
||||
public longTimeFormat: number = 0;
|
||||
public shortTimeFormat: number = 0;
|
||||
public decimalSeparator: number = 0;
|
||||
public digitGroupingSymbol: number = 0;
|
||||
public digitGrouping: number = 0;
|
||||
public currencyDisplayType: number = 0;
|
||||
public expenseAmountColor: number = 0;
|
||||
public incomeAmountColor: number = 0;
|
||||
|
||||
private constructor(language: string, defaultCurrency: string, firstDayOfWeek: number) {
|
||||
this.language = language;
|
||||
@@ -34,6 +34,27 @@ export class User {
|
||||
this.firstDayOfWeek = firstDayOfWeek;
|
||||
}
|
||||
|
||||
public from(user: User | UserBasicInfo | UserProfileResponse): void {
|
||||
this.username = user.username;
|
||||
this.email = user.email;
|
||||
this.nickname = user.nickname;
|
||||
this.language = user.language;
|
||||
this.defaultCurrency = user.defaultCurrency;
|
||||
this.firstDayOfWeek = user.firstDayOfWeek;
|
||||
this.defaultAccountId = user.defaultAccountId;
|
||||
this.transactionEditScope = user.transactionEditScope;
|
||||
this.longDateFormat = user.longDateFormat;
|
||||
this.shortDateFormat = user.shortDateFormat;
|
||||
this.longTimeFormat = user.longTimeFormat;
|
||||
this.shortTimeFormat = user.shortTimeFormat;
|
||||
this.decimalSeparator = user.decimalSeparator;
|
||||
this.digitGroupingSymbol = user.digitGroupingSymbol;
|
||||
this.digitGrouping = user.digitGrouping;
|
||||
this.currencyDisplayType = user.currencyDisplayType;
|
||||
this.expenseAmountColor = user.expenseAmountColor;
|
||||
this.incomeAmountColor = user.incomeAmountColor;
|
||||
}
|
||||
|
||||
public toRegisterRequest(categories?: LocalizedPresetCategory[]): UserRegisterRequest {
|
||||
return {
|
||||
username: this.username,
|
||||
@@ -71,20 +92,20 @@ export class User {
|
||||
};
|
||||
}
|
||||
|
||||
public static of(profileResponse: UserProfileResponse): User {
|
||||
const user = new User(profileResponse.language, profileResponse.defaultCurrency, profileResponse.firstDayOfWeek);
|
||||
user.defaultAccountId = profileResponse.defaultAccountId;
|
||||
user.transactionEditScope = profileResponse.transactionEditScope;
|
||||
user.longDateFormat = profileResponse.longDateFormat;
|
||||
user.shortDateFormat = profileResponse.shortDateFormat;
|
||||
user.longTimeFormat = profileResponse.longTimeFormat;
|
||||
user.shortTimeFormat = profileResponse.shortTimeFormat;
|
||||
user.decimalSeparator = profileResponse.decimalSeparator;
|
||||
user.digitGroupingSymbol = profileResponse.digitGroupingSymbol;
|
||||
user.digitGrouping = profileResponse.digitGrouping;
|
||||
user.currencyDisplayType = profileResponse.currencyDisplayType;
|
||||
user.expenseAmountColor = profileResponse.expenseAmountColor;
|
||||
user.incomeAmountColor = profileResponse.incomeAmountColor;
|
||||
public static of(userInfo: UserBasicInfo): User {
|
||||
const user = new User(userInfo.language, userInfo.defaultCurrency, userInfo.firstDayOfWeek);
|
||||
user.defaultAccountId = userInfo.defaultAccountId;
|
||||
user.transactionEditScope = userInfo.transactionEditScope;
|
||||
user.longDateFormat = userInfo.longDateFormat;
|
||||
user.shortDateFormat = userInfo.shortDateFormat;
|
||||
user.longTimeFormat = userInfo.longTimeFormat;
|
||||
user.shortTimeFormat = userInfo.shortTimeFormat;
|
||||
user.decimalSeparator = userInfo.decimalSeparator;
|
||||
user.digitGroupingSymbol = userInfo.digitGroupingSymbol;
|
||||
user.digitGrouping = userInfo.digitGrouping;
|
||||
user.currencyDisplayType = userInfo.currencyDisplayType;
|
||||
user.expenseAmountColor = userInfo.expenseAmountColor;
|
||||
user.incomeAmountColor = userInfo.incomeAmountColor;
|
||||
|
||||
return user;
|
||||
}
|
||||
|
||||
+1
-21
@@ -372,27 +372,7 @@ export const useRootStore = defineStore('root', () => {
|
||||
|
||||
function updateUserProfile({ profile, currentPassword }: { profile: User, currentPassword?: string }): Promise<UserProfileUpdateResponse> {
|
||||
return new Promise((resolve, reject) => {
|
||||
services.updateProfile({
|
||||
password: profile.password,
|
||||
oldPassword: currentPassword,
|
||||
email: profile.email,
|
||||
nickname: profile.nickname,
|
||||
defaultAccountId: profile.defaultAccountId,
|
||||
transactionEditScope: profile.transactionEditScope,
|
||||
language: profile.language,
|
||||
defaultCurrency: profile.defaultCurrency,
|
||||
firstDayOfWeek: profile.firstDayOfWeek,
|
||||
longDateFormat: profile.longDateFormat,
|
||||
shortDateFormat: profile.shortDateFormat,
|
||||
longTimeFormat: profile.longTimeFormat,
|
||||
shortTimeFormat: profile.shortTimeFormat,
|
||||
decimalSeparator: profile.decimalSeparator,
|
||||
digitGroupingSymbol: profile.digitGroupingSymbol,
|
||||
digitGrouping: profile.digitGrouping,
|
||||
currencyDisplayType: profile.currencyDisplayType,
|
||||
expenseAmountColor: profile.expenseAmountColor,
|
||||
incomeAmountColor: profile.incomeAmountColor
|
||||
}).then(response => {
|
||||
services.updateProfile(profile.toProfileUpdateRequest(currentPassword)).then(response => {
|
||||
const data = response.data;
|
||||
|
||||
if (!data || !data.success || !data.result) {
|
||||
|
||||
+12
-3
@@ -19,6 +19,7 @@ import type {
|
||||
|
||||
import {
|
||||
isObject,
|
||||
isString,
|
||||
isNumber
|
||||
} from '@/lib/common.ts';
|
||||
|
||||
@@ -289,12 +290,20 @@ export const useUserStore = defineStore('user', () => {
|
||||
});
|
||||
}
|
||||
|
||||
function getUserAvatarUrl(userInfo: UserBasicInfo, disableBrowserCache: boolean | string): string | null {
|
||||
if (!userInfo || !userInfo.avatar) {
|
||||
function getUserAvatarUrl(userInfoOrAvatarUrl: UserBasicInfo | string, disableBrowserCache: boolean | string): string | null {
|
||||
let avatarUrl = '';
|
||||
|
||||
if (isObject(userInfoOrAvatarUrl)) {
|
||||
avatarUrl = userInfoOrAvatarUrl.avatar;
|
||||
} else if (isString(userInfoOrAvatarUrl)) {
|
||||
avatarUrl = userInfoOrAvatarUrl;
|
||||
}
|
||||
|
||||
if (!avatarUrl) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return services.getInternalAvatarUrlWithToken(userInfo.avatar, disableBrowserCache);
|
||||
return services.getInternalAvatarUrlWithToken(avatarUrl, disableBrowserCache);
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
import { type LanguageOption } from '@/locales/index.ts';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useAccountsStore } from '@/stores/account.ts';
|
||||
import { useOverviewStore } from '@/stores/overview.ts';
|
||||
|
||||
import type { TypeAndDisplayName } from '@/core/base.ts';
|
||||
import { WeekDay } from '@/core/datetime.ts';
|
||||
import type { LocalizedDigitGroupingType } from '@/core/numeral.ts';
|
||||
import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
|
||||
|
||||
import { type UserBasicInfo, User } from '@/models/user.ts';
|
||||
import { type CategorizedAccount, Account} from '@/models/account.ts';
|
||||
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
import { getCategorizedAccounts } from '@/lib/account.ts';
|
||||
|
||||
export function useUserProfilePageBase() {
|
||||
const {
|
||||
getDefaultCurrency,
|
||||
getDefaultFirstDayOfWeek,
|
||||
getAllLanguageOptions,
|
||||
getAllCurrencies,
|
||||
getAllWeekDays,
|
||||
getAllLongDateFormats,
|
||||
getAllShortDateFormats,
|
||||
getAllLongTimeFormats,
|
||||
getAllShortTimeFormats,
|
||||
getAllDecimalSeparators,
|
||||
getAllDigitGroupingSymbols,
|
||||
getAllDigitGroupingTypes,
|
||||
getAllCurrencyDisplayTypes,
|
||||
getAllExpenseAmountColors,
|
||||
getAllIncomeAmountColors,
|
||||
getAllTransactionEditScopeTypes,
|
||||
setLanguage
|
||||
} = useI18n();
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
const accountsStore = useAccountsStore();
|
||||
const overviewStore = useOverviewStore();
|
||||
|
||||
const defaultFirstDayOfWeekName = getDefaultFirstDayOfWeek();
|
||||
const defaultFirstDayOfWeek = WeekDay.parse(defaultFirstDayOfWeekName) ? (WeekDay.parse(defaultFirstDayOfWeekName) as WeekDay).type : WeekDay.DefaultFirstDay.type;
|
||||
|
||||
const newProfile = ref<User>(User.createNewUser('', getDefaultCurrency(), defaultFirstDayOfWeek));
|
||||
const oldProfile = ref<User>(User.createNewUser('', getDefaultCurrency(), defaultFirstDayOfWeek));
|
||||
|
||||
const emailVerified = ref<boolean>(false);
|
||||
const loading = ref<boolean>(false);
|
||||
const resending = ref<boolean>(false);
|
||||
const saving = ref<boolean>(false);
|
||||
|
||||
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));
|
||||
const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
|
||||
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
|
||||
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
|
||||
const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value));
|
||||
const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
|
||||
const allLongDateFormats = computed<TypeAndDisplayName[]>(() => getAllLongDateFormats());
|
||||
const allShortDateFormats = computed<TypeAndDisplayName[]>(() => getAllShortDateFormats());
|
||||
const allLongTimeFormats = computed<TypeAndDisplayName[]>(() => getAllLongTimeFormats());
|
||||
const allShortTimeFormats = computed<TypeAndDisplayName[]>(() => getAllShortTimeFormats());
|
||||
const allDecimalSeparators = computed<TypeAndDisplayName[]>(() => getAllDecimalSeparators());
|
||||
const allDigitGroupingSymbols = computed<TypeAndDisplayName[]>(() => getAllDigitGroupingSymbols());
|
||||
const allDigitGroupingTypes = computed<LocalizedDigitGroupingType[]>(() => getAllDigitGroupingTypes());
|
||||
const allCurrencyDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCurrencyDisplayTypes());
|
||||
const allExpenseAmountColorTypes = computed<TypeAndDisplayName[]>(() => getAllExpenseAmountColors());
|
||||
const allIncomeAmountColorTypes = computed<TypeAndDisplayName[]>(() => getAllIncomeAmountColors());
|
||||
const allTransactionEditScopeTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionEditScopeTypes());
|
||||
|
||||
const supportDigitGroupingSymbol = computed<boolean>(() => {
|
||||
for (const digitGroupingType of allDigitGroupingTypes.value) {
|
||||
if (digitGroupingType.type === newProfile.value.digitGrouping) {
|
||||
return digitGroupingType.enabled;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
const inputIsNotChangedProblemMessage = computed<string | null>(() => {
|
||||
if (!newProfile.value.password && !newProfile.value.confirmPassword && !newProfile.value.email && !newProfile.value.nickname) {
|
||||
return 'Nothing has been modified';
|
||||
} else if (!newProfile.value.password && !newProfile.value.confirmPassword &&
|
||||
newProfile.value.email === oldProfile.value.email &&
|
||||
newProfile.value.nickname === oldProfile.value.nickname &&
|
||||
newProfile.value.defaultAccountId === oldProfile.value.defaultAccountId &&
|
||||
newProfile.value.transactionEditScope === oldProfile.value.transactionEditScope &&
|
||||
newProfile.value.language === oldProfile.value.language &&
|
||||
newProfile.value.defaultCurrency === oldProfile.value.defaultCurrency &&
|
||||
newProfile.value.firstDayOfWeek === oldProfile.value.firstDayOfWeek &&
|
||||
newProfile.value.longDateFormat === oldProfile.value.longDateFormat &&
|
||||
newProfile.value.shortDateFormat === oldProfile.value.shortDateFormat &&
|
||||
newProfile.value.longTimeFormat === oldProfile.value.longTimeFormat &&
|
||||
newProfile.value.shortTimeFormat === oldProfile.value.shortTimeFormat &&
|
||||
newProfile.value.decimalSeparator === oldProfile.value.decimalSeparator &&
|
||||
newProfile.value.digitGroupingSymbol === oldProfile.value.digitGroupingSymbol &&
|
||||
newProfile.value.digitGrouping === oldProfile.value.digitGrouping &&
|
||||
newProfile.value.currencyDisplayType === oldProfile.value.currencyDisplayType &&
|
||||
newProfile.value.expenseAmountColor === oldProfile.value.expenseAmountColor &&
|
||||
newProfile.value.incomeAmountColor === oldProfile.value.incomeAmountColor) {
|
||||
return 'Nothing has been modified';
|
||||
} else if (!newProfile.value.password && newProfile.value.confirmPassword) {
|
||||
return 'Password cannot be blank';
|
||||
} else if (newProfile.value.password && !newProfile.value.confirmPassword) {
|
||||
return 'Password confirmation cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
const inputInvalidProblemMessage = computed<string | null>(() => {
|
||||
if (newProfile.value.password && newProfile.value.confirmPassword && newProfile.value.password !== newProfile.value.confirmPassword) {
|
||||
return 'Password and password confirmation do not match';
|
||||
} else if (!newProfile.value.email) {
|
||||
return 'Email address cannot be blank';
|
||||
} else if (!newProfile.value.nickname) {
|
||||
return 'Nickname cannot be blank';
|
||||
} else if (!newProfile.value.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
const langAndRegionInputInvalidProblemMessage = computed<string | null>(() => {
|
||||
if (!newProfile.value.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
const extendInputInvalidProblemMessage = computed<string | null>(() => {
|
||||
return null;
|
||||
});
|
||||
|
||||
const inputIsNotChanged = computed<boolean>(() => !!inputIsNotChangedProblemMessage.value);
|
||||
const inputIsInvalid = computed<boolean>(() => !!inputInvalidProblemMessage.value);
|
||||
const langAndRegionInputIsInvalid = computed<boolean>(() => !!langAndRegionInputInvalidProblemMessage.value);
|
||||
const extendInputIsInvalid = computed<boolean>(() => !!extendInputInvalidProblemMessage.value);
|
||||
|
||||
function setCurrentUserProfile(profile: UserBasicInfo): void {
|
||||
emailVerified.value = profile.emailVerified;
|
||||
oldProfile.value.from(profile);
|
||||
newProfile.value.from(oldProfile.value);
|
||||
}
|
||||
|
||||
function reset(): void {
|
||||
newProfile.value.from(oldProfile.value);
|
||||
}
|
||||
|
||||
function doAfterProfileUpdate(user: UserBasicInfo): void {
|
||||
if (user) {
|
||||
if (user.firstDayOfWeek !== oldProfile.value.firstDayOfWeek) {
|
||||
overviewStore.resetTransactionOverview();
|
||||
}
|
||||
|
||||
setCurrentUserProfile(user);
|
||||
|
||||
const localeDefaultSettings = setLanguage(user.language);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(user.expenseAmountColor, user.incomeAmountColor);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// states
|
||||
newProfile,
|
||||
oldProfile,
|
||||
emailVerified,
|
||||
loading,
|
||||
resending,
|
||||
saving,
|
||||
// computed states
|
||||
allLanguages,
|
||||
allCurrencies,
|
||||
allAccounts,
|
||||
allVisibleAccounts,
|
||||
allVisibleCategorizedAccounts,
|
||||
allWeekDays,
|
||||
allLongDateFormats,
|
||||
allShortDateFormats,
|
||||
allLongTimeFormats,
|
||||
allShortTimeFormats,
|
||||
allDecimalSeparators,
|
||||
allDigitGroupingSymbols,
|
||||
allDigitGroupingTypes,
|
||||
allCurrencyDisplayTypes,
|
||||
allExpenseAmountColorTypes,
|
||||
allIncomeAmountColorTypes,
|
||||
allTransactionEditScopeTypes,
|
||||
supportDigitGroupingSymbol,
|
||||
inputIsNotChangedProblemMessage,
|
||||
inputInvalidProblemMessage,
|
||||
langAndRegionInputInvalidProblemMessage,
|
||||
extendInputInvalidProblemMessage,
|
||||
inputIsNotChanged,
|
||||
inputIsInvalid,
|
||||
langAndRegionInputIsInvalid,
|
||||
extendInputIsInvalid,
|
||||
// functions
|
||||
setCurrentUserProfile,
|
||||
reset,
|
||||
doAfterProfileUpdate
|
||||
};
|
||||
}
|
||||
@@ -3,13 +3,13 @@
|
||||
<v-col cols="12">
|
||||
<v-card :class="{ 'disabled': loading || saving }">
|
||||
<template #title>
|
||||
<span>{{ $t('Basic Settings') }}</span>
|
||||
<span>{{ tt('Basic Settings') }}</span>
|
||||
<v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
|
||||
</template>
|
||||
|
||||
<v-card-text class="d-flex">
|
||||
<v-avatar rounded="lg" variant="tonal" size="100" class="me-4 user-profile-avatar-icon"
|
||||
:class="{ 'cursor-pointer': oldProfile.avatarProvider === 'internal', 'user-profile-avatar-icon-modifiable': oldProfile.avatarProvider === 'internal' }"
|
||||
:class="{ 'cursor-pointer': avatarProvider === 'internal', 'user-profile-avatar-icon-modifiable': avatarProvider === 'internal' }"
|
||||
:color="currentUserAvatar ? 'rgba(0,0,0,0)' : 'primary'">
|
||||
<v-img :src="currentUserAvatar" v-if="currentUserAvatar">
|
||||
<template #placeholder>
|
||||
@@ -19,28 +19,28 @@
|
||||
</template>
|
||||
</v-img>
|
||||
<v-icon size="48" class="user-profile-avatar-placeholder" :icon="icons.user" v-else-if="!currentUserAvatar"/>
|
||||
<div class="avatar-edit-icon" v-if="oldProfile.avatarProvider === 'internal'">
|
||||
<div class="avatar-edit-icon" v-if="avatarProvider === 'internal'">
|
||||
<v-icon size="48" :icon="icons.pencil"/>
|
||||
</div>
|
||||
<v-menu activator="parent" width="200" location="bottom" offset="14px" v-if="oldProfile.avatarProvider === 'internal'">
|
||||
<v-menu activator="parent" width="200" location="bottom" offset="14px" v-if="avatarProvider === 'internal'">
|
||||
<v-list>
|
||||
<v-list-item :disabled="saving" :title="$t('Update Avatar')" @click="showOpenAvatarDialog"></v-list-item>
|
||||
<v-list-item :disabled="!currentUserAvatar || saving" :title="$t('Remove Avatar')" @click="removeAvatar"></v-list-item>
|
||||
<v-list-item :disabled="saving" :title="tt('Update Avatar')" @click="showOpenAvatarDialog"></v-list-item>
|
||||
<v-list-item :disabled="!currentUserAvatar || saving" :title="tt('Remove Avatar')" @click="removeAvatar"></v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-avatar>
|
||||
<div class="d-flex flex-column justify-center gap-3">
|
||||
<div class="d-flex text-body-1">
|
||||
<span class="me-1">{{ $t('Username:') }}</span>
|
||||
<span class="me-1">{{ tt('Username:') }}</span>
|
||||
<v-skeleton-loader class="skeleton-no-margin" type="text" style="width: 100px" :loading="true" v-if="loading"></v-skeleton-loader>
|
||||
<span v-if="!loading">{{ oldProfile.username }}</span>
|
||||
</div>
|
||||
<div class="d-flex text-body-1 align-center" style="height: 40px;">
|
||||
<span v-if="!loading && emailVerified">{{ $t('Email address is verified') }}</span>
|
||||
<span v-if="!loading && !emailVerified">{{ $t('Email address is not verified') }}</span>
|
||||
<span v-if="!loading && emailVerified">{{ tt('Email address is verified') }}</span>
|
||||
<span v-if="!loading && !emailVerified">{{ tt('Email address is not verified') }}</span>
|
||||
<v-btn class="ml-2 px-2" size="small" variant="text" :disabled="loading || resending"
|
||||
@click="resendVerifyEmail" v-if="isUserVerifyEmailEnabled && !loading && !emailVerified">
|
||||
{{ $t('Resend Validation Email') }}
|
||||
@click="resendVerifyEmail" v-if="isUserVerifyEmailEnabled() && !loading && !emailVerified">
|
||||
{{ tt('Resend Validation Email') }}
|
||||
<v-progress-circular indeterminate size="18" class="ml-2" v-if="resending"></v-progress-circular>
|
||||
</v-btn>
|
||||
<v-skeleton-loader class="skeleton-no-margin mt-2 mb-1" type="text" style="width: 160px" :loading="true" v-if="loading"></v-skeleton-loader>
|
||||
@@ -59,8 +59,8 @@
|
||||
autocomplete="nickname"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Nickname')"
|
||||
:placeholder="$t('Your nickname')"
|
||||
:label="tt('Nickname')"
|
||||
:placeholder="tt('Your nickname')"
|
||||
v-model="newProfile.nickname"
|
||||
/>
|
||||
</v-col>
|
||||
@@ -71,8 +71,8 @@
|
||||
autocomplete="email"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('E-mail')"
|
||||
:placeholder="$t('Your email address')"
|
||||
:label="tt('E-mail')"
|
||||
:placeholder="tt('Your email address')"
|
||||
v-model="newProfile.email"
|
||||
/>
|
||||
</v-col>
|
||||
@@ -87,10 +87,10 @@
|
||||
secondary-title-field="name"
|
||||
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
|
||||
:disabled="loading || saving || !allVisibleAccounts.length"
|
||||
:label="$t('Default Account')"
|
||||
:placeholder="$t('Default Account')"
|
||||
:label="tt('Default Account')"
|
||||
:placeholder="tt('Default Account')"
|
||||
:items="allVisibleCategorizedAccounts"
|
||||
:no-item-text="$t('Unspecified')"
|
||||
:no-item-text="tt('Unspecified')"
|
||||
v-model="newProfile.defaultAccountId">
|
||||
</two-column-select>
|
||||
</v-col>
|
||||
@@ -101,8 +101,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Editable Transaction Range')"
|
||||
:placeholder="$t('Editable Transaction Range')"
|
||||
:label="tt('Editable Transaction Range')"
|
||||
:placeholder="tt('Editable Transaction Range')"
|
||||
:items="allTransactionEditScopeTypes"
|
||||
v-model="newProfile.transactionEditScope"
|
||||
/>
|
||||
@@ -120,8 +120,8 @@
|
||||
item-value="languageTag"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Language')"
|
||||
:placeholder="$t('Language')"
|
||||
:label="tt('Language')"
|
||||
:placeholder="tt('Language')"
|
||||
:items="allLanguages"
|
||||
v-model="newProfile.language"
|
||||
/>
|
||||
@@ -134,10 +134,10 @@
|
||||
auto-select-first
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Default Currency')"
|
||||
:placeholder="$t('Default Currency')"
|
||||
:label="tt('Default Currency')"
|
||||
:placeholder="tt('Default Currency')"
|
||||
:items="allCurrencies"
|
||||
:no-data-text="$t('No results')"
|
||||
:no-data-text="tt('No results')"
|
||||
v-model="newProfile.defaultCurrency"
|
||||
>
|
||||
<template #append-inner>
|
||||
@@ -152,8 +152,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('First Day of Week')"
|
||||
:placeholder="$t('First Day of Week')"
|
||||
:label="tt('First Day of Week')"
|
||||
:placeholder="tt('First Day of Week')"
|
||||
:items="allWeekDays"
|
||||
v-model="newProfile.firstDayOfWeek"
|
||||
/>
|
||||
@@ -171,8 +171,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Long Date Format')"
|
||||
:placeholder="$t('Long Date Format')"
|
||||
:label="tt('Long Date Format')"
|
||||
:placeholder="tt('Long Date Format')"
|
||||
:items="allLongDateFormats"
|
||||
v-model="newProfile.longDateFormat"
|
||||
/>
|
||||
@@ -184,8 +184,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Short Date Format')"
|
||||
:placeholder="$t('Short Date Format')"
|
||||
:label="tt('Short Date Format')"
|
||||
:placeholder="tt('Short Date Format')"
|
||||
:items="allShortDateFormats"
|
||||
v-model="newProfile.shortDateFormat"
|
||||
/>
|
||||
@@ -197,8 +197,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Long Time Format')"
|
||||
:placeholder="$t('Long Time Format')"
|
||||
:label="tt('Long Time Format')"
|
||||
:placeholder="tt('Long Time Format')"
|
||||
:items="allLongTimeFormats"
|
||||
v-model="newProfile.longTimeFormat"
|
||||
/>
|
||||
@@ -210,8 +210,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Short Time Format')"
|
||||
:placeholder="$t('Short Time Format')"
|
||||
:label="tt('Short Time Format')"
|
||||
:placeholder="tt('Short Time Format')"
|
||||
:items="allShortTimeFormats"
|
||||
v-model="newProfile.shortTimeFormat"
|
||||
/>
|
||||
@@ -229,8 +229,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Currency Display Mode')"
|
||||
:placeholder="$t('Currency Display Mode')"
|
||||
:label="tt('Currency Display Mode')"
|
||||
:placeholder="tt('Currency Display Mode')"
|
||||
:items="allCurrencyDisplayTypes"
|
||||
v-model="newProfile.currencyDisplayType"
|
||||
/>
|
||||
@@ -242,8 +242,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Digit Grouping')"
|
||||
:placeholder="$t('Digit Grouping')"
|
||||
:label="tt('Digit Grouping')"
|
||||
:placeholder="tt('Digit Grouping')"
|
||||
:items="allDigitGroupingTypes"
|
||||
v-model="newProfile.digitGrouping"
|
||||
/>
|
||||
@@ -254,9 +254,9 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving || !getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'enabled')"
|
||||
:label="$t('Digit Grouping Symbol')"
|
||||
:placeholder="$t('Digit Grouping Symbol')"
|
||||
:disabled="loading || saving || !supportDigitGroupingSymbol"
|
||||
:label="tt('Digit Grouping Symbol')"
|
||||
:placeholder="tt('Digit Grouping Symbol')"
|
||||
:items="allDigitGroupingSymbols"
|
||||
v-model="newProfile.digitGroupingSymbol"
|
||||
/>
|
||||
@@ -268,8 +268,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Decimal Separator')"
|
||||
:placeholder="$t('Decimal Separator')"
|
||||
:label="tt('Decimal Separator')"
|
||||
:placeholder="tt('Decimal Separator')"
|
||||
:items="allDecimalSeparators"
|
||||
v-model="newProfile.decimalSeparator"
|
||||
/>
|
||||
@@ -287,8 +287,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Expense Amount Color')"
|
||||
:placeholder="$t('Expense Amount Color')"
|
||||
:label="tt('Expense Amount Color')"
|
||||
:placeholder="tt('Expense Amount Color')"
|
||||
:items="allExpenseAmountColorTypes"
|
||||
v-model="newProfile.expenseAmountColor"
|
||||
/>
|
||||
@@ -300,8 +300,8 @@
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:disabled="loading || saving"
|
||||
:label="$t('Income Amount Color')"
|
||||
:placeholder="$t('Income Amount Color')"
|
||||
:label="tt('Income Amount Color')"
|
||||
:placeholder="tt('Income Amount Color')"
|
||||
:items="allIncomeAmountColorTypes"
|
||||
v-model="newProfile.incomeAmountColor"
|
||||
/>
|
||||
@@ -311,12 +311,12 @@
|
||||
|
||||
<v-card-text class="d-flex flex-wrap gap-4">
|
||||
<v-btn :disabled="inputIsNotChanged || inputIsInvalid || saving" @click="save">
|
||||
{{ $t('Save Changes') }}
|
||||
{{ tt('Save Changes') }}
|
||||
<v-progress-circular indeterminate size="22" class="ml-2" v-if="saving"></v-progress-circular>
|
||||
</v-btn>
|
||||
|
||||
<v-btn color="default" variant="tonal" @click="reset">
|
||||
{{ $t('Reset') }}
|
||||
{{ tt('Reset') }}
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-form>
|
||||
@@ -326,388 +326,228 @@
|
||||
|
||||
<confirm-dialog ref="confirmDialog"/>
|
||||
<snack-bar ref="snackbar" />
|
||||
<input ref="avatarInput" type="file" style="display: none" :accept="supportedImageExtensions" @change="updateAvatar($event)" />
|
||||
<input ref="avatarInput" type="file" style="display: none" :accept="SUPPORTED_IMAGE_EXTENSIONS" @change="updateAvatar($event)" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
|
||||
import { ref, computed, useTemplateRef } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useUserProfilePageBase } from '@/views/base/users/UserProfilePageBase.ts';
|
||||
|
||||
import { useRootStore } from '@/stores/index.ts';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useAccountsStore } from '@/stores/account.ts';
|
||||
import { useOverviewStore } from '@/stores/overview.ts';
|
||||
|
||||
import { WeekDay } from '@/core/datetime.ts';
|
||||
import { SUPPORTED_IMAGE_EXTENSIONS } from '@/consts/file.ts';
|
||||
import { getNameByKeyValue } from '@/lib/common.ts';
|
||||
import type { UserProfileResponse } from '@/models/user.ts';
|
||||
|
||||
import { generateRandomUUID } from '@/lib/misc.ts';
|
||||
import { getCategorizedAccounts } from '@/lib/account.ts';
|
||||
import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
|
||||
import {
|
||||
mdiAccount,
|
||||
mdiAccountEditOutline
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const self = this;
|
||||
const defaultFirstDayOfWeekName = self.$locale.getDefaultFirstDayOfWeek();
|
||||
const defaultFirstDayOfWeek = WeekDay.parse(defaultFirstDayOfWeekName) ? WeekDay.parse(defaultFirstDayOfWeekName).type : WeekDay.DefaultFirstDay.type;
|
||||
type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
|
||||
return {
|
||||
newProfile: {
|
||||
email: '',
|
||||
nickname: '',
|
||||
defaultAccountId: 0,
|
||||
transactionEditScope: 1,
|
||||
language: '',
|
||||
defaultCurrency: self.$locale.getDefaultCurrency(),
|
||||
firstDayOfWeek: defaultFirstDayOfWeek,
|
||||
longDateFormat: 0,
|
||||
shortDateFormat: 0,
|
||||
longTimeFormat: 0,
|
||||
shortTimeFormat: 0,
|
||||
decimalSeparator: 0,
|
||||
digitGroupingSymbol: 0,
|
||||
digitGrouping: 0,
|
||||
currencyDisplayType: 0,
|
||||
expenseAmountColor: 0,
|
||||
incomeAmountColor: 0
|
||||
},
|
||||
oldProfile: {
|
||||
email: '',
|
||||
nickname: '',
|
||||
defaultAccountId: 0,
|
||||
transactionEditScope: 1,
|
||||
language: '',
|
||||
defaultCurrency: self.$locale.getDefaultCurrency(),
|
||||
firstDayOfWeek: defaultFirstDayOfWeek,
|
||||
longDateFormat: 0,
|
||||
shortDateFormat: 0,
|
||||
longTimeFormat: 0,
|
||||
shortTimeFormat: 0,
|
||||
decimalSeparator: 0,
|
||||
digitGroupingSymbol: 0,
|
||||
digitGrouping: 0,
|
||||
currencyDisplayType: 0,
|
||||
expenseAmountColor: 0,
|
||||
incomeAmountColor: 0
|
||||
},
|
||||
avatarNoCacheId: '',
|
||||
emailVerified: false,
|
||||
loading: true,
|
||||
resending: false,
|
||||
saving: false,
|
||||
icons: {
|
||||
user: mdiAccount,
|
||||
pencil: mdiAccountEditOutline,
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useUserStore, useAccountsStore, useOverviewStore),
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(true);
|
||||
},
|
||||
allCurrencies() {
|
||||
return this.$locale.getAllCurrencies();
|
||||
},
|
||||
allAccounts() {
|
||||
return this.accountsStore.allPlainAccounts;
|
||||
},
|
||||
allVisibleAccounts() {
|
||||
return this.accountsStore.allVisiblePlainAccounts;
|
||||
},
|
||||
allVisibleCategorizedAccounts() {
|
||||
return getCategorizedAccounts(this.allVisibleAccounts);
|
||||
},
|
||||
allWeekDays() {
|
||||
return this.$locale.getAllWeekDays();
|
||||
},
|
||||
allLongDateFormats() {
|
||||
return this.$locale.getAllLongDateFormats();
|
||||
},
|
||||
allShortDateFormats() {
|
||||
return this.$locale.getAllShortDateFormats();
|
||||
},
|
||||
allLongTimeFormats() {
|
||||
return this.$locale.getAllLongTimeFormats();
|
||||
},
|
||||
allShortTimeFormats() {
|
||||
return this.$locale.getAllShortTimeFormats();
|
||||
},
|
||||
allDecimalSeparators() {
|
||||
return this.$locale.getAllDecimalSeparators();
|
||||
},
|
||||
allDigitGroupingSymbols() {
|
||||
return this.$locale.getAllDigitGroupingSymbols();
|
||||
},
|
||||
allDigitGroupingTypes() {
|
||||
return this.$locale.getAllDigitGroupingTypes();
|
||||
},
|
||||
allCurrencyDisplayTypes() {
|
||||
return this.$locale.getAllCurrencyDisplayTypes(this.settingsStore, this.userStore);
|
||||
},
|
||||
allExpenseAmountColorTypes() {
|
||||
return this.$locale.getAllExpenseAmountColors();
|
||||
},
|
||||
allIncomeAmountColorTypes() {
|
||||
return this.$locale.getAllIncomeAmountColors();
|
||||
},
|
||||
allTransactionEditScopeTypes() {
|
||||
return this.$locale.getAllTransactionEditScopeTypes();
|
||||
},
|
||||
supportedImageExtensions() {
|
||||
return SUPPORTED_IMAGE_EXTENSIONS;
|
||||
},
|
||||
currentUserAvatar() {
|
||||
return this.userStore.getUserAvatarUrl(this.oldProfile, this.avatarNoCacheId);
|
||||
},
|
||||
isUserVerifyEmailEnabled() {
|
||||
return isUserVerifyEmailEnabled();
|
||||
},
|
||||
inputIsNotChanged() {
|
||||
return !!this.inputIsNotChangedProblemMessage;
|
||||
},
|
||||
inputIsInvalid() {
|
||||
return !!this.inputInvalidProblemMessage;
|
||||
},
|
||||
inputIsNotChangedProblemMessage() {
|
||||
if (!this.newProfile.email && !this.newProfile.nickname) {
|
||||
return 'Nothing has been modified';
|
||||
} else if (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 &&
|
||||
this.newProfile.decimalSeparator === this.oldProfile.decimalSeparator &&
|
||||
this.newProfile.digitGroupingSymbol === this.oldProfile.digitGroupingSymbol &&
|
||||
this.newProfile.digitGrouping === this.oldProfile.digitGrouping &&
|
||||
this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType &&
|
||||
this.newProfile.expenseAmountColor === this.oldProfile.expenseAmountColor &&
|
||||
this.newProfile.incomeAmountColor === this.oldProfile.incomeAmountColor) {
|
||||
return 'Nothing has been modified';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
inputInvalidProblemMessage() {
|
||||
if (!this.newProfile.email) {
|
||||
return 'Email address cannot be blank';
|
||||
} else if (!this.newProfile.nickname) {
|
||||
return 'Nickname cannot be blank';
|
||||
} else if (!this.newProfile.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
extendInputInvalidProblemMessage() {
|
||||
return null;
|
||||
},
|
||||
langAndRegionInputInvalidProblemMessage() {
|
||||
if (!this.newProfile.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
const { tt } = useI18n();
|
||||
|
||||
const {
|
||||
newProfile,
|
||||
oldProfile,
|
||||
emailVerified,
|
||||
loading,
|
||||
resending,
|
||||
saving,
|
||||
allLanguages,
|
||||
allCurrencies,
|
||||
allVisibleAccounts,
|
||||
allVisibleCategorizedAccounts,
|
||||
allWeekDays,
|
||||
allLongDateFormats,
|
||||
allShortDateFormats,
|
||||
allLongTimeFormats,
|
||||
allShortTimeFormats,
|
||||
allDecimalSeparators,
|
||||
allDigitGroupingSymbols,
|
||||
allDigitGroupingTypes,
|
||||
allCurrencyDisplayTypes,
|
||||
allExpenseAmountColorTypes,
|
||||
allIncomeAmountColorTypes,
|
||||
allTransactionEditScopeTypes,
|
||||
supportDigitGroupingSymbol,
|
||||
inputIsNotChangedProblemMessage,
|
||||
inputInvalidProblemMessage,
|
||||
langAndRegionInputInvalidProblemMessage,
|
||||
extendInputInvalidProblemMessage,
|
||||
inputIsNotChanged,
|
||||
inputIsInvalid,
|
||||
setCurrentUserProfile,
|
||||
reset,
|
||||
doAfterProfileUpdate
|
||||
} = useUserProfilePageBase();
|
||||
|
||||
const rootStore = useRootStore();
|
||||
const userStore = useUserStore();
|
||||
const accountsStore = useAccountsStore();
|
||||
|
||||
const icons = {
|
||||
user: mdiAccount,
|
||||
pencil: mdiAccountEditOutline,
|
||||
};
|
||||
|
||||
const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
const avatarInput = useTemplateRef<HTMLInputElement>('avatarInput');
|
||||
|
||||
const avatarUrl = ref<string>('');
|
||||
const avatarProvider = ref<string | undefined>('');
|
||||
const avatarNoCacheId = ref<string>('');
|
||||
|
||||
const currentUserAvatar = computed<string | null>(() => {
|
||||
return userStore.getUserAvatarUrl(avatarUrl.value, avatarNoCacheId.value);
|
||||
});
|
||||
|
||||
function init(): void {
|
||||
loading.value = true;
|
||||
|
||||
const promises = [
|
||||
accountsStore.loadAllAccounts({ force: false }),
|
||||
userStore.getCurrentUserProfile()
|
||||
];
|
||||
|
||||
Promise.all(promises).then(responses => {
|
||||
const profile = responses[1] as UserProfileResponse;
|
||||
setCurrentUserProfile(profile);
|
||||
avatarUrl.value = profile.avatar;
|
||||
avatarProvider.value = profile.avatarProvider;
|
||||
loading.value = false;
|
||||
}).catch(error => {
|
||||
oldProfile.value.nickname = '';
|
||||
oldProfile.value.email = '';
|
||||
newProfile.value.nickname = '';
|
||||
newProfile.value.email = '';
|
||||
loading.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
});
|
||||
}
|
||||
|
||||
self.loading = true;
|
||||
function save(): void {
|
||||
const problemMessage = inputIsNotChangedProblemMessage.value || inputInvalidProblemMessage.value || extendInputInvalidProblemMessage.value || langAndRegionInputInvalidProblemMessage.value;
|
||||
|
||||
const promises = [
|
||||
self.accountsStore.loadAllAccounts({ force: false }),
|
||||
self.userStore.getCurrentUserProfile()
|
||||
];
|
||||
if (problemMessage) {
|
||||
snackbar.value?.showMessage(problemMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
Promise.all(promises).then(responses => {
|
||||
const profile = responses[1];
|
||||
self.setCurrentUserProfile(profile);
|
||||
self.emailVerified = profile.emailVerified;
|
||||
self.loading = false;
|
||||
saving.value = true;
|
||||
|
||||
rootStore.updateUserProfile({
|
||||
profile: newProfile.value
|
||||
}).then(response => {
|
||||
saving.value = false;
|
||||
|
||||
doAfterProfileUpdate(response.user);
|
||||
snackbar.value?.showMessage('Your profile has been successfully updated');
|
||||
}).catch(error => {
|
||||
saving.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateAvatar(event: Event): void {
|
||||
if (!event || !event.target) {
|
||||
return;
|
||||
}
|
||||
|
||||
const el = event.target as HTMLInputElement;
|
||||
|
||||
if (!el.files || !el.files.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const avatarFile = el.files[0];
|
||||
|
||||
el.value = '';
|
||||
|
||||
saving.value = true;
|
||||
|
||||
userStore.updateUserAvatar({ avatarFile }).then(response => {
|
||||
saving.value = false;
|
||||
|
||||
if (response) {
|
||||
avatarUrl.value = response.avatar;
|
||||
avatarProvider.value = response.avatarProvider;
|
||||
avatarNoCacheId.value = generateRandomUUID();
|
||||
setCurrentUserProfile(response);
|
||||
}
|
||||
|
||||
snackbar.value?.showMessage('Your avatar has been successfully updated');
|
||||
}).catch(error => {
|
||||
saving.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeAvatar(): void {
|
||||
confirmDialog.value?.open('Are you sure you want to remove avatar?').then(() => {
|
||||
saving.value = true;
|
||||
|
||||
userStore.removeUserAvatar().then(response => {
|
||||
saving.value = false;
|
||||
|
||||
if (response) {
|
||||
avatarUrl.value = response.avatar;
|
||||
avatarProvider.value = response.avatarProvider;
|
||||
setCurrentUserProfile(response);
|
||||
}
|
||||
|
||||
snackbar.value?.showMessage('Your profile has been successfully updated');
|
||||
}).catch(error => {
|
||||
self.oldProfile.nickname = '';
|
||||
self.oldProfile.email = '';
|
||||
self.newProfile.nickname = '';
|
||||
self.newProfile.email = '';
|
||||
self.loading = false;
|
||||
saving.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
const self = this;
|
||||
});
|
||||
}
|
||||
|
||||
const problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage || self.langAndRegionInputInvalidProblemMessage;
|
||||
function resendVerifyEmail(): void {
|
||||
resending.value = true;
|
||||
|
||||
if (problemMessage) {
|
||||
self.$refs.snackbar.showMessage(problemMessage);
|
||||
return;
|
||||
}
|
||||
rootStore.resendVerifyEmailByLoginedUser().then(() => {
|
||||
resending.value = false;
|
||||
snackbar.value?.showMessage('Validation email has been sent');
|
||||
}).catch(error => {
|
||||
resending.value = false;
|
||||
|
||||
self.saving = true;
|
||||
|
||||
self.rootStore.updateUserProfile({
|
||||
profile: self.newProfile
|
||||
}).then(response => {
|
||||
self.saving = false;
|
||||
|
||||
if (response.user) {
|
||||
if (response.user.firstDayOfWeek !== self.oldProfile.firstDayOfWeek) {
|
||||
this.overviewStore.resetTransactionOverview();
|
||||
}
|
||||
|
||||
self.setCurrentUserProfile(response.user);
|
||||
self.emailVerified = response.user.emailVerified;
|
||||
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
self.$refs.snackbar.showMessage('Your profile has been successfully updated');
|
||||
}).catch(error => {
|
||||
self.saving = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
showOpenAvatarDialog() {
|
||||
this.$refs.avatarInput.click();
|
||||
},
|
||||
updateAvatar(event) {
|
||||
if (!event || !event.target || !event.target.files || !event.target.files.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const avatarFile = event.target.files[0];
|
||||
|
||||
event.target.value = null;
|
||||
|
||||
self.saving = true;
|
||||
|
||||
self.userStore.updateUserAvatar({ avatarFile }).then(response => {
|
||||
self.saving = false;
|
||||
|
||||
if (response) {
|
||||
self.avatarNoCacheId = generateRandomUUID();
|
||||
self.setCurrentUserProfile(response);
|
||||
}
|
||||
|
||||
self.$refs.snackbar.showMessage('Your avatar has been successfully updated');
|
||||
}).catch(error => {
|
||||
self.saving = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
removeAvatar() {
|
||||
const self = this;
|
||||
|
||||
self.$refs.confirmDialog.open('Are you sure you want to remove avatar?').then(() => {
|
||||
self.saving = true;
|
||||
|
||||
self.userStore.removeUserAvatar().then(response => {
|
||||
self.saving = false;
|
||||
|
||||
if (response) {
|
||||
self.setCurrentUserProfile(response);
|
||||
}
|
||||
|
||||
self.$refs.snackbar.showMessage('Your profile has been successfully updated');
|
||||
}).catch(error => {
|
||||
self.saving = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.setCurrentUserProfile(this.oldProfile);
|
||||
},
|
||||
resendVerifyEmail() {
|
||||
const self = this;
|
||||
|
||||
self.resending = true;
|
||||
|
||||
self.rootStore.resendVerifyEmailByLoginedUser().then(() => {
|
||||
self.resending = false;
|
||||
self.$refs.snackbar.showMessage('Validation email has been sent');
|
||||
}).catch(error => {
|
||||
self.resending = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
getNameByKeyValue(src, value, keyField, nameField, defaultName) {
|
||||
return getNameByKeyValue(src, value, keyField, nameField, defaultName);
|
||||
},
|
||||
setCurrentUserProfile(profile) {
|
||||
this.oldProfile.username = profile.username;
|
||||
this.oldProfile.email = profile.email;
|
||||
this.oldProfile.nickname = profile.nickname;
|
||||
this.oldProfile.avatar = profile.avatar;
|
||||
this.oldProfile.avatarProvider = profile.avatarProvider;
|
||||
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.oldProfile.decimalSeparator = profile.decimalSeparator;
|
||||
this.oldProfile.digitGroupingSymbol = profile.digitGroupingSymbol;
|
||||
this.oldProfile.digitGrouping = profile.digitGrouping;
|
||||
this.oldProfile.currencyDisplayType = profile.currencyDisplayType;
|
||||
this.oldProfile.expenseAmountColor = profile.expenseAmountColor;
|
||||
this.oldProfile.incomeAmountColor = profile.incomeAmountColor;
|
||||
|
||||
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;
|
||||
this.newProfile.decimalSeparator = this.oldProfile.decimalSeparator;
|
||||
this.newProfile.digitGroupingSymbol = this.oldProfile.digitGroupingSymbol;
|
||||
this.newProfile.digitGrouping = this.oldProfile.digitGrouping;
|
||||
this.newProfile.currencyDisplayType = this.oldProfile.currencyDisplayType;
|
||||
this.newProfile.expenseAmountColor = this.oldProfile.expenseAmountColor;
|
||||
this.newProfile.incomeAmountColor = this.oldProfile.incomeAmountColor;
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function showOpenAvatarDialog(): void {
|
||||
avatarInput.value?.click();
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<f7-page @page:afterin="onPageAfterIn">
|
||||
<f7-navbar>
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t('User Profile')"></f7-nav-title>
|
||||
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="tt('User Profile')"></f7-nav-title>
|
||||
<f7-nav-right class="navbar-compact-icons">
|
||||
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !isUserVerifyEmailEnabled || loading || emailVerified }" @click="showMoreActionSheet = true"></f7-link>
|
||||
<f7-link :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" :text="$t('Save')" @click="save"></f7-link>
|
||||
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !isUserVerifyEmailEnabled() || loading || emailVerified }" @click="showMoreActionSheet = true"></f7-link>
|
||||
<f7-link :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" :text="tt('Save')" @click="save"></f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
@@ -51,8 +51,8 @@
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
clear-button
|
||||
:label="$t('Password')"
|
||||
:placeholder="$t('Your password')"
|
||||
:label="tt('Password')"
|
||||
:placeholder="tt('Your password')"
|
||||
v-model:value="newProfile.password"
|
||||
></f7-list-input>
|
||||
|
||||
@@ -60,8 +60,8 @@
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
clear-button
|
||||
:label="$t('Confirm Password')"
|
||||
:placeholder="$t('Re-enter the password')"
|
||||
:label="tt('Confirm Password')"
|
||||
:placeholder="tt('Re-enter the password')"
|
||||
v-model:value="newProfile.confirmPassword"
|
||||
></f7-list-input>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
clear-button
|
||||
:label="$t('E-mail') + ' ' + (emailVerified ? $t('(Verified)') : $t('(Not Verified)'))"
|
||||
:placeholder="$t('Your email address')"
|
||||
:label="tt('E-mail') + ' ' + (emailVerified ? tt('(Verified)') : tt('(Not Verified)'))"
|
||||
:placeholder="tt('Your email address')"
|
||||
v-model:value="newProfile.email"
|
||||
></f7-list-input>
|
||||
|
||||
@@ -78,12 +78,12 @@
|
||||
type="text"
|
||||
autocomplete="nickname"
|
||||
clear-button
|
||||
:label="$t('Nickname')"
|
||||
:placeholder="$t('Your nickname')"
|
||||
:label="tt('Nickname')"
|
||||
:placeholder="tt('Your nickname')"
|
||||
v-model:value="newProfile.nickname"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="tt(inputInvalidProblemMessage || '')"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
|
||||
@@ -91,8 +91,8 @@
|
||||
class="list-item-with-header-and-title"
|
||||
link="#" no-chevron
|
||||
:class="{ 'disabled': !allVisibleAccounts.length }"
|
||||
:header="$t('Default Account')"
|
||||
:title="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'name', $t('Unspecified'))"
|
||||
:header="tt('Default Account')"
|
||||
:title="Account.findAccountNameById(allAccounts, newProfile.defaultAccountId, tt('Unspecified'))"
|
||||
@click="showAccountSheet = true"
|
||||
>
|
||||
<two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category"
|
||||
@@ -111,9 +111,9 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Editable Transaction Range')"
|
||||
:title="getNameByKeyValue(allTransactionEditScopeTypes, newProfile.transactionEditScope, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Editable Transaction Range'), popupCloseLinkText: $t('Done') }"
|
||||
:header="tt('Editable Transaction Range')"
|
||||
:title="findDisplayNameByType(allTransactionEditScopeTypes, newProfile.transactionEditScope)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Editable Transaction Range'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.transactionEditScope">
|
||||
<option :value="option.type"
|
||||
@@ -122,15 +122,15 @@
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="$t(extendInputInvalidProblemMessage)"></f7-list-item>
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="tt(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')"
|
||||
:header="tt('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') }">
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Language'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Language'), popupCloseLinkText: tt('Done') }">
|
||||
<select v-model="newProfile.language">
|
||||
<option :value="language.languageTag"
|
||||
:key="language.languageTag"
|
||||
@@ -140,8 +140,8 @@
|
||||
|
||||
<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') }"
|
||||
:header="tt('Default Currency')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Default Currency'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<template #title>
|
||||
<f7-block class="no-padding no-margin">
|
||||
@@ -158,9 +158,9 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('First Day of Week')"
|
||||
:header="tt('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') }"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('First Day of Week'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.firstDayOfWeek">
|
||||
<option :value="weekDay.type"
|
||||
@@ -173,9 +173,9 @@
|
||||
<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('Long Date Format')"
|
||||
:title="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') }"
|
||||
:header="tt('Long Date Format')"
|
||||
:title="findDisplayNameByType(allLongDateFormats, newProfile.longDateFormat)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Long Date Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Long Date Format'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.longDateFormat">
|
||||
<option :value="format.type"
|
||||
@@ -186,9 +186,9 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Short Date Format')"
|
||||
:title="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') }"
|
||||
:header="tt('Short Date Format')"
|
||||
:title="findDisplayNameByType(allShortDateFormats, newProfile.shortDateFormat)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Short Date Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Short Date Format'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.shortDateFormat">
|
||||
<option :value="format.type"
|
||||
@@ -199,9 +199,9 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Long Time Format')"
|
||||
:title="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') }"
|
||||
:header="tt('Long Time Format')"
|
||||
:title="findDisplayNameByType(allLongTimeFormats, newProfile.longTimeFormat)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Long Time Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Long Time Format'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.longTimeFormat">
|
||||
<option :value="format.type"
|
||||
@@ -212,9 +212,9 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Short Time Format')"
|
||||
:title="getNameByKeyValue(allShortTimeFormats, newProfile.shortTimeFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Short Time Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Short Time Format'), popupCloseLinkText: $t('Done') }"
|
||||
:header="tt('Short Time Format')"
|
||||
:title="findDisplayNameByType(allShortTimeFormats, newProfile.shortTimeFormat)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Short Time Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Short Time Format'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.shortTimeFormat">
|
||||
<option :value="format.type"
|
||||
@@ -227,9 +227,9 @@
|
||||
<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('Currency Display Mode')"
|
||||
:title="getNameByKeyValue(allCurrencyDisplayTypes, newProfile.currencyDisplayType, 'type', 'displayName')"
|
||||
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'), pageTitle: $t('Currency Display Mode'), popupCloseLinkText: $t('Done') }"
|
||||
:header="tt('Currency Display Mode')"
|
||||
:title="findDisplayNameByType(allCurrencyDisplayTypes, newProfile.currencyDisplayType)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Display Mode'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Currency Display Mode'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.currencyDisplayType">
|
||||
<option :value="format.type"
|
||||
@@ -240,9 +240,9 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Digit Grouping')"
|
||||
:title="getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Digit Grouping'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Digit Grouping'), popupCloseLinkText: $t('Done') }"
|
||||
:header="tt('Digit Grouping')"
|
||||
:title="findDisplayNameByType(allDigitGroupingTypes, newProfile.digitGrouping)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Digit Grouping'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Digit Grouping'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.digitGrouping">
|
||||
<option :value="format.type"
|
||||
@@ -253,10 +253,10 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:disabled="!getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'enabled')"
|
||||
:header="$t('Digit Grouping Symbol')"
|
||||
:title="getNameByKeyValue(allDigitGroupingSymbols, newProfile.digitGroupingSymbol, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Digit Grouping Symbol'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Digit Grouping Symbol'), popupCloseLinkText: $t('Done') }"
|
||||
:disabled="!supportDigitGroupingSymbol"
|
||||
:header="tt('Digit Grouping Symbol')"
|
||||
:title="findDisplayNameByType(allDigitGroupingSymbols, newProfile.digitGroupingSymbol)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Digit Grouping Symbol'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Digit Grouping Symbol'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.digitGroupingSymbol">
|
||||
<option :value="format.type"
|
||||
@@ -267,9 +267,9 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Decimal Separator')"
|
||||
:title="getNameByKeyValue(allDecimalSeparators, newProfile.decimalSeparator, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Decimal Separator'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Decimal Separator'), popupCloseLinkText: $t('Done') }"
|
||||
:header="tt('Decimal Separator')"
|
||||
:title="findDisplayNameByType(allDecimalSeparators, newProfile.decimalSeparator)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Decimal Separator'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Decimal Separator'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.decimalSeparator">
|
||||
<option :value="format.type"
|
||||
@@ -282,9 +282,9 @@
|
||||
<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('Expense Amount Color')"
|
||||
:title="getNameByKeyValue(allExpenseAmountColorTypes, newProfile.expenseAmountColor, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Color'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Expense Amount Color'), popupCloseLinkText: $t('Done') }"
|
||||
:header="tt('Expense Amount Color')"
|
||||
:title="findDisplayNameByType(allExpenseAmountColorTypes, newProfile.expenseAmountColor)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Color'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Expense Amount Color'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.expenseAmountColor">
|
||||
<option :value="format.type"
|
||||
@@ -295,9 +295,9 @@
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Income Amount Color')"
|
||||
:title="getNameByKeyValue(allIncomeAmountColorTypes, newProfile.incomeAmountColor, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Color'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Income Amount Color'), popupCloseLinkText: $t('Done') }"
|
||||
:header="tt('Income Amount Color')"
|
||||
:title="findDisplayNameByType(allIncomeAmountColorTypes, newProfile.incomeAmountColor)"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Color'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Income Amount Color'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.incomeAmountColor">
|
||||
<option :value="format.type"
|
||||
@@ -306,22 +306,22 @@
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="$t(langAndRegionInputInvalidProblemMessage)"></f7-list-item>
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="tt(langAndRegionInputInvalidProblemMessage || '')"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
|
||||
<f7-actions-group>
|
||||
<f7-actions-button :class="{ 'disabled': loading || resending }" @click="resendVerifyEmail"
|
||||
v-if="isUserVerifyEmailEnabled && !loading && !emailVerified"
|
||||
>{{ $t('Resend Validation Email') }}</f7-actions-button>
|
||||
v-if="isUserVerifyEmailEnabled() && !loading && !emailVerified"
|
||||
>{{ tt('Resend Validation Email') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
<f7-actions-group>
|
||||
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
|
||||
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
</f7-actions>
|
||||
|
||||
<password-input-sheet :title="$t('Modify Password')"
|
||||
:hint="$t('Please enter your current password when modifying your password')"
|
||||
<password-input-sheet :title="tt('Modify Password')"
|
||||
:hint="tt('Please enter your current password when modifying your password')"
|
||||
:confirm-disabled="saving"
|
||||
:cancel-disabled="saving"
|
||||
v-model:show="showInputPasswordSheet"
|
||||
@@ -331,356 +331,175 @@
|
||||
</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 { useUserProfilePageBase } from '@/views/base/users/UserProfilePageBase.ts';
|
||||
|
||||
import { useRootStore } from '@/stores/index.ts';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useAccountsStore } from '@/stores/account.ts';
|
||||
import { useOverviewStore } from '@/stores/overview.ts';
|
||||
|
||||
import { getNameByKeyValue } from '@/lib/common.ts';
|
||||
import { getCategorizedAccounts } from '@/lib/account.ts';
|
||||
import type { UserProfileResponse } from '@/models/user.ts';
|
||||
import { Account } from '@/models/account.ts';
|
||||
|
||||
import { findDisplayNameByType } from '@/lib/common.ts';
|
||||
import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
newProfile: {
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
email: '',
|
||||
nickname: '',
|
||||
defaultAccountId: '',
|
||||
transactionEditScope: 1,
|
||||
language: '',
|
||||
defaultCurrency: '',
|
||||
firstDayOfWeek: 0,
|
||||
longDateFormat: 0,
|
||||
shortDateFormat: 0,
|
||||
longTimeFormat: 0,
|
||||
shortTimeFormat: 0,
|
||||
decimalSeparator: 0,
|
||||
digitGroupingSymbol: 0,
|
||||
digitGrouping: 0,
|
||||
currencyDisplayType: 0,
|
||||
expenseAmountColor: 0,
|
||||
incomeAmountColor: 0
|
||||
},
|
||||
oldProfile: {
|
||||
email: '',
|
||||
nickname: '',
|
||||
defaultAccountId: '',
|
||||
transactionEditScope: 1,
|
||||
language: '',
|
||||
defaultCurrency: '',
|
||||
firstDayOfWeek: 0,
|
||||
longDateFormat: 0,
|
||||
shortDateFormat: 0,
|
||||
longTimeFormat: 0,
|
||||
shortTimeFormat: 0,
|
||||
decimalSeparator: 0,
|
||||
digitGroupingSymbol: 0,
|
||||
digitGrouping: 0,
|
||||
currencyDisplayType: 0,
|
||||
expenseAmountColor: 0,
|
||||
incomeAmountColor: 0
|
||||
},
|
||||
emailVerified: false,
|
||||
currentPassword: '',
|
||||
loading: true,
|
||||
loadingError: null,
|
||||
resending: false,
|
||||
saving: false,
|
||||
showInputPasswordSheet: false,
|
||||
showAccountSheet: false,
|
||||
showMoreActionSheet: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useUserStore, useAccountsStore, useOverviewStore),
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(true);
|
||||
},
|
||||
allCurrencies() {
|
||||
return this.$locale.getAllCurrencies();
|
||||
},
|
||||
allAccounts() {
|
||||
return this.accountsStore.allPlainAccounts;
|
||||
},
|
||||
allVisibleAccounts() {
|
||||
return this.accountsStore.allVisiblePlainAccounts;
|
||||
},
|
||||
allVisibleCategorizedAccounts() {
|
||||
return getCategorizedAccounts(this.allVisibleAccounts);
|
||||
},
|
||||
allWeekDays() {
|
||||
return this.$locale.getAllWeekDays();
|
||||
},
|
||||
allLongDateFormats() {
|
||||
return this.$locale.getAllLongDateFormats();
|
||||
},
|
||||
allShortDateFormats() {
|
||||
return this.$locale.getAllShortDateFormats();
|
||||
},
|
||||
allLongTimeFormats() {
|
||||
return this.$locale.getAllLongTimeFormats();
|
||||
},
|
||||
allShortTimeFormats() {
|
||||
return this.$locale.getAllShortTimeFormats();
|
||||
},
|
||||
allDecimalSeparators() {
|
||||
return this.$locale.getAllDecimalSeparators();
|
||||
},
|
||||
allDigitGroupingSymbols() {
|
||||
return this.$locale.getAllDigitGroupingSymbols();
|
||||
},
|
||||
allDigitGroupingTypes() {
|
||||
return this.$locale.getAllDigitGroupingTypes();
|
||||
},
|
||||
allCurrencyDisplayTypes() {
|
||||
return this.$locale.getAllCurrencyDisplayTypes(this.settingsStore, this.userStore);
|
||||
},
|
||||
allExpenseAmountColorTypes() {
|
||||
return this.$locale.getAllExpenseAmountColors();
|
||||
},
|
||||
allIncomeAmountColorTypes() {
|
||||
return this.$locale.getAllIncomeAmountColors();
|
||||
},
|
||||
allTransactionEditScopeTypes() {
|
||||
return this.$locale.getAllTransactionEditScopeTypes();
|
||||
},
|
||||
currentLanguageName() {
|
||||
for (let i = 0; i < this.allLanguages.length; i++) {
|
||||
if (this.allLanguages[i].languageTag === this.newProfile.language) {
|
||||
return this.allLanguages[i].displayName;
|
||||
}
|
||||
}
|
||||
const props = defineProps<{
|
||||
f7router: Router.Router;
|
||||
}>();
|
||||
|
||||
return this.$t('Unknown');
|
||||
},
|
||||
currentDayOfWeekName() {
|
||||
return getNameByKeyValue(this.allWeekDays, this.newProfile.firstDayOfWeek, 'type', 'displayName');
|
||||
},
|
||||
isUserVerifyEmailEnabled() {
|
||||
return isUserVerifyEmailEnabled();
|
||||
},
|
||||
inputIsNotChanged() {
|
||||
return !!this.inputIsNotChangedProblemMessage;
|
||||
},
|
||||
inputIsInvalid() {
|
||||
return !!this.inputInvalidProblemMessage;
|
||||
},
|
||||
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.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 &&
|
||||
this.newProfile.decimalSeparator === this.oldProfile.decimalSeparator &&
|
||||
this.newProfile.digitGroupingSymbol === this.oldProfile.digitGroupingSymbol &&
|
||||
this.newProfile.digitGrouping === this.oldProfile.digitGrouping &&
|
||||
this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType &&
|
||||
this.newProfile.expenseAmountColor === this.oldProfile.expenseAmountColor &&
|
||||
this.newProfile.incomeAmountColor === this.oldProfile.incomeAmountColor) {
|
||||
return 'Nothing has been modified';
|
||||
} else if (!this.newProfile.password && this.newProfile.confirmPassword) {
|
||||
return 'Password cannot be blank';
|
||||
} else if (this.newProfile.password && !this.newProfile.confirmPassword) {
|
||||
return 'Password confirmation cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
inputInvalidProblemMessage() {
|
||||
if (this.newProfile.password && this.newProfile.confirmPassword && this.newProfile.password !== this.newProfile.confirmPassword) {
|
||||
return 'Password and password confirmation do not match';
|
||||
} else if (!this.newProfile.email) {
|
||||
return 'Email address cannot be blank';
|
||||
} else if (!this.newProfile.nickname) {
|
||||
return 'Nickname cannot be blank';
|
||||
} else if (!this.newProfile.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
extendInputInvalidProblemMessage() {
|
||||
return null;
|
||||
},
|
||||
langAndRegionInputInvalidProblemMessage() {
|
||||
if (!this.newProfile.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
const { tt, getCurrencyName } = useI18n();
|
||||
const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
|
||||
|
||||
self.loading = true;
|
||||
const {
|
||||
newProfile,
|
||||
emailVerified,
|
||||
loading,
|
||||
resending,
|
||||
saving,
|
||||
allLanguages,
|
||||
allCurrencies,
|
||||
allAccounts,
|
||||
allVisibleAccounts,
|
||||
allVisibleCategorizedAccounts,
|
||||
allWeekDays,
|
||||
allLongDateFormats,
|
||||
allShortDateFormats,
|
||||
allLongTimeFormats,
|
||||
allShortTimeFormats,
|
||||
allDecimalSeparators,
|
||||
allDigitGroupingSymbols,
|
||||
allDigitGroupingTypes,
|
||||
allCurrencyDisplayTypes,
|
||||
allExpenseAmountColorTypes,
|
||||
allIncomeAmountColorTypes,
|
||||
allTransactionEditScopeTypes,
|
||||
supportDigitGroupingSymbol,
|
||||
inputIsNotChangedProblemMessage,
|
||||
inputInvalidProblemMessage,
|
||||
langAndRegionInputInvalidProblemMessage,
|
||||
extendInputInvalidProblemMessage,
|
||||
inputIsNotChanged,
|
||||
inputIsInvalid,
|
||||
langAndRegionInputIsInvalid,
|
||||
extendInputIsInvalid,
|
||||
setCurrentUserProfile,
|
||||
doAfterProfileUpdate
|
||||
} = useUserProfilePageBase();
|
||||
|
||||
const promises = [
|
||||
self.accountsStore.loadAllAccounts({ force: false }),
|
||||
self.userStore.getCurrentUserProfile()
|
||||
];
|
||||
const rootStore = useRootStore();
|
||||
const userStore = useUserStore();
|
||||
const accountsStore = useAccountsStore();
|
||||
|
||||
Promise.all(promises).then(responses => {
|
||||
const profile = responses[1];
|
||||
self.setCurrentUserProfile(profile);
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
if (error.processed) {
|
||||
self.loading = false;
|
||||
} else {
|
||||
self.loadingError = error;
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onPageAfterIn() {
|
||||
this.$routeBackOnError(this.f7router, 'loadingError');
|
||||
},
|
||||
save() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
const currentPassword = ref<string>('');
|
||||
const loadingError = ref<unknown | null>(null);
|
||||
const showInputPasswordSheet = ref<boolean>(false);
|
||||
const showAccountSheet = ref<boolean>(false);
|
||||
const showMoreActionSheet = ref<boolean>(false);
|
||||
|
||||
self.showInputPasswordSheet = false;
|
||||
|
||||
const problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage || self.langAndRegionInputInvalidProblemMessage;
|
||||
|
||||
if (problemMessage) {
|
||||
self.$alert(problemMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
if (self.newProfile.password && !self.currentPassword) {
|
||||
self.showInputPasswordSheet = true;
|
||||
return;
|
||||
}
|
||||
|
||||
self.saving = true;
|
||||
self.$showLoading(() => self.saving);
|
||||
|
||||
self.rootStore.updateUserProfile({
|
||||
profile: self.newProfile,
|
||||
currentPassword: self.currentPassword
|
||||
}).then(response => {
|
||||
self.saving = false;
|
||||
self.$hideLoading();
|
||||
self.currentPassword = '';
|
||||
|
||||
if (response.user) {
|
||||
if (response.user.firstDayOfWeek !== self.oldProfile.firstDayOfWeek) {
|
||||
this.overviewStore.resetTransactionOverview();
|
||||
}
|
||||
|
||||
self.setCurrentUserProfile(response.user);
|
||||
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
self.$toast('Your profile has been successfully updated');
|
||||
router.back();
|
||||
}).catch(error => {
|
||||
self.saving = false;
|
||||
self.$hideLoading();
|
||||
self.currentPassword = '';
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
resendVerifyEmail() {
|
||||
const self = this;
|
||||
|
||||
self.resending = true;
|
||||
self.$showLoading(() => self.resending);
|
||||
|
||||
self.rootStore.resendVerifyEmailByLoginedUser().then(() => {
|
||||
self.resending = false;
|
||||
self.$hideLoading();
|
||||
|
||||
self.$toast('Validation email has been sent');
|
||||
}).catch(error => {
|
||||
self.resending = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
getNameByKeyValue(src, value, keyField, nameField, defaultName) {
|
||||
return getNameByKeyValue(src, value, keyField, nameField, defaultName);
|
||||
},
|
||||
getCurrencyName(currencyCode) {
|
||||
return this.$locale.getCurrencyName(currencyCode);
|
||||
},
|
||||
setCurrentUserProfile(profile) {
|
||||
this.emailVerified = profile.emailVerified;
|
||||
|
||||
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.oldProfile.decimalSeparator = profile.decimalSeparator;
|
||||
this.oldProfile.digitGroupingSymbol = profile.digitGroupingSymbol;
|
||||
this.oldProfile.digitGrouping = profile.digitGrouping;
|
||||
this.oldProfile.currencyDisplayType = profile.currencyDisplayType;
|
||||
this.oldProfile.expenseAmountColor = profile.expenseAmountColor;
|
||||
this.oldProfile.incomeAmountColor = profile.incomeAmountColor;
|
||||
|
||||
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;
|
||||
this.newProfile.decimalSeparator = this.oldProfile.decimalSeparator;
|
||||
this.newProfile.digitGroupingSymbol = this.oldProfile.digitGroupingSymbol;
|
||||
this.newProfile.digitGrouping = this.oldProfile.digitGrouping;
|
||||
this.newProfile.currencyDisplayType = this.oldProfile.currencyDisplayType;
|
||||
this.newProfile.expenseAmountColor = this.oldProfile.expenseAmountColor;
|
||||
this.newProfile.incomeAmountColor = this.oldProfile.incomeAmountColor;
|
||||
const currentLanguageName = computed<string>(() => {
|
||||
for (let i = 0; i < allLanguages.value.length; i++) {
|
||||
if (allLanguages.value[i].languageTag === newProfile.value.language) {
|
||||
return allLanguages.value[i].displayName;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return tt('Unknown');
|
||||
});
|
||||
|
||||
const currentDayOfWeekName = computed<string | null>(() => findDisplayNameByType(allWeekDays.value, newProfile.value.firstDayOfWeek));
|
||||
|
||||
function init(): void {
|
||||
loading.value = true;
|
||||
|
||||
const promises = [
|
||||
accountsStore.loadAllAccounts({ force: false }),
|
||||
userStore.getCurrentUserProfile()
|
||||
];
|
||||
|
||||
Promise.all(promises).then(responses => {
|
||||
const profile = responses[1] as UserProfileResponse;
|
||||
setCurrentUserProfile(profile);
|
||||
loading.value = false;
|
||||
}).catch(error => {
|
||||
if (error.processed) {
|
||||
loading.value = false;
|
||||
} else {
|
||||
loadingError.value = error;
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function save(): void {
|
||||
const router = props.f7router;
|
||||
|
||||
showInputPasswordSheet.value = false;
|
||||
|
||||
const problemMessage = inputIsNotChangedProblemMessage.value || inputInvalidProblemMessage.value || extendInputInvalidProblemMessage.value || langAndRegionInputInvalidProblemMessage.value;
|
||||
|
||||
if (problemMessage) {
|
||||
showAlert(problemMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
if (newProfile.value.password && !currentPassword.value) {
|
||||
showInputPasswordSheet.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
saving.value = true;
|
||||
showLoading(() => saving.value);
|
||||
|
||||
rootStore.updateUserProfile({
|
||||
profile: newProfile.value,
|
||||
currentPassword: currentPassword.value
|
||||
}).then(response => {
|
||||
saving.value = false;
|
||||
hideLoading();
|
||||
currentPassword.value = '';
|
||||
|
||||
doAfterProfileUpdate(response.user);
|
||||
showToast('Your profile has been successfully updated');
|
||||
router.back();
|
||||
}).catch(error => {
|
||||
saving.value = false;
|
||||
hideLoading();
|
||||
currentPassword.value = '';
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resendVerifyEmail(): void {
|
||||
resending.value = true;
|
||||
showLoading(() => resending.value);
|
||||
|
||||
rootStore.resendVerifyEmailByLoginedUser().then(() => {
|
||||
resending.value = false;
|
||||
hideLoading();
|
||||
|
||||
showToast('Validation email has been sent');
|
||||
}).catch(error => {
|
||||
resending.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onPageAfterIn(): void {
|
||||
routeBackOnError(props.f7router, loadingError);
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user