Translation functionality in Twig templates

package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "bootstrap": "^5.2.3",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vue-i18n": "^9.14.0"
   },
   "devDependencies": {
     "axe-core": "^4.7.1",

resource/js/term-counts.js

@@ -1,51 +1,64 @@
 /* global Vue */
 
-const termCountsApp = Vue.createApp({
-  data () {
-    return {
-      languages: []
-    }
-  },
-  mounted () {
-    fetch('rest/v1/' + window.SKOSMOS.vocab + '/labelStatistics?lang=' + window.SKOSMOS.lang)
-      .then(data => {
-        return data.json()
-      })
-      .then(data => {
-        this.languages = data.languages
-      })
-  },
-  template: `
-    <h3 class="fw-bold py-3">Term counts by language</h3>
-    <table class="table" id="term-stats">
-      <tbody>
-        <tr>
-          <th class="main-table-label fw-bold">Concept language</th>
-          <th class="main-table-label fw-bold">Preferred terms</th>
-          <th class="main-table-label fw-bold">Alternate terms</th>
-          <th class="main-table-label fw-bold">Hidden terms</th>
+import { createI18nInstance } from './translation-service.js';
+
+(async function () {
+
+  try {
+    const i18n = await createI18nInstance(window.SKOSMOS.lang || 'fi', 'term-counts');
+
+    const termCountsApp = Vue.createApp({
+      data() {
+        return {
+          languages: []
+        };
+      },
+      mounted () {
+        fetch('rest/v1/' + window.SKOSMOS.vocab + '/labelStatistics?lang=' + window.SKOSMOS.lang)
+          .then(data => {
+            return data.json()
+          })
+          .then(data => {
+            this.languages = data.languages
+          })
+      },
+      template: `
+        <h3 class="fw-bold py-3">{{ $t('Term counts by language') }}</h3>
+        <table class="table" id="term-stats">
+          <tbody>
+            <tr>
+              <th class="main-table-label fw-bold">{{ $t('Concept language') }}</th>
+              <th class="main-table-label fw-bold">{{ $t('Preferred terms') }}</th>
+              <th class="main-table-label fw-bold">{{ $t('Alternate terms') }}</th>
+              <th class="main-table-label fw-bold">{{ $t('Hidden terms') }}</th>
+            </tr>
+            <template v-if="languages.length">
+              <term-counts :languages="languages"></term-counts>
+            </template>
+            <template v-else >
+              <i class="fa-solid fa-spinner fa-spin-pulse"></i>
+            </template>
+          </tbody>
+        </table>
+      `
+    });
+
+    termCountsApp.component('term-counts', {
+      props: ['languages'],
+      template: `
+        <tr v-for="l in languages" :key="l.literal">
+          <td>{{ l.literal }}</td>
+          <td>{{ l.properties.find(a => a.property === 'skos:prefLabel').labels }}</td>
+          <td>{{ l.properties.find(a => a.property === 'skos:altLabel').labels }}</td>
+          <td>{{ l.properties.find(a => a.property === 'skos:hiddenLabel').labels }}</td>
         </tr>
-        <template v-if="languages.length">
-          <term-counts :languages="languages"></term-counts>
-        </template>
-        <template v-else >
-          <i class="fa-solid fa-spinner fa-spin-pulse"></i>
-        </template>
-      </tbody>
-    </table>
-  `
-})
+      `
+    });
 
-termCountsApp.component('term-counts', {
-  props: ['languages'],
-  template: `
-    <tr v-for="l in languages">
-      <td>{{ l.literal }}</td>
-      <td>{{ l.properties.find(a => a.property === 'skos:prefLabel').labels }}</td>
-      <td>{{ l.properties.find(a => a.property === 'skos:altLabel').labels }}</td>
-      <td>{{ l.properties.find(a => a.property === 'skos:hiddenLabel').labels }}</td>
-    </tr>
-  `
-})
+    termCountsApp.use(i18n);
+    termCountsApp.mount('#term-counts');
 
-termCountsApp.mount('#term-counts')
+  } catch (error) {
+    console.error("Ongelma alustuksessa", error); 
+  }
+})();

resource/js/translation-service.js

@@ -0,0 +1,24 @@
+export async function loadLocaleMessages(locale) {
+    const messages = {};
+    try {
+      const response = await fetch(`http://localhost/skosmos/resource/translations/messages.${locale}.json`);
+      const data = await response.json();
+      console.log(`Haettiin data: ${locale}:`, data);
+      messages[locale] = data;
+    } catch (error) {
+      console.error('käännösten lataamisessa tapahtui virhe:', error);
+    }
+    return messages;
+}
+
+export async function createI18nInstance(locale = 'en', componentName = 'Unknown Component') {
+    const messages = await loadLocaleMessages(locale);
+    const i18n = VueI18n.createI18n({
+      locale: locale,
+      fallbackLocale: 'en', // fallback-kieli
+      messages
+    });
+
+    console.log('Luotiin i18n:', i18n);
+    return i18n;
+}

resource/js/vocab-counts.js

@@ -1,65 +1,68 @@
-/* global Vue */
+import { createI18nInstance } from './translation-service.js';
 
