From 26b247a6389cbfc2ed43b6333a675655181dbd0d Mon Sep 17 00:00:00 2001
From: Karel Vendla <karel@elevate.ee>
Date: Mon, 19 Apr 2021 17:07:46 +0300
Subject: [PATCH] Use i18n-http-backend to load translatiosn from json files.

---
 package-lock.json                             |  8 ++++++++
 package.json                                  |  1 +
 public/locales/en.json                        |  6 ------
 public/locales/en/invoice-row.json            |  7 +++++++
 public/locales/en/invoice-rows-header.json    |  7 +++++++
 public/locales/en/invoice-totals.json         |  5 +++++
 public/locales/en/invoices-list.json          |  7 +++++++
 public/locales/en/invoices.json               |  6 ++++++
 public/locales/est.json                       |  6 ------
 public/locales/et/invoices.json               |  4 ++++
 src/components/invoices/InvoiceRow.vue        | 11 ++++++-----
 src/components/invoices/InvoiceRowsHeader.vue | 11 ++++++-----
 src/components/invoices/InvoiceTotals.vue     |  7 ++++---
 src/components/invoices/InvoicesList.vue      | 13 +++++++------
 src/config/i18n.config.js                     | 14 +++++++-------
 src/main.js                                   |  1 +
 src/store/language.js                         |  2 +-
 src/views/dashboard/Invoices.vue              |  4 ++--
 18 files changed, 79 insertions(+), 41 deletions(-)
 delete mode 100644 public/locales/en.json
 create mode 100644 public/locales/en/invoice-row.json
 create mode 100644 public/locales/en/invoice-rows-header.json
 create mode 100644 public/locales/en/invoice-totals.json
 create mode 100644 public/locales/en/invoices-list.json
 create mode 100644 public/locales/en/invoices.json
 delete mode 100644 public/locales/est.json
 create mode 100644 public/locales/et/invoices.json

diff --git a/package-lock.json b/package-lock.json
index 1b97056..34d35dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6594,6 +6594,14 @@
         "@babel/runtime": "^7.5.5"
       }
     },
+    "i18next-http-backend": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.2.1.tgz",
+      "integrity": "sha512-9L2sa+wybqi57/+VsrJPo5DCI7WLoudaK12xz0okYSmsi3Izyj7sCgrYL52WHy/O3BFY9HGORBwSwlD1WYuH6Q==",
+      "requires": {
+        "node-fetch": "2.6.1"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
diff --git a/package.json b/package.json
index 0dea714..bb1f7eb 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "es6-promise": "^4.2.6",
     "i18next": "^20.2.1",
     "i18next-browser-languagedetector": "^6.1.0",
+    "i18next-http-backend": "^1.2.1",
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
     "register-service-worker": "^1.7.1",
diff --git a/public/locales/en.json b/public/locales/en.json
deleted file mode 100644
index 680c869..0000000
--- a/public/locales/en.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "invoices": {
-    "title": "Invoices",
-    "new_invoice": "New invoice"
-  }
-}
diff --git a/public/locales/en/invoice-row.json b/public/locales/en/invoice-row.json
new file mode 100644
index 0000000..396efc7
--- /dev/null
+++ b/public/locales/en/invoice-row.json
@@ -0,0 +1,7 @@
+{
+  "enter_item": "Enter item",
+  "enter_quantity": "Enter quantity",
+  "enter_unit": "Enter unit",
+  "enter_price": "Enter price",
+  "enter_tax": "Enter tax"
+}
diff --git a/public/locales/en/invoice-rows-header.json b/public/locales/en/invoice-rows-header.json
new file mode 100644
index 0000000..d5a1e68
--- /dev/null
+++ b/public/locales/en/invoice-rows-header.json
@@ -0,0 +1,7 @@
+{
+   "item": "Item",
+   "quantity": "Quantity",
+   "unit": "Unit",
+   "price": "Price",
+   "sum": "Sum"
+}
diff --git a/public/locales/en/invoice-totals.json b/public/locales/en/invoice-totals.json
new file mode 100644
index 0000000..de7604b
--- /dev/null
+++ b/public/locales/en/invoice-totals.json
@@ -0,0 +1,5 @@
+{
+    "subtotal": "Subtotal",
+    "total": "Total",
+    "add_currency": "Add currency"
+}
diff --git a/public/locales/en/invoices-list.json b/public/locales/en/invoices-list.json
new file mode 100644
index 0000000..3ddee03
--- /dev/null
+++ b/public/locales/en/invoices-list.json
@@ -0,0 +1,7 @@
+{
+  "invoice_number": "No.",
+  "client": "Client",
+  "issued_at": "Issued at",
+  "total": "Total",
+  "status": "Status"
+}
diff --git a/public/locales/en/invoices.json b/public/locales/en/invoices.json
new file mode 100644
index 0000000..7aa5da1
--- /dev/null
+++ b/public/locales/en/invoices.json
@@ -0,0 +1,6 @@
+{
+  "title": "Invoices",
+  "new_invoice": "New invoice",
+  "export": "Export",
+  "import": "Import"
+}
diff --git a/public/locales/est.json b/public/locales/est.json
deleted file mode 100644
index 9d3e4cf..0000000
--- a/public/locales/est.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "invoices": {
-    "title": "Arved",
-    "new_invoice": "Uus arve"
-  }
-}
diff --git a/public/locales/et/invoices.json b/public/locales/et/invoices.json
new file mode 100644
index 0000000..5ad6b7d
--- /dev/null
+++ b/public/locales/et/invoices.json
@@ -0,0 +1,4 @@
+{
+  "title": "Arved",
+  "new_invoice": "Uus arve"
+}
diff --git a/src/components/invoices/InvoiceRow.vue b/src/components/invoices/InvoiceRow.vue
index f580d5a..aabdd27 100644
--- a/src/components/invoices/InvoiceRow.vue
+++ b/src/components/invoices/InvoiceRow.vue
@@ -4,28 +4,28 @@
             <AppEditable :value="row.item"
                          :errors="errors"
                          :field="`rows.${index}.item`"
