Skip to content

Commit 2dbe371

Browse files
Merge branch 'feat/add-i18n-support' into staging
2 parents 54314d8 + 11d2962 commit 2dbe371

File tree

13 files changed

+187
-26
lines changed

13 files changed

+187
-26
lines changed

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"pinia": "^2.1.7",
1919
"swiper": "^11.1.3",
2020
"vue": "^3.3.11",
21+
"vue-i18n": "10",
2122
"vue-router": "^4.2.5"
2223
},
2324
"devDependencies": {

src/components/Banner.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
v-if="expanded"
4444
class="percentage-info"
4545
>
46-
{{ `${currentModule.watched_percentage}% completo` }}
46+
{{ `${currentModule.watched_percentage}% ${$t('complete')}` }}
4747
</p>
4848
</div>
4949
<div
@@ -59,7 +59,7 @@
5959
},
6060
}"
6161
>
62-
<UnnnicButton type="secondary">Abrir</UnnnicButton>
62+
<UnnnicButton type="secondary">{{ $t('open') }}</UnnnicButton>
6363
</RouterLink>
6464
</div>
6565
<!-- <unnnic-button type="terciary">gerar certificado</unnnic-button> -->
@@ -75,7 +75,7 @@
7575
},
7676
}"
7777
>
78-
Continuar de onde parei →
78+
{{ $t('resume_where_i_left_off') }}
7979
</RouterLink>
8080
</div>
8181
</div>

src/locales/en.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"complete": "Complete",
3+
"open": "Open",
4+
"resume_where_i_left_off": "Resume where I left off →",
5+
"comments": "Comments",
6+
"your_notes": "Your notes",
7+
"click_here": "Click here",
8+
"to_start_taking_notes": "to start taking notes.",
9+
"leave_a_comment": "Leave a comment",
10+
"comment_placeholder": "A good comment can help others who are learning :)",
11+
"delete_comment": "Delete comment",
12+
"overview": "Overview",
13+
"mark_learning_as_completed": "Mark learning as completed",
14+
"rate_your_learning_in_this_lesson": "Rate your learning in this lesson",
15+
"next_lesson": "Next lesson",
16+
"onboarding": {
17+
"title": "{name}, What do you want to learn today?",
18+
"description": "Below are some knowledge pathways that will help you learn how to use the Weni Platform for various purposes. Choose the one that interests you to start your learning journey with the platform 💙"
19+
},
20+
"see_all": "See all",
21+
"paths": "Paths"
22+
}

src/locales/es.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"complete": "Completo",
3+
"open": "Abrir",
4+
"resume_where_i_left_off": "Continuar desde donde lo dejé →",
5+
"comments": "Comentarios",
6+
"your_notes": "Tus anotaciones",
7+
"click_here": "Haz clic aquí",
8+
"to_start_taking_notes": "para comenzar a hacer anotaciones.",
9+
"leave_a_comment": "Deja un comentario",
10+
"comment_placeholder": "Un buen comentario puede ayudar a otras personas que están aprendiendo :)",
11+
"delete_comment": "Eliminar comentario",
12+
"overview": "Visión General",
13+
"mark_learning_as_completed": "Marcar aprendizaje como completado",
14+
"rate_your_learning_in_this_lesson": "Evalúa tu aprendizaje en esta clase",
15+
"next_lesson": "Próxima clase",
16+
"onboarding": {
17+
"title": "{name}, ¿Qué quieres aprender hoy?",
18+
"description": "A continuación, se enumeran algunas rutas de conocimiento que te ayudarán a aprender a utilizar la Plataforma Weni para diversos fines. Elige la que más te interese para comenzar tu viaje de aprendizaje en la plataforma 💙"
19+
},
20+
"see_all": "Ver todo",
21+
"paths": "Rutas"
22+
}