-const resourceCountsApp = Vue.createApp({
-  data () {
-    return {
-      concepts: {},
-      subTypes: {},
-      conceptGroups: {}
-    }
-  },
-  computed: {
-    hasCounts () {
-      return Object.keys(this.concepts).length > 0
-    }
-  },
-  mounted () {
-    fetch('rest/v1/' + window.SKOSMOS.vocab + '/vocabularyStatistics?lang=' + window.SKOSMOS.lang)
-      .then(data => {
-        return data.json()
-      })
-      .then(data => {
-        this.concepts = data.concepts
-        this.subTypes = data.subTypes
-        this.conceptGroups = data.conceptGroups
-      })
-  },
-  template: `
-    <h3 class="fw-bold py-3">Resource counts by type</h3>
-    <table class="table" id="resource-stats">
-      <tbody>
-        <tr><th class="versal">Type</th><th class="versal">Count</th></tr>
+(async function () {
+  const i18n = await createI18nInstance(window.SKOSMOS.lang || 'fi', 'vocab-counts');
+
+  const resourceCountsApp = Vue.createApp({
+    data () {
+      return {
+        concepts: {},
+        subTypes: {},
+        conceptGroups: {}
+      };
+    },
+    computed: {
+      hasCounts () {
+        return Object.keys(this.concepts).length > 0;
+      }
+    },
+    mounted () {
+      fetch('rest/v1/' + window.SKOSMOS.vocab + '/vocabularyStatistics?lang=' + window.SKOSMOS.lang)
+        .then(data => data.json())
+        .then(data => {
+          this.concepts = data.concepts;
+          this.subTypes = data.subTypes;
+          this.conceptGroups = data.conceptGroups;
+        });
+      },
+    template: `
+      <h3 class="fw-bold py-3">{{ $t('Resource counts by type') }}</h3>
+      <table class="table" id="resource-stats">
+        <tbody>
+        <tr><th class="versal">{{ $t('Type') }}</th><th class="versal">{{ $t('Count') }}</th></tr>
         <template v-if="hasCounts">
           <resource-counts :concepts="concepts" :subTypes="subTypes" :conceptGroups="conceptGroups"></resource-counts>
         </template>
         <template v-else >
           <i class="fa-solid fa-spinner fa-spin-pulse"></i>
         </template>
-      </tbody>
-    </table>
-  `
-})
+        </tbody>
+      </table>
+    `
+  });
 
-resourceCountsApp.component('resource-counts', {
-  props: ['concepts', 'subTypes', 'conceptGroups'],
-  template: `
-    <tr>
-      <td>{{ concepts.label }}</td>
-      <td>{{ concepts.count }}</td>
-    </tr>
-    <tr v-for="st in subTypes">
-      <td>* {{ st.label }}</td>
-      <td>{{ st.count }}</td>
-    </tr>
-    <tr>
-      <td>* Käytöstä poistettu käsite</td>
-      <td>{{ concepts.deprecatedCount }}</td>
-    </tr>
-    <tr v-if="conceptGroups">
-      <td>{{ conceptGroups.label }}</td>
-      <td>{{ conceptGroups.count }}</td>
-    </tr>
-  `
-})
+  resourceCountsApp.component('resource-counts', {
+    props: ['concepts', 'subTypes', 'conceptGroups'],
+    template: `
+      <tr>
+        <td>{{ concepts.label }}</td>
+        <td>{{ concepts.count }}</td>
+      </tr>
+      <tr v-for="st in subTypes" :key="st.label">
+        <td>* {{ st.label }}</td>
+        <td>{{ st.count }}</td>
+      </tr>
+      <tr>
+        <td>* Käytöstä poistettu käsite</td>
+        <td>{{ concepts.deprecatedCount }}</td>
+      </tr>
+      <tr v-if="conceptGroups">
+        <td>{{ conceptGroups.label }}</td>
+        <td>{{ conceptGroups.count }}</td>
+      </tr>
+    `
+  });
 
-resourceCountsApp.mount('#resource-counts')
+  resourceCountsApp.use(i18n);
+  resourceCountsApp.mount('#resource-counts');
+})();

src/view/scripts.inc.twig

@@ -86,13 +86,16 @@ window.SKOSMOS = {
 <!-- Vue.js -->
 <script src="node_modules/vue/dist/vue.global.js"></script>
 
+<!-- Vue I18n -->
+<script src="node_modules/vue-i18n/dist/vue-i18n.global.js"></script>
+
 <!-- Helper methods shared by Vue.js components -->
 <script src="resource/js/partial-page-load.js"></script>
 <script src="resource/js/get-concept-url.js"></script>
 
 <!-- Vue.js components -->
-<script src="resource/js/vocab-counts.js"></script>
-<script src="resource/js/term-counts.js"></script>
+<script type="module" src="resource/js/vocab-counts.js"></script>
+<script type="module" src="resource/js/term-counts.js"></script>
 <script src="resource/js/concept-mappings.js"></script>
 <script src="resource/js/tab-alpha.js"></script>
 <script src="resource/js/tab-hierarchy.js"></script>