-                         placeholder="Enter item"
+                         :placeholder="$t('enter_item')"
                          @change="updateProp({ item: $event })"/>
         </td>
         <td>
             <AppEditable :value="row.quantity"
                          :errors="errors"
                          :field="`rows.${index}.quantity`"
-                         placeholder="Enter quantity"
+                         :placeholder="$('enter_quantity')"
                          @change="updateProp({ quantity: $event })"/>
         </td>
         <td>
             <AppEditable :value="row.unit"
                          :errors="errors"
                          :field="`rows.${index}.unit`"
-                         placeholder="Enter unit"
+                         :placeholder="$t('enter_unit')"
                          @change="updateProp({ unit: $event })"/>
         </td>
         <td>
             <AppEditable :value="row.price | currency"
                          :errors="errors"
                          :field="`rows.${index}.price`"
-                         placeholder="Enter price"
+                         :placeholder="$t('enter_price')"
                          @change="updateProp({ price: $event })"/>
         </td>
         <td v-for="(tax, taxIndex) in row.taxes" :title="tax.label">
@@ -33,7 +33,7 @@
                          :value="tax.value | currency"
                          :errors="errors"
                          :field="`rows.${index}.taxes.${taxIndex}.value`"
-                         placeholder="Enter tax"
+                         :placeholder="$t('enter_tax')"
                          @change="updateTaxProp({ value: $event }, tax)"/>
         </td>
         <td class="text-right position-relative">
