add exchange rates page

2026-05-14 06:57:35 +08:00 · 2023-06-23 00:21:00 +08:00
parent 88d5dc2f17
commit d6440d31f2
5 changed files with 317 additions and 3 deletions
@@ -0,0 +1,95 @@
+<template>
+    <v-text-field type="number" :density="density"
+                  :rules="rules" v-model="value"
+                  @keydown="onKeyUpDown" @keyup="onKeyUpDown"
+    ></v-text-field>
+</template>
+
+<script>
+import transactionConstants from '@/consts/transaction.js';
+
+export default {
+    props: [
+        'density',
+        'modelValue'
+    ],
+    emits: [
+        'update:modelValue'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            rules: [
+                (v) => {
+                    if (v === '') {
+                        return self.$t('Amount value is not number');
+                    }
+
+                    try {
+                        const val = parseFloat(v);
+                        return (val >= transactionConstants.minAmount && val <= transactionConstants.maxAmount) || self.$t('Amount value exceeds limitation');
+                    } catch (e) {
+                        return self.$t('Amount value is not number');
+                    }
+                }
+            ]
+        }
+    },
+    computed: {
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (value) {
+                this.$emit('update:modelValue', value);
+            }
+        }
+    },
+    methods: {
+        onKeyUpDown(e) {
+            if (e.target.value === '' || e.target.value === 0) {
+                return;
+            }
+
+            let decimalLength = 0;
+
+            if (e.target.value.indexOf('.') > 0) {
+                decimalLength = e.target.value.length - e.target.value.indexOf('.') - 1;
+            }
+
+            if (decimalLength > 2) {
+                e.target.value = e.target.value.substring(0, e.target.value.length - 1);
+                e.preventDefault();
+                return;
+            }
+
+            try {
+
+                const val = parseFloat(e.target.value);
+                let maxLength = transactionConstants.maxAmount.toString().length;
+
+                if (val < 0) {
+                    maxLength = transactionConstants.minAmount.toString().length;
+                }
+
+                if (val < transactionConstants.minAmount) {
+                    e.target.value = transactionConstants.minAmount;
+                    e.preventDefault();
+                } else if (val > transactionConstants.maxAmount) {
+                    e.target.value = transactionConstants.maxAmount;
+                    e.preventDefault();
+                } else if (e.target.value.length > maxLength) {
+                    e.target.value = e.target.value.substring(0, maxLength);
+                    e.preventDefault();
+                } else if (e.target.value.charAt(0) === '0' && e.target.value.length > 1) {
+                    e.target.value = e.target.value.substring(1);
+                    e.preventDefault();
+                }
+            } catch (e) {
+                e.target.value = 0;
+            }
+        }
+    }
+}
+</script>
@@ -50,6 +50,8 @@ import {
    i18nFunctions
 } from '@/lib/i18n.js';

+import AmountInput from '@/components/desktop/AmountInput.vue';
+
 import '@/styles/desktop/base.css';
 import '@/styles/desktop/layout.css';
 import '@/styles/desktop/font-size.css';
@@ -306,6 +308,8 @@ app.use(router);
 app.component('PerfectScrollbar', PerfectScrollbar);
 app.component('VueDatePicker', VueDatePicker);

+app.component('AmountInput', AmountInput);
+
 app.config.globalProperties.$version = version.getVersion();
 app.config.globalProperties.$buildTime = version.getBuildTime();

