CO-205_Create_langauge_labels_via_javascript_for_items_with_a_lang_string_definition

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'">
@@ -42,6 +51,7 @@ export default {
       <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 class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+        <span v-if="this.mvea.language" class="mr-1 badge bg-light">{{ calcLangHR(this.mvea.language) }}</span>
       </div>
     </li>
     <!-- Email Addresses -->
@@ -119,4 +129,4 @@ export default {
       </div>
     </li>
   `
-}
+}

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
+}