From 11d09ac054854f4eb0fdcfbdeb38f8cff156d7e1 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Thu, 22 Dec 2022 00:12:36 +0100
Subject: [PATCH] Async loading for languages, translate bootstrap and sidebar

---
 src/StacBrowser.vue                       |  8 ++--
 src/components/Map.vue                    |  4 +-
 src/components/Sidebar.vue                |  4 +-
 src/components/Source.vue                 |  8 ++--
 src/components/Tree.vue                   |  8 ++--
 src/components/metadata/MetadataTable.vue | 10 +++++
 src/i18n.js                               |  9 +++--
 src/locales/de/texts.json                 | 49 +++++++++++++++++++----
 src/locales/en/texts.json                 | 49 +++++++++++++++++++----
 src/store/index.js                        | 15 +++++++
 src/views/Catalog.vue                     |  2 +-
 src/views/Item.vue                        |  2 +-
 src/views/SelectDataSource.vue            | 16 ++++----
 13 files changed, 140 insertions(+), 44 deletions(-)

diff --git a/src/StacBrowser.vue b/src/StacBrowser.vue
index fa978ab56..6a62a3379 100644
--- a/src/StacBrowser.vue
+++ b/src/StacBrowser.vue
@@ -15,9 +15,11 @@
       <router-view />
     </main>
     <footer>
-      <small class="poweredby text-muted">
-        {{ $t('poweredBy') }} <a href="https://github.com/radiantearth/stac-browser">STAC Browser</a> {{ browserVersion }}
-      </small>
+      <i18n tag="small" path="poweredBy" class="poweredby text-muted">
+        <template #link>
+          <a href="https://github.com/radiantearth/stac-browser" target="_blank">STAC Browser</a> {{ browserVersion }}
+        </template>
+      </i18n>
     </footer>
   </b-container>
 </template>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 7ed3d5e4f..871033e74 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -122,8 +122,8 @@ export default {
     fullscreenOptions() {
       return {
         title: {
-          'false': this.$t('leaflet.fullscreen.false'),
-          'true': this.$t('leaflet.fullscreen.true'),
+          'false': this.$t('fullscreen.show'),
+          'true': this.$t('fullscreen.exit'),
         }
       };
     },
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index e5b4cde6c..b916cb3bf 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -3,7 +3,9 @@
     <Loading v-if="!parents" />
     <Tree v-else-if="root" :item="root" :path="parents" />
 
-    <b-button v-if="allowSelectCatalog" class="switch-catalog mt-4" variant="light"><router-link to="/"><b-icon-arrow-left-right /> Switch Catalog</router-link></b-button>
+    <b-button v-if="allowSelectCatalog" class="switch-catalog mt-4" variant="light">
+      <router-link to="/"><b-icon-arrow-left-right /> {{$t('sidebar.switchCatalog') }}</router-link>
+    </b-button>
   </div>
 </template>
 
diff --git a/src/components/Source.vue b/src/components/Source.vue
index 20fbaed80..64a3b74eb 100644
--- a/src/components/Source.vue
+++ b/src/components/Source.vue
@@ -14,7 +14,7 @@
         <template #button-content>
           <b-icon-flag /> <span class="button-label">Language ({{ currentLanguage }})</span>
         </template>
-        <b-dropdown-item v-for="l of supportedLocales" :key="l" @click="switchLanguage(l)">
+        <b-dropdown-item v-for="l of supportedLocales" :key="l" @click="switchLocale(l)">
           <b-icon-check v-if="locale === l" />
           <b-icon-blank v-else />
           {{ $t(`languages.${l}.native`) }} / {{ $t(`languages.${l}.global`) }}
@@ -57,7 +57,7 @@
 import { 
   BIconBlank, BIconCheck, BIconEnvelope, BIconFlag, BIconLink, BIconShare, BIconTwitter,
   BDropdown, BDropdownItem, BPopover } from 'bootstrap-vue';
-import { mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 
 import Url from './Url.vue';
 
@@ -132,14 +132,12 @@ export default {
         }
     },
     methods: {
+        ...mapActions(['switchLocale']),
         async validate() {
             await this.$store.dispatch('validate', this.stacUrl);
         },
         browserUrl() {
           return window.location.toString();
-        },
-        switchLanguage(locale) {
-          this.$store.commit('config', {locale});
         }
     }
 };