src/locales/pt_br.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"complete": "Completo",
3+
"open": "Abrir",
4+
"resume_where_i_left_off": "Continuar de onde parei →",
5+
"comments": "Comentários",
6+
"your_notes": "Suas anotações",
7+
"click_here": "Clique aqui",
8+
"to_start_taking_notes": "para começar a fazer anotações.",
9+
"leave_a_comment": "Deixe um comentário",
10+
"comment_placeholder": "Um bom comentário pode ajudar outras pessoas que estão aprendendo :)",
11+
"delete_comment": "Deletar comentário",
12+
"overview": "Visão Geral",
13+
"mark_learning_as_completed": "Marcar aprendizado como concluído",
14+
"rate_your_learning_in_this_lesson": "Avalie seu aprendizado nesta aula",
15+
"next_lesson": "Próxima aula",
16+
"onboarding": {
17+
"title": "{name}, O que você quer aprender hoje?",
18+
"description": "Abaixo estão listadas algumas trilhas de conhecimento que vão lhe ajudar a aprender a utilizar a Plataforma Weni para diversos fins. Escolha a que for de seu interesse para começar uma jornada de aprendizado da plataforma 💙"
19+
},
20+
"see_all": "Ver tudo",
21+
"paths": "Trilhas"
22+
}

src/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { createApp, markRaw } from 'vue';
22
import { createPinia } from 'pinia';
33
import { useRoute, useRouter } from 'vue-router';
4+
45
import App from './App.vue';
56
import router from './router';
67

8+
import i18n from './plugins/i18n';
79
import Unnnic from './utils/plugins/UnnnicSystem';
810
import '@weni/unnnic-system/dist/style.css';
911

