Crowdin integration (#319)

* Fix portuguese localization files

* Use 4-letter code for locales ID

* Update Crowdin configuration file

* Make vuetify locales match with new VueI18n standard

* Fix old locale ID default setting

* Hide project hierarchy from Crowdin

* add dateTimeFormats to Crowdin

crowdin.yml

@@ -0,0 +1,6 @@
+preserve_hierarchy: false
+files:
+  - source: /frontend/src/locales/messages/en-US.json
+    translation: /frontend/src/locales/messages/%locale%.json
+  - source: /frontend/src/locales/dateTimeFormats/en-US.json
+    translation: /frontend/src/locales/dateTimeFormats/%locale%.json

frontend/src/i18n.js

@@ -36,8 +36,8 @@ function loadDateTimeFormats() {
 
 
 export default new VueI18n({
-  locale: "en",
+  locale: "en-US",
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en-US",
   messages: loadLocaleMessages(),
   dateTimeFormats: loadDateTimeFormats() 
 });

frontend/src/locales/dateTimeFormats/pt-PT.json

@@ -0,0 +1,7 @@
+{
+  "short": {
+     "month": "short",
+     "day": "numeric",
+     "weekday": "long"
+  }
+}

frontend/src/plugins/vuetify.js

@@ -3,11 +3,16 @@ import Vuetify from "vuetify/lib";
 
 Vue.use(Vuetify);
 
+// language IDs should match those from VueI18n with _ instead of - 
+import de_DE from 'vuetify/es5/locale/de';
+import en_US from 'vuetify/es5/locale/en';
+import fr_FR from 'vuetify/es5/locale/fr';
+import pl_PL from 'vuetify/es5/locale/pl';
+import pt_PT from 'vuetify/es5/locale/pt';
+import sv_SE from 'vuetify/es5/locale/sv';
+import zh_CN from 'vuetify/es5/locale/zh-Hans';
+import zh_TW from 'vuetify/es5/locale/zh-Hant';
 
-import fr from 'vuetify/es5/locale/fr';
-import pl from 'vuetify/es5/locale/pl';
-import sv from 'vuetify/es5/locale/sv';
-import de from 'vuetify/es5/locale/de';
 
 const vuetify = new Vuetify({
   theme: {
@@ -37,9 +42,16 @@ const vuetify = new Vuetify({
   },
   lang: {
     locales: {
-      fr, pl, sv, de
+      de_DE,
+      en_US, 
+      fr_FR, 
+      pl_PL, 
+      pt_PT, 
+      sv_SE, 
+      zh_CN,
+      zh_TW
     },
-    current: 'en',
+    current: 'en_US',
   },
 });
 

frontend/src/store/modules/language.js

@@ -5,23 +5,23 @@ const state = {
   allLangs: [
     {
       name: "English",
-      value: "en",
+      value: "en-US",
     },
     {
       name: "Danish",
-      value: "da",
+      value: "da-DK",
     },
     {
       name: "French",
-      value: "fr",
+      value: "fr-FR",
     },
     {
       name: "Polish",
-      value: "pl",
+      value: "pl-PL",
     },
     {
       name: "Swedish",
-      value: "sv",
+      value: "sv-SE",
     },
     {
       name: "简体中文",
@@ -33,7 +33,7 @@ const state = {
     },
     {
       name: "German",
-      value: "de",
+      value: "de-DE",
     },
     {
       name: "Português",
@@ -52,7 +52,7 @@ const mutations = {
 const actions = {
   initLang({ getters }, { currentVueComponent }) {
     VueI18n.locale = getters.getActiveLang;
-    currentVueComponent.$vuetify.lang.current = getters.getActiveLang;
+    currentVueComponent.$vuetify.lang.current = getters.getActiveLang.replace('-', '_');
   },
 };