@@ -52,6 +52,7 @@ import AppEditable from '../form/AppEditable';
 export default {
   props: ['row', 'errors', 'index'],
   name: 'InvoiceRow',
+  i18nOptions: { namespaces: 'invoice-row' },
   components: {
     AppEditable,
   },
diff --git a/src/components/invoices/InvoiceRowsHeader.vue b/src/components/invoices/InvoiceRowsHeader.vue
index 1b2a967..b2b9882 100644
--- a/src/components/invoices/InvoiceRowsHeader.vue
+++ b/src/components/invoices/InvoiceRowsHeader.vue
@@ -1,14 +1,14 @@
 <template>
     <thead>
     <tr>
-        <th>Item</th>
-        <th>Quantity</th>
-        <th>Unit</th>
-        <th>Price</th>
+        <th>{{ $t('item') }}</th>
+        <th>{{ $t('quantity') }}</th>
+        <th>{{ $t('unit') }}</th>
+        <th>{{ $t('price') }}</th>
         <th v-for="tax in taxes" :key="tax.id">
             {{ tax.label }} %
         </th>
-        <th class="text-right">Sum</th>
+        <th class="text-right">{{ $t('sum') }}</th>
     </tr>
     </thead>
 </template>
@@ -18,6 +18,7 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  i18nOptions: { namespaces: 'invoice-rows-header' },
   computed: {
     ...mapGetters({
       taxes: 'invoiceRows/taxes',
diff --git a/src/components/invoices/InvoiceTotals.vue b/src/components/invoices/InvoiceTotals.vue
index e0fb86b..eb02702 100644
--- a/src/components/invoices/InvoiceTotals.vue
+++ b/src/components/invoices/InvoiceTotals.vue
@@ -1,7 +1,7 @@
 <template>
     <tfoot>
     <tr class="text-right">
-        <td :colspan="colspan">Subtotal</td>
+        <td :colspan="colspan">{{ $t('subtotal') }}</td>
         <td>{{ invoice.subTotal | currency }}</td>
     </tr>
     <tr class="text-right" v-for="tax in invoice.taxes" :key="tax.label">
@@ -13,11 +13,11 @@
     </tr>
     <tr class="text-right">
         <th :colspan="colspan">
-            Total
+            {{ $t('total') }}
             <AppEditable :value="invoice.currency"
                          :errors="errors"
                          field="currency"
-                         placeholder="Add currency"
+                         :placeholder="$t('add_currency')"
                          @change="updateProp({ currency: $event })"/>
         </th>
         <th class="text-nowrap">{{ invoice.total | currency }}</th>
@@ -31,6 +31,7 @@ import { formatDate } from '../../filters/date.filter';
 import { formatCurrency } from '../../filters/currency.filter';
 
 export default {
+  i18nOptions: { namespaces: 'invoice-totals' },
   props: ['invoice', 'errors'],
   components: {
     AppEditable,
diff --git a/src/components/invoices/InvoicesList.vue b/src/components/invoices/InvoicesList.vue
index 43b0d81..63cdcd0 100644
--- a/src/components/invoices/InvoicesList.vue
+++ b/src/components/invoices/InvoicesList.vue
@@ -1,14 +1,14 @@
 <template>
     <div>
-        <div v-if="!invoices" class="col-12">Loading</div>
+        <div v-if="!invoices" class="col-12">{{ $t('loading') }}</div>
         <table class="table table--card table-hover" v-else-if="invoices && invoices.length > 0">
             <thead>
             <tr>
-                <th>No.</th>
-                <th>Client</th>
-                <th>Issued at</th>
-                <th>Total</th>
-                <th class="text-right">Status</th>
+                <th>{{ $t('invoice_number') }}</th>
+                <th>{{ $t('client') }}</th>
+                <th>{{ $t('issued_at') }}</th>
+                <th>{{ $t('total') }}</th>
+                <th class="text-right">{{ $t('status') }}</th>
             </tr>
             </thead>
             <tbody v-if="invoices">
@@ -46,6 +46,7 @@ import dayjs from 'dayjs';
 import { VBTooltip } from 'bootstrap-vue';
 
 export default {
+  i18nOptions: { namespaces: 'invoices-list' },
   components: {
     EmptyState,
   },
diff --git a/src/config/i18n.config.js b/src/config/i18n.config.js
index d16eeaf..ab82e15 100644
--- a/src/config/i18n.config.js
+++ b/src/config/i18n.config.js
@@ -1,21 +1,21 @@
 import Vue from 'vue';
 import i18next from 'i18next';
 import VueI18Next from '@panter/vue-i18next';
+import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import app from '@/main';
-import enJson from '../../public/locales/en';
-import estJson from '../../public/locales/est';
 
 Vue.use(VueI18Next);
 
-i18next.use(LanguageDetector);
+i18next
+  .use(LanguageDetector)
+  .use(Backend);
 
 const initialized = i18next.init({
   fallbackLng: 'en',
-  whitelist: ['en', 'est'],
-  resources: {
-    en: enJson,
-    est: estJson,
+  whitelist: ['en', 'et'],
+  backend: {
+    loadPath: 'locales/{{lng}}/{{ns}}.json',
   },
   detection: {
     order: ['querystring', 'path', 'localStorage', 'navigator'],
diff --git a/src/main.js b/src/main.js
index 1d07637..2052817 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,4 @@
+import i18n from '@/config/i18n.config';
 import 'es6-promise';
 import '@/config/storage.config';
 import { BVModalPlugin } from 'bootstrap-vue';
diff --git a/src/store/language.js b/src/store/language.js
index 32f2799..9d4d3f1 100644
--- a/src/store/language.js
+++ b/src/store/language.js
@@ -6,7 +6,7 @@ export default {
     lang: null,
     all: [
       { name: 'English', code: 'en' },
-      { name: 'Estonian', code: 'est' },
+      { name: 'Estonian', code: 'et' },
     ],
   },
   mutations: {
diff --git a/src/views/dashboard/Invoices.vue b/src/views/dashboard/Invoices.vue
index f095850..d90e670 100644
--- a/src/views/dashboard/Invoices.vue
+++ b/src/views/dashboard/Invoices.vue
@@ -9,8 +9,8 @@
                         <template slot="button-content">
                             <i class="material-icons">more_vert</i>
                         </template>
-                        <b-dropdown-item @click="exportJson">Export</b-dropdown-item>
-                        <b-dropdown-item @click="openImportModal">Import</b-dropdown-item>
+                        <b-dropdown-item @click="exportJson">{{ $t('export') }}</b-dropdown-item>
+                        <b-dropdown-item @click="openImportModal">{{ $t('import') }}</b-dropdown-item>
                     </b-dropdown>
                 </div>
             </div>