allow set base amount in exchange rate page

src/filters/exchangeRate.js

@@ -1,32 +1,18 @@
-export default function (oldRate, currentCurrency, allExchangeRates) {
+export default function (rate) {
-    const exchangeRateMap = {};
+    const rateStr = rate.toString();
 
-    for (let i = 0; i < allExchangeRates.length; i++) {
+    if (rateStr.indexOf('.') < 0) {
-        const exchangeRate = allExchangeRates[i];
+        return rateStr;
-        exchangeRateMap[exchangeRate.currency] = exchangeRate;
-    }
-
-    const toCurrencyExchangeRate = exchangeRateMap[currentCurrency];
-
-    if (!toCurrencyExchangeRate) {
-        return '';
-    }
-
-    const newRate = parseFloat(oldRate) / parseFloat(toCurrencyExchangeRate.rate);
-    const newRateStr = newRate.toString();
-
-    if (newRateStr.indexOf('.') < 0) {
-        return newRateStr;
     } else {
         let firstNonZeroPos = 0;
 
-        for (let i = 0; i < newRateStr.length; i++) {
+        for (let i = 0; i < rateStr.length; i++) {
-            if (newRateStr.charAt(i) !== '.' && newRateStr.charAt(i) !== '0') {
+            if (rateStr.charAt(i) !== '.' && rateStr.charAt(i) !== '0') {
-                firstNonZeroPos = Math.min(i + 4, newRateStr.length);
+                firstNonZeroPos = Math.min(i + 4, rateStr.length);
                 break;
             }
         }
 
-        return newRateStr.substr(0, Math.max(6, Math.max(firstNonZeroPos, newRateStr.indexOf('.') + 2)));
+        return rateStr.substr(0, Math.max(6, Math.max(firstNonZeroPos, rateStr.indexOf('.') + 2)));
     }
 }

src/lib/utils.js

@@ -508,6 +508,16 @@ function stringCurrencyToNumeric(str) {
     }
 }
 
+function getExchangedAmount(amount, fromRate, toRate) {
+    const exchangeRate = parseFloat(toRate) / parseFloat(fromRate);
+
+    if (!isNumber(exchangeRate)) {
+        return null;
+    }
+
+    return amount * exchangeRate;
+}
+
 function base64encode(arrayBuffer) {
     if (!arrayBuffer || arrayBuffer.length === 0) {
         return null;
@@ -684,6 +694,7 @@ export default {
     appendThousandsSeparator,
     numericCurrencyToString,
     stringCurrencyToNumeric,
+    getExchangedAmount,
     base64encode,
     arrayBufferToString,
     stringToArrayBuffer,

src/locales/en.js

@@ -993,6 +993,8 @@ export default {
     'Are you sure you want to re-login?': 'Are you sure you want to re-login?',
     'Exchange Rates Data': 'Exchange Rates Data',
     'Base Currency': 'Base Currency',
+    'Base Amount': 'Base Amount',
+    'Set As Baseline': 'Set As Baseline',
     'Last Updated': 'Last Updated',
     'Data source': 'Data source',
     'No exchange rates data': 'No exchange rates data',

src/locales/zh_Hans.js

@@ -993,6 +993,8 @@ export default {
     'Are you sure you want to re-login?': '您确定要重新登录？',
     'Exchange Rates Data': '汇率数据',
     'Base Currency': '基准货币',
+    'Base Amount': '基准金额',
+    'Set As Baseline': '设置为基准',
     'Last Updated': '最后更新',
     'Data source': '数据来源',
     'No exchange rates data': '没有汇率数据',

src/store/exchangeRates.js

@@ -81,13 +81,7 @@ export function getExchangedAmount(state) {
             return null;
         }
 
-        const exchangeRate = parseFloat(toCurrencyExchangeRate.rate) / parseFloat(fromCurrencyExchangeRate.rate);
+        return utils.getExchangedAmount(amount, fromCurrencyExchangeRate.rate, toCurrencyExchangeRate.rate)
-
-        if (!utils.isNumber(exchangeRate)) {
-            return null;
-        }
-
-        return amount * exchangeRate;
     };
 }
 

src/views/mobile/ExchangeRates.vue

@@ -4,7 +4,7 @@
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t('Exchange Rates Data')"></f7-nav-title>
             <f7-nav-right>
-                <f7-link :class="{ 'disabled': updating }" :text="$t('Update')" @click="update(null)"></f7-link>
+                <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -12,14 +12,31 @@
             <f7-card-content class="no-safe-areas" :padding="false" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
                 <f7-list>
                     <f7-list-item
-                        :title="$t('Base Currency')"
+                        class="list-item-with-header-and-title list-item-no-item-after"
-                        smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
+                        :header="$t('Base Currency')"
+                        :title="`currency.${baseCurrency}` | localized"
+                        smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Base Currency'), searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
+                    >
                         <select v-model="baseCurrency">
                             <option v-for="exchangeRate in availableExchangeRates"
                                     :key="exchangeRate.currencyCode"
                                     :value="exchangeRate.currencyCode">{{ exchangeRate.currencyDisplayName }}</option>
                         </select>
                     </f7-list-item>
+                    <f7-list-item
+                        class="currency-base-amount"
+                        link="#" no-chevron
+                        :style="{ fontSize: baseAmountFontSize + 'px' }"
+                        :header="$t('Base Amount')"
+                        :title="baseAmount | currency"
+                        @click="showBaseAmountSheet = true"
+                    >
+                        <number-pad-sheet :min-value="$constants.transaction.minAmount"
+                                          :max-value="$constants.transaction.maxAmount"
+                                          :show.sync="showBaseAmountSheet"
+                                          v-model="baseAmount"
+                        ></number-pad-sheet>
+                    </f7-list-item>
                 </f7-list>
             </f7-card-content>
         </f7-card>
@@ -34,7 +51,12 @@
                 <f7-list>
                     <f7-list-item v-for="exchangeRate in availableExchangeRates" :key="exchangeRate.currencyCode"
                                   :title="exchangeRate.currencyDisplayName"
-                                  :after="exchangeRate.rate | exchangeRate(baseCurrency, exchangeRatesData.exchangeRates)"></f7-list-item>
+                                  :after="getConvertedAmount(exchangeRate) | exchangeRate"
+                                  swipeout>
+                        <f7-swipeout-actions right>
+                            <f7-swipeout-button color="primary" close :text="$t('Set As Baseline')" @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))"></f7-swipeout-button>
+                        </f7-swipeout-actions>
+                    </f7-list-item>
                 </f7-list>
             </f7-card-content>
             <f7-card-footer v-if="exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
@@ -47,6 +69,17 @@
                 <span v-else-if="!exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
             </f7-card-footer>
         </f7-card>
+
+        <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>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+            </f7-actions-group>
+        </f7-actions>
     </f7-page>
 </template>
 
@@ -57,13 +90,30 @@ export default {
 
         return {
             baseCurrency: self.$store.getters.currentUserDefaultCurrency,
-            updating: false
+            baseAmount: 100,
+            updating: false,
+            showMoreActionSheet: false,
+            showBaseAmountSheet: false
         };
     },
     computed: {
         exchangeRatesData() {
             return this.$store.state.latestExchangeRates.data;
         },
+        exchangeRateMap() {
+            const exchangeRateMap = {};
+
+            if (!this.exchangeRatesData.exchangeRates) {
+                return exchangeRateMap;
+            }
+
+            for (let i = 0; i < this.exchangeRatesData.exchangeRates.length; i++) {
+                const exchangeRate = this.exchangeRatesData.exchangeRates[i];
+                exchangeRateMap[exchangeRate.currency] = exchangeRate;
+            }
+
+            return exchangeRateMap;
+        },
         availableExchangeRates() {
             if (!this.exchangeRatesData || !this.exchangeRatesData.exchangeRates) {
                 return [];
@@ -86,6 +136,9 @@ export default {
             })
 
             return availableExchangeRates;
+        },
+        baseAmountFontSize() {
+            return this.getFontSizeByAmount(this.baseAmount);
         }
     },
     created() {
@@ -144,7 +197,43 @@ export default {
                     self.$toast(error.message || error);
                 }
             });
+        },
+        getConvertedAmount(toExchangeRate) {
+            const fromExchangeRate = this.exchangeRateMap[this.baseCurrency];
+
+            if (!fromExchangeRate) {
+                return '';
+            }
+
+            return this.$utilities.getExchangedAmount(this.baseAmount / 100, fromExchangeRate.rate, toExchangeRate.rate);
+        },
+        setAsBaseline(currency, amount) {
+            if (!this.$utilities.isNumber(amount)) {
+                amount = '';
+            }
+
+            this.baseCurrency = currency;
+            this.baseAmount = this.$utilities.stringCurrencyToNumeric(amount.toString());
+        },
+        getFontSizeByAmount(amount) {
+            if (amount >= 100000000 || amount <= -100000000) {
+                return 32;
+            } else if (amount >= 1000000 || amount <= -1000000) {
+                return 36;
+            } else {
+                return 40;
+            }
         }
     }
 }
 </script>
+
+<style>
+.currency-base-amount {
+    line-height: 53px;
+}
+
+.currency-base-amount .item-header {
+    padding-top: calc(var(--f7-typography-padding) / 2);
+}
+</style>