adfTimeAgo pipe and demo (#2182)

demo-shell-ng2/app/components/files/files.component.html

@@ -118,11 +118,14 @@
                     class="desktop-only">
                 </data-column>
                 <data-column
-                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
+                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
                     key="createdAt"
                     type="date"
                     format="medium"
                     class="desktop-only">
+                    <ng-template let-value="value">
+                        <span title="{{ value }}">{{ value | adfTimeAgo }}</span>
+                    </ng-template>
                 </data-column>
             </data-columns>
 

demo-shell-ng2/resources/i18n/en.json

@@ -6,7 +6,8 @@
             "DISPLAY_NAME": "Display name",
             "TAG": "Tag",
             "CREATED_BY": "Created by",
-            "CREATED_ON": "Created on"
+            "CREATED_ON": "Created on",
+            "CREATED": "Created"
         },
         "ACTIONS": {
             "FOLDER": {

ng2-components/ng2-alfresco-core/index.ts

@@ -103,8 +103,10 @@ import { DataColumnListComponent } from './src/components/data-column/data-colum
 import { DataColumnComponent } from './src/components/data-column/data-column.component';
 import { NodePermissionDirective } from './src/directives/node-permission.directive';
 import { UploadDirective } from './src/directives/upload.directive';
+
 import { FileSizePipe } from './src/pipes/file-size.pipe';
 import { HighlightPipe } from './src/pipes/text-highlight.pipe';
+import { TimeAgoPipe } from './src/pipes/time-ago.pipe';
 
 import { AlfrescoMdlMenuDirective } from './src/components/material/mdl-menu.directive';
 import { AlfrescoMdlTextFieldDirective } from './src/components/material/mdl-textfield.directive';
@@ -219,7 +221,8 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         DataColumnComponent,
         DataColumnListComponent,
         FileSizePipe,
-        HighlightPipe
+        HighlightPipe,
+        TimeAgoPipe
     ],
     providers: [...providers(), ...deprecatedProviders(), MomentDateAdapter],
     exports: [
@@ -240,7 +243,8 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         DataColumnComponent,
         DataColumnListComponent,
         FileSizePipe,
-        HighlightPipe
+        HighlightPipe,
+        TimeAgoPipe
     ]
 })
 export class CoreModule {

ng2-components/ng2-alfresco-core/package.json

@@ -60,6 +60,7 @@
     "hammerjs": "2.0.8",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
+    "moment": "2.18.1",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",

ng2-components/ng2-alfresco-core/src/pipes/time-ago.pipe.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as moment from 'moment';
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'adfTimeAgo'
+})
+export class TimeAgoPipe implements PipeTransform {
+
+    transform(value: Date) {
+        const then = moment(value);
+        const diff = moment().diff(then, 'days');
+        return diff > 7 ? then.format('DD/MM/YYYY HH:mm') : then.fromNow();
+    }
+}