From 011020a945ac0c197b9d7134cb719a81f2579905 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 7 Oct 2024 19:58:58 +0800
Subject: [PATCH] show language name in current language

---
 src/lib/i18n.js                                     | 13 +++++++------
 src/locales/en.json                                 |  4 ++++
 src/locales/zh_Hans.json                            |  4 ++++
 src/views/desktop/ForgetPasswordPage.vue            |  6 +++---
 src/views/desktop/LoginPage.vue                     |  6 +++---
 src/views/desktop/ResetPasswordPage.vue             |  6 +++---
 src/views/desktop/UnlockPage.vue                    |  6 +++---
 src/views/desktop/VerifyEmailPage.vue               |  6 +++---
 .../categories/list/dialogs/PresetDialog.vue        |  6 +++---
 src/views/mobile/LoginPage.vue                      | 10 +++++-----
 src/views/mobile/SignupPage.vue                     | 11 ++++++-----
 src/views/mobile/UnlockPage.vue                     | 10 +++++-----
 src/views/mobile/categories/PresetPage.vue          |  5 +++--
 13 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index c934555e..a06b7e0e 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -62,10 +62,6 @@ import {
 import logger from './logger.js';
 import services from './services.js';
 
-function getAllLanguageInfos() {
-    return allLanguages;
-}
-
 function getAllLanguageInfoArray(translateFn, includeSystemDefault) {
     const ret = [];
 
@@ -75,10 +71,16 @@ function getAllLanguageInfoArray(translateFn, includeSystemDefault) {
         }
 
         const languageInfo = allLanguages[languageTag];
+        let displayName = languageInfo.displayName;
+        let languageNameInCurrentLanguage = translateFn(`language.${languageInfo.name}`);
+
+        if (languageNameInCurrentLanguage && languageNameInCurrentLanguage !== displayName) {
+            displayName = `${languageNameInCurrentLanguage} (${displayName})`;
+        }
 
         ret.push({
             languageTag: languageTag,
-            displayName: languageInfo.displayName
+            displayName: displayName
         });
     }
 
@@ -1537,7 +1539,6 @@ export function translateError(message, translateFn) {
 
 export function i18nFunctions(i18nGlobal) {
     return {
-        getAllLanguageInfos: getAllLanguageInfos,
         getAllLanguageInfoArray: (includeSystemDefault) => getAllLanguageInfoArray(i18nGlobal.t, includeSystemDefault),
         getLanguageInfo: getLanguageInfo,
         getDefaultLanguage: getDefaultLanguage,
diff --git a/src/locales/en.json b/src/locales/en.json
index 1f0ea8ea..67fcbb70 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4,6 +4,10 @@
             "title": "ezBookkeeping"
         }
     },
+    "language": {
+        "English": "English",
+        "Simplified Chinese": "Simplified Chinese"
+    },
     "default": {
         "currency": "USD",
         "firstDayOfWeek": "Sunday",
diff --git a/src/locales/zh_Hans.json b/src/locales/zh_Hans.json
index 64796537..c511df7e 100644
--- a/src/locales/zh_Hans.json
+++ b/src/locales/zh_Hans.json
@@ -4,6 +4,10 @@
             "title": "ezBookkeeping"
         }
     },
+    "language": {
+        "English": "英语",
+        "Simplified Chinese": "简体中文"
+    },
     "default": {
         "currency": "CNY",
         "firstDayOfWeek": "Monday",
diff --git a/src/views/desktop/ForgetPasswordPage.vue b/src/views/desktop/ForgetPasswordPage.vue
index b7c7f936..a72ac299 100644
--- a/src/views/desktop/ForgetPasswordPage.vue
+++ b/src/views/desktop/ForgetPasswordPage.vue
@@ -74,10 +74,10 @@
                                                    v-bind="props">{{ currentLanguageName }}</v-btn>
                                         </template>
                                         <v-list>
-                                            <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
+                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
                                                 <v-list-item-title
                                                     class="cursor-pointer"
-                                                    @click="changeLanguage(locale)">
+                                                    @click="changeLanguage(lang.languageTag)">
                                                     {{ lang.displayName }}
                                                 </v-list-item-title>
                                             </v-list-item>
@@ -137,7 +137,7 @@ export default {
             return 'v' + this.$version;
         },
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         isDarkMode() {
             return this.globalTheme.global.name.value === 'dark';
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index 973eb886..7824fcef 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -135,10 +135,10 @@
                                                    v-bind="props">{{ currentLanguageName }}</v-btn>
                                         </template>
                                         <v-list>
-                                            <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
+                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
                                                 <v-list-item-title
                                                     class="cursor-pointer"
-                                                    @click="changeLanguage(locale)">
+                                                    @click="changeLanguage(lang.languageTag)">
                                                     {{ lang.displayName }}
                                                 </v-list-item-title>
                                             </v-list-item>
@@ -216,7 +216,7 @@ export default {
             return 'v' + this.$version;
         },
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         isUserRegistrationEnabled() {
             return isUserRegistrationEnabled();
diff --git a/src/views/desktop/ResetPasswordPage.vue b/src/views/desktop/ResetPasswordPage.vue
index 51c266a0..89b89c95 100644
--- a/src/views/desktop/ResetPasswordPage.vue
+++ b/src/views/desktop/ResetPasswordPage.vue
@@ -99,10 +99,10 @@
                                                    v-bind="props">{{ currentLanguageName }}</v-btn>
                                         </template>
                                         <v-list>
-                                            <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
+                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
                                                 <v-list-item-title
                                                     class="cursor-pointer"
-                                                    @click="changeLanguage(locale)">
+                                                    @click="changeLanguage(lang.languageTag)">
                                                     {{ lang.displayName }}
                                                 </v-list-item-title>
                                             </v-list-item>
@@ -183,7 +183,7 @@ export default {
             return 'v' + this.$version;
         },
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         isDarkMode() {
             return this.globalTheme.global.name.value === 'dark';
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index 6a627954..a6a4aaf8 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -75,10 +75,10 @@
                                                    v-bind="props">{{ currentLanguageName }}</v-btn>
                                         </template>
                                         <v-list>
-                                            <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
+                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
                                                 <v-list-item-title
                                                     class="cursor-pointer"
-                                                    @click="changeLanguage(locale)">
+                                                    @click="changeLanguage(lang.languageTag)">
                                                     {{ lang.displayName }}
                                                 </v-list-item-title>
                                             </v-list-item>
@@ -138,7 +138,7 @@ export default {
             return 'v' + this.$version;
         },
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         isWebAuthnAvailable() {
             return this.settingsStore.appSettings.applicationLockWebAuthn
diff --git a/src/views/desktop/VerifyEmailPage.vue b/src/views/desktop/VerifyEmailPage.vue
index b4ffbfc5..a41fa173 100644
--- a/src/views/desktop/VerifyEmailPage.vue
+++ b/src/views/desktop/VerifyEmailPage.vue
@@ -78,10 +78,10 @@
                                                    v-bind="props">{{ currentLanguageName }}</v-btn>
                                         </template>
                                         <v-list>
-                                            <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
+                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
                                                 <v-list-item-title
                                                     class="cursor-pointer"
-                                                    @click="changeLanguage(locale)">
+                                                    @click="changeLanguage(lang.languageTag)">
                                                     {{ lang.displayName }}
                                                 </v-list-item-title>
                                             </v-list-item>
@@ -150,7 +150,7 @@ export default {
             return 'v' + this.$version;
         },
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         isDarkMode() {
             return this.globalTheme.global.name.value === 'dark';
diff --git a/src/views/desktop/categories/list/dialogs/PresetDialog.vue b/src/views/desktop/categories/list/dialogs/PresetDialog.vue
index fed91ccf..55cbe38c 100644
--- a/src/views/desktop/categories/list/dialogs/PresetDialog.vue
+++ b/src/views/desktop/categories/list/dialogs/PresetDialog.vue
@@ -17,8 +17,8 @@
                                        v-bind="props">{{ currentLanguageName }}</v-btn>
                             </template>
                             <v-list>
-                                <v-list-item :key="locale" :value="locale" v-for="(lang, locale) in allLanguages">
-                                    <v-list-item-title class="cursor-pointer" @click="currentLocale = locale">
+                                <v-list-item :key="lang.languageTag" :value="lang.languageTag" v-for="lang in allLanguages">
+                                    <v-list-item-title class="cursor-pointer" @click="currentLocale = lang.languageTag">
                                         {{ lang.displayName }}
                                     </v-list-item-title>
                                 </v-list-item>
@@ -110,7 +110,7 @@ export default {
             }
         },
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         allPresetCategories() {
             return this.$locale.getAllTransactionDefaultCategories(this.categoryType, this.currentLocale);
diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
index 5ea47f67..46157180 100644
--- a/src/views/mobile/LoginPage.vue
+++ b/src/views/mobile/LoginPage.vue
@@ -77,12 +77,12 @@
                 <f7-list-item
                     link="#" no-chevron popover-close
                     :title="lang.displayName"
-                    :key="locale"
-                    v-for="(lang, locale) in allLanguages"
-                    @click="changeLanguage(locale)"
+                    :key="lang.languageTag"
+                    v-for="lang in allLanguages"
+                    @click="changeLanguage(lang.languageTag)"
                 >
                     <template #after>
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === locale"></f7-icon>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === lang.languageTag"></f7-icon>
                     </template>
                 </f7-list-item>
             </f7-list>
@@ -231,7 +231,7 @@ export default {
             return getDesktopVersionPath();
         },
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         isUserRegistrationEnabled() {
             return isUserRegistrationEnabled();
diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue
index fc0afc19..93bebee7 100644
--- a/src/views/mobile/SignupPage.vue
+++ b/src/views/mobile/SignupPage.vue
@@ -66,9 +66,9 @@
                 smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Language'), popupCloseLinkText: $t('Done') }"
             >
                 <select v-model="currentLocale">
-                    <option :value="languageTag"
-                            :key="languageTag"
-                            v-for="(lang, languageTag) in allLanguages">{{ lang.displayName }}</option>
+                    <option :value="lang.languageTag"
+                            :key="lang.languageTag"
+                            v-for="lang in allLanguages">{{ lang.displayName }}</option>
                 </select>
             </f7-list-item>
 
@@ -163,7 +163,8 @@
                 </f7-actions-group>
             </f7-actions>
 
-            <list-item-selection-sheet value-type="index"
+            <list-item-selection-sheet value-type="item"
+                                       value-field="languageTag"
                                        title-field="displayName"
                                        :items="allLanguages"
                                        v-model:show="showPresetCategoriesChangeLocaleSheet"
@@ -205,7 +206,7 @@ export default {
     computed: {
         ...mapStores(useRootStore, useSettingsStore, useTransactionCategoriesStore, useExchangeRatesStore),
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         allCurrencies() {
             return this.$locale.getAllCurrencies();
diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
index 820cb947..1401c4ed 100644
--- a/src/views/mobile/UnlockPage.vue
+++ b/src/views/mobile/UnlockPage.vue
@@ -51,12 +51,12 @@
                 <f7-list-item
                     link="#" no-chevron popover-close
                     :title="lang.displayName"
-                    :key="locale"
-                    v-for="(lang, locale) in allLanguages"
-                    @click="changeLanguage(locale)"
+                    :key="lang.languageTag"
+                    v-for="lang in allLanguages"
+                    @click="changeLanguage(lang.languageTag)"
                 >
                     <template #after>
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === locale"></f7-icon>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === lang.languageTag"></f7-icon>
                     </template>
                 </f7-list-item>
             </f7-list>
@@ -97,7 +97,7 @@ export default {
             return 'v' + this.$version;
         },
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         isWebAuthnAvailable() {
             return this.settingsStore.appSettings.applicationLockWebAuthn
diff --git a/src/views/mobile/categories/PresetPage.vue b/src/views/mobile/categories/PresetPage.vue
index e213570a..9039ec4a 100644
--- a/src/views/mobile/categories/PresetPage.vue
+++ b/src/views/mobile/categories/PresetPage.vue
@@ -45,7 +45,8 @@
             </f7-actions-group>
         </f7-actions>
 
-        <list-item-selection-sheet value-type="index"
+        <list-item-selection-sheet value-type="item"
+                                   value-field="languageTag"
                                    title-field="displayName"
                                    :items="allLanguages"
                                    v-model:show="showChangeLocaleSheet"
@@ -81,7 +82,7 @@ export default {
     computed: {
         ...mapStores(useTransactionCategoriesStore),
         allLanguages() {
-            return this.$locale.getAllLanguageInfos();
+            return this.$locale.getAllLanguageInfoArray(false);
         },
         allPresetCategories() {
             return this.$locale.getAllTransactionDefaultCategories(this.categoryType, this.currentLocale);