improve inheritance with translations i18n.js files

vue-i18n --> chill main i18n ---( )---> app index
chill bundle i18n --> app i18n --^
This commit is contained in:
Mathieu Jaumotte 2021-04-30 14:59:14 +02:00
parent ec68e6f761
commit 4900c81c11
7 changed files with 74 additions and 59 deletions

View File

@ -0,0 +1,52 @@
import { createI18n } from 'vue-i18n'
const datetimeFormats = {
fr: {
short: {
year: "numeric",
month: "numeric",
day: "numeric"
},
long: {
year: "numeric",
month: "short",
day: "numeric",
weekday: "short",
hour: "numeric",
minute: "numeric",
hour12: false
}
}
};
const messages = {
fr: {
action: {
actions: "Actions",
show: "Voir",
edit: "Modifier",
create: "Créer",
remove: "Enlever",
delete: "Supprimer",
save: "Enregistrer",
show_modal: "Ouvrir une modale",
ok: "OK",
cancel: "Annuler",
close: "Fermer",
next: "Suivant",
previous: "Précédent",
back: "Retour"
},
}
};
const _createI18n = (appMessages) => {
Object.assign(messages.fr, appMessages.fr);
return createI18n({
datetimeFormats,
messages,
locale: 'fr',
fallbackLocale: 'fr'
})
};
export { _createI18n }

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="vue-component"> <div class="vue-component">
<h3>{{ $t('title.course') }}</h3> <h3>{{ $t('course.title') }}</h3>
<dl> <dl>
<dt>{{ $t('course.id') }}</dt> <dt>{{ $t('course.id') }}</dt>
<dd>{{ accompanying_course.id }}</dd> <dd>{{ accompanying_course.id }}</dd>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="vue-component"> <div class="vue-component">
<h3>{{ $t('title.persons_associated')}}</h3> <h3>{{ $t('persons_associated.title')}}</h3>
<label>{{ $tc('persons_associated.counter', counter) }}</label> <label>{{ $tc('persons_associated.counter', counter) }}</label>
<table class="rounded"> <table class="rounded">
<thead> <thead>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="vue-component"> <div class="vue-component">
<h3>{{ $t('title.requestor') }}</h3> <h3>{{ $t('requestor.title') }}</h3>
{{ accompanying_course.id }} {{ accompanying_course.id }}
{{ accompanying_course.remark }}<br><br> {{ accompanying_course.remark }}<br><br>
@ -8,7 +8,7 @@
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<button class="sc-button bt-create" @click="modal1.showModal = true"> <button class="sc-button bt-create" @click="modal1.showModal = true">
{{ $t('action.showModal') }} {{ $t('action.show_modal') }}
</button> </button>
</li> </li>
<li> <li>

View File

@ -1,7 +1,7 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import { createI18n } from 'vue-i18n' import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
import { datetimeFormats, messages } from './js/i18n' import { appMessages } from './js/i18n'
import { getDataPromise, postDataPromise } from './store' import { getDataPromise } from './store'
import App from './App.vue'; import App from './App.vue';
@ -10,12 +10,7 @@ getDataPromise.then(store => {
//console.log('store in create_store', store); //console.log('store in create_store', store);
console.log('store accompanyingCourse', store.state.accompanying_course); console.log('store accompanyingCourse', store.state.accompanying_course);
const i18n = createI18n({ const i18n = _createI18n(appMessages);
datetimeFormats,
messages,
locale: 'fr',
fallbackLocale: 'fr'
});
const app = createApp({ const app = createApp({
template: `<app></app>`, template: `<app></app>`,

View File

@ -1,33 +1,32 @@
import { datetimeFormats, personMessages } from 'ChillPersonAssets/vuejs/_js/i18n' import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
const messages = { const appMessages = {
fr: { fr: {
title: {
course: "Parcours",
persons_associated: "Usagers concernés",
requestor: "Demandeur",
},
course: { course: {
id: "id", id: "id",
title: "Parcours",
opening_date: "Date d'ouverture", opening_date: "Date d'ouverture",
closing_date: "Date de clôture", closing_date: "Date de clôture",
remark: "Commentaire", remark: "Commentaire",
closing_motive: "Motif de clôture", closing_motive: "Motif de clôture",
}, },
persons_associated: { persons_associated: {
title: "Usagers concernés",
counter: "Pas d'usager | 1 usager | {count} usagers", counter: "Pas d'usager | 1 usager | {count} usagers",
firstname: "Prénom", firstname: "Prénom",
lastname: "Nom", lastname: "Nom",
startdate: "Date d'entrée", startdate: "Date d'entrée",
enddate: "Date de sortie", enddate: "Date de sortie",
addPerson: "Ajouter un usager", addPerson: "Ajouter un usager",
} },
requestor: {
title: "Demandeur",
},
} }
}; };
Object.assign(messages.fr, personMessages.fr); Object.assign(appMessages.fr, personMessages.fr);
export { export {
datetimeFormats, appMessages
messages
}; };

View File

@ -1,43 +1,12 @@
const datetimeFormats = {
fr: {
short: {
year: "numeric",
month: "numeric",
day: "numeric"
},
long: {
year: "numeric",
month: "short",
day: "numeric",
weekday: "short",
hour: "numeric",
minute: "numeric",
hour12: false
}
}
};
const personMessages = { const personMessages = {
fr: { fr: {
action: { add_persons: {
actions: "Actions", search_add_others_persons: "Rechercher et ajouter d'autres usagers",
show: "Voir", title: "Ajouter des usagers",
edit: "Modifier",
create: "Créer",
remove: "Enlever",
delete: "Supprimer",
save: "Enregistrer",
showModal: "Ouvrir une modale",
ok: "OK",
cancel: "Annuler",
close: "Fermer",
next: "Suivant",
previous: "Précédent",
back: "Retour"
}
} }
} }
};
export { export {
datetimeFormats,
personMessages personMessages
}; };