diff --git a/src/components/Tree.vue b/src/components/Tree.vue
index 5e30c6e38..e9ed437b6 100644
--- a/src/components/Tree.vue
+++ b/src/components/Tree.vue
@@ -20,18 +20,18 @@
 
       <template v-if="expanded && mayHaveChildren">
         <ul v-if="loading" class="tree">
-          <li><b-spinner label="Loading..." small /></li>
+          <li><b-spinner :label="$t('loading')" small /></li>
         </ul>
         <ul v-else-if="childs.length === 0" class="tree">
           <li>
             <b-button size="sm" variant="light" disabled>
-              No children available.
+              {{ $t('tree.noChildren') }}
             </b-button>
           </li>
         </ul>
         <template v-else>
           <Tree v-for="(child, i) in shownChilds" :key="i" :item="child" :parent="stac" :path="path" />
-          <b-button class="show-more" v-if="hasMore" @click="showMore" variant="light" v-b-visible.200="showMore">Show more...</b-button>
+          <b-button class="show-more" v-if="hasMore" @click="showMore" variant="light" v-b-visible.200="showMore">{{ $t('tree.showMore') }}</b-button>
         </template>
       </template>
     </li>
@@ -138,7 +138,7 @@ export default {
     },
     title() {
       if (this.pagination) {
-        return 'more pages available for Collection';
+        return $t('moreCollectionPagesAvailable');
       }
       return STAC.getDisplayTitle([this.item, this.stac]);
     },
diff --git a/src/components/metadata/MetadataTable.vue b/src/components/metadata/MetadataTable.vue
index bbfc000f7..11f2c5d91 100644
--- a/src/components/metadata/MetadataTable.vue
+++ b/src/components/metadata/MetadataTable.vue
@@ -3,6 +3,7 @@
     class="metadata-table" :items="tblItems" :fields="tblFields" variant="light"
     responsive small
     sticky-header striped
+    v-bind="tblTexts"
   >
     <template #head()="data">
       <span v-html="data.label" />
