Translation functionality in Twig templates (#1690)

* The first version of translation functionality in Twig templates, where translations are visible in the browser and the translation is read at the correct point in the code

* Edited the code slightly to align it more with StandardJS

* Removed the unnecessary language array from use

* This is a model, an example where a separate translation service component is used, which is then imported into the components where translations are needed. In such an implementation, Vue components must be called as modules

* Updated the implementation to utilize global functions following what agreed on in the design review. Also made some minor refactorings related to the translations themselves, as they take part in the translation functionalities, plus a few other small adjustments. However, the primary changes involve significant structural modifications related to call methods, wrappings, and timing

* Post design review situation + cleaned up unnecessary comments and made a few other small adjustments

* Unnecessary package removed

* Convert absolute path to relative

* Style fixes done

* fixed some standardjs errors

* Some minor changes related to script tags and standardjs commands

* Modified the tests related to the tables and count on the vocab page

* Semi-colons removed

resource/js/term-counts.js

@@ -1,51 +1,80 @@
-/* global Vue */
+/* global Vue, $t */
 
-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>
+function startTermCountsApp () {
+  const termCountsApp = Vue.createApp({
+    data () {
+      return {
+        languages: []
+      }
+    },
+    computed: {
+      termCountsTitle () {
+        return $t('Term counts by language')
+      },
+      conceptLanguageLabel () {
+        return $t('Concept language')
+      },
+      preferredTermsLabel () {
+        return $t('Preferred terms')
+      },
+      alternateTermsLabel () {
+        return $t('Alternate terms')
+      },
+      hiddenTermsLabel () {
+        return $t('Hidden terms')
+      }
+    },
+    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">{{ termCountsTitle }}</h3>
+        <table class="table" id="term-stats">
+          <tbody>
+            <tr>
+              <th class="main-table-label fw-bold">{{ conceptLanguageLabel }}</th>
+              <th class="main-table-label fw-bold">{{ preferredTermsLabel }}</th>
+              <th class="main-table-label fw-bold">{{ alternateTermsLabel }}</th>
+              <th class="main-table-label fw-bold">{{ hiddenTermsLabel }}</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.mount('#term-counts')
+}
 
-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>
-  `
-})
+function waitForTermTranslationService () {
+  if (typeof $t !== 'undefined') {
+    startTermCountsApp()
+  } else {
+    setTimeout(waitForTermTranslationService, 50)
+  }
+}
 
-termCountsApp.mount('#term-counts')
+waitForTermTranslationService()

resource/js/translation-service.js

@@ -0,0 +1,26 @@
+/* global $t:writable */
+/* exported $t */
+
+(async function () {
+  async function loadLocaleMessages (locale) {
+    const messages = {}
+    try {
+      const response = await fetch(`resource/translations/messages.${locale}.json`)
+      const data = await response.json()
+      messages[locale] = data
+    } catch (error) {
+      console.error('Loading error:', error)
+    }
+    return messages
+  }
+
+  async function initializeTranslations (locale) {
+    const messages = await loadLocaleMessages(locale)
+    const translations = messages[locale] || {}
+    $t = function (key) {
+      return translations[key] || key
+    }
+  }
+
+  await initializeTranslations(window.SKOSMOS.lang || 'en')
+})()

resource/js/vocab-counts.js

@@ -1,65 +1,87 @@
-/* global Vue */
+/* global Vue, $t */
 
-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>
-        <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>
-  `
-})
+function startResourceCountsApp () {
+  const resourceCountsApp = Vue.createApp({
+    data () {
+      return {
+        concepts: {},
+        subTypes: {},
+        conceptGroups: {}
+      }
+    },
+    computed: {
+      hasCounts () {
+        return Object.keys(this.concepts).length > 0
+      },
+      resourceCountsTitle () {
+        return $t('Resource counts by type')
+      },
+      typeLabel () {
+        return $t('Type')
+      },
+      countLabel () {
+        return $t('Count')
+      },
+      deprecatedConceptLabel () {
+        return $t('Deprecated concept')
+      }
+    },
+    mounted () {
+      fetch('rest/v1/' + window.SKOSMOS.vocab + '/vocabularyStatistics?lang=' + window.SKOSMOS.lang)
+        .then(response => response.json())
+        .then(data => {
+          this.concepts = data.concepts
+          this.subTypes = data.subTypes
+          this.conceptGroups = data.conceptGroups
+        })
+    },
+    template: `
+        <h3 class="fw-bold py-3">{{ resourceCountsTitle }}</h3>
+        <table class="table" id="resource-stats">
+          <tbody>
+            <tr><th class="versal">{{ typeLabel }}</th><th class="versal">{{ countLabel }}</th></tr>
+            <template v-if="hasCounts">
+              <resource-counts :concepts :subTypes :conceptGroups :deprecatedConceptLabel></resource-counts>
+            </template>
+            <template v-else>
+              <i class="fa-solid fa-spinner fa-spin-pulse"></i>
+            </template>
+          </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', 'deprecatedConceptLabel'],
+    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>{{ deprecatedConceptLabel }}</td>
+          <td>{{ concepts.deprecatedCount }}</td>
+        </tr>
+        <tr v-if="conceptGroups">
+          <td>{{ conceptGroups.label }}</td>
+          <td>{{ conceptGroups.count }}</td>
+        </tr>
+      `
+  })
 
-resourceCountsApp.mount('#resource-counts')
+  resourceCountsApp.mount('#resource-counts')
+}
+
+function waitForTranslationService () {
+  if (typeof $t !== 'undefined') {
+    startResourceCountsApp()
+  } else {
+    setTimeout(waitForTranslationService, 50)
+  }
+}
+
+waitForTranslationService()

src/view/scripts.inc.twig

@@ -99,6 +99,7 @@ window.SKOSMOS = {
 <!-- 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>
+<script src="resource/js/translation-service.js"></script>
 
 <!-- Vue.js components -->
 <script src="resource/js/vocab-counts.js"></script>