First attempt to translate form #2540

package.json

@@ -22,6 +22,7 @@
         "@johmun/vue-tags-input": "^2.0.1",
         "font-awesome": "^4.7.0",
         "jquery": "^3.1.1",
-        "uiv": "^0.31.5"
+        "uiv": "^0.31.5",
+        "vue-i18n": "^8.14.1"
     }
 }

resources/assets/js/app.js

@@ -19,21 +19,11 @@
  */
 
 import CustomAttachments from "./components/transactions/CustomAttachments";
-
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./bootstrap');
-window.Vue = require('vue');
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
 import * as uiv from 'uiv';
-
-Vue.use(uiv);
-
 import CreateTransaction from './components/transactions/CreateTransaction';
-import EditTransaction from  './components/transactions/EditTransaction';
+import EditTransaction from './components/transactions/EditTransaction';
 import Clients from './components/passport/Clients';
 import AuthorizedClients from "./components/passport/AuthorizedClients";
 import PersonalAccessTokens from "./components/passport/PersonalAccessTokens";
@@ -53,6 +43,19 @@ import ForeignAmountSelect from "./components/transactions/ForeignAmountSelect";
 import TransactionType from "./components/transactions/TransactionType";
 import AccountSelect from "./components/transactions/AccountSelect";
 
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./bootstrap');
+
+Vue.use(VueI18n);
+window.Vue = Vue;
+
+Vue.use(uiv);
+
 // components for create and edit transactions.
 Vue.component('budget', Budget);
 Vue.component('custom-date', CustomDate);
@@ -82,7 +85,28 @@ Vue.component('passport-personal-access-tokens', PersonalAccessTokens);
 Vue.component('create-transaction', CreateTransaction);
 Vue.component('edit-transaction', EditTransaction);
 
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+                             locale: document.documentElement.lang, // set locale
+                             fallbackLocale: 'en',
+                             messages: {
+                                 'cs': require('./locales/cs.json'),
+                                 'de': require('./locales/de.json'),
+                                 'en': require('./locales/en.json'),
+                                 'es': require('./locales/es.json'),
+                                 'fr': require('./locales/fr.json'),
+                                 'hu': require('./locales/hu.json'),
+                                 'id': require('./locales/id.json'),
+                                 'it': require('./locales/it.json'),
+                                 'nl': require('./locales/nl.json'),
+                                 'no': require('./locales/no.json'),
+                                 'pl': require('./locales/pl.json'),
+                                 'pt-br': require('./locales/pt-br.json'),
+                                 'ro': require('./locales/ro.json'),
+                                 'ru': require('./locales/ru.json'),
+                                 'zh': require('./locales/zh.json'),
+                                 'zh-tw': require('./locales/zh-tw.json'),
+                             }
+                         });
 
-const app = new Vue({
-                        el: '#app'
-                    });
+new Vue({i18n}).$mount('#app');

resources/assets/js/bootstrap.js

@@ -18,7 +18,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* TODO REMOVE ME */
 window._ = require('lodash');
 
 /**

resources/assets/js/components/ExampleComponent.vue

@@ -18,7 +18,6 @@
   - along with this program.  If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<!-- TODO REMOVE ME -->
 <template>
     <div class="container">
         <div class="row">

resources/assets/js/components/SomeTestComponent.vue

@@ -0,0 +1,43 @@
+<!--
+  - SomeTestComponent.vue
+  - Copyright (c) 2019 thegrumpydictator@gmail.com
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <div class="panel panel-default">
+                    <div class="panel-heading">Test Component</div>
+
+                    <div class="panel-body">
+                        <p>{{ $t("firefly.welcome_back") }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>

resources/assets/js/components/transactions/AccountSelect.vue

@@ -101,8 +101,6 @@
             this.target = this.$refs.input;
             let types = this.allowedTypes.join(',');
             this.name = this.accountName;
-            // console.log('Mounted Types:');
-            // console.log(this.allowedTypes);
             this.accountAutoCompleteURI = document.getElementsByTagName('base')[0].href + "json/accounts?types=" + types + "&search=";
             this.triggerTransactionType();
         },
@@ -115,7 +113,6 @@
                 let types = this.accountTypeFilters.join(',');
                 if (0 === this.accountTypeFilters.length) {
                     types = this.defaultAccountTypeFilters.join(',');
-                    // console.log('types was empty: ' + types);
                 }
                 this.accountAutoCompleteURI = document.getElementsByTagName('base')[0].href + "json/accounts?types=" + types + "&search=";
             }

resources/assets/js/components/transactions/CreateTransaction.vue

@@ -24,9 +24,9 @@
         <div class="row" v-if="error_message !== ''">
             <div class="col-lg-12">
                 <div class="alert alert-danger alert-dismissible" role="alert">
-                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    <button type="button" class="close" data-dismiss="alert" v-bind:aria-label="$t('firefly.close')"><span
                             aria-hidden="true">&times;</span></button>
-                    <strong>Error!</strong> {{ error_message }}
+                    <strong>{{ $t("firefly.flash_error") }}!</strong> {{ error_message }}
                 </div>
             </div>
         </div>

resources/assets/js/locales/cs.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Co hraje?"
+    },
+    "config": {
+        "html_language": "cs"
+    }
+}

resources/assets/js/locales/de.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Was ist gerade los?"
+    },
+    "config": {
+        "html_language": "de"
+    }
+}

resources/assets/js/locales/en.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Neler oluyor?"
+    },
+    "config": {
+        "html_language": "en"
+    }
+}

resources/assets/js/locales/es.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "\u00bfQu\u00e9 est\u00e1 pasando?"
+    },
+    "config": {
+        "html_language": "es"
+    }
+}

resources/assets/js/locales/fr.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Que se passe-t-il ?"
+    },
+    "config": {
+        "html_language": "fr"
+    }
+}

resources/assets/js/locales/hu.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Mi a helyzet?"
+    },
+    "config": {
+        "html_language": "hu"
+    }
+}

resources/assets/js/locales/id.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "What's playing?"
+    },
+    "config": {
+        "html_language": "id"
+    }
+}

resources/assets/js/locales/it.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "La tua situazione finanziaria"
+    },
+    "config": {
+        "html_language": "it"
+    }
+}

resources/assets/js/locales/nl.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Hoe staat het er voor?"
+    },
+    "config": {
+        "html_language": "nl"
+    }
+}

resources/assets/js/locales/no.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Hvordan g\u00e5r det?"
+    },
+    "config": {
+        "html_language": "no"
+    }
+}

resources/assets/js/locales/pl.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Co jest grane?"
+    },
+    "config": {
+        "html_language": "pl"
+    }
+}

resources/assets/js/locales/pt-br.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "O que est\u00e1 passando?"
+    },
+    "config": {
+        "html_language": "pt-br"
+    }
+}

resources/assets/js/locales/ro.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "Ce se red\u0103?"
+    },
+    "config": {
+        "html_language": "ro"
+    }
+}

resources/assets/js/locales/ru.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "\u0427\u0442\u043e \u0432 \u043a\u043e\u0448\u0435\u043b\u044c\u043a\u0435?"
+    },
+    "config": {
+        "html_language": "ru"
+    }
+}

resources/assets/js/locales/zh-tw.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "\u5403\u98fd\u6c92\uff1f"
+    },
+    "config": {
+        "html_language": "zh-tw"
+    }
+}

resources/assets/js/locales/zh.json

@@ -0,0 +1,8 @@
+{
+    "firefly": {
+        "welcome_back": "\u5403\u9971\u6ca1\uff1f"
+    },
+    "config": {
+        "html_language": "zh"
+    }
+}