[ADF-2699] added localisation for time ago pipe (#3298)

* [ADF-2699] added localisation to the time-ago pipe

* [ADF-2699] added lang to time ago pipe

* [ADF-2699] added localisation for time ago pipe

* [ADF-2699] removed fdescribe

* [ADF-2699] removed comments

* [ADF-2699] removed useless default values

demo-shell/src/app/components/trashcan/trashcan.component.html

@@ -77,7 +77,7 @@
                     key="archivedAt"
                     title="DOCUMENT_LIST.COLUMNS.DELETED_ON">
                     <ng-template let-value="value">
-                        <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
+                        <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo: currentLocale }}</span>
                     </ng-template>
                 </data-column>
 

demo-shell/src/app/components/trashcan/trashcan.component.ts

@@ -37,12 +37,17 @@ export class TrashcanComponent {
     documentList: DocumentListComponent;
 
     supportedPages = [];
+    currentLocale;
 
     constructor(private preference: UserPreferencesService) {
         this.preference.select(UserPreferenceValues.SupportedPageSizes)
         .subscribe((pages) => {
             this.supportedPages = pages;
         });
+
+        this.preference.select(UserPreferenceValues.Locale).subscribe((locale) => {
+            this.currentLocale = locale;
+         });
     }
 
     refresh() {

lib/content-services/document-list/data/share-datatable-adapter.spec.ts

@@ -108,46 +108,6 @@ describe('ShareDataTableAdapter', () => {
         expect(check).toThrowError(adapter.ERR_COL_NOT_FOUND);
     });
 
-    it('should covert cell value to formatted date', () => {
-        let rawValue = new Date(2015, 6, 15, 21, 43, 11); // Wed Jul 15 2015 21:43:11 GMT+0100 (BST);
-        let dateValue = 'Jul 15, 2015, 9:43:11 PM';
-
-        let file = new FileNode();
-        file.entry.createdAt = rawValue;
-
-        let col = <DataColumn> {
-            key: 'createdAt',
-            type: 'date',
-            format: 'medium' // Jul 15, 2015, 9:43:11 PM
-        };
-
-        let row = new ShareDataRow(file, documentListService, null);
-        let adapter = new ShareDataTableAdapter(documentListService, null);
-
-        let value = adapter.getValue(row, col);
-        expect(value).toBe(dateValue);
-    });
-
-    it('should use default date format as fallback', () => {
-        let rawValue = new Date(2015, 6, 15, 21, 43, 11); // Wed Jul 15 2015 21:43:11 GMT+0100 (BST);
-        let dateValue = 'Jul 15, 2015, 9:43:11 PM';
-
-        let file = new FileNode();
-        file.entry.createdAt = rawValue;
-
-        let col = <DataColumn> {
-            key: 'createdAt',
-            type: 'date',
-            format: null
-        };
-
-        let row = new ShareDataRow(file, documentListService, null);
-        let adapter = new ShareDataTableAdapter(documentListService, null);
-
-        let value = adapter.getValue(row, col);
-        expect(value).toBe(dateValue);
-    });
-
     it('should return date value as string', () => {
         let rawValue = new Date(2015, 6, 15, 21, 43, 11); // Wed Jul 15 2015 21:43:11 GMT+0100 (BST);
 
@@ -166,26 +126,6 @@ describe('ShareDataTableAdapter', () => {
         expect(value).toBe(rawValue);
     });
 
-    it('should log error when having date conversion issues', () => {
-        let dateValue = <Date> {};
-        let file = new FileNode();
-        file.entry.createdAt = <any> dateValue;
-
-        let col = <DataColumn> {
-            key: 'createdAt',
-            type: 'date',
-            format: 'medium'
-        };
-
-        let row = new ShareDataRow(file, documentListService, null);
-        let adapter = new ShareDataTableAdapter(documentListService, null);
-        spyOn(console, 'error').and.stub();
-
-        let value = adapter.getValue(row, col);
-        expect(value).toBe('Error');
-        expect(console.error).toHaveBeenCalled();
-    });
-
     it('should generate fallback icon for a file thumbnail with missing mime type', () => {
         spyOn(documentListService, 'getDefaultMimeTypeIcon').and.returnValue(`assets/images/ft_ic_miscellaneouse.svg`);
 

lib/content-services/document-list/data/share-datatable-adapter.ts

@@ -16,8 +16,6 @@
  */
 
 import { DataColumn, DataRow, DataSorting, DataTableAdapter } from '@alfresco/adf-core';
-import { TimeAgoPipe } from '@alfresco/adf-core';
-import { DatePipe } from '@angular/common';
 import { NodePaging } from 'alfresco-js-api';
 import { PermissionStyleModel } from './../models/permissions-style.model';
 import { DocumentListService } from './../services/document-list.service';
@@ -78,16 +76,6 @@ export class ShareDataTableAdapter implements DataTableAdapter {
             return dataRow.cache[col.key];
         }
 
-        if (col.type === 'date') {
-            try {
-                const result = this.formatDate(col, value);
-                return dataRow.cacheValue(col.key, result);
-            } catch (err) {
-                console.error(`Error parsing date ${value} to format ${col.format}`);
-                return 'Error';
-            }
-        }
-
         if (col.key === '$thumbnail') {
 
             if (this.imageResolver) {
@@ -132,21 +120,6 @@ export class ShareDataTableAdapter implements DataTableAdapter {
         return dataRow.cacheValue(col.key, value);
     }
 
-    formatDate(col: DataColumn, value: any): string {
-        if (col.type === 'date') {
-            const format = col.format || 'medium';
-            if (format === 'timeAgo') {
-                const timeAgoPipe = new TimeAgoPipe();
-                return timeAgoPipe.transform(value);
-            } else {
-                const datePipe = new DatePipe('en-US');
-                return datePipe.transform(value, format);
-            }
-        }
-
-        return value;
-    }
-
     getSorting(): DataSorting {
         return this.sorting;
     }

lib/core/datatable/components/datatable/datatable.component.html

@@ -107,7 +107,7 @@
                                 <mat-icon>{{ data.getValue(row, col) }}</mat-icon>
                             </div>
                             <div *ngSwitchCase="'date'" class="cell-value"
-                                 [attr.data-automation-id]="'date_' + data.getValue(row, col)">
+                                 [attr.data-automation-id]="'date_' + (data.getValue(row, col) | date: 'medium') ">
                                 <adf-date-cell
                                     [data]="data"
                                     [column]="col"

lib/core/datatable/components/datatable/date-cell.component.ts

@@ -15,18 +15,38 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { DataTableCellComponent } from './datatable-cell.component';
+import { UserPreferencesService, UserPreferenceValues } from '../../../services';
 
 @Component({
     selector: 'adf-date-cell',
-    changeDetection: ChangeDetectionStrategy.OnPush,
+
     template: `
         <ng-container>
-            <span [title]="tooltip">{{value}}</span>
+            <span title="{{ tooltip | date:'medium' }}" *ngIf="column?.format === 'timeAgo' else standard_date">
+                {{ value | adfTimeAgo: currentLocale }}
+            </span>
         </ng-container>
+        <ng-template #standard_date>
+            <span title="{{ tooltip | date:'medium' }}">
+                {{ value | date:'medium' }}
+            </span>
+        </ng-template>
     `,
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-date-cell' }
 })
-export class DateCellComponent extends DataTableCellComponent {}
+export class DateCellComponent extends DataTableCellComponent {
+
+    currentLocale;
+
+    constructor(userPreferenceService: UserPreferencesService) {
+        super();
+
+        userPreferenceService.select(UserPreferenceValues.Locale).subscribe((locale) => {
+            this.currentLocale = locale;
+         });
+    }
+
+}

lib/core/datatable/data/object-datatable-adapter.ts

@@ -15,9 +15,6 @@
  * limitations under the License.
  */
 
-import { DatePipe } from '@angular/common';
-
-import { TimeAgoPipe } from '../../pipes';
 import { DataColumn } from './data-column.model';
 import { DataRow } from './data-row.model';
 import { ObjectDataRow } from './object-datarow.model';
@@ -107,14 +104,6 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
 
         let value = row.getValue(col.key);
 
-        if (col.type === 'date') {
-            try {
-                return this.formatDate(col, value);
-            } catch (err) {
-                console.error(`Error parsing date ${value} to format ${col.format}`);
-            }
-        }
-
         if (col.type === 'icon') {
             const icon = row.getValue(col.key);
             return icon;
@@ -123,21 +112,6 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
         return value;
     }
 
-    formatDate(col: DataColumn, value: any): string {
-        if (col.type === 'date') {
-            const format = col.format || 'medium';
-            if (format === 'timeAgo') {
-                const timeAgoPipe = new TimeAgoPipe();
-                return timeAgoPipe.transform(value);
-            } else {
-                const datePipe = new DatePipe('en-US');
-                return datePipe.transform(value, format);
-            }
-        }
-
-        return value;
-    }
-
     getSorting(): DataSorting {
         return this._sorting;
     }

lib/core/pipes/time-ago.pipe.spec.ts

@@ -16,14 +16,15 @@
  */
 
 import { TimeAgoPipe } from './time-ago.pipe';
+import { async } from '@angular/core/testing';
 
 describe('TimeAgoPipe', () => {
 
     let pipe: TimeAgoPipe;
 
-    beforeEach(() => {
+    beforeEach(async(() => {
         pipe = new TimeAgoPipe();
-    });
+    }));
 
     it('should return time difference for a given date', () => {
         let date = new Date();
@@ -39,4 +40,13 @@ describe('TimeAgoPipe', () => {
         expect(pipe.transform(null)).toBe('');
         expect(pipe.transform(undefined)).toBe('');
     });
+
+    describe('When a locale is given', () => {
+
+        it('should return a localised message', async(() => {
+            let date = new Date();
+            const transformedDate  = pipe.transform(date, 'de');
+            expect(transformedDate).toBe('vor ein paar Sekunden');
+        }));
+    });
 });

lib/core/pipes/time-ago.pipe.ts

@@ -16,7 +16,6 @@
  */
 
 import moment from 'moment-es6';
-
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
@@ -24,11 +23,14 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class TimeAgoPipe implements PipeTransform {
 
-    transform(value: Date) {
+    defaultLocale = 'en-US';
+
+    transform(value: Date, locale?: string) {
         if (value !== null && value !== undefined ) {
+            const actualLocale = locale ? locale : this.defaultLocale;
             const then = moment(value);
-            const diff = moment().diff(then, 'days');
+            const diff = moment().locale(actualLocale).diff(then, 'days');
-            return diff > 7 ? then.format('DD/MM/YYYY HH:mm') : then.fromNow();
+            return diff > 7 ? then.locale(actualLocale).format('DD/MM/YYYY HH:mm') : then.locale(actualLocale).fromNow();
         }
         return '';
     }