support user custom exchange rates data

2026-05-16 16:07:33 +08:00 · 2025-05-26 00:47:19 +08:00
parent c4d20c539f
commit 817291c9a7
41 changed files with 1257 additions and 73 deletions
@@ -22,7 +22,9 @@ export function useExchangeRatesPageBase() {
    const baseCurrency = ref<string>(userStore.currentUserDefaultCurrency);
    const baseAmount = ref<number>(100);

+    const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
    const exchangeRatesData = computed<LatestExchangeRateResponse | undefined>(() => exchangeRatesStore.latestExchangeRates.data);
+    const isUserCustomExchangeRates = computed<boolean>(() => exchangeRatesStore.isUserCustomExchangeRates);

    const exchangeRatesDataUpdateTime = computed<string>(() => {
        const exchangeRatesLastUpdateTime = exchangeRatesStore.exchangeRatesLastUpdateTime;
@@ -55,7 +57,9 @@ export function useExchangeRatesPageBase() {
        baseCurrency,
        baseAmount,
        // computed states
+        defaultCurrency,
        exchangeRatesData,
+        isUserCustomExchangeRates,
        exchangeRatesDataUpdateTime,
        availableExchangeRates,
        // functions
@@ -7,8 +7,9 @@
                        <div class="mx-6 my-4">
                            <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>
+                                <a tabindex="-1" target="_blank" :href="exchangeRatesData.referenceUrl" v-if="!loading && exchangeRatesData && !isUserCustomExchangeRates && exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a>
+                                <span v-else-if="!loading && exchangeRatesData && !isUserCustomExchangeRates && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
+                                <span v-else-if="!loading && exchangeRatesData && isUserCustomExchangeRates">{{ tt('User Custom') }}</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>
@@ -65,6 +66,9 @@
                                                <v-icon :icon="mdiMenu" size="24" />
                                            </v-btn>
                                            <span>{{ tt('Exchange Rates Data') }}</span>
+                                            <v-btn class="ml-3" color="default" variant="outlined"
+                                                   :disabled="loading" @click="update"
+                                                   v-if="isUserCustomExchangeRates">{{ tt('Update') }}</v-btn>
                                            <v-btn density="compact" color="default" variant="text" size="24"
                                                   class="ml-2" :icon="true" :loading="loading" @click="reload(true)">
                                                <template #loader>
@@ -107,15 +111,30 @@
                                                <div class="d-flex align-center">
                                                    <span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
                                                    <span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
+
                                                    <v-spacer/>
-                                                    <v-btn class="px-2 ml-2 mr-3" color="default"
+
+                                                    <v-btn class="px-2 ml-2" color="default"
                                                           density="comfortable" variant="text"
                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                           v-if="exchangeRate.currencyCode !== baseCurrency"
                                                           @click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate))">
                                                        {{ tt('Set as Base') }}
                                                    </v-btn>
-                                                    <span>{{ getFinalConvertedAmount(exchangeRate) }}</span>
+                                                    <v-btn class="px-2" color="default"
+                                                           density="comfortable" variant="text"
+                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
+                                                           :prepend-icon="mdiDeleteOutline"
+                                                           :loading="customExchangeRateRemoving[exchangeRate.currencyCode]"
+                                                           :disabled="loading || updating"
+                                                           v-if="exchangeRate.currencyCode !== defaultCurrency && isUserCustomExchangeRates"
+                                                           @click="remove(exchangeRate.currencyCode)">
+                                                        <template #loader>
+                                                            <v-progress-circular indeterminate size="20" width="2"/>
+                                                        </template>
+                                                        {{ tt('Delete') }}
+                                                    </v-btn>
+                                                    <span class="ml-3">{{ getFinalConvertedAmount(exchangeRate) }}</span>
                                                </div>
                                            </td>
                                        </tr>
@@ -130,11 +149,16 @@
        </v-col>
    </v-row>

+    <update-dialog ref="updateDialog" />
+
+    <confirm-dialog ref="confirmDialog"/>
    <snack-bar ref="snackbar" />
 </template>

 <script setup lang="ts">
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
+import UpdateDialog from './list/dialogs/UpdateDialog.vue';

 import { ref, useTemplateRef, watch } from 'vue';
 import { useDisplay } from 'vuetify';
@@ -150,22 +174,39 @@ import logger from '@/lib/logger.ts';

 import {
    mdiRefresh,
-    mdiMenu
+    mdiMenu,
+    mdiDeleteOutline
 } from '@mdi/js';

+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
+type UpdateDialogType = InstanceType<typeof UpdateDialog>;

 const { mdAndUp } = useDisplay();

 const { tt, formatExchangeRateAmount } = useI18n();
-const { baseCurrency, baseAmount, exchangeRatesData, exchangeRatesDataUpdateTime, availableExchangeRates, getConvertedAmount, setAsBaseline } = useExchangeRatesPageBase();
+const {
+    baseCurrency,
+    baseAmount,
+    defaultCurrency,
+    exchangeRatesData,
+    isUserCustomExchangeRates,
+    exchangeRatesDataUpdateTime,
+    availableExchangeRates,
+    getConvertedAmount,
+    setAsBaseline
+} = useExchangeRatesPageBase();

 const exchangeRatesStore = useExchangeRatesStore();

+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
+const updateDialog = useTemplateRef<UpdateDialogType>('updateDialog');

 const activeTab = ref<string>('exchangeRatesPage');
 const loading = ref<boolean>(true);
+const updating = ref<boolean>(false);
+const customExchangeRateRemoving = ref<Record<string, boolean>>({});
 const alwaysShowNav = ref<boolean>(mdAndUp.value);
 const showNav = ref<boolean>(mdAndUp.value);

@@ -205,6 +246,43 @@ function reload(force: boolean): void {
    });
 }

