zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate exchange rates page to composition API and typescript

Browse Source
This commit is contained in:
MaysWind
2025-01-12 19:23:20 +08:00
parent 41452ac20b
commit c5f03165bc
7 changed files with 316 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/numeral.ts
-12
View File
@@ -285,15 +285,3 @@ export function getExchangedAmountByRate(amount: number, fromRate: string, toRat
return amount * exchangeRate;
}
export function getConvertedAmount(baseAmount: number | '', fromExchangeRate: { rate: string }, toExchangeRate: { rate: string }): number | '' | null {
if (!fromExchangeRate || !toExchangeRate) {
return '';
}
if (baseAmount === '') {
return 0;
}
return getExchangedAmountByRate(baseAmount as number, fromExchangeRate.rate, toExchangeRate.rate);
}
src/locales/helper.js
-7
View File
@@ -47,7 +47,6 @@ import {
appendDigitGroupingSymbol,
parseAmount,
formatAmount,
formatExchangeRateAmount,
getAdaptiveDisplayAmountRate
} from '@/lib/numeral.ts';
@@ -970,11 +969,6 @@ function getFormattedAmountWithCurrency(value, currencyCode, translateFn, userSt
return appendCurrencySymbol(value, currencyDisplayType, currencyCode, currencyUnit, currencyName, isPlural);
}
function getFormattedExchangeRateAmount(value, translateFn, userStore) {
const numberFormatOptions = getNumberFormatOptions(translateFn, userStore);
return formatExchangeRateAmount(value, numberFormatOptions);
}
function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, translateFn, userStore) {
const numberFormatOptions = getNumberFormatOptions(translateFn, userStore);
return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions);
@@ -1538,7 +1532,6 @@ export function i18nFunctions(i18nGlobal) {
parseAmount: (userStore, value) => getParsedAmountNumber(value, i18nGlobal.t, userStore),
formatAmount: (userStore, value, currencyCode) => getFormattedAmount(value, i18nGlobal.t, userStore, currencyCode),
formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
formatExchangeRateAmount: (userStore, value) => getFormattedExchangeRateAmount(value, i18nGlobal.t, userStore),
getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),
src/locales/helpers.ts
+48
View File
@@ -72,6 +72,8 @@ import type { ErrorResponse } from '@/core/api.ts';
import { ALL_CURRENCIES } from '@/consts/currency.ts';
import { KnownErrorCode, SPECIFIED_API_NOT_FOUND_ERRORS, PARAMETERIZED_ERRORS } from '@/consts/api.ts';
import type { LatestExchangeRateResponse, LocalizedLatestExchangeRate } from '@/models/exchange_rate.ts';
import {
isObject,
isString,
@@ -104,6 +106,7 @@ import {
import services from '@/lib/services.ts';
import logger from '@/lib/logger.ts';
import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
export interface LocalizedErrorParameter {
@@ -143,6 +146,7 @@ export function getI18nOptions(): object {
export function useI18n() {
const { t, locale } = useVueI18n();
const settingsStore = useSettingsStore();
const userStore = useUserStore();
// private functions
@@ -733,6 +737,49 @@ export function useI18n() {
return ret;
}
function getAllDisplayExchangeRates(exchangeRatesData?: LatestExchangeRateResponse): LocalizedLatestExchangeRate[] {
const availableExchangeRates: LocalizedLatestExchangeRate[] = [];
if (!exchangeRatesData || !exchangeRatesData.exchangeRates) {
return availableExchangeRates;
}
for (let i = 0; i < exchangeRatesData.exchangeRates.length; i++) {
const exchangeRate = exchangeRatesData.exchangeRates[i];
availableExchangeRates.push({
currencyCode: exchangeRate.currency,
currencyDisplayName: getCurrencyName(exchangeRate.currency),
rate: exchangeRate.rate
});
}
if (settingsStore.appSettings.currencySortByInExchangeRatesPage === CurrencySortingType.Name.type) {
availableExchangeRates.sort(function(c1, c2) {
return c1.currencyDisplayName.localeCompare(c2.currencyDisplayName);
});
} else if (settingsStore.appSettings.currencySortByInExchangeRatesPage === CurrencySortingType.CurrencyCode.type) {
availableExchangeRates.sort(function(c1, c2) {
return c1.currencyCode.localeCompare(c2.currencyCode);
});
} else if (settingsStore.appSettings.currencySortByInExchangeRatesPage === CurrencySortingType.ExchangeRate.type) {
availableExchangeRates.sort(function(c1, c2) {
const rate1 = parseFloat(c1.rate);
const rate2 = parseFloat(c2.rate);
if (rate1 > rate2) {
return 1;
} else if (rate1 < rate2) {
return -1;
} else {
return 0;
}
});
}
return availableExchangeRates;
}
function getMonthShortName(monthName: string): string {
return t(`datetime.${monthName}.short`);
}
@@ -1083,6 +1130,7 @@ export function useI18n() {
getAllTransactionEditScopeTypes: () => getLocalizedDisplayNameAndType(TransactionEditScopeType.values()),
getAllTransactionTagFilterTypes: () => getLocalizedDisplayNameAndType(TransactionTagFilterType.values()),
getAllTransactionScheduledFrequencyTypes: () => getLocalizedDisplayNameAndType(ScheduledTemplateFrequencyType.values()),
getAllDisplayExchangeRates,
// get localized info
getMonthShortName,
getMonthLongName,
src/models/exchange_rate.ts
+6
View File
@@ -10,3 +10,9 @@ export interface LatestExchangeRateResponse {
readonly baseCurrency: string;
readonly exchangeRates: LatestExchangeRate[];
}
export interface LocalizedLatestExchangeRate {
readonly currencyCode: string;
readonly currencyDisplayName: string;
readonly rate: string;
}
src/views/base/ExchangeRatesPageBase.ts
+65
View File
@@ -0,0 +1,65 @@
import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useUserStore } from '@/stores/user.ts';
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import type {
LatestExchangeRate,
LatestExchangeRateResponse,
LocalizedLatestExchangeRate
} from '@/models/exchange_rate.ts';
import { getExchangedAmountByRate } from '@/lib/numeral.ts';
export function useExchangeRatesPageBase() {
const { getAllDisplayExchangeRates, formatUnixTimeToLongDate, parseAmount } = useI18n();
const userStore = useUserStore();
const exchangeRatesStore = useExchangeRatesStore();
const baseCurrency = ref<string>(userStore.currentUserDefaultCurrency);
const baseAmount = ref<number>(100);
const exchangeRatesData = computed<LatestExchangeRateResponse | undefined>(() => exchangeRatesStore.latestExchangeRates.data);
const exchangeRatesDataUpdateTime = computed<string>(() => {
const exchangeRatesLastUpdateTime = exchangeRatesStore.exchangeRatesLastUpdateTime;
return exchangeRatesLastUpdateTime ? formatUnixTimeToLongDate(exchangeRatesLastUpdateTime) : '';
});
const availableExchangeRates = computed<LocalizedLatestExchangeRate[]>(() => {
return getAllDisplayExchangeRates(exchangeRatesData.value);
});
function getConvertedAmount(baseAmount: number | '', fromExchangeRate: LatestExchangeRate | LocalizedLatestExchangeRate, toExchangeRate: LatestExchangeRate | LocalizedLatestExchangeRate): number | '' | null {
if (!fromExchangeRate || !toExchangeRate) {
return '';
}
if (baseAmount === '') {
return 0;
}
return getExchangedAmountByRate(baseAmount as number, fromExchangeRate.rate, toExchangeRate.rate);
}
function setAsBaseline(currency: string, amount: string): void {
baseCurrency.value = currency;
baseAmount.value = parseAmount(amount);
}
return {
// states
baseCurrency,
baseAmount,
// computed states
exchangeRatesData,
exchangeRatesDataUpdateTime,
availableExchangeRates,
// functions
getConvertedAmount,
setAsBaseline
};
}
src/views/desktop/ExchangeRatesPage.vue
+97 -115
View File
@@ -5,16 +5,16 @@
<v-layout>
<v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
<div class="mx-6 my-4">
<span class="text-subtitle-2">{{ $t('Data source') }}</span>
<span class="text-subtitle-2">{{ tt('Data source') }}</span>
<p class="text-body-1 mt-1 mb-3">
<a tabindex="-1" target="_blank" :href="exchangeRatesData.referenceUrl" v-if="!loading && exchangeRatesData && exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a>
<span v-else-if="!loading && exchangeRatesData && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
<span v-else-if="!loading && !exchangeRatesData">{{ $t('None') }}</span>
<span v-else-if="!loading && !exchangeRatesData">{{ tt('None') }}</span>
<span v-else-if="loading">
<v-skeleton-loader class="skeleton-no-margin mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
</span>
</p>
<span class="text-subtitle-2" v-if="exchangeRatesDataUpdateTime || loading">{{ $t('Last Updated') }}</span>
<span class="text-subtitle-2" v-if="exchangeRatesDataUpdateTime || loading">{{ tt('Last Updated') }}</span>
<p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime || loading">
<span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span>
<span v-if="loading">
@@ -24,14 +24,14 @@
</div>
<v-divider />
<div class="mx-6 mt-4">
<span class="text-subtitle-2">{{ $t('Base Amount') }}</span>
<span class="text-subtitle-2">{{ tt('Base Amount') }}</span>
<amount-input class="mt-2" density="compact"
:currency="baseCurrency"
:disabled="loading || !exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length"
v-model="baseAmount"/>
</div>
<div class="mx-6 mt-4">
<span class="text-subtitle-2">{{ $t('Base Currency') }}</span>
<span class="text-subtitle-2">{{ tt('Base Currency') }}</span>
</div>
<v-tabs show-arrows class="mb-4" direction="vertical"
:disabled="loading" v-model="baseCurrency"
@@ -46,7 +46,7 @@
</v-tabs>
<div class="mx-6 mt-2 mb-4"
v-else-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
<span v-if="!loading">{{ $t('None') }}</span>
<span v-if="!loading">{{ tt('None') }}</span>
<span v-else-if="loading">
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-5" type="text"
:key="itemIdx" :loading="loading"
@@ -64,14 +64,14 @@
:ripple="false" :icon="true" @click="showNav = !showNav">
<v-icon :icon="icons.menu" size="24" />
</v-btn>
<span>{{ $t('Exchange Rates Data') }}</span>
<span>{{ tt('Exchange Rates Data') }}</span>
<v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :loading="loading" @click="reload">
<template #loader>
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
<v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
</v-btn>
</div>
</template>
@@ -81,9 +81,9 @@
<tr>
<th>
<div class="d-flex align-center">
<span>{{ $t('Currency') }}</span>
<span>{{ tt('Currency') }}</span>
<v-spacer/>
<span>{{ $t('Amount') }}</span>
<span>{{ tt('Amount') }}</span>
</div>
</th>
</tr>
@@ -98,7 +98,7 @@
</tr>
<tr v-if="!loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length)">
<td>{{ $t('No exchange rates data') }}</td>
<td>{{ tt('No exchange rates data') }}</td>
</tr>
<tr class="exchange-rates-table-row-data" :key="exchangeRate.currencyCode"
@@ -112,10 +112,10 @@
density="comfortable" variant="text"
:class="{ 'd-none': loading, 'hover-display': !loading }"
v-if="exchangeRate.currencyCode !== baseCurrency"
@click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))">
{{ $t('Set as Base') }}
@click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate))">
{{ tt('Set as Base') }}
</v-btn>
<span>{{ getConvertedAmount(exchangeRate) }}</span>
<span>{{ getFinalConvertedAmount(exchangeRate) }}</span>
</div>
</td>
</tr>
@@ -133,132 +133,114 @@
<snack-bar ref="snackbar" />
</template>
<script>
<script setup lang="ts">
import SnackBar from '@/components/desktop/SnackBar.vue';
import { ref, useTemplateRef, watch } from 'vue';
import { useDisplay } from 'vuetify';
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useExchangeRatesPageBase } from '@/views/base/ExchangeRatesPageBase.ts';
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import type { LocalizedLatestExchangeRate } from '@/models/exchange_rate.ts';
import logger from '@/lib/logger.ts';
import { getConvertedAmount } from '@/lib/numeral.ts';
import {
mdiRefresh,
mdiMenu
} from '@mdi/js';
export default {
data() {
const { mdAndUp } = useDisplay();
const userStore = useUserStore();
type SnackBarType = InstanceType<typeof SnackBar>;
return {
activeTab: 'exchangeRatesPage',
baseCurrency: userStore.currentUserDefaultCurrency,
baseAmount: 100,
loading: true,
alwaysShowNav: mdAndUp.value,
showNav: mdAndUp.value,
icons: {
refresh: mdiRefresh,
menu: mdiMenu
}
};
},
computed: {
...mapStores(useSettingsStore, useUserStore, useExchangeRatesStore),
exchangeRatesData() {
return this.exchangeRatesStore.latestExchangeRates.data;
},
exchangeRatesDataUpdateTime() {
const exchangeRatesLastUpdateTime = this.exchangeRatesStore.exchangeRatesLastUpdateTime;
return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
},
availableExchangeRates() {
return this.$locale.getAllDisplayExchangeRates(this.settingsStore, this.exchangeRatesData);
}
},
created() {
this.reload(false);
},
setup() {
const display = useDisplay();
const { mdAndUp } = useDisplay();
return {
display: display
};
},
watch: {
'display.mdAndUp.value': function (newValue) {
this.alwaysShowNav = newValue;
const { tt, formatExchangeRateAmount } = useI18n();
const { baseCurrency, baseAmount, exchangeRatesData, exchangeRatesDataUpdateTime, availableExchangeRates, getConvertedAmount, setAsBaseline } = useExchangeRatesPageBase();
if (!this.showNav) {
this.showNav = newValue;
}
}
},
methods: {
reload(force) {
const self = this;
const exchangeRatesStore = useExchangeRatesStore();
self.loading = true;
const icons = {
refresh: mdiRefresh,
menu: mdiMenu
};
self.exchangeRatesStore.getLatestExchangeRates({
silent: false,
force: force
}).then(() => {
self.loading = false;
const snackbar = useTemplateRef<SnackBarType>('snackbar');
if (self.exchangeRatesData && self.exchangeRatesData.exchangeRates) {
let foundDefaultCurrency = false;
const activeTab = ref<string>('exchangeRatesPage');
const loading = ref<boolean>(true);
const alwaysShowNav = ref<boolean>(mdAndUp.value);
const showNav = ref<boolean>(mdAndUp.value);
for (let i = 0; i < self.exchangeRatesData.exchangeRates.length; i++) {
const exchangeRate = self.exchangeRatesData.exchangeRates[i];
if (exchangeRate.currency === self.baseCurrency) {
foundDefaultCurrency = true;
break;
}
}
function reload(force: boolean): void {
loading.value = true;
if (force) {
self.$refs.snackbar.showMessage('Exchange rates data has been updated');
} else if (!foundDefaultCurrency) {
self.$refs.snackbar.showMessage('There is no exchange rates data for your default currency');
}
exchangeRatesStore.getLatestExchangeRates({
silent: false,
force: force
}).then(() => {
loading.value = false;
if (exchangeRatesData.value && exchangeRatesData.value.exchangeRates) {
const exchangeRates = exchangeRatesData.value.exchangeRates;
let foundDefaultCurrency = false;
for (let i = 0; i < exchangeRates.length; i++) {
const exchangeRate = exchangeRates[i];
if (exchangeRate.currency === baseCurrency.value) {
foundDefaultCurrency = true;
break;
}
}).catch(error => {
self.loading = false;
if (!error.processed) {
self.$refs.snackbar.showError(error);
}
});
},
getConvertedAmount(toExchangeRate) {
if (!this.baseCurrency) {
return 0;
}
const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[this.baseCurrency];
let exchangeRateAmount = 0;
try {
exchangeRateAmount = getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
} catch (ex) {
exchangeRateAmount = 0;
logger.warn('failed to convert amount by exchange rates, original base amount is ' + this.baseAmount, ex)
if (force) {
snackbar.value?.showMessage(tt('Exchange rates data has been updated'));
} else if (!foundDefaultCurrency) {
snackbar.value?.showMessage(tt('There is no exchange rates data for your default currency'));
}
return this.$locale.formatExchangeRateAmount(this.userStore, exchangeRateAmount);
},
setAsBaseline(currency, amount) {
this.baseCurrency = currency;
this.baseAmount = this.$locale.parseAmount(this.userStore, amount);
}
}
}).catch(error => {
loading.value = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate): string {
if (!baseCurrency.value) {
return '0';
}
const fromExchangeRate = exchangeRatesStore.latestExchangeRateMap[baseCurrency.value];
let exchangeRateAmount: number | '' | null = 0;
try {
exchangeRateAmount = getConvertedAmount(baseAmount.value / 100, fromExchangeRate, toExchangeRate);
} catch (ex) {
exchangeRateAmount = 0;
logger.warn('failed to convert amount by exchange rates, original base amount is ' + baseAmount.value, ex)
}
if (!exchangeRateAmount) {
return '0';
}
return formatExchangeRateAmount(exchangeRateAmount);
}
watch(mdAndUp, (newValue) => {
alwaysShowNav.value = newValue;
if (!showNav.value) {
showNav.value = newValue;
}
});
reload(false);
</script>
<style>
src/views/mobile/ExchangeRatesPage.vue
+100 -128
View File
@@ -1,8 +1,8 @@
<template>
<f7-page ptr @ptr:refresh="update">
<f7-navbar>
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t('Exchange Rates Data')"></f7-nav-title>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt('Exchange Rates Data')"></f7-nav-title>
<f7-nav-right>
<f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
</f7-nav-right>
@@ -11,8 +11,8 @@
<f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
:header="$t('Base 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('Base Currency'), popupCloseLinkText: $t('Done') }"
:header="tt('Base 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('Base Currency'), popupCloseLinkText: tt('Done') }"
>
<template #title>
<div class="no-padding no-margin">
@@ -30,12 +30,12 @@
class="currency-base-amount"
link="#" no-chevron
:class="baseAmountFontSizeClass"
:header="$t('Base Amount')"
:header="tt('Base Amount')"
:title="displayBaseAmount"
@click="showBaseAmountSheet = true"
>
<number-pad-sheet :min-value="allowedMinAmount"
:max-value="allowedMaxAmount"
<number-pad-sheet :min-value="TRANSACTION_MIN_AMOUNT"
:max-value="TRANSACTION_MAX_AMOUNT"
:currency="baseCurrency"
v-model:show="showBaseAmountSheet"
v-model="baseAmount"
@@ -44,12 +44,12 @@
</f7-list>
<f7-list strong inset dividers class="margin-vertical" v-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
<f7-list-item :title="$t('No exchange rates data')"></f7-list-item>
<f7-list-item :title="tt('No exchange rates data')"></f7-list-item>
</f7-list>
<f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
<f7-list-item swipeout
:after="getConvertedAmount(exchangeRate)"
:after="getFinalConvertedAmount(exchangeRate)"
:key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
<template #title>
<div class="no-padding no-margin">
@@ -58,18 +58,18 @@
</div>
</template>
<f7-swipeout-actions right v-if="exchangeRate.currencyCode !== baseCurrency">
<f7-swipeout-button color="primary" close :text="$t('Set as Base')" @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))"></f7-swipeout-button>
<f7-swipeout-button color="primary" close :text="tt('Set as Base')" @click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate))"></f7-swipeout-button>
</f7-swipeout-actions>
</f7-list-item>
</f7-list>
<f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
<f7-list-item v-if="exchangeRatesDataUpdateTime">
<small>{{ $t('Last Updated') }}</small>
<small>{{ tt('Last Updated') }}</small>
<small>{{ exchangeRatesDataUpdateTime }}</small>
</f7-list-item>
<f7-list-item>
<small>{{ $t('Data source') }}</small>
<small>{{ tt('Data source') }}</small>
<small>
<f7-link external target="_blank" :href="exchangeRatesData.referenceUrl" v-if="exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</f7-link>
<span v-else-if="!exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
@@ -79,138 +79,110 @@
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
<f7-actions-group>
<f7-actions-button :class="{ 'disabled': updating }" @click="update(null)">
<span>{{ $t('Update') }}</span>
<f7-actions-button :class="{ 'disabled': updating }" @click="update(undefined)">
<span>{{ tt('Update') }}</span>
</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>
</f7-page>
</template>
<script>
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
import { useExchangeRatesPageBase } from '@/views/base/ExchangeRatesPageBase.ts';
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
import { getConvertedAmount } from '@/lib/numeral.ts';
export default {
data() {
const userStore = useUserStore();
import type { LocalizedLatestExchangeRate } from '@/models/exchange_rate.ts';
return {
baseCurrency: userStore.currentUserDefaultCurrency,
baseAmount: 100,
updating: false,
showMoreActionSheet: false,
showBaseAmountSheet: false
};
},
computed: {
...mapStores(useSettingsStore, useUserStore, useExchangeRatesStore),
exchangeRatesData() {
return this.exchangeRatesStore.latestExchangeRates.data;
},
exchangeRatesDataUpdateTime() {
const exchangeRatesLastUpdateTime = this.exchangeRatesStore.exchangeRatesLastUpdateTime;
return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
},
availableExchangeRates() {
return this.$locale.getAllDisplayExchangeRates(this.settingsStore, this.exchangeRatesData);
},
displayBaseAmount() {
return this.$locale.formatAmount(this.userStore, this.baseAmount, this.baseCurrency);
},
baseAmountFontSizeClass() {
if (this.baseAmount >= 100000000 || this.baseAmount <= -100000000) {
return 'ebk-small-amount';
} else if (this.baseAmount >= 1000000 || this.baseAmount <= -1000000) {
return 'ebk-normal-amount';
} else {
return 'ebk-large-amount';
}
},
allowedMinAmount() {
return TRANSACTION_MIN_AMOUNT;
},
allowedMaxAmount() {
return TRANSACTION_MAX_AMOUNT;
const { tt, getCurrencyName, formatAmount, formatExchangeRateAmount } = useI18n();
const { showToast } = useI18nUIComponents();
const { baseCurrency, baseAmount, exchangeRatesData, exchangeRatesDataUpdateTime, availableExchangeRates, getConvertedAmount, setAsBaseline } = useExchangeRatesPageBase();
const exchangeRatesStore = useExchangeRatesStore();
const updating = ref<boolean>(false);
const showMoreActionSheet = ref<boolean>(false);
const showBaseAmountSheet = ref<boolean>(false);
const displayBaseAmount = computed<string>(() => formatAmount(baseAmount.value, baseCurrency.value));
const baseAmountFontSizeClass = computed<string>(() => {
if (baseAmount.value >= 100000000 || baseAmount.value <= -100000000) {
return 'ebk-small-amount';
} else if (baseAmount.value >= 1000000 || baseAmount.value <= -1000000) {
return 'ebk-normal-amount';
} else {
return 'ebk-large-amount';
}
});
function update(done?: () => void): void {
if (updating.value) {
done?.();
return;
}
updating.value = true;
if (!done) {
showLoading();
}
exchangeRatesStore.getLatestExchangeRates({
silent: false,
force: true
}).then(() => {
done?.();
updating.value = false;
hideLoading();
showToast('Exchange rates data has been updated');
}).catch(error => {
done?.();
updating.value = false;
hideLoading();
if (!error.processed) {
showToast(error.message || error);
}
},
created() {
if (!this.exchangeRatesData || !this.exchangeRatesData.exchangeRates) {
return;
});
}
function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate): string {
const fromExchangeRate = exchangeRatesStore.latestExchangeRateMap[baseCurrency.value];
const exchangeRateAmount = getConvertedAmount(baseAmount.value / 100, fromExchangeRate, toExchangeRate);
if (!exchangeRateAmount) {
return '0';
}
return formatExchangeRateAmount(exchangeRateAmount);
}
if (exchangeRatesData.value && exchangeRatesData.value.exchangeRates) {
const exchangeRates = exchangeRatesData.value.exchangeRates;
let hasBaseCurrency = false;
for (let i = 0; i < exchangeRates.length; i++) {
const exchangeRate = exchangeRates[i];
if (exchangeRate.currency === baseCurrency.value) {
hasBaseCurrency = true;
break;
}
}
for (let i = 0; i < this.exchangeRatesData.exchangeRates.length; i++) {
const exchangeRate = this.exchangeRatesData.exchangeRates[i];
if (exchangeRate.currency === this.baseCurrency) {
return;
}
}
this.$toast('There is no exchange rates data for your default currency');
},
methods: {
update(done) {
const self = this;
if (self.updating) {
if (done) {
done();
}
return;
}
self.updating = true;
if (!done) {
self.$showLoading();
}
self.exchangeRatesStore.getLatestExchangeRates({
silent: false,
force: true
}).then(() => {
if (done) {
done();
}
self.updating = false;
self.$hideLoading();
self.$toast('Exchange rates data has been updated');
}).catch(error => {
if (done) {
done();
}
self.updating = false;
self.$hideLoading();
if (!error.processed) {
self.$toast(error.message || error);
}
});
},
getCurrencyName(currencyCode) {
return this.$locale.getCurrencyName(currencyCode);
},
getConvertedAmount(toExchangeRate) {
const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[this.baseCurrency];
const exchangeRateAmount = getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
return this.$locale.formatExchangeRateAmount(this.userStore, exchangeRateAmount);
},
setAsBaseline(currency, amount) {
this.baseCurrency = currency;
this.baseAmount = this.$locale.parseAmount(this.userStore, amount);
}
if (!hasBaseCurrency) {
showToast('There is no exchange rates data for your default currency');
}
}
</script>