sort currencies in exchange rates page

src/consts/currency.js

@@ -1250,6 +1250,29 @@ const defaultCurrency = allCurrencies.USD.code;
 const defaultCurrencyDisplayType = allCurrencyDisplayType.SymbolBeforeAmount;
 const defaultCurrencyDisplayTypeValue = 0;
 
+const allCurrencySortingTypes = {
+    Name: {
+        type: 0,
+        name: 'Currency Name'
+    },
+    CurrencyCode: {
+        type: 1,
+        name: 'Currency Code'
+    },
+    ExchangeRate: {
+        type: 2,
+        name: 'Exchange Rate'
+    }
+};
+
+const allCurrencySortingTypesArray = [
+    allCurrencySortingTypes.Name,
+    allCurrencySortingTypes.CurrencyCode,
+    allCurrencySortingTypes.ExchangeRate
+]
+
+const defaultCurrencySortingType = allCurrencySortingTypes.Name.type;
+
 export default {
     parentAccountCurrencyPlaceholder: parentAccountCurrencyPlaceholder,
     defaultCurrencySymbol: defaultCurrencySymbol,
@@ -1261,5 +1284,8 @@ export default {
     allCurrencyDisplayTypeArray: allCurrencyDisplayTypeArray,
     allCurrencyDisplayTypeMap: allCurrencyDisplayTypeMap,
     defaultCurrencyDisplayType: defaultCurrencyDisplayType,
-    defaultCurrencyDisplayTypeValue: defaultCurrencyDisplayTypeValue
+    defaultCurrencyDisplayTypeValue: defaultCurrencyDisplayTypeValue,
+    allCurrencySortingTypes: allCurrencySortingTypes,
+    allCurrencySortingTypesArray: allCurrencySortingTypesArray,
+    defaultCurrencySortingType: defaultCurrencySortingType
 };

src/lib/i18n.js

@@ -872,6 +872,25 @@ function getAllCurrencyDisplayTypes(userStore, settingsStore, translateFn) {
     return ret;
 }
 
+function getAllCurrencySortingTypes(translateFn) {
+    const allCurrencySortingTypes = [];
+
+    for (const sortingTypeField in currencyConstants.allCurrencySortingTypes) {
+        if (!Object.prototype.hasOwnProperty.call(currencyConstants.allCurrencySortingTypes, sortingTypeField)) {
+            continue;
+        }
+
+        const sortingType = currencyConstants.allCurrencySortingTypes[sortingTypeField];
+
+        allCurrencySortingTypes.push({
+            type: sortingType.type,
+            displayName: translateFn(sortingType.name)
+        });
+    }
+
+    return allCurrencySortingTypes;
+}
+
 function getCurrentDecimalSeparator(translateFn, decimalSeparator) {
     let decimalSeparatorType = numeralConstants.allDecimalSeparatorMap[decimalSeparator];
 
@@ -1265,7 +1284,7 @@ function getAllTransactionDefaultCategories(categoryType, locale, translateFn) {
     return allCategories;
 }
 
-function getAllDisplayExchangeRates(exchangeRatesData, translateFn) {
+function getAllDisplayExchangeRates(settingsStore, exchangeRatesData, translateFn) {
     if (!exchangeRatesData || !exchangeRatesData.exchangeRates) {
         return [];
     }
@@ -1282,9 +1301,28 @@ function getAllDisplayExchangeRates(exchangeRatesData, translateFn) {
         });
     }
 
-    availableExchangeRates.sort(function(c1, c2) {
+    if (settingsStore.appSettings.currencySortByInExchangeRatesPage === currencyConstants.allCurrencySortingTypes.Name.type) {
-        return c1.currencyDisplayName.localeCompare(c2.currencyDisplayName);
+        availableExchangeRates.sort(function(c1, c2) {
-    })
+            return c1.currencyDisplayName.localeCompare(c2.currencyDisplayName);
+        });
+    } else if (settingsStore.appSettings.currencySortByInExchangeRatesPage === currencyConstants.allCurrencySortingTypes.CurrencyCode.type) {
+        availableExchangeRates.sort(function(c1, c2) {
+            return c1.currencyCode.localeCompare(c2.currencyCode);
+        });
+    } else if (settingsStore.appSettings.currencySortByInExchangeRatesPage === currencyConstants.allCurrencySortingTypes.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;
 }
@@ -1695,6 +1733,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllDigitGroupingSymbols: () => getAllDigitGroupingSymbols(i18nGlobal.t),
         getAllDigitGroupingTypes: () => getAllDigitGroupingTypes(i18nGlobal.t),
         getAllCurrencyDisplayTypes: (settingsStore, userStore) => getAllCurrencyDisplayTypes(userStore, settingsStore, i18nGlobal.t),
+        getAllCurrencySortingTypes: () => getAllCurrencySortingTypes(i18nGlobal.t),
         getCurrentDecimalSeparator: (userStore) => getCurrentDecimalSeparator(i18nGlobal.t, userStore.currentUserDecimalSeparator),
         getCurrentDigitGroupingSymbol: (userStore) => getCurrentDigitGroupingSymbol(i18nGlobal.t, userStore.currentUserDigitGroupingSymbol),
         getCurrentDigitGroupingType: (userStore) => getCurrentDigitGroupingType(i18nGlobal.t, userStore.currentUserDigitGrouping),
@@ -1717,7 +1756,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllTransactionEditScopeTypes: () => getAllTransactionEditScopeTypes(i18nGlobal.t),
         getAllTransactionScheduledFrequencyTypes: () => getAllTransactionScheduledFrequencyTypes(i18nGlobal.t),
         getAllTransactionDefaultCategories: (categoryType, locale) => getAllTransactionDefaultCategories(categoryType, locale, i18nGlobal.t),
-        getAllDisplayExchangeRates: (exchangeRatesData) => getAllDisplayExchangeRates(exchangeRatesData, i18nGlobal.t),
+        getAllDisplayExchangeRates: (settingsStore, exchangeRatesData) => getAllDisplayExchangeRates(settingsStore, exchangeRatesData, i18nGlobal.t),
         getAllSupportedImportFileTypes: () => getAllSupportedImportFileTypes(i18nGlobal, i18nGlobal.t),
         getEnableDisableOptions: () => getEnableDisableOptions(i18nGlobal.t),
         getCategorizedAccountsWithDisplayBalance: (allVisibleAccounts, showAccountBalance, defaultCurrency, settingsStore, userStore, exchangeRatesStore) => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts, showAccountBalance, defaultCurrency, userStore, settingsStore, exchangeRatesStore, i18nGlobal.t),

src/lib/settings.js

@@ -1,4 +1,5 @@
 import timezoneConstants from '@/consts/timezone.js';
+import currencyConstants from '@/consts/currency.js';
 import statisticsConstants from '@/consts/statistics.js';
 
 const settingsLocalStorageKey = 'ebk_app_settings';
@@ -19,6 +20,7 @@ const defaultSettings = {
     showTotalAmountInTransactionListPage: true,
     showTagInTransactionListPage: true,
     showAccountBalance: true,
+    currencySortByInExchangeRatesPage: currencyConstants.defaultCurrencySortingType,
     statistics: {
         defaultChartDataType: statisticsConstants.defaultChartDataType,
         defaultTimezoneType: timezoneConstants.defaultTimezoneTypesUsedForStatistics,
@@ -222,6 +224,14 @@ export function setShowAccountBalance(value) {
     setOption('showAccountBalance', value);
 }
 
+export function getCurrencySortByInExchangeRatesPage() {
+    return getOption('currencySortByInExchangeRatesPage');
+}
+
+export function setCurrencySortByInExchangeRatesPage(value) {
+    setOption('currencySortByInExchangeRatesPage', value);
+}
+
 export function getStatisticsDefaultChartDataType() {
     return getSubOption('statistics', 'defaultChartDataType');
 }

src/locales/en.json

@@ -1681,6 +1681,8 @@
     "Automatically Save Draft": "Automatically Save Draft",
     "Show Confirmation Every Time": "Show Confirmation Every Time",
     "Automatically Add Geolocation": "Automatically Add Geolocation",
+    "Exchange Rates Data Page": "Exchange Rates Data Page",
+    "Exchange Rate": "Exchange Rate",
     "Enable Animation": "Enable Animation",
     "Basic Information": "Basic Information",
     "User Information": "User Information",

src/locales/zh_Hans.json

@@ -1681,6 +1681,8 @@
     "Automatically Save Draft": "自动保存草稿",
     "Show Confirmation Every Time": "每次提示确认",
     "Automatically Add Geolocation": "自动添加地理位置",
+    "Exchange Rates Data Page": "汇率数据页面",
+    "Exchange Rate": "汇率",
     "Enable Animation": "启用动画",
     "Basic Information": "基本信息",
     "User Information": "用户信息",

src/stores/setting.js

@@ -21,6 +21,7 @@ export const useSettingsStore = defineStore('settings', {
             showTotalAmountInTransactionListPage: settings.isShowTotalAmountInTransactionListPage(),
             showTagInTransactionListPage: settings.isShowTagInTransactionListPage(),
             showAccountBalance: settings.isShowAccountBalance(),
+            currencySortByInExchangeRatesPage: settings.getCurrencySortByInExchangeRatesPage(),
             statistics: {
                 defaultChartDataType: settings.getStatisticsDefaultChartDataType(),
                 defaultTimezoneType: settings.getStatisticsDefaultTimezoneType(),
@@ -96,6 +97,10 @@ export const useSettingsStore = defineStore('settings', {
             settings.setShowAccountBalance(value);
             this.appSettings.showAccountBalance = value;
         },
+        setCurrencySortByInExchangeRatesPage(value) {
+            settings.setCurrencySortByInExchangeRatesPage(value);
+            this.appSettings.currencySortByInExchangeRatesPage = value;
+        },
         setStatisticsDefaultChartDataType(value) {
             settings.setStatisticsDefaultChartDataType(value);
             this.appSettings.statistics.defaultChartDataType = value;

src/views/desktop/ExchangeRatesPage.vue

@@ -176,7 +176,7 @@ export default {
             return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
         },
         availableExchangeRates() {
-            return this.$locale.getAllDisplayExchangeRates(this.exchangeRatesData);
+            return this.$locale.getAllDisplayExchangeRates(this.settingsStore, this.exchangeRatesData);
         }
     },
     created() {

src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue

@@ -177,6 +177,28 @@
                 </v-form>
             </v-card>
         </v-col>
+
+        <v-col cols="12">
+            <v-card :title="$t('Exchange Rates Data Page')">
+                <v-form>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :label="$t('Sort by')"
+                                    :placeholder="$t('Sort by')"
+                                    :items="allCurrencySortingTypes"
+                                    v-model="currencySortByInExchangeRatesPage"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
     </v-row>
 </template>
 
@@ -206,6 +228,9 @@ export default {
         allTimezoneTypesUsedForStatistics() {
             return this.$locale.getAllTimezoneTypesUsedForStatistics(this.timeZone);
         },
+        allCurrencySortingTypes() {
+            return this.$locale.getAllCurrencySortingTypes();
+        },
         theme: {
             get: function () {
                 return this.settingsStore.appSettings.theme;
@@ -310,6 +335,14 @@ export default {
             set: function (value) {
                 this.settingsStore.setAutoGetCurrentGeoLocation(value);
             }
+        },
+        currencySortByInExchangeRatesPage: {
+            get: function () {
+                return this.settingsStore.appSettings.currencySortByInExchangeRatesPage;
+            },
+            set: function (value) {
+                this.settingsStore.setCurrencySortByInExchangeRatesPage(value);
+            }
         }
     },
     setup() {

src/views/mobile/ExchangeRatesPage.vue

@@ -120,7 +120,7 @@ export default {
             return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
         },
         availableExchangeRates() {
-            return this.$locale.getAllDisplayExchangeRates(this.exchangeRatesData);
+            return this.$locale.getAllDisplayExchangeRates(this.settingsStore, this.exchangeRatesData);
         },
         displayBaseAmount() {
             return this.$locale.formatAmount(this.userStore, this.baseAmount);

src/views/mobile/settings/PageSettingsPage.vue

@@ -48,6 +48,19 @@
                 <f7-toggle :checked="isAutoGetCurrentGeoLocation" @toggle:change="isAutoGetCurrentGeoLocation = $event"></f7-toggle>
             </f7-list-item>
         </f7-list>
+
+        <f7-block-title>{{ $t('Exchange Rates Data Page') }}</f7-block-title>
+        <f7-list strong inset dividers>
+            <f7-list-item
+                :title="$t('Sort by')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Sort by'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                <select v-model="currencySortByInExchangeRatesPage">
+                    <option :value="sortingType.type"
+                            :key="sortingType.type"
+                            v-for="sortingType in allCurrencySortingTypes">{{ sortingType.displayName }}</option>
+                </select>
+            </f7-list-item>
+        </f7-list>
     </f7-page>
 </template>
 
@@ -63,6 +76,9 @@ export default {
         allTimezoneTypesUsedForStatistics() {
             return this.$locale.getAllTimezoneTypesUsedForStatistics();
         },
+        allCurrencySortingTypes() {
+            return this.$locale.getAllCurrencySortingTypes();
+        },
         showAmountInHomePage: {
             get: function () {
                 return this.settingsStore.appSettings.showAmountInHomePage;
@@ -115,6 +131,14 @@ export default {
             set: function (value) {
                 this.settingsStore.setAutoGetCurrentGeoLocation(value);
             }
+        },
+        currencySortByInExchangeRatesPage: {
+            get: function () {
+                return this.settingsStore.appSettings.currencySortByInExchangeRatesPage;
+            },
+            set: function (value) {
+                this.settingsStore.setCurrencySortByInExchangeRatesPage(value);
+            }
         }
     }
 };