+function update(): void {
+    updateDialog.value?.open().then(result => {
+        if (result && result.message) {
+            snackbar.value?.showMessage(result.message);
+        }
+    }).catch(error => {
+        if (error) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function remove(currency: string): void {
+    confirmDialog.value?.open('Are you sure you want to delete this user custom exchange rate?').then(() => {
+        updating.value = true;
+        customExchangeRateRemoving.value[currency] = true;
+
+        exchangeRatesStore.deleteUserCustomExchangeRate({
+            currency: currency
+        }).then(() => {
+            if (currency === baseCurrency.value) {
+                baseCurrency.value = defaultCurrency.value;
+            }
+
+            updating.value = false;
+            customExchangeRateRemoving.value[currency] = false;
+        }).catch(error => {
+            updating.value = false;
+            customExchangeRateRemoving.value[currency] = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    });
+}
+
 function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate): string {
    if (!baseCurrency.value) {
        return '0';
@@ -0,0 +1,141 @@
+<template>
+    <v-dialog width="800" :persistent="submitting || (!!defaultCurrencyAmount && defaultCurrencyAmount !== 1) || currency !== defaultCurrency || (!!targetCurrencyAmount && targetCurrencyAmount !== 1)" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <div class="d-flex w-100 align-center justify-center">
+                        <h4 class="text-h4">{{ tt('Update User Custom Exchange Rate') }}</h4>
+                    </div>
+                </div>
+            </template>
+            <v-card-text class="my-md-4 w-100 d-flex justify-center">
+                <v-row>
+                    <v-col cols="12" md="6">
+                        <v-text-field type="number"
+                                      :disabled="submitting"
+                                      :label="tt('Amount')"
+                                      :placeholder="tt('Amount')"
+                                      :persistent-placeholder="true"
+                                      v-model="defaultCurrencyAmount"/>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <currency-select :disabled="true"
+                                         :label="tt('Currency')"
+                                         :placeholder="tt('Currency')"
+                                         v-model="defaultCurrency" />
+                    </v-col>
+                    <v-col cols="12" class="text-center my-2">
+                        <v-icon :icon="mdiSwapVertical" size="24" />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <v-text-field type="number"
+                                      :disabled="submitting"
+                                      :label="tt('Amount')"
+                                      :placeholder="tt('Amount')"
+                                      :persistent-placeholder="true"
+                                      v-model="targetCurrencyAmount"/>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <currency-select :disabled="submitting"
+                                         :label="tt('Currency')"
+                                         :placeholder="tt('Currency')"
+                                         v-model="currency" />
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center gap-4">
+                    <v-btn :disabled="submitting || !defaultCurrencyAmount || !currency || !targetCurrencyAmount" @click="confirm">
+                        {{ tt('OK') }}
+                        <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
+                    </v-btn>
+                    <v-btn color="secondary" variant="tonal" :disabled="submitting" @click="cancel">{{ tt('Cancel') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+
+    <snack-bar ref="snackbar" />
+</template>
+
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import {
+    mdiSwapVertical
+} from '@mdi/js';
+
+interface UserCustomExchangeRateUpdateResponse {
+    message: string;
+}
+
+type SnackBarType = InstanceType<typeof SnackBar>;
+
+defineProps<{
+    show?: boolean;
+}>();
+
+const { tt } = useI18n();
+
+const userStore = useUserStore();
+const exchangeRatesStore = useExchangeRatesStore();
+
+const showState = ref<boolean>(false);
+const submitting = ref<boolean>(false);
+const defaultCurrency = ref<string>(userStore.currentUserDefaultCurrency);
+const defaultCurrencyAmount = ref<number>(1);
+const currency = ref<string>(userStore.currentUserDefaultCurrency);
+const targetCurrencyAmount = ref<number>(1);
+
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+let resolveFunc: ((response: UserCustomExchangeRateUpdateResponse) => void) | null = null;
+let rejectFunc: ((reason?: unknown) => void) | null = null;
+
+function open(): Promise<UserCustomExchangeRateUpdateResponse> {
+    showState.value = true;
+    defaultCurrencyAmount.value = 1;
+    currency.value = userStore.currentUserDefaultCurrency;
+    targetCurrencyAmount.value = 1;
+
+    return new Promise((resolve, reject) => {
+        resolveFunc = resolve;
+        rejectFunc = reject;
+    });
+}
+
+function confirm(): void {
+    submitting.value = true;
+
+    exchangeRatesStore.updateUserCustomExchangeRate({
+        currency: currency.value,
+        rate: targetCurrencyAmount.value / defaultCurrencyAmount.value
+    }).then(() => {
+        submitting.value = false;
+        resolveFunc?.({ message: 'You have updated exchange rate' });
+        showState.value = false;
+    }).catch(error => {
+        submitting.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function cancel(): void {
+    rejectFunc?.();
+    showState.value = false;
+}
+
+defineExpose({
+    open
+});
+</script>
@@ -1,5 +1,5 @@
 <template>
-    <f7-page ptr @ptr:refresh="update">
+    <f7-page ptr @ptr:refresh="reload">
        <f7-navbar>
            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
            <f7-nav-title :title="tt('Exchange Rates Data')"></f7-nav-title>
@@ -56,16 +56,27 @@

        <f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
            <f7-list-item swipeout
+                          :id="getExchangeRateDomId(exchangeRate)"
                          :after="getFinalConvertedAmount(exchangeRate)"
-                          :key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
+                          :key="baseCurrencyChangedTime + '_' + exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates"
+                          @swipeout:closed="onExchangeRateSwipeoutClosed()">
                <template #title>
                    <div class="no-padding no-margin">
                        <span style="margin-right: 5px">{{ exchangeRate.currencyDisplayName }}</span>
                        <small class="smaller">{{ exchangeRate.currencyCode }}</small>
                    </div>
                </template>
-                <f7-swipeout-actions right v-if="exchangeRate.currencyCode !== baseCurrency">
-                    <f7-swipeout-button color="primary" close :text="tt('Set as Base')" @click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate))"></f7-swipeout-button>
+                <f7-swipeout-actions right v-if="exchangeRate.currencyCode !== baseCurrency || (exchangeRate.currencyCode !== defaultCurrency && isUserCustomExchangeRates)">
+                    <f7-swipeout-button color="primary" close
+                                        :text="tt('Set as Base')"
+                                        :class="{ 'disabled': exchangeRate.currencyCode === baseCurrency }"
+                                        @click="setAsBaseline(exchangeRate.currencyCode, getFinalConvertedAmount(exchangeRate)); settingBaseLine = true"
+                                        v-if="settingBaseLine || exchangeRate.currencyCode !== baseCurrency"></f7-swipeout-button>
+                    <f7-swipeout-button color="red" class="padding-left padding-right"
+                                        @click="remove(exchangeRate, false)"
+                                        v-if="exchangeRate.currencyCode !== defaultCurrency && isUserCustomExchangeRates">
+                        <f7-icon f7="trash"></f7-icon>
+                    </f7-swipeout-button>
                </f7-swipeout-actions>
            </f7-list-item>
        </f7-list>
@@ -78,18 +89,34 @@
            <f7-list-item>
                <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>
+                    <f7-link external target="_blank" :href="exchangeRatesData.referenceUrl" v-if="!isUserCustomExchangeRates && exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</f7-link>
+                    <span v-else-if="!isUserCustomExchangeRates && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
+                    <span v-else-if="isUserCustomExchangeRates">{{ tt('User Custom') }}</span>
                </small>
            </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': updating }" @click="update(undefined)">
+            <f7-actions-group v-if="isUserCustomExchangeRates">
+                <f7-actions-button :class="{ 'disabled': loading }" @click="update()">
                    <span>{{ tt('Update') }}</span>
                </f7-actions-button>
            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button :class="{ 'disabled': loading }" @click="reload(undefined)">
+                    <span>{{ tt('Refresh') }}</span>
+                </f7-actions-button>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
+            </f7-actions-group>
+        </f7-actions>
+
+        <f7-actions close-by-outside-click close-on-escape :opened="showDeleteActionSheet" @actions:closed="showDeleteActionSheet = false">
+            <f7-actions-group>
+                <f7-actions-label>{{ tt('Are you sure you want to delete this user custom exchange rate?') }}</f7-actions-label>
+                <f7-actions-button color="red" @click="remove(customExchangeRateToDelete, true)">{{ tt('Delete') }}</f7-actions-button>
+            </f7-actions-group>
            <f7-actions-group>
                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
            </f7-actions-group>
@@ -99,9 +126,10 @@

 <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 { useI18nUIComponents, showLoading, hideLoading, onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 import { useExchangeRatesPageBase } from '@/views/base/ExchangeRatesPageBase.ts';

 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
@@ -110,16 +138,38 @@ import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transac

 import type { LocalizedLatestExchangeRate } from '@/models/exchange_rate.ts';

+import {
+    getCurrentUnixTime
+} from '@/lib/datetime.ts';
+
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
+
 const { tt, getCurrencyName, formatAmount, formatExchangeRateAmount } = useI18n();
-const { showToast } = useI18nUIComponents();
-const { baseCurrency, baseAmount, exchangeRatesData, exchangeRatesDataUpdateTime, availableExchangeRates, getConvertedAmount, setAsBaseline } = useExchangeRatesPageBase();
+const { showAlert, showToast } = useI18nUIComponents();
+const {
+    baseCurrency,
+    baseAmount,
+    defaultCurrency,
+    exchangeRatesData,
+    isUserCustomExchangeRates,
+    exchangeRatesDataUpdateTime,
+    availableExchangeRates,
+    getConvertedAmount,
+    setAsBaseline
+} = useExchangeRatesPageBase();

 const exchangeRatesStore = useExchangeRatesStore();

-const updating = ref<boolean>(false);
+const loading = ref<boolean>(false);
+const baseCurrencyChangedTime = ref<number>(getCurrentUnixTime());
+const settingBaseLine = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 const showBaseCurrencyPopup = ref<boolean>(false);
 const showBaseAmountSheet = ref<boolean>(false);
+const customExchangeRateToDelete = ref<LocalizedLatestExchangeRate | null>(null);
+const showDeleteActionSheet = ref<boolean>(false);

 const displayBaseAmount = computed<string>(() => formatAmount(baseAmount.value, baseCurrency.value));
 const baseAmountFontSizeClass = computed<string>(() => {
@@ -132,13 +182,17 @@ const baseAmountFontSizeClass = computed<string>(() => {
    }
 });

-function update(done?: () => void): void {
-    if (updating.value) {
+function getExchangeRateDomId(exchangeRate: LocalizedLatestExchangeRate): string {
+    return 'exchangeRate_' + exchangeRate.currencyCode;
+}
+
+function reload(done?: () => void): void {
+    if (loading.value) {
        done?.();
        return;
    }

-    updating.value = true;
+    loading.value = true;

    if (!done) {
        showLoading();
@@ -150,14 +204,54 @@ function update(done?: () => void): void {
    }).then(() => {
        done?.();

-        updating.value = false;
+        loading.value = false;
        hideLoading();

        showToast('Exchange rates data has been updated');
    }).catch(error => {
        done?.();

-        updating.value = false;
+        loading.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function update(): void {
+    props.f7router.navigate('/exchange_rates/update');
+}
+
+function remove(customExchangeRate: LocalizedLatestExchangeRate | null, confirm: boolean): void {
+    if (!customExchangeRate) {
+        showAlert('An error occurred');
+        return;
+    }
+
+    if (!confirm) {
+        customExchangeRateToDelete.value = customExchangeRate;
+        showDeleteActionSheet.value = true;
+        return;
+    }
+
+    showDeleteActionSheet.value = false;
+    customExchangeRateToDelete.value = null;
+    showLoading();
+
+    exchangeRatesStore.deleteUserCustomExchangeRate({
+        currency: customExchangeRate.currencyCode,
+        beforeResolve: (done) => {
+            onSwipeoutDeleted(getExchangeRateDomId(customExchangeRate), done);
+        }
+    }).then(() => {
+        if (customExchangeRate.currencyCode === baseCurrency.value) {
+            baseCurrency.value = defaultCurrency.value;
+        }
+
+        hideLoading();
+    }).catch(error => {
        hideLoading();

        if (!error.processed) {
@@ -177,22 +271,32 @@ function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate): s
    return formatExchangeRateAmount(exchangeRateAmount);
 }

-if (exchangeRatesData.value && exchangeRatesData.value.exchangeRates) {
-    const exchangeRates = exchangeRatesData.value.exchangeRates;
-    let hasBaseCurrency = false;
+function onExchangeRateSwipeoutClosed(): void {
+    baseCurrencyChangedTime.value = getCurrentUnixTime();
+    settingBaseLine.value = false;
+}

-    for (let i = 0; i < exchangeRates.length; i++) {
-        const exchangeRate = exchangeRates[i];
-        if (exchangeRate.currency === baseCurrency.value) {
-            hasBaseCurrency = true;
-            break;
+exchangeRatesStore.getLatestExchangeRates({
+    silent: true,
+    force: false
+}).then(() => {
+    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;
+            }
+        }
+
+        if (!hasBaseCurrency) {
+            showToast('There is no exchange rates data for your default currency');
        }
    }
-
-    if (!hasBaseCurrency) {
-        showToast('There is no exchange rates data for your default currency');
-    }
-}
+});
 </script>

 <style>
@@ -0,0 +1,142 @@
+<template>
+    <f7-page>
+        <f7-navbar>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-title :title="tt('Update User Custom Exchange Rate')"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :class="{ 'disabled': submitting || !defaultCurrencyAmount || !currency || !targetCurrencyAmount }"
+                         :text="tt('Update')" @click="confirm"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+
+        <f7-list form strong inset dividers class="margin-vertical">
+            <f7-list-input
+                type="number"
+                :disabled="submitting"
+                :label="tt('Amount')"
+                :placeholder="tt('Amount')"
+                v-model:value="defaultCurrencyAmount"
+            ></f7-list-input>
+
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                link="#"
+                :class="{ 'disabled': true }"
+                :header="tt('Currency')"
+                :no-chevron="true"
+            >
+                <template #title>
+                    <div class="no-padding no-margin">
+                        <span>{{ getCurrencyName(defaultCurrency) }}&nbsp;</span>
+                        <small class="smaller">{{ defaultCurrency }}</small>
+                    </div>
+                </template>
+            </f7-list-item>
+        </f7-list>
+
+        <f7-block class="display-flex justify-content-center full-line margin-vertical">
+            <f7-icon class="separate-icon" f7="arrow_up_arrow_down"></f7-icon>
+        </f7-block>
+
+        <f7-list form strong inset dividers class="margin-vertical">
+            <f7-list-input
+                type="number"
+                :disabled="submitting"
+                :label="tt('Amount')"
+                :placeholder="tt('Amount')"
+                v-model:value="targetCurrencyAmount"
+            ></f7-list-input>
+
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                link="#"
+                :class="{ 'disabled': submitting }"
+                :header="tt('Currency')"
+                @click="showCurrencyPopup = true"
+            >
+                <template #title>
+                    <div class="no-padding no-margin">
+                        <span>{{ getCurrencyName(currency) }}&nbsp;</span>
+                        <small class="smaller">{{ currency }}</small>
+                    </div>
+                </template>
+                <list-item-selection-popup value-type="item"
+                                           key-field="currencyCode" value-field="currencyCode"
+                                           title-field="displayName" after-field="currencyCode"
+                                           :title="tt('Currency Name')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Currency')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allCurrencies"
+                                           v-model:show="showCurrencyPopup"
+                                           v-model="currency">
+                </list-item-selection-popup>
+            </f7-list-item>
+        </f7-list>
+    </f7-page>
+</template>
+
+<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 { useUserStore } from '@/stores/user.ts';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
+
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
+
+const { tt, getAllCurrencies, getCurrencyName } = useI18n();
+const { showToast } = useI18nUIComponents();
+
+const userStore = useUserStore();
+const exchangeRatesStore = useExchangeRatesStore();
+
+const submitting = ref<boolean>(false);
+const defaultCurrency = ref<string>(userStore.currentUserDefaultCurrency);
+const defaultCurrencyAmount = ref<number>(1);
+const currency = ref<string>(userStore.currentUserDefaultCurrency);
+const targetCurrencyAmount = ref<number>(1);
+const showCurrencyPopup = ref<boolean>(false);
+
+const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
+
+function init(): void {
+    defaultCurrencyAmount.value = 1;
+    currency.value = userStore.currentUserDefaultCurrency;
+    targetCurrencyAmount.value = 1;
+}
+
+function confirm(): void {
+    const router = props.f7router;
+
+    submitting.value = true;
+    showLoading(() => submitting.value);
+
+    exchangeRatesStore.updateUserCustomExchangeRate({
+        currency: currency.value,
+        rate: targetCurrencyAmount.value / defaultCurrencyAmount.value
+    }).then(() => {
+        submitting.value = false;
+        hideLoading();
+
+        showToast('You have updated exchange rate');
+        router.back();
+    }).catch(error => {
+        submitting.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+init();
+</script>