Create language labels using standard BC-47 abbreviation codes

app/webroot/js/comanage/components/mvea/mvea-item.js

@@ -24,12 +24,20 @@
  * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  */
 
+import Helpers from '../utils/helpers.js';
+
 export default {
   props: {
     mvea: Object,
     core: Object,
     txt: Object
   },
+  methods: {
+    calcLangHR(lang) {
+      console.log('lang', lang)
+      return Helpers.constructLanguageString(lang)
+    }
+  },
   template: `
     <!-- Names -->
     <li class="field-data-container" v-if="this.core.mveaType == 'names'">
@@ -41,6 +49,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>

app/webroot/js/comanage/components/utils/helpers.js

@@ -0,0 +1,25 @@
+let exports = {};
+
+/**
+ * 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
+ */
+exports.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 default exports;