add handy languagesList function to get all languages for translation of side apps

Author: ivictbor

adminforth/documentation/docs/tutorial/05-Plugins/10-i18n.md

@@ -536,3 +536,35 @@ app.get(`${ADMIN_BASE_URL}/api/translations/`,
 );
 ```
 
+### Get language names
+
+Also you can use handy method to get language names in native and English form with emoji flags:
+
+
+```typescript title="./api.ts"
+const languages = await admin.getPluginByClassName<I18nPlugin>('I18nPlugin').languagesList();
+```
+
+Response will look like this:
+
+```
+  "languages": [
+        {
+            "code": "en",
+            "nameOnNative": "English",
+            "nameEnglish": "English",
+            "emojiFlag": "🇪🇳"
+        },
+        {
+            "code": "uk",
+            "nameOnNative": "Українська",
+            "nameEnglish": "Ukrainian",
+            "emojiFlag": "🇺🇰"
+        },
+        {
+            "code": "ar",
+            "nameOnNative": "العربية",
+            "nameEnglish": "Arabic",
+            "emojiFlag": "🇦🇷"
+        },
+```

adminforth/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.5.12-next.1",
+  "version": "1.5.12-next.2",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",

adminforth/package.json

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - support for pluralization in Backend `tr` function
+- add handy languagesList function to get all languages for translation of side apps
 
 ## [1.0.22]
 

adminforth/plugins/i18n/Changelog.md

@@ -796,6 +796,22 @@ JSON.stringify(strings.reduce((acc: object, s: { en_string: string }): object =>
     return translations;
   }
 
+  async languagesList(): Promise<{
+    code: LanguageCode;
+    nameOnNative: string;
+    nameEnglish: string;
+    emojiFlag: string;
+  }[]> {
+    return this.options.supportedLanguages.map((lang) => {
+      return {
+        code: lang as LanguageCode,
+        nameOnNative: iso6391.getNativeName(lang),
+        nameEnglish: iso6391.getName(lang),
+        emojiFlag: lang.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397)),
+      };
+    });
+  }
+
   async feedCategoryTranslations(messages: {
     en_string: string;
     source: string;

adminforth/plugins/i18n/index.ts

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/i18n",
-  "version": "1.0.23-next.1",
+  "version": "1.0.23-next.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",

adminforth/plugins/i18n/package-lock.json

@@ -4,7 +4,7 @@
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
       <div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data" >
         <div>
-          <h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">{{ data.totalApartsString }}</h5>
+          <h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">{{ $t('Apartments') }}</h5>
           <p class="text-base font-normal text-gray-500 dark:text-gray-400">{{  $t('Apartment last 7 days | Apartments last 7 days', data.totalAparts) }}</p>
         </div>
         <BarChart
@@ -160,7 +160,7 @@
 
     </div>
 
-      <div class="flex justify-center items-center p-80 bg-white">
+      <!-- <div class="flex justify-center items-center p-80 bg-white">
         <div class="border border-indigo-600 p-5 w-80 h-80 min-w-80 min-h-80 flex items-center flex-col">
           <Select
   class="w-full"
@@ -204,7 +204,7 @@
   </template>
 </Select>
         </div>
-      </div>
+      </div> -->
   </div>
 </template>
 

adminforth/plugins/i18n/package.json

@@ -100,7 +100,7 @@ export const admin = new AdminForth({
     customComponentsDir: './custom',
     globalInjections: {
       userMenu: '@@/login2.vue',
-      header: '@@/PropertyCost.vue',
+      // header: '@@/PropertyCost.vue',
     },
     customPages:[{
       path : '/login2',
@@ -407,6 +407,8 @@ app.get(`${ADMIN_BASE_URL}/api/dashboard/`,
           totalListedPrice,
           totalUnlistedPrice,
           listedVsUnlistedPriceByDays,
+
+          languages: await admin.getPluginByClassName<I18nPlugin>('I18nPlugin').languagesList()
         });
       }
     )