@@ -28,6 +29,15 @@ export default {
     EntryMixin
   ],
   computed: {
+    tblTexts() {
+      return {
+        'empty-filtered-text': this.$t('table.emptyFilteredText'),
+        'empty-text': this.$t('table.emptyText'),
+        'label-sort-asc': this.$t('table.sort.asc'),
+        'label-sort-desc': this.$t('table.sort.desc'),
+        'label-sort-clear': this.$t('table.sort.clear')
+      };
+    },
     tblItems() {
       if (Utils.isObject(this.value)) {
         let items = [];
diff --git a/src/i18n.js b/src/i18n.js
index 8cc23f6f8..513ccb0af 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -9,9 +9,12 @@ function loadLocaleMessages () {
   const languages = {};
   for(let locale of CONFIG.supportedLocales) {
     languages[locale] = require(`./locales/${locale}/config.json`);
-    // ToDo: Load not yet required languages async
-    // https://kazupon.github.io/vue-i18n/guide/lazy-loading.html
-    messages[locale] = require(`./locales/${locale}/texts.json`);
+    if (CONFIG.locale == locale || CONFIG.fallbackLocale == locale) {
+      messages[locale] = require(`./locales/${locale}/texts.json`);
+    }
+    else {
+      messages[locale] = {};
+    }
   }
   for(let locale in messages) {
     messages[locale].languages = languages;
diff --git a/src/locales/de/texts.json b/src/locales/de/texts.json
index 3f6b55326..54c4206d3 100644
--- a/src/locales/de/texts.json
+++ b/src/locales/de/texts.json
@@ -1,12 +1,45 @@
 {
-  "poweredBy": "Generiert von",
-  "specifyCatalog": "Bitte gib einen STAC Catalog oder eine STAC API an...",
-  "selectStacIndex": "... oder wähle einen von STAC Index",
-  "load": "Laden",
-  "leaflet": {
-    "fullscreen": {
-      "false": "Zeige im Vollbild-Modus",
-      "true": "Verlasse den Vollbild-Modus"
+  "stacCollection": "Sammlung | Sammlungen",
+  "stacCatalog": "Katalog | Kataloge",
+  "stacItem": "Element | Elemente",
+  "poweredBy": "Generiert von {link}",
+  "loading": "Lade...",
+  "index": {
+    "specifyCatalog": "Bitte gib einen STAC Katalog oder eine STAC API an...",
+    "selectStacIndex": "... oder wähle von STAC Index:",
+    "load": "Laden",
+    "api": "API",
+    "catalog": "Katalog",
+    "urlMissingProtocol": "Der Adresse fehlt ein Protokoll.",
+    "urlMissingHost": "Der Adresse fehlt ein Host.",
+    "urlInvalid": "Die Adresse ist ungültig."
+  },
+  "fullscreen": {
+    "show": "Zeige im Vollbild-Modus",
+    "exit": "Verlasse den Vollbild-Modus"
+  },
+  "read": {
+    "less": "Zeige weniger",
+    "more": "Zeige mehr"
+  },
+  "tree": {
+    "showMore": "Zeige mehr...",
+    "noChildren": "Keine Unterpunkte verfügbar.",
+    "moreCollectionPagesAvailable": "Mehr Seiten für Sammlung verfügbar"
+  },
+  "sidebar": {
+    "switchCatalog": "Wechsle den Katalog"
+  },
+  "table": {
+    "emptyFilteredText": "Es gibt keine Einträge die dem Filter entsprechen",
+    "emptyText": "Keine Einträge verfügbar",
+    "sort": {
+      "asc": "Klicke um aufsteigend zu sortieren",
+      "desc": "Klicke um absteigend zu sortieren",
+      "clear": "Klicke um die Sortierung aufzuheben"
     }
+  },
+  "fields": {
+
   }
 }
\ No newline at end of file
diff --git a/src/locales/en/texts.json b/src/locales/en/texts.json
index 52cd1de03..1cdce26f1 100644
--- a/src/locales/en/texts.json
+++ b/src/locales/en/texts.json
@@ -1,12 +1,45 @@
 {
-  "poweredBy": "Powered by",
-  "specifyCatalog": "Please specify a STAC Catalog or API...",
-  "selectStacIndex": "... or select one from STAC Index",
-  "load": "Load",
-  "leaflet": {
-    "fullscreen": {
-      "false": "View Fullscreen",
-      "true": "Exit Fullscreen"
+  "stacCollection": "Collection | Collections",
+  "stacCatalog": "Catalog | Catalogs",
+  "stacItem": "Item | Items",
+  "poweredBy": "Powered by {link}",
+  "loading": "Loading...",
+  "index": {
+    "specifyCatalog": "Please specify a STAC Catalog or API...",
+    "selectStacIndex": "... or select one from STAC Index:",
+    "load": "Load",
+    "api": "API",
+    "catalog": "Catalog",
+    "urlMissingProtocol": "The URL is missing a protocol.",
+    "urlMissingHost": "The URL is missing a host.",
+    "urlInvalid": "The URL is invalid."
+  },
+  "fullscreen": {
+    "show": "View Fullscreen",
+    "exit": "Exit Fullscreen"
+  },
+  "read": {
+    "less": "Read less",
+    "more": "Read more"
+  },
+  "tree": {
+    "showMore": "Show more...",
+    "noChildren": "No children available.",
+    "moreCollectionPagesAvailable": "more pages available for Collection"
+  },
+  "sidebar": {
+    "switchCatalog": "Switch Catalog"
+  },
+  "table": {
+    "emptyFilteredText": "There are no records matching your request",
+    "emptyText": "There are no records to show",
+    "sort": {
+      "asc": "Click to sort ascending",
+      "desc": "Click to sort descending",
+      "clear": "Click to clear sorting"
     }
+  },
+  "fields": {
+    
   }
 }
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index f87c71fc5..8ac9abb91 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,6 +9,7 @@ import { addQueryIfNotExists, isAuthenticationError, Loading, processSTAC, stacR
 import { BrowserError } from '../utils';
 import URI from "urijs";
 import Queryable from '../models/queryable';
+import i18n from '../i18n';
 
 function getStore(config) {
   // Local settings (e.g. for currently loaded STAC entity)
@@ -587,6 +588,20 @@ function getStore(config) {
       }
     },
     actions: {
+      async switchLocale(cx, locale) {
+        if (!cx.state.supportedLocales.includes(locale)) {
+          console.error(`Language '${locale}' is not supported.`);
+          return;
+        }
+
+        // No messages in cache, load them
+        if (Utils.size(i18n.messages[locale]) <= 1) { // languages key is already set thus 1 and not 0
+          const messages = await import(`../locales/${locale}/texts.json`);
+          i18n.mergeLocaleMessage(locale, messages.default);
+        }
+
+        cx.commit('config', {locale});
+      },
       async setAuth(cx, value) {
         if (!Utils.hasText(value)) {
           value = null;
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index a4bc13a13..6b827505b 100644
--- a/src/views/Catalog.vue
+++ b/src/views/Catalog.vue
@@ -6,7 +6,7 @@
           <h2>Description</h2>
           <DeprecationNotice v-if="data.deprecated" :data="data" />
           <AnonymizedNotice v-if="data['anon:warning']" :warning="data['anon:warning']" />
-          <ReadMore v-if="data.description" :lines="10" text="Read more" text-less="Read less">
+          <ReadMore v-if="data.description" :lines="10" :text="$t('read.more')" :text-less="$t('read.less')">
             <Description :description="data.description" />
           </ReadMore>
           <Keywords v-if="Array.isArray(data.keywords) && data.keywords.length > 0" :keywords="data.keywords" />
diff --git a/src/views/Item.vue b/src/views/Item.vue
index 6f1263a53..84f750397 100644
--- a/src/views/Item.vue
+++ b/src/views/Item.vue
@@ -22,7 +22,7 @@
           <h2 v-if="data.properties.description">Description</h2>
           <DeprecationNotice v-if="data.properties.deprecated" :data="data" />
           <AnonymizedNotice v-if="data.properties['anon:warning']" :warning="data.properties['anon:warning']" />
-          <ReadMore v-if="data.properties.description" :lines="10">
+          <ReadMore v-if="data.properties.description" :lines="10" :text="$t('read.more')" :text-less="$t('read.less')">
             <Description :description="data.properties.description" />
           </ReadMore>
           <Keywords v-if="Array.isArray(data.properties.keywords) && data.properties.keywords.length > 0" :keywords="data.properties.keywords" />
diff --git a/src/views/SelectDataSource.vue b/src/views/SelectDataSource.vue
index ac0e74663..c2c501404 100644
--- a/src/views/SelectDataSource.vue
+++ b/src/views/SelectDataSource.vue
@@ -3,15 +3,15 @@
     <b-col>
       <b-form @submit="go">
         <b-form-group
-          id="select" :label="$t('specifyCatalog')" label-for="url"
+          id="select" :label="$t('index.specifyCatalog')" label-for="url"
           :invalid-feedback="error" :state="valid"
         >
           <b-form-input id="url" type="url" :value="url" @input="setUrl" placeholder="https://..." />
         </b-form-group>
-        <b-button type="submit" variant="primary">{{ $t('load') }}</b-button>
+        <b-button type="submit" variant="primary">{{ $t('index.load') }}</b-button>
       </b-form>
       <hr>
-      <b-form-group v-if="stacIndex.length > 0" id="stacIndex" :label="$t('selectStacIndex')">
+      <b-form-group v-if="stacIndex.length > 0" id="stacIndex" :label="$t('index.selectStacIndex')">
         <b-list-group class="stacIndex">
           <template v-for="catalog in stacIndex">
             <b-list-group-item
@@ -21,8 +21,8 @@
               <div class="d-flex w-100 justify-content-between">
                 <strong class="mb-1">{{ catalog.title }}</strong>
                 <small>
-                  <b-badge v-if="catalog.isApi" variant="dark" pill>API</b-badge>
-                  <b-badge v-else variant="light" pill>Catalog</b-badge>
+                  <b-badge v-if="catalog.isApi" variant="dark" pill>{{ $t('index.api') }}</b-badge>
+                  <b-badge v-else variant="light" pill>{{ $t('index.catalog') }}</b-badge>
                 </small>
               </div>
               <p class="mb-1"><Description :description="catalog.summary" :compact="true" /></p>
@@ -69,14 +69,14 @@ export default {
       try {
         let url = new URL(this.url);
         if (!url.protocol) {
-          return 'The URL is missing a protocol.';
+          return this.$t('index.urlMissingProtocol');
         }
         else if (!url.host) {
-          return 'The URL is missing a host.';
+          return this.$t('index.urlMissingHost');
         }
         return null;
       } catch (error) {
-        return 'The URL is invalid.';
+        return this.$t('index.urlInvalid');
       }
     }
   },