mirror of
https://github.com/mokuappio/serverless-invoices.git
synced 2025-10-27 07:51:08 -04:00
Use i18n-http-backend to load translatiosn from json files.
This commit is contained in:
Karel Vendla
8
package-lock.json
generated
8
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"invoices": {
|
||||
"title": "Invoices",
|
||||
"new_invoice": "New invoice"
|
||||
}
|
||||
}
|
||||
7
public/locales/en/invoice-row.json
Normal file
7
public/locales/en/invoice-row.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"enter_item": "Enter item",
|
||||
"enter_quantity": "Enter quantity",
|
||||
"enter_unit": "Enter unit",
|
||||
"enter_price": "Enter price",
|
||||
"enter_tax": "Enter tax"
|
||||
}
|
||||
7
public/locales/en/invoice-rows-header.json
Normal file
7
public/locales/en/invoice-rows-header.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"item": "Item",
|
||||
"quantity": "Quantity",
|
||||
"unit": "Unit",
|
||||
"price": "Price",
|
||||
"sum": "Sum"
|
||||
}
|
||||
5
public/locales/en/invoice-totals.json
Normal file
5
public/locales/en/invoice-totals.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"subtotal": "Subtotal",
|
||||
"total": "Total",
|
||||
"add_currency": "Add currency"
|
||||
}
|
||||
7
public/locales/en/invoices-list.json
Normal file
7
public/locales/en/invoices-list.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"invoice_number": "No.",
|
||||
"client": "Client",
|
||||
"issued_at": "Issued at",
|
||||
"total": "Total",
|
||||
"status": "Status"
|
||||
}
|
||||
6
public/locales/en/invoices.json
Normal file
6
public/locales/en/invoices.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "Invoices",
|
||||
"new_invoice": "New invoice",
|
||||
"export": "Export",
|
||||
"import": "Import"
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"invoices": {
|
||||
"title": "Arved",
|
||||
"new_invoice": "Uus arve"
|
||||
}
|
||||
}
|
||||
4
public/locales/et/invoices.json
Normal file
4
public/locales/et/invoices.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"title": "Arved",
|
||||
"new_invoice": "Uus arve"
|
||||
}
|
||||
@ -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,
|
||||
},
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
},
|
||||
|
||||
@ -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'],
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import i18n from '@/config/i18n.config';
|
||||
import 'es6-promise';
|
||||
import '@/config/storage.config';
|
||||
import { BVModalPlugin } from 'bootstrap-vue';
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
lang: null,
|
||||
all: [
|
||||
{ name: 'English', code: 'en' },
|
||||
{ name: 'Estonian', code: 'est' },
|
||||
{ name: 'Estonian', code: 'et' },
|
||||
],
|
||||
},
|
||||
mutations: {
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user