diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
index 053c920ec..5c4d8ee6d 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: `
@@ -42,6 +51,7 @@ export default {
{{ this.txt.primary }}
type: {{ this.mvea.type_id }}
+ {{ calcLangHR(this.mvea.language) }}
@@ -119,4 +129,4 @@ export default {
`
-}
\ No newline at end of file
+}
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