Skip to content

Commit fc54a52

Browse files
aideslucasaideslucas
committed
fix(todos): snackbar not being translated
added translation for all snackbar messages, on filter, toggle, added, and removed fixes #324
1 parent 1b67333 commit fc54a52

File tree

7 files changed

+79
-12
lines changed

7 files changed

+79
-12
lines changed

‎src/app/examples/todos/components/todos-container.component.ts‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Component, OnInit, OnDestroy } from '@angular/core';
1+
import { Component, OnDestroy, OnInit } from '@angular/core';
22
import { MatSnackBar } from '@angular/material/snack-bar';
3-
import { Store, select } from '@ngrx/store';
4-
import { Subject } from 'rxjs';
5-
import { takeUntil } from 'rxjs/operators';
3+
import { select, Store } from '@ngrx/store';
4+
import { forkJoin, Subject } from 'rxjs';
5+
import { first, takeUntil } from 'rxjs/operators';
66

77
import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
88

@@ -16,6 +16,7 @@ import {
1616
import { selectTodos } from '../todos.selectors';
1717
import { Todo, TodosFilter, TodosState } from '../todos.model';
1818
import { State } from '../../examples.state';
19+
import { TranslateService } from '@ngx-translate/core';
1920

2021
@Component({
2122
selector: 'anms-todos',
@@ -29,7 +30,11 @@ export class TodosContainerComponent implements OnInit, OnDestroy {
2930
todos: TodosState;
3031
newTodo = '';
3132

32-
constructor(public store: Store<State>, public snackBar: MatSnackBar) {}
33+
constructor(
34+
public store: Store<State>,
35+
public snackBar: MatSnackBar,
36+
public translateService: TranslateService
37+
) {}
3338

3439
ngOnInit() {
3540
this.store
@@ -73,26 +78,58 @@ export class TodosContainerComponent implements OnInit, OnDestroy {
7378

7479
onAddTodo() {
7580
this.store.dispatch(new ActionTodosAdd({ name: this.newTodo }));
76-
this.showNotification(`"${this.newTodo}" added`);
81+
this.translateService
82+
.get('anms.examples.todos.added.notification', { name: this.newTodo })
83+
.pipe(first())
84+
.subscribe(addedMessage => {
85+
this.showNotification(addedMessage);
86+
});
7787
this.newTodo = '';
7888
}
7989

8090
onToggleTodo(todo: Todo) {
81-
const newStatus = todo.done ? 'active' : 'done';
8291
this.store.dispatch(new ActionTodosToggle({ id: todo.id }));
83-
this.showNotification(`Toggled "${todo.name}" to ${newStatus}`, 'Undo')
84-
.onAction()
85-
.subscribe(() => this.onToggleTodo({ ...todo, done: !todo.done }));
92+
const newStatus$ = this.translateService
93+
.get(`anms.examples.todos.filter.${todo.done ? 'active' : 'done'}`)
94+
.pipe(first());
95+
const undo$ = this.translateService
96+
.get('anms.examples.todos.undo')
97+
.pipe(first());
98+
const toggledMessage$ = this.translateService
99+
.get('anms.examples.todos.toggle.notification', { name: todo.name })
100+
.pipe(first());
101+
forkJoin(newStatus$, undo$, toggledMessage$).subscribe(
102+
([newStatus, undo, toggledMessage]) => {
103+
this.showNotification(`${toggledMessage} ${newStatus}`, undo)
104+
.onAction()
105+
.subscribe(() => this.onToggleTodo({ ...todo, done: !todo.done }));
106+
}
107+
);
86108
}
87109

88110
onRemoveDoneTodos() {
89111
this.store.dispatch(new ActionTodosRemoveDone());
90-
this.showNotification('Removed done todos');
112+
this.translateService
113+
.get('anms.examples.todos.remove.notification')
114+
.pipe(first())
115+
.subscribe(removedMessage => {
116+
this.showNotification(removedMessage);
117+
});
91118
}
92119

93120
onFilterTodos(filter: TodosFilter) {
94121
this.store.dispatch(new ActionTodosFilter({ filter }));
95-
this.showNotification(`Filtered to ${filter.toLowerCase()}`);
122+
const filterToMessage$ = this.translateService
123+
.get('anms.examples.todos.filter.notification')
124+
.pipe(first());
125+
const filterMessage$ = this.translateService
126+
.get(`anms.examples.todos.filter.${filter.toLowerCase()}`)
127+
.pipe(first());
128+
forkJoin(filterToMessage$, filterMessage$).subscribe(
129+
([filterToMessage, filterMessage]) => {
130+
this.showNotification(`${filterToMessage} ${filterMessage}`);
131+
}
132+
);
96133
}
97134

98135
private showNotification(message: string, action?: string) {

‎src/assets/i18n/examples/de.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
"anms.examples.todos.filter.description": "Anzeigen",
2424
"anms.examples.todos.filter.items": "Aufgaben",
2525
"anms.examples.todos.filter.item": "Aufgabe",
26+
"anms.examples.todos.filter.notification": "Gefiltert nach",
27+
"anms.examples.todos.remove.notification": "Erledigt aufgaben entfernt",
28+
"anms.examples.todos.toggle.notification": "Umschalten von {{name}} nach",
29+
"anms.examples.todos.added.notification": "{{name}} hinzugefügt",
30+
"anms.examples.todos.undo": "Undo",
2631
"anms.examples.stocks.title": "Börse",
2732
"anms.examples.stocks.symbol": "Aktiensymbol",
2833
"anms.examples.stocks.description":

‎src/assets/i18n/examples/en.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@
2424
"anms.examples.todos.filter.description": "Displaying",
2525
"anms.examples.todos.filter.items": "todos",
2626
"anms.examples.todos.filter.item": "todo",
27+
"anms.examples.todos.filter.notification": "Filtered to",
28+
"anms.examples.todos.remove.notification": "Removed done todos",
29+
"anms.examples.todos.toggle.notification": "Toggled {{name}} to",
30+
"anms.examples.todos.added.notification": "{{name}} added",
31+
"anms.examples.todos.undo": "Undo",
2732
"anms.examples.stocks.title": "Stock market",
2833
"anms.examples.stocks.symbol": "Stock symbol",
2934
"anms.examples.stocks.description":

‎src/assets/i18n/examples/es.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@
2424
"anms.examples.todos.filter.description": "Mostrando",
2525
"anms.examples.todos.filter.items": "recordatorios",
2626
"anms.examples.todos.filter.item": "recordatorio",
27+
"anms.examples.todos.filter.notification": "Filtrado a",
28+
"anms.examples.todos.remove.notification": "Hechos eliminados",
29+
"anms.examples.todos.toggle.notification": "Alternadas de {{name}} a",
30+
"anms.examples.todos.added.notification": "{{name}} agregado",
31+
"anms.examples.todos.undo": "Deshacer",
2732
"anms.examples.stocks.title": "Mercado de valores",
2833
"anms.examples.stocks.symbol": "Símbolo de la acción",
2934
"anms.examples.stocks.description":

‎src/assets/i18n/examples/fr.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@
2525
"anms.examples.todos.filter.description": "Affiche",
2626
"anms.examples.todos.filter.items": "tâches",
2727
"anms.examples.todos.filter.item": "tâche",
28+
"anms.examples.todos.filter.notification": "Filtré à",
29+
"anms.examples.todos.remove.notification": "Terminées tâches supprimées",
30+
"anms.examples.todos.toggle.notification": "basculer {{name}} à",
31+
"anms.examples.todos.added.notification": "{{name}} ajouté",
32+
"anms.examples.todos.undo": "Annuler",
2833
"anms.examples.stocks.title": "Bourse",
2934
"anms.examples.stocks.symbol": "Symbole boursier",
3035
"anms.examples.stocks.description":

‎src/assets/i18n/examples/pt-br.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
"anms.examples.todos.filter.description": "Mostrando",
2424
"anms.examples.todos.filter.items": "todos",
2525
"anms.examples.todos.filter.item": "todo",
26+
"anms.examples.todos.filter.notification": "Filtrado para",
27+
"anms.examples.todos.remove.notification": "Removido tudo feito",
28+
"anms.examples.todos.toggle.notification": "alternou de {{name}} para",
29+
"anms.examples.todos.added.notification": "{{name}} adicionado",
30+
"anms.examples.todos.undo": "Desfazer",
2631
"anms.examples.stocks.title": "Mercado de Ações",
2732
"anms.examples.stocks.symbol": "Simbolo",
2833
"anms.examples.stocks.description":

‎src/assets/i18n/examples/sk.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
"anms.examples.todos.filter.active": "Aktívne",
2424
"anms.examples.todos.filter.description": "Zobrazené",
2525
"anms.examples.todos.filter.items": "úlohy",
26+
"anms.examples.todos.filter.notification": "Filtrované na",
27+
"anms.examples.todos.remove.notification": "Odstránené dokončené úlohy",
28+
"anms.examples.todos.toggle.notification": "prepínať medzi {{name}} a",
29+
"anms.examples.todos.added.notification": "{{name}} pridané",
30+
"anms.examples.todos.undo": "Aufknöpfen",
2631
"anms.examples.stocks.title": "Akciový trh",
2732
"anms.examples.stocks.symbol": "Symbol akcie",
2833
"anms.examples.stocks.description":

0 commit comments

Comments
 (0)