[ADF-1026] i18n support for "empty" screen (#2066)

* i18n support for "empty" screen

* fix unit tests

* fix tests

* fix tests

ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts

@@ -18,16 +18,16 @@
 import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Observable } from 'rxjs/Rx';
+import { TranslateService } from '@ngx-translate/core';
-
 import { ActivitiContentService } from 'ng2-activiti-form';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
+import { Observable } from 'rxjs/Rx';
 
 import { TranslationMock } from './../assets/translation.service.mock';
 import { ActivitiProcessAttachmentListComponent } from './adf-process-attachment-list.component';
 
-describe('Activiti Process Instance Attachment List', () => {
+describe('ActivitiProcessAttachmentListComponent', () => {
 
     let componentHandler: any;
     let service: ActivitiContentService;
@@ -60,6 +60,11 @@ describe('Activiti Process Instance Attachment List', () => {
         component = fixture.componentInstance;
         service = fixture.debugElement.injector.get(ActivitiContentService);
 
+        const translateService: TranslateService = TestBed.get(TranslateService);
+        spyOn(translateService, 'get').and.callFake((key) => {
+            return Observable.of(key);
+        });
+
         mockAttachment = {
             'size': 2,
             'total': 2,
@@ -172,7 +177,7 @@ describe('Activiti Process Instance Attachment List', () => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty');
+            expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER');
         });
     }));
 

ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts

@@ -18,6 +18,7 @@
 import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
 import { ActivitiContentService } from 'ng2-activiti-form';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
@@ -41,7 +42,7 @@ describe('TaskAttachmentList', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                DataTableModule
+                DataTableModule.forRoot()
             ],
             declarations: [
                 TaskAttachmentListComponent
@@ -51,11 +52,16 @@ describe('TaskAttachmentList', () => {
             ]
         }).compileComponents();
 
-        let translateService = TestBed.get(AlfrescoTranslationService);
+        let translateService: AlfrescoTranslationService = TestBed.get(AlfrescoTranslationService);
         spyOn(translateService, 'addTranslationFolder').and.stub();
         spyOn(translateService, 'get').and.callFake((key) => {
             return Observable.of(key);
         });
+
+        let nativeTranslateService: TranslateService = TestBed.get(TranslateService);
+        spyOn(nativeTranslateService, 'get').and.callFake((key) => {
+            return Observable.of(key);
+        });
     }));
 
     beforeEach(() => {
@@ -167,7 +173,7 @@ describe('TaskAttachmentList', () => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty');
+            expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER');
         });
     }));
 

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.html

@@ -1,6 +1,6 @@
 <div  id="adf-empty-list" class="empty-list_empty_template">
-    <div class="empty-list__this-space-is-empty">{{emptyMsg}}</div>
+    <div class="empty-list__this-space-is-empty">{{ emptyMsg | translate }}</div>
-    <div class="empty-list__drag-drop">{{dragDropMsg}}</div>
+    <div class="empty-list__drag-drop">{{ dragDropMsg | translate }}</div>
-    <div class="empty-list__any-files-here-to-add">{{additionalMsg}}</div>
+    <div class="empty-list__any-files-here-to-add">{{ additionalMsg | translate }}</div>
     <img [src]="emptyListImageUrl" class="empty-list__empty_doc_lib">
 </div>

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.spec.ts

@@ -45,9 +45,9 @@ describe('AdfEmptyListComponentComponent', () => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty');
+            expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER');
-            expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('Drag and drop');
+            expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE');
-            expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('any files here to add');
+            expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE');
             expect(fixture.nativeElement.querySelector('.empty-list__empty_doc_lib').src).toContain('empty_doc_lib');
         });
     }));

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.ts