@@ -23,6 +25,8 @@ pinia.use(({ store }) => {
2325

2426
app.use(Unnnic);
2527

28+
app.use(i18n);
29+
2630
app.mount('#app');
2731

2832
function enableLinkTranslations() {

src/plugins/i18n.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { createI18n } from 'vue-i18n';
2+
3+
// eslint-disable-next-line camelcase
4+
import pt_br from '@/locales/pt_br.json';
5+
import en from '@/locales/en.json';
6+
import es from '@/locales/es.json';
7+
8+
import('moment/dist/locale/es.js');
9+
import('moment/dist/locale/pt-br.js');
10+
11+
import moment from 'moment';
12+
13+
moment.locale('pt-br');
14+
15+
const messages = {
16+
'pt-br': pt_br,
17+
en,
18+
es,
19+
};
20+
21+
const i18n = createI18n({
22+
locale: 'en',
23+
fallbackLocale: 'en',
24+
messages,
25+
dateTimeFormats: {
26+
'pt-br': {
27+
short: {
28+
year: 'numeric',
29+
month: '2-digit',
30+
day: '2-digit',
31+
},
32+
long: {
33+
month: 'long',
34+
day: '2-digit',
35+
},
36+
},
37+
en: {
38+
short: {
39+
year: 'numeric',
40+
month: '2-digit',
41+
day: '2-digit',
42+
},
43+
long: {
44+
month: 'long',
45+
day: '2-digit',
46+
},
47+
},
48+
es: {
49+
short: {
50+
year: 'numeric',
51+
month: '2-digit',
52+
day: '2-digit',
53+
},
54+
long: {
55+
month: 'long',
56+
day: '2-digit',
57+
},
58+
},
59+
},
60+
});
61+
62+
export default i18n;

src/stores/header/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { defineStore } from 'pinia';
22
import { useModulesStore } from '@/stores/modules';
3+
import i18n from '@/plugins/i18n';
34

45
export const useHeaderStore = defineStore('header', {
56
getters: {
@@ -10,7 +11,7 @@ export const useHeaderStore = defineStore('header', {
1011

1112
if (['Home', 'ClassesListAll', 'ClassPage'].includes(routerName)) {
1213
breadcrumbs.push({
13-
name: 'Trilhas',
14+
name: i18n.global.t('paths'),
1415
path: {
1516
name: 'Onboarding',
1617
},

src/views/ClassPage.vue

+14-14
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
/>
1313
<div :class="['notes', { yellowed: isNotesYellowed }]">
1414
<div class="header">
15-
<div class="title">Suas anotações</div>
15+
<div class="title">{{ $t('your_notes') }}</div>
1616
<div class="action">
1717
<UnnnicIcon
1818
v-if="isSavingNotes"
@@ -30,9 +30,9 @@
3030
class="edit-button"
3131
@click="$refs.notesInput.focus()"
3232
>
33-
Clique aqui
33+
{{ $t('click_here') }}
3434
</span>
35-
para começar a fazer anotações.
35+
{{ $t('to_start_taking_notes') }}
3636
</div>
3737
<div class="content">
3838
<textarea
@@ -62,7 +62,7 @@
6262
class="leave-a-comment"
6363
@click.stop="goToCommentInput"
6464
>
65-
Deixe um comentário
65+
{{ $t('leave_a_comment') }}
6666
</span>
6767
</div>
6868
<!--
@@ -79,13 +79,13 @@
7979
:tabs="['overview' /* , 'materials' */, 'comments']"
8080
@change.self="currentTab = $event"
8181
>
82-
<template #tab-head-overview>Visão Geral</template>
82+
<template #tab-head-overview>{{ $t('overview') }}</template>
8383
<template #tab-panel-overview>
8484
<div class="overview-container">
8585
<UnnnicSwitch
8686
v-model="currentClass.lesson_monitoring.watched"
8787
size="medium"
88-
textRight="Marcar aprendizado como concluído"
88+
:textRight="$t('mark_learning_as_completed')"
8989
class="toggle-class"
9090
@update:model-value="
9191
toggleCheckClass({
@@ -113,16 +113,16 @@
113113
</template> -->
114114

115115
<template #tab-head-comments>
116-
Comentários ({{ comments.length }})
116+
{{ $t('comments') }} ({{ comments.length }})
117117
</template>
118118
<template #tab-panel-comments>
119119
<UnnnicInput
120120
ref="comment-input"
121121
v-model="comment"
122-
label="Deixe um comentário"
122+
:label="$t('leave_a_comment')"
123123
:disabled="creatingComment"
124124
size="md"
125-
placeholder="Um bom comentário pode ajudar outras pessoas que estão aprendendo :)"
125+
:placeholder="$t('comment_placeholder')"
126126
iconRight="send-email-3-1"
127127
iconRightClickable
128128
class="comment-input"
@@ -180,7 +180,7 @@
180180
size="sm"
181181
scheme="feedback-red"
182182
/>
183-
Excluir comentário
183+
{{ $t('delete_comment') }}
184184
</div>
185185
</UnnnicDropdown>
186186
</template>
@@ -194,7 +194,7 @@
194194
<div class="mood-rating-container">
195195
<UnnnicMoodRating
196196
v-model="mood"
197-
title="Avalie seu aprendizado nesta aula"
197+
:title="$t('rate_your_learning_in_this_lesson')"
198198
@update:model-value="setMood"
199199
/>
200200
</div>
@@ -203,7 +203,7 @@
203203
v-if="nextClass"
204204
class="next-class-container"
205205
>
206-
<div class="title">Próxima aula</div>
206+
<div class="title">{{ $t('next_lesson') }}</div>
207207

208208
<RouterLink
209209
:to="{
@@ -223,7 +223,7 @@
223223
"
224224
:info="
225225
nextClassCommentsCount !== null
226-
? `(${nextClassCommentsCount} comentários)`
226+
? `(${nextClassCommentsCount} ${$t('comments')})`
227227
: null
228228
"
229229
:checked="nextClass.lesson_monitoring.watched"
@@ -269,7 +269,7 @@ export default {
269269
name: 'ClassPage',
270270
data() {
271271
return {
272-
text: `<h1>Titulo</h1>\r\n\r\n<p>sdads asdas</p>\r\n\r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porta sagittis ligula at egestas. Vivamus vestibulum diam sit amet massa viverra, quis dapibus diam pellentesque. Pellentesque fermentum efficitur lorem sit amet sollicitudin. Sed magna velit, pellentesque sit amet aliquet quis, dapibus vitae erat. Nullam imperdiet mollis odio eu ultrices. Duis imperdiet volutpat dolor, vitae imperdiet turpis elementum at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut ornare nunc.</p>\r\n\r\n<p>Sed quam lorem, ultricies vitae sapien a, vehicula malesuada arcu. Phasellus luctus lobortis enim eget consequat. Praesent mattis quam urna, tempor ornare sapien tincidunt ac. Pellentesque consectetur volutpat velit vel tincidunt. Vestibulum vestibulum fringilla malesuada. Curabitur sit amet ex eu nunc feugiat efficitur. Morbi hendrerit ipsum sed neque accumsan, ut ultricies turpis commodo. Cras dapibus nisi vel interdum laoreet. Sed varius, arcu eu finibus imperdiet, ligula eros luctus augue, quis feugiat justo magna non enim.</p>\r\n\r\n<p>Sed eget bibendum diam, nec vehicula augue. Quisque consectetur commodo finibus. Aenean commodo ante nec tempus auctor. Aenean vel aliquet magna. Mauris aliquam odio sit amet rhoncus ultricies. Praesent lobortis, enim a placerat gravida, dolor ante suscipit libero, ac aliquet dui tellus vitae magna. Fusce ut fermentum urna. Integer nunc nunc, volutpat porttitor tincidunt condimentum, blandit eget turpis. Sed pharetra scelerisque laoreet. Nulla facilisi. Aliquam ultrices non magna sit amet mattis. Sed feugiat dui at lacus finibus, sed tincidunt lorem fermentum. Curabitur molestie pharetra rhoncus. Etiam egestas nunc sed tortor dapibus feugiat vel ac felis.</p>\r\n\r\n<p>&nbsp;</p>`,
272+
text: ``,
273273
comments: [],
274274
275275
currentTab: 'overview',

src/views/ClassesListAll.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"
3131
:info="
3232
course.lesson_monitoring.comment_count !== null
33-
? `(${course.lesson_monitoring.comment_count} comentários)`
33+
? `(${course.lesson_monitoring.comment_count} ${$t('comments')})`
3434
: null
3535
"
3636
:checked="course.lesson_monitoring.watched"

src/views/Home.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
params: { id_category: category.id },
4545
}"
4646
>
47-
Ver tudo
47+
{{ $t('see_all') }}
4848
</RouterLink>
4949
<UnnnicButtonIcon
5050
type="secondary"
@@ -86,7 +86,7 @@
8686
"
8787
:info="
8888
grade.lesson_monitoring.comment_count !== null
89-
? `(${grade.lesson_monitoring.comment_count} comentários)`
89+
? `(${grade.lesson_monitoring.comment_count} ${$t('comments')})`
9090
: null
9191
"
9292
:checked="grade.lesson_monitoring.watched"

src/views/Onboarding.vue

+2-5
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
<main class="onboarding">
33
<div class="onboarding__header unnnic-grid-giant">
44
<div class="texts unnnic-grid-span-7">
5-
<h1>{{ name }}, o que você quer aprender hoje?</h1>
5+
<h1>{{ $t('onboarding.title', { name }) }}</h1>
66
<p>
7-
Abaixo estão listadas algumas trilhas de conhecimento que vão lhe
8-
ajudar a aprender a utilizar a Plataforma Weni para diversos fins.
9-
Escolha a que for de seu interesse para começar uma jornada de
10-
aprendizado da plataforma 💙
7+
{{ $t('onboarding.description') }}
118
</p>
129
</div>
1310
</div>

0 commit comments

Comments
 (0)