NatLibFi/Skosmos

Translate messages shown by Vue components

osma opened this issue · 1 comments

osma commented

For Skosmos 3, we have already implemented UI translations for PHP backend code (PR #1466) and Twig templates (PR #1520). But text in Vue components is not yet translated to the UI language, as can be seen for example in the vocab-counts and term-counts components on the vocabulary home page (the texts "Resource counts by type", "Term counts by language" etc. are currently hardcoded and always shown in English):

image

To fix this, we need to add internationalization support to the Vue components, most likely using Vue i18n.

We also need to provide the Vue components with the correct messages for each language. For Skosmos 2, this was done using global JS variables, like this:

<!-- translations needed in javascript -->
var noResultsTranslation = "Ei tuloksia";
var loading_text = "Ladataan sisältöä";
var loading_failed_text = "Virhe: Lisätulosten haku epäonnistui!";
var loading_retry_text = "Yritä uudelleen";
var jstree_loading = "Ladataan ...";
var results_disp = "Näytetään kaikki %d tulosta";
var all_vocabs  = "kaikista sanastoista";
var n_selected = "sanastosta";
var missing_value = "Kenttä on pakollinen";
var expand_paths = "näytä kaikki # polkua";
var expand_propvals = "näytä kaikki # arvoa";
var hiertrans = "Hierarkia";
var depr_trans = "Käytöstä poistettu käsite";
var sr_only_translations = {
  hierarchy_listing: "Hierarkian mukainen lista käsitteistä",
  groups_listing: "Hierarkian mukainen lista käsitteistä ja ryhmistä",
};

A similar but hopefully less ugly mechanism for passing the messages from the backend to the frontend is needed. One option would be to add the necessary messages to the SKOSMOS global object (see #1438 where it was implemented).

osma commented

If we switched to a JSON based message format, it would simplify the implementation of Vue translations as there would be no need to pass specific messages from the backend to the frontend. I opened issue #1525 proposing this.