diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
index 053c920ec..eea10db11 100644
--- a/app/webroot/js/comanage/components/mvea/mvea-item.js
+++ b/app/webroot/js/comanage/components/mvea/mvea-item.js
@@ -24,12 +24,19 @@
* @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) {
+ return Helpers.constructLanguageString(lang)
+ }
+ },
template: `
@@ -41,6 +48,7 @@ export default {
{{ this.txt.primary }}
+ {{ calcLangHR(this.mvea.language) }}
type: {{ this.mvea.type_id }}
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..bb88e3c10
--- /dev/null
+++ b/app/webroot/js/comanage/components/utils/helpers.js
@@ -0,0 +1,23 @@
+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;
\ No newline at end of file