@@ -917,6 +917,8 @@ export default {
    'Transaction Detail': 'Transaction Detail',
    'No transaction data': 'No transaction data',
    'Are you sure you want to delete this transaction?': 'Are you sure you want to delete this transaction?',
+    'Amount value is not number': 'Amount value is not number',
+    'Amount value exceeds limitation': 'Amount value exceeds limitation',
    'Unable to delete this transaction': 'Unable to delete this transaction',
    'Transaction Data': 'Transaction Data',
    'Statistics Data': 'Statistics Data',
@@ -917,6 +917,8 @@ export default {
    'Transaction Detail': '交易详情',
    'No transaction data': '没有交易数据',
    'Are you sure you want to delete this transaction?': '您确定要删除该交易？',
+    'Amount value is not number': '金额值不是数值',
+    'Amount value exceeds limitation': '金额数值超出限制',
    'Unable to delete this transaction': '无法删除该交易',
    'Transaction Data': '交易数据',
    'Statistics Data': '统计数据',
@@ -1,13 +1,224 @@
 <template>
    <v-row class="match-height">
-        exchange rates
+        <v-col cols="12">
+            <v-card>
+                <template #title>
+                    <span>{{ $t('Exchange Rates Data') }}</span>
+                    <v-btn density="compact" color="default" variant="text"
+                           class="ml-2" :class="{ 'disabled': updating }"
+                           :icon="true" @click="update">
+                        <v-icon :icon="icons.refresh" size="24" />
+                    </v-btn>
+                </template>
+
+                <v-card-text>
+                    <span class="text-sm">
+                        {{ $t('Data source') }}
+                        <a target="_blank" :href="exchangeRatesData.referenceUrl" v-if="exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a>
+                        <span v-else-if="!exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
+                        <span v-if="exchangeRatesDataUpdateTime">&nbsp;,&nbsp;{{ $t('Last Updated') }}&nbsp;{{ exchangeRatesDataUpdateTime }}</span>
+                    </span>
+                </v-card-text>
+                <v-card-text v-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
+                    <span class="text-subtitle-1">{{ $t('No exchange rates data') }}</span>
+                </v-card-text>
+                <v-card-text v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
+                    <v-row no-gutters>
+                        <v-col cols="12" md="2">
+                            <span class="text-subtitle-1">{{ $t('Base Currency') }}</span>
+                        </v-col>
+                        <v-col cols="12" md="10" class="mb-6">
+                            <v-select
+                                density="compact"
+                                single-line
+                                item-title="currencyDisplayName"
+                                item-value="currencyCode"
+                                :items="availableExchangeRates"
+                                v-model="baseCurrency"
+                            ></v-select>
+                        </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                        <v-col cols="12" md="2">
+                            <span class="text-subtitle-1">{{ $t('Base Amount') }}</span>
+                        </v-col>
+                        <v-col cols="12" md="10" class="mb-6">
+                            <amount-input density="compact" v-model="baseAmount"/>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+                <v-table v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
+                    <thead>
+                    <tr>
+                        <th style="width: 50%">{{ $t('Currency') }}</th>
+                        <th class="text-uppercase">{{ $t('Amount') }}</th>
+                    </tr>
+                    </thead>
+
+                    <tbody>
+                    <tr :key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
+                        <td>
+                            <span style="margin-right: 5px">{{ exchangeRate.currencyDisplayName }}</span>
+                            <small class="smaller">{{ exchangeRate.currencyCode }}</small>
+                        </td>
+                        <td>{{ getDisplayConvertedAmount(exchangeRate) }}</td>
+                    </tr>
+                    </tbody>
+                </v-table>
+            </v-card>
+        </v-col>
    </v-row>
+
+    <v-snackbar v-model="showSnackbar">
+        {{ snackbarMessage }}
+
+        <template #actions>
+            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
+        </template>
+    </v-snackbar>
+
+    <v-overlay class="justify-center align-center" :persistent="true" v-model="updating">
+        <v-progress-circular indeterminate></v-progress-circular>
+    </v-overlay>
 </template>

 <script>
-export default {
-    created() {
+import { mapStores } from 'pinia';
+import { useUserStore } from '@/stores/user.js';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.js';

+import { appendThousandsSeparator } from '@/lib/common.js';
+import { getExchangedAmount } from '@/lib/currency.js';
+
+import {
+    mdiRefresh
+} from '@mdi/js';
+
+export default {
+    data() {
+        const userStore = useUserStore();
+
+        return {
+            baseCurrency: userStore.currentUserDefaultCurrency,
+            baseAmount: '1',
+            updating: false,
+            showSnackbar: false,
+            snackbarMessage: '',
+            icons: {
+                refresh: mdiRefresh
+            }
+        };
+    },
+    computed: {
+        ...mapStores(useUserStore, useExchangeRatesStore),
+        exchangeRatesData() {
+            return this.exchangeRatesStore.latestExchangeRates.data;
+        },
+        exchangeRatesDataUpdateTime() {
+            const exchangeRatesLastUpdateTime = this.exchangeRatesStore.exchangeRatesLastUpdateTime;
+            return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
+        },
+        availableExchangeRates() {
+            if (!this.exchangeRatesData || !this.exchangeRatesData.exchangeRates) {
+                return [];
+            }
+
+            const availableExchangeRates = [];
+
+            for (let i = 0; i < this.exchangeRatesData.exchangeRates.length; i++) {
+                const exchangeRate = this.exchangeRatesData.exchangeRates[i];
+
+                availableExchangeRates.push({
+                    currencyCode: exchangeRate.currency,
+                    currencyDisplayName: this.$t(`currency.${exchangeRate.currency}`),
+                    rate: exchangeRate.rate
+                });
+            }
+
+            availableExchangeRates.sort(function(c1, c2) {
+                return c1.currencyDisplayName.localeCompare(c2.currencyDisplayName);
+            })
+
+            return availableExchangeRates;
+        }
+    },
+    created() {
+        if (!this.exchangeRatesData || !this.exchangeRatesData.exchangeRates) {
+            return;
+        }
+
+        for (let i = 0; i < this.exchangeRatesData.exchangeRates.length; i++) {
+            const exchangeRate = this.exchangeRatesData.exchangeRates[i];
+            if (exchangeRate.currency === this.baseCurrency) {
+                return;
+            }
+        }
+
+        this.showSnackbarMessage(this.$t('There is no exchange rates data for your default currency'));
+    },
+    methods: {
+        update() {
+            const self = this;
+
+            if (self.updating) {
+                return;
+            }
+
+            self.updating = true;
+            self.exchangeRatesStore.getLatestExchangeRates({
+                silent: false,
+                force: true
+            }).then(() => {
+                self.updating = false;
+                self.showSnackbarMessage(self.$t('Exchange rates data has been updated'));
+            }).catch(error => {
+                self.updating = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        getConvertedAmount(toExchangeRate) {
+            const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[this.baseCurrency];
+
+            if (!fromExchangeRate) {
+                return '';
+            }
+
+            if (this.baseAmount === '') {
+                return 0;
+            }
+
+            try {
+                return getExchangedAmount(parseFloat(this.baseAmount), fromExchangeRate.rate, toExchangeRate.rate);
+            } catch (e) {
+                return 0;
+            }
+        },
+        getDisplayConvertedAmount(toExchangeRate) {
+            const rateStr = this.getConvertedAmount(toExchangeRate).toString();
+
+            if (rateStr.indexOf('.') < 0) {
+                return appendThousandsSeparator(rateStr);
+            } else {
+                let firstNonZeroPos = 0;
+
+                for (let i = 0; i < rateStr.length; i++) {
+                    if (rateStr.charAt(i) !== '.' && rateStr.charAt(i) !== '0') {
+                        firstNonZeroPos = Math.min(i + 4, rateStr.length);
+                        break;
+                    }
+                }
+
+                const trimmedRateStr = rateStr.substring(0, Math.max(6, Math.max(firstNonZeroPos, rateStr.indexOf('.') + 2)));
+                return appendThousandsSeparator(trimmedRateStr);
+            }
+        },
+        showSnackbarMessage(message) {
+            this.showSnackbar = true;
+            this.snackbarMessage = message;
+        }
    }
 }
 </script>