@@ -28,16 +28,12 @@ export class AdfEmptyListComponent {
     emptyListImageUrl: string = require('../../assets/images/empty_doc_lib.svg');
 
     @Input()
-    emptyMsg: string = 'This list is empty';
+    emptyMsg: string = 'ADF-DATATABLE.EMPTY.HEADER';
 
     @Input()
-    dragDropMsg: string = 'Drag and drop';
+    dragDropMsg: string = 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE';
 
     @Input()
-    additionalMsg: string = 'any files here to add';
+    additionalMsg: string = 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE';
-
-    constructor() {
-
-    }
 
 }

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -59,7 +59,6 @@ describe('DataTable', () => {
     beforeEach(() => {
         // reset MDL handler
         window['componentHandler'] = null;
-        // dataTable = new DataTableComponent();
 
         eventMock = {
             preventDefault: function () {
@@ -211,14 +210,14 @@ describe('DataTable', () => {
     });
 
     it('should initialize default adapter', () => {
-        let table = new DataTableComponent(null, null);
+        let table = new DataTableComponent(null, null, null);
         expect(table.data).toBeUndefined();
         table.ngOnChanges({'data': new SimpleChange('123', {}, true)});
         expect(table.data).toEqual(jasmine.any(ObjectDataTableAdapter));
     });
 
     it('should load data table on onChange', () => {
-        let table = new DataTableComponent(null, null);
+        let table = new DataTableComponent(null, null, null);
         let data = new ObjectDataTableAdapter([], []);
 
         expect(table.data).toBeUndefined();

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -20,7 +20,7 @@ import {
     IterableDiffers, OnChanges, Optional, Output, SimpleChange, SimpleChanges, TemplateRef
 } from '@angular/core';
 import { MdCheckboxChange } from '@angular/material';
-import { DataColumnListComponent } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, DataColumnListComponent } from 'ng2-alfresco-core';
 import { Observable, Observer, Subscription } from 'rxjs/Rx';
 import { DataColumn, DataRow, DataRowEvent, DataSorting, DataTableAdapter } from '../../data/datatable-adapter';
 import { ObjectDataRow, ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
@@ -105,12 +105,17 @@ export class DataTableComponent implements AfterContentInit, AfterViewInit, OnCh
     private multiClickStreamSub: Subscription;
 
     constructor(
+        translateService: AlfrescoTranslationService,
         @Optional() private el: ElementRef,
         private differs: IterableDiffers) {
         if (differs) {
             this.differ = differs.find([]).create(null);
         }
         this.click$ = new Observable<DataRowEvent>(observer => this.clickObserver = observer).share();
+
+        if (translateService) {
+            translateService.addTranslationFolder('ng2-alfresco-datatable', 'assets/ng2-alfresco-datatable');
+        }
     }
 
     ngAfterContentInit() {

ng2-components/ng2-alfresco-datatable/src/directives/loading-template.directive.spec.ts

@@ -17,6 +17,7 @@
 
 import { Injector } from '@angular/core';
 import { getTestBed, TestBed } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableComponent } from '../components/datatable/datatable.component';
 import { LoadingContentTemplateDirective } from './loading-template.directive';
 
@@ -26,6 +27,9 @@ describe('LoadingContentTemplateDirective', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
             providers: [
                 LoadingContentTemplateDirective,
                 DataTableComponent

ng2-components/ng2-alfresco-datatable/src/directives/no-content-template.directive.spec.ts

@@ -17,6 +17,7 @@
 
 import { Injector } from '@angular/core';
 import { getTestBed, TestBed } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableComponent } from '../components/datatable/datatable.component';
 import { NoContentTemplateDirective } from './no-content-template.directive';
 
@@ -26,6 +27,9 @@ describe('NoContentTemplateDirective', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
             providers: [
                 NoContentTemplateDirective,
                 DataTableComponent

ng2-components/ng2-alfresco-datatable/src/i18n/en.json

@@ -1,3 +1,11 @@
 {
-
+    "ADF-DATATABLE": {
+        "EMPTY": {
+            "HEADER": "This list is empty",
+            "DRAG-AND-DROP": {
+                "TITLE": "Drag and drop",
+                "SUBTITLE": "any files here to add"
+            }
+        }
+    }
 }

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -24,7 +24,9 @@
     <div *ngIf="!isEmptyTemplateDefined()">
         <no-content-template>
             <ng-template>
-                <adf-empty-list [emptyMsg]="'This folder is empty'"></adf-empty-list>
+                <adf-empty-list
+                    emptyMsg="ADF-DOCUMENT-LIST.EMPTY.HEADER">
+                </adf-empty-list>
             </ng-template>
         </no-content-template>
     </div>

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts

@@ -17,8 +17,9 @@
 
 import { NgZone, SimpleChange, TemplateRef } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DataTableModule } from 'ng2-alfresco-datatable';
+import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { DataColumn, DataRowEvent, DataTableComponent } from 'ng2-alfresco-datatable';
+import { DataTableModule } from 'ng2-alfresco-datatable';
 import { Observable, Subject } from 'rxjs/Rx';
 import { FileNode, FolderNode } from '../assets/document-library.model.mock';
 import {
@@ -34,7 +35,6 @@ import { ImageResolver, RowFilter, ShareDataRow } from './../data/share-datatabl
 import { DocumentListService } from './../services/document-list.service';
 import { DocumentListComponent } from './document-list.component';
 import { DocumentMenuActionComponent } from './document-menu-action.component';
-import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
 
 declare let jasmine: any;
 
@@ -712,7 +712,7 @@ describe('DocumentList', () => {
 
     it('should check [empty folder] template ', () => {
         documentList.emptyFolderTemplate = <TemplateRef<any>> {};
-        documentList.dataTable = new DataTableComponent(null, null);
+        documentList.dataTable = new DataTableComponent(null, null, null);
         expect(documentList.dataTable).toBeDefined();
         expect(documentList.isEmptyTemplateDefined()).toBeTruthy();
 
@@ -722,7 +722,7 @@ describe('DocumentList', () => {
 
     it('should empty folder NOT show the pagination', () => {
         documentList.emptyFolderTemplate = <TemplateRef<any>> {};
-        documentList.dataTable = new DataTableComponent(null, null);
+        documentList.dataTable = new DataTableComponent(null, null, null);
 
         expect(documentList.isEmpty()).toBeTruthy();
         expect(element.querySelector('alfresco-pagination')).toBe(null);

ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.spec.ts

@@ -29,7 +29,7 @@ describe('EmptyFolderContent', () => {
     beforeEach(() => {
         let documentListService = new DocumentListServiceMock();
         documentList = new DocumentListComponent(documentListService, null, null, null);
-        documentList.dataTable = new DataTableComponent(null, null);
+        documentList.dataTable = new DataTableComponent(null, null, null);
         emptyFolderContent = new EmptyFolderContentDirective(documentList);
     });
 

ng2-components/ng2-alfresco-documentlist/src/i18n/en.json

@@ -6,5 +6,10 @@
             "CREATE": "Create",
             "CANCEL": "Cancel"
         }
+    },
+    "ADF-DOCUMENT-LIST": {
+        "EMPTY": {
+            "HEADER": "This folder is empty"
+        }
     }
 }