SHIBUI-814 Added translate component

ui/src/app/app.component.html

@@ -20,7 +20,7 @@
                     aria-expanded="false"
                     ngbDropdownToggle>
                     <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i>
-                    <ng-container translate="action.add-new">Add</ng-container>
+                    <translate key="action.add-new">Add</translate>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="addNewDropdown">
                     <a class="nav-link"

ui/src/app/i18n/component/translate.component.ts

@@ -0,0 +1,67 @@
+import {
+    AfterViewChecked,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    Input,
+    OnDestroy,
+    ViewContainerRef
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+import { I18nService } from '../service/i18n.service';
+import * as fromI18n from '../reducer';
+import { Store } from '@ngrx/store';
+import { Messages } from '../model/Messages';
+
+/*tslint:disable:component-selector */
+
+@Component({
+    selector: 'translate',
+    template: `<ng-content></ng-content>`
+})
+export class TranslateComponent implements OnDestroy {
+    private _key: string;
+    lastParams: any;
+    currentParams: any;
+    messages: Messages = {};
+    sub: Subscription;
+    default: string;
+
+    @Input() set key(key: string) {
+        if (key) {
+            this.default = this.default || this._key;
+            this._key = key;
+            this.update();
+        }
+    }
+
+    @Input() set params(params: any) {
+        this.currentParams = params || {};
+        this.update();
+    }
+
+    constructor(
+        private service: I18nService,
+        private store: Store<fromI18n.State>,
+        private element: ElementRef,
+        private _ref: ChangeDetectorRef
+    ) {
+        this.sub = this.store.select(fromI18n.getMessages).subscribe(m => {
+            if (m && Object.keys(m).length) {
+                this.messages = m;
+                this.update();
+            }
+        });
+    }
+
+    update(): void {
+        const translated = this.service.translate(this._key, this.currentParams, this.messages);
+        this.element.nativeElement.textContent = translated;
+    }
+
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
+    }
+}

ui/src/app/i18n/i18n.module.ts

@@ -10,8 +10,11 @@ import { MessageEffects } from './effect/message.effect';
 import { TranslatePipe } from './pipe/i18n.pipe';
 import { CoreModule } from '../core/core.module';
 import { TranslateDirective } from './directive/translate.directive';
+import { TranslateComponent } from './component/translate.component';
 
-export const COMPONENTS = [];
+export const COMPONENTS = [
+    TranslateComponent
+];
 export const DIRECTIVES = [
     TranslateDirective
 ];

ui/src/app/i18n/service/i18n.service.ts

@@ -38,8 +38,7 @@ export class I18nService {
 
     translate(value: string, interpolated: any, messages: Messages): string {
         interpolated = interpolated || {};
-        let val = messages.hasOwnProperty(value) ? messages[value] : value;
-        console.log(val, messages);
+        let val = messages.hasOwnProperty(value) ? messages[value] : '';
         return this.interpolate(val, interpolated);
     }