This is a model, an example where a separate translation service comp…

…onent is used, which is then imported into the components where translations are needed. In such an implementation, Vue components must be called as modules
NatLibFi · Oct 4, 2024 · d10865c · d10865c
1 parent 94c757b
commit d10865c
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 79 deletions.
diff --git a/resource/js/term-counts.js b/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); 
+  }
+})();
diff --git a/resource/js/translation-service.js b/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;
+}
diff --git a/resource/js/vocab-counts.js b/resource/js/vocab-counts.js
@@ -1,52 +1,30 @@
-async function loadLocaleMessages() {
-  const lang = 'fi'; // Myöhemmin käytetään globaalia muuttujaa
-  const messages = {};
+import { createI18nInstance } from './translation-service.js';
 
-  const response = await fetch(`http://localhost/skosmos/resource/translations/messages.${lang}.json`);
-  const data = await response.json();
-  console.log(data);
-  messages[lang] = data;
-
-  return messages;
-}
-
-async function createI18nInstance() {
-  const messages = await loadLocaleMessages();
-
-  const i18n = VueI18n.createI18n({
-    locale: window.SKOSMOS.lang || 'en', // oletus
-    fallbackLocale: 'en', // fallback
-    messages,
-  });
-
-  return i18n;
-}
-
-(async function() {
-  const i18n = await createI18nInstance();
+(async function () {
+  const i18n = await createI18nInstance(window.SKOSMOS.lang || 'fi', 'vocab-counts');
 
   const resourceCountsApp = Vue.createApp({
-    data() {
+    data () {
       return {
         concepts: {},
         subTypes: {},
         conceptGroups: {}
       };
     },
     computed: {
-      hasCounts() {
+      hasCounts () {
         return Object.keys(this.concepts).length > 0;
       }
     },
-    mounted() {
+    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">
@@ -55,7 +33,7 @@ async function createI18nInstance() {
         <template v-if="hasCounts">
           <resource-counts :concepts="concepts" :subTypes="subTypes" :conceptGroups="conceptGroups"></resource-counts>
         </template>
-        <template v-else>
+        <template v-else >
           <i class="fa-solid fa-spinner fa-spin-pulse"></i>
         </template>
         </tbody>
@@ -70,7 +48,7 @@ async function createI18nInstance() {
         <td>{{ concepts.label }}</td>
         <td>{{ concepts.count }}</td>
       </tr>
-      <tr v-for="st in subTypes">
+      <tr v-for="st in subTypes" :key="st.label">
         <td>* {{ st.label }}</td>
         <td>{{ st.count }}</td>
       </tr>

diff --git a/src/view/scripts.inc.twig b/src/view/scripts.inc.twig
@@ -94,8 +94,8 @@ window.SKOSMOS = {
 <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>