From 057a97a05dae9312f6ff0ab5666dd4b112737f41 Mon Sep 17 00:00:00 2001
From: Ioannis Igoumenos <ioigoume@admin.grnet.gr>
Date: Thu, 9 Feb 2023 20:26:54 +0200
Subject: [PATCH] Create language labels using standard BC-47 abbreviation
 codes

---
 .../js/comanage/components/mvea/mvea-item.js  | 10 ++++++++
 .../js/comanage/components/utils/helpers.js   | 23 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 app/webroot/js/comanage/components/utils/helpers.js

diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
index 053c920ec..e59e6653f 100644
--- a/app/webroot/js/comanage/components/mvea/mvea-item.js
+++ b/app/webroot/js/comanage/components/mvea/mvea-item.js
@@ -24,12 +24,21 @@
  * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  */
 
+import {
+  constructLanguageString
+} from '../utils/helpers.js';
+
 export default {
   props: {
     mvea: Object,
     core: Object,
     txt: Object
   },
+  methods: {
+    calcLangHR(lang) {
+      return constructLanguageString(lang)
+    }
+  },
   template: `
     <!-- Names -->
     <li class="field-data-container" v-if="this.core.mveaType == 'names'">
@@ -41,6 +50,7 @@ export default {
       </div>
       <div class="field-data data-label">
         <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt.primary }}</span>
+        <span v-if="this.mvea.language" class="mr-1 badge bg-light">{{ calcLangHR(this.mvea.language) }}</span>
         <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
       </div>
     </li>
diff --git a/app/webroot/js/comanage/components/utils/helpers.js b/app/webroot/js/comanage/components/utils/helpers.js
new file mode 100644
index 000000000..166cf1c1a
--- /dev/null
+++ b/app/webroot/js/comanage/components/utils/helpers.js
@@ -0,0 +1,23 @@
+/**
+ * Construct human-readable string from language abbreviation code
+ * BC-47 language tags (https://en.wikipedia.org/wiki/IETF_language_tag)
+ * @param abbreviation   {string} Language Abbreviation
+ */
+const constructLanguageString = (abbreviation) => {
+  const regionNameEngish = new Intl.DisplayNames(
+    ['en'], {type: 'language'}
+  );
+  const regionNameLocale = new Intl.DisplayNames(
+    [abbreviation], {type: 'language'}
+  );
+
+  if(regionNameEngish.of(abbreviation) === regionNameLocale.of(abbreviation)) {
+    return regionNameEngish.of(abbreviation);
+  }
+
+  return `${regionNameEngish.of(abbreviation)} (${regionNameLocale.of(abbreviation)})`;
+}
+
+export {
+  constructLanguageString
+}
\ No newline at end of file