[ADF-497] Improvement to task comment (activiti-comments) component -1829 Github (#2054)

* [ADF-497] Improvement to task comment (activiti-comments) component - 1829 Github

* Added new design
* Removed dialog
* Migrated from mdl to md
* Created a new component to list comments by using data-table

* [ADF-497] Improvement to task comment (activiti-comments) component - 1829 Github

    * Added documentation

* [ADF-497] Improvement to task comment (activiti-comments) component -1829 Github

* Improved css class naming
* Changed component name AdfCommentList to AdfCommentListComponent
* Code refactoring

* [ADF-497] Improvement to task comment (activiti-comments) component -1829 Github

* Removed extra space at the end

* [ADF-497] Improvement to task comment (activiti-comments) component -1829 Github

* Import reordering

ng2-components/ng2-activiti-tasklist/README.md

@@ -39,6 +39,9 @@
 - [Task People Component](#task-people-component)
   * [Properties](#properties-8)
     + [Events](#events-7)
+- [ADF Comments Component](#adf-comments-component)
+  * [Properties](#properties-9)
+    + [Events](#events-8)
 - [Build from sources](#build-from-sources)
 - [NPM scripts](#npm-scripts)
 - [Demo](#demo)
@@ -460,6 +463,32 @@ This component displays involved users to a specified task
 
 No Events
 
+## ADF Comments Component
+
+This component displays comments entered by involved users to a specified task. It also allows an involved user to add his/her comment to the task.
+
+```html
+<adf-comments
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-comments>
+```
+
+![adf-comments](docs/assets/adf-comments.png)
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| taskId | string | The numeric ID of the task |
+| readOnly | boolean | The boolean flag |
+
+#### Events
+
+| Name | Description |
+| --- | --- |
+| error | Raised when an error occurs while displaying/adding a comment |
+
 ## Build from sources
 
 You can build component from sources with the following commands:

ng2-components/ng2-activiti-tasklist/index.ts

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
+import { DatePipe } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { MdButtonModule, MdIconModule } from '@angular/material';
+import { MdButtonModule, MdIconModule, MdInputModule } from '@angular/material';
 import { ActivitiFormModule } from 'ng2-activiti-form';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
@@ -35,6 +36,7 @@ import {
     ActivitiTaskDetails,
     ActivitiTaskHeader,
     ActivitiTaskList,
+    AdfCommentListComponent,
     NoTaskDetailsTemplateComponent,
     PeopleList,
     TaskAttachmentListComponent
@@ -59,7 +61,8 @@ export const ACTIVITI_TASKLIST_DIRECTIVES: any[] = [
     ActivitiPeopleSearch,
     TaskAttachmentListComponent,
     ActivitiCreateTaskAttachmentComponent,
-    PeopleList
+    PeopleList,
+    AdfCommentListComponent
 ];
 
 export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
@@ -73,13 +76,15 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
         DataTableModule,
         ActivitiFormModule,
         MdIconModule,
-        MdButtonModule
+        MdButtonModule,
+        MdInputModule
     ],
     declarations: [
         ...ACTIVITI_TASKLIST_DIRECTIVES
     ],
     providers: [
-        ...ACTIVITI_TASKLIST_PROVIDERS
+        ...ACTIVITI_TASKLIST_PROVIDERS,
+        DatePipe
     ],
     exports: [
         ...ACTIVITI_TASKLIST_DIRECTIVES,

ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.css

@@ -1,32 +1,25 @@
-:host {
+.adf-comments-container {
+    height: 100%;
     width: 100%;
-}
-
-.activiti-label {
-    font-weight: bolder;
-}
-
-.material-icons:hover {
-    color: rgb(255, 152, 0);
-}
-
-.mdl-tooltip {
-    will-change: unset;
-}
-
-.material-icons {
-    cursor: pointer;
-}
-
-.list-wrap {
-    word-wrap: break-word;
-    word-break: break-all;
-    -moz-hyphens:auto;
-    -webkit-hyphens:auto;
-    -o-hyphens:auto;
-    hyphens:auto;
-}
-
-.hide-long-names {
     overflow: auto;
 }
+
+.adf-comments-header {
+    padding: 10px 20px;
+    font-size: 14px;
+    font-family: Muli;
+    font-weight: 600;
+    border-bottom: 1px solid #e1e1e1;
+    color: #a1a1a1;
+}
+
+.adf-comments-input-container {
+    padding: 0 15px;
+    width: calc(100% - 30px);
+    padding-top: 8px;
+    border-bottom: 1px solid #e1e1e1;
+}
+
+.adf-full-width {
+    width: 100%;
+}

ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.html

@@ -1,32 +1,13 @@
-<span class="activiti-label mdl-badge"
+<div class="adf-comments-container">
-      [attr.data-badge]="comments?.length">{{ 'TASK_DETAILS.LABELS.COMMENTS' |translate }}</span>
+    <div id="comment-header" class="adf-comments-header">
-<div *ngIf="!readOnly" id="addComment" (click)="showDialog()" class="icon material-icons">add</div>
+        {{'TASK_DETAILS.COMMENTS.HEADER' | translate}}({{comments?.length}})
-<div *ngIf="!readOnly" class="mdl-tooltip" for="addComment">
-    {{ 'TASK_DETAILS.COMMENTS.ADD' | translate }}
-</div>
-
-<div class="menu-container" *ngIf="comments?.length > 0">
-    <ul class='mdl-list'>
-        <li class="mdl-list__item list-wrap" *ngFor="let comment of comments">
-            <span class="mdl-list__item-primary-content hide-long-names"><i class="material-icons mdl-list__item-icon">comment</i>{{comment.message}}</span>
-        </li>
-    </ul>
-</div>
-<div *ngIf="comments?.length === 0" data-automation-id="comments-none">
-    {{ 'TASK_DETAILS.COMMENTS.NONE' | translate }}
-</div>
-
-
-<dialog class="mdl-dialog" #dialog>
-    <h4 class="mdl-dialog__title">{{ 'TASK_DETAILS.COMMENTS.DIALOG.TITLE' | translate }}</h4>
-    <div class="mdl-dialog__content">
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <textarea class="mdl-textfield__input" type="text" [(ngModel)]="message" rows="1" id="commentText"></textarea>
-            <label class="mdl-textfield__label" for="commentText">{{ 'TASK_DETAILS.COMMENTS.DIALOG.LABELS.MESSAGE' | translate }}</label>
-        </div>
     </div>
-    <div class="mdl-dialog__actions">
+    <div class="adf-comments-input-container" *ngIf="!isReadOnly()">
-        <button type="button" (click)="add()" class="mdl-button">{{ 'TASK_DETAILS.COMMENTS.DIALOG.BUTTON.ADD' | translate }}</button>
+            <md-input-container class="adf-full-width">
-        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'TASK_DETAILS.COMMENTS.DIALOG.BUTTON.CANCEL' | translate }}</button>
+                <input mdInput id="comment-input" placeholder="{{'TASK_DETAILS.COMMENTS.ADD' | translate}}" [(ngModel)]="message" (keyup.enter)="add()" (keyup.esc)="clear()">
+            </md-input-container>
     </div>
-</dialog>
+
+    <adf-comment-list [comments]="comments">
+    </adf-comment-list>
+</div>

ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.spec.ts

@@ -17,14 +17,17 @@
 
 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 { ActivitiFormModule } from 'ng2-activiti-form';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 
+import { DatePipe } from '@angular/common';
+import { MdInputModule } from '@angular/material';
+import { DataTableModule } from 'ng2-alfresco-datatable';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { ActivitiComments } from './activiti-comments.component';
+import { AdfCommentListComponent } from './adf-comment-list.component';
 
 describe('ActivitiComments', () => {
 
@@ -39,13 +42,17 @@ describe('ActivitiComments', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                ActivitiFormModule.forRoot()
+                ActivitiFormModule.forRoot(),
+                DataTableModule,
+                MdInputModule
             ],
             declarations: [
-                ActivitiComments
+                ActivitiComments,
+                AdfCommentListComponent
             ],
             providers: [
-                ActivitiTaskListService
+                ActivitiTaskListService,
+                DatePipe
             ]
         }).compileComponents();
 
@@ -60,11 +67,11 @@ describe('ActivitiComments', () => {
         service = fixture.debugElement.injector.get(ActivitiTaskListService);
 
         getCommentsSpy = spyOn(service, 'getTaskComments').and.returnValue(Observable.of([
-            { message: 'Test1' },
+            { message: 'Test1', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} },
-            { message: 'Test2' },
+            { message: 'Test2', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} },
-            { message: 'Test3'}
+            { message: 'Test3', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} }
         ]));
-        addCommentSpy = spyOn(service, 'addTaskComment').and.returnValue(Observable.of({id: 123, message: 'Test'}));
+        addCommentSpy = spyOn(service, 'addTaskComment').and.returnValue(Observable.of({id: 123, message: 'Test Comment'}));
 
         componentHandler = jasmine.createSpyObj('componentHandler', [
             'upgradeAllRegistered',
@@ -90,7 +97,7 @@ describe('ActivitiComments', () => {
         expect(emitSpy).toHaveBeenCalled();
     });
 
-    it('should not comments when no taskId is specified', () => {
+    it('should not load comments when no taskId is specified', () => {
         fixture.detectChanges();
         expect(getCommentsSpy).not.toHaveBeenCalled();
     });
@@ -101,17 +108,45 @@ describe('ActivitiComments', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('ul.mdl-list li')).length).toBe(3);
+            expect(fixture.nativeElement.querySelectorAll('#comment-message').length).toBe(3);
+            expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull();
         });
     }));
 
+    it('should display comments count when the task has comments', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'taskId': change });
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let element = fixture.nativeElement.querySelector('#comment-header');
+            expect(element.innerText).toContain('(3)');
+        });
+    });
+
     it('should not display comments when the task has no comments', async(() => {
         component.taskId = '123';
         getCommentsSpy.and.returnValue(Observable.of([]));
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('#comment-container')).toBeNull();
+        });
+    }));
+
+    it('should display comments input by default', async(() => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'taskId': change });
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('#comment-input')).not.toBeNull();
+        });
+    }));
+
+    it('should not display comments input when the task is readonly', async(() => {
+        component.readOnly = true;
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('ul.mdl-list li')).length).toBe(0);
+            expect(fixture.nativeElement.querySelector('#comment-input')).toBeNull();
         });
     }));
 
@@ -133,21 +168,15 @@ describe('ActivitiComments', () => {
             expect(getCommentsSpy).toHaveBeenCalledWith('456');
         });
 
-        it('should NOT fetch new comments when empty changeset made', () => {
+        it('should not fetch new comments when empty changeset made', () => {
             component.ngOnChanges({});
             expect(getCommentsSpy).not.toHaveBeenCalled();
         });
 
-        it('should NOT fetch new comments when taskId changed to null', () => {
+        it('should not fetch new comments when taskId changed to null', () => {
             component.ngOnChanges({ 'taskId': nullChange });
             expect(getCommentsSpy).not.toHaveBeenCalled();
         });
-
-        it('should set a placeholder message when taskId changed to null', () => {
-            component.ngOnChanges({ 'taskId': nullChange });
-            fixture.detectChanges();
-            expect(fixture.debugElement.query(By.css('[data-automation-id="comments-none"]'))).not.toBeNull();
-        });
     });
 
     describe('Add comment', () => {
@@ -158,37 +187,54 @@ describe('ActivitiComments', () => {
             fixture.whenStable();
         }));
 
-        it('should display a dialog to the user when the Add button clicked', () => {
+        it('should call service to add a comment when enter key is pressed', async(() => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog')).nativeElement;
+            let event = new KeyboardEvent('keyup', {'key': 'Enter'});
-            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
+            let element = fixture.nativeElement.querySelector('#comment-input');
-            component.showDialog();
+            component.message = 'Test Comment';
-            expect(showSpy).toHaveBeenCalled();
+            element.dispatchEvent(event);
-        });
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(addCommentSpy).toHaveBeenCalled();
+                let elements = fixture.nativeElement.querySelectorAll('#comment-message');
+                expect(elements.length).toBe(1);
+                expect(elements[0].innerText).toBe('Test Comment');
+            });
+        }));
 
-        it('should call service to add a comment', () => {
+        it('should not call service to add a comment when comment is empty', async(() => {
-            component.showDialog();
+            let event = new KeyboardEvent('keyup', {'key': 'Enter'});
+            let element = fixture.nativeElement.querySelector('#comment-input');
+            component.message = '';
+            element.dispatchEvent(event);
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(addCommentSpy).not.toHaveBeenCalled();
+            });
+        }));
+
+        it('should clear comment when escape key is pressed', async(() => {
+            let event = new KeyboardEvent('keyup', {'key': 'Escape'});
+            let element = fixture.nativeElement.querySelector('#comment-input');
             component.message = 'Test comment';
-            component.add();
+            element.dispatchEvent(event);
-            expect(addCommentSpy).toHaveBeenCalledWith('123', 'Test comment');
+            fixture.detectChanges();
-        });
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                element = fixture.nativeElement.querySelector('#comment-input');
+                expect(element.value).toBe('');
+            });
+        }));
 
         it('should emit an error when an error occurs adding the comment', () => {
             let emitSpy = spyOn(component.error, 'emit');
             addCommentSpy.and.returnValue(Observable.throw({}));
-            component.showDialog();
             component.message = 'Test comment';
             component.add();
             expect(emitSpy).toHaveBeenCalled();
         });
 
-        it('should close add dialog when close button clicked', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog')).nativeElement;
-            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
-            component.showDialog();
-            component.cancel();
-            expect(closeSpy).toHaveBeenCalled();
-        });
-
     });
 
 });

ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.ts

@@ -15,13 +15,12 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { Observable, Observer } from 'rxjs/Rx';
-import { Comment } from '../models/comment.model';
-import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 
-declare let dialogPolyfill: any;
+import { Comment } from '../models/comment.model';
+import { ActivitiTaskListService } from '../services/activiti-tasklist.service';
 
 @Component({
     selector: 'adf-comments, activiti-comments',
@@ -40,9 +39,6 @@ export class ActivitiComments implements OnChanges {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
-    @ViewChild('dialog')
-    dialog: any;
-
     comments: Comment [] = [];
 
     private commentObserver: Observer<Comment>;
@@ -50,6 +46,8 @@ export class ActivitiComments implements OnChanges {
 
     message: string;
 
+    beingAdded: boolean = false;
+
     /**
      * Constructor
      * @param translate Translation service
@@ -79,11 +77,17 @@ export class ActivitiComments implements OnChanges {
         }
     }
 
-    private getTaskComments(taskId: string) {
+    private getTaskComments(taskId: string): void {
         this.resetComments();
         if (taskId) {
             this.activitiTaskList.getTaskComments(taskId).subscribe(
                 (res: Comment[]) => {
+                    res = res.sort((comment1: Comment, comment2: Comment) => {
+                        let date1 = new Date(comment1.created);
+                        let date2 = new Date(comment2.created);
+                        return date1 > date2 ? -1 : date1 < date2 ? 1 : 0;
+                    });
+
                     res.forEach((comment) => {
                         this.commentObserver.next(comment);
                     });
@@ -92,38 +96,35 @@ export class ActivitiComments implements OnChanges {
                     this.error.emit(err);
                 }
             );
-        } else {
-            this.resetComments();
         }
     }
 
-    private resetComments() {
+    private resetComments(): void {
         this.comments = [];
     }
 
-    public showDialog() {
+    add(): void {
-        if (!this.dialog.nativeElement.showModal) {
+        if (this.message && this.message.trim() && !this.beingAdded) {
-            dialogPolyfill.registerDialog(this.dialog.nativeElement);
+            this.beingAdded = true;
+            this.activitiTaskList.addTaskComment(this.taskId, this.message).subscribe(
+                (res: Comment) => {
+                    this.comments.unshift(res);
+                    this.message = '';
+                    this.beingAdded = false;
+                },
+                (err) => {
+                    this.error.emit(err);
+                    this.beingAdded = false;
+                }
+            );
         }
-        this.dialog.nativeElement.showModal();
     }
 
-    public add() {
+    clear(): void {
-        this.activitiTaskList.addTaskComment(this.taskId, this.message).subscribe(
+        this.message = '';
-            (res: Comment) => {
-                this.comments.push(res);
-                this.message = '';
-            },
-            (err) => {
-                this.error.emit(err);
-            }
-        );
-        this.cancel();
     }
 
-    public cancel() {
+    isReadOnly(): boolean {
-        if (this.dialog) {
+        return this.readOnly;
-            this.dialog.nativeElement.close();
-        }
     }
 }

ng2-components/ng2-activiti-tasklist/src/components/adf-comment-list.component.css

@@ -0,0 +1,64 @@
+.adf-comment-img-container {
+    float: left;
+    width: 40px;
+    padding: 5px 10px;
+    height: 100%;
+}
+
+.adf-comment-user-icon {
+    padding: 10px 5px;
+    width: 30px;
+    background-color: #01bcd4;
+    border-radius: 50%;
+    font-family: Muli;
+    font-size: 16px;
+    color: #fff;
+    text-align: center;
+    height: 18px;
+}
+
+.adf-comment-user-name {
+    float: left;
+    width: calc(100% - 120px);
+    padding: 2px 10px;
+    font-family: Muli;
+    font-weight: 600;
+    color: #595959;
+}
+
+.adf-comment-message {
+    float: left;
+    width: calc(100% - 20px);
+    padding: 2px 10px;
+    font-family: Muli;
+    font-style: italic;
+    color: #595959;
+    white-space: initial;
+}
+
+.adf-comment-message-time {
+    float: left;
+    width: calc(100% - 120px);
+    padding: 2px 10px;
+    font-family: Muli;
+    font-size: 12px;
+    color: #595959;
+}
+
+.adf-comment-contents {
+    float: left;
+    width: calc(100% - 60px);
+}
+
+adf-datatable >>> table thead {
+    display: none;
+}
+
+adf-datatable >>> table {
+    border: none;
+}
+
+adf-datatable >>> table tbody td {
+    padding: 0px!important;
+    border-top: none;
+}

ng2-components/ng2-activiti-tasklist/src/components/adf-comment-list.component.html

@@ -0,0 +1,30 @@
+<adf-datatable
+    [rows]="comments"
+    (rowClick)="selectComment($event)" *ngIf="hasComments()">
+
+    <data-columns>
+        <data-column key="createdBy">
+            <ng-template let-entry="$implicit">
+                <div id="comment-user-icon" class="adf-comment-img-container">
+                    <div class="adf-comment-user-icon">{{getUserShortName(entry.row.obj.createdBy)}}</div>
+                </div>
+            </ng-template>
+        </data-column>
+        <data-column key="message">
+            <ng-template let-entry="$implicit">
+                <div class="adf-comment-contents">
+                    <div id="comment-user" class="adf-comment-user-name">
+                        {{entry.row.obj.createdBy?.firstName}} {{entry.row.obj.createdBy?.lastName}}
+                    </div>
+                    <div id="comment-message" class="adf-comment-message">
+                        {{entry.row.obj.message}}
+                    </div>
+                    <div id="comment-time" class="adf-comment-message-time">
+                        {{transformDate(entry.row.obj.created)}}
+                    </div>
+                </div>
+            </ng-template>
+        </data-column>
+    </data-columns>
+
+</adf-datatable>

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

@@ -0,0 +1,148 @@
+/*!
+ * @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 { DatePipe } from '@angular/common';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
+import { DataRowEvent, DataTableModule, ObjectDataRow } from 'ng2-alfresco-datatable';
+import { Comment, User } from '../models/index';
+import { AdfCommentListComponent } from './adf-comment-list.component';
+
+declare let jasmine: any;
+
+const testUser: User = new User({
+    id: '1',
+    firstName: 'Test',
+    lastName: 'User',
+    email: 'tu@domain.com'
+});
+const testDate = new Date();
+const testComment: Comment = new Comment(1, 'Test Comment', testDate.toDateString(), testUser);
+
+describe('AdfCommentListComponent', () => {
+
+    let commentList: AdfCommentListComponent;
+    let fixture: ComponentFixture<AdfCommentListComponent>;
+    let element: HTMLElement;
+    let componentHandler;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot(),
+                DataTableModule
+            ],
+            declarations: [
+                AdfCommentListComponent
+            ],
+            providers: [
+                DatePipe
+            ]
+        }).compileComponents().then(() => {
+
+            fixture = TestBed.createComponent(AdfCommentListComponent);
+            commentList = fixture.componentInstance;
+            element = fixture.nativeElement;
+            componentHandler = jasmine.createSpyObj('componentHandler', [
+                'upgradeAllRegistered'
+            ]);
+
+            window['componentHandler'] = componentHandler;
+            fixture.detectChanges();
+        });
+    }));
+
+    it('should emit row click event', (done) => {
+        let row = new ObjectDataRow(testComment);
+        let rowEvent = new DataRowEvent(row, null);
+
+        commentList.clickRow.subscribe(selectedComment => {
+            expect(selectedComment.id).toEqual(1);
+            expect(selectedComment.message).toEqual('Test Comment');
+            expect(selectedComment.createdBy).toEqual(testUser);
+            expect(selectedComment.created).toEqual(testDate.toDateString());
+            done();
+        });
+
+        commentList.selectComment(rowEvent);
+    });
+
+    it('should not show comment list if no input is given', () => {
+        fixture.detectChanges();
+        expect(fixture.nativeElement.querySelector('adf-datatable')).toBeNull();
+    });
+
+    it('should show comment message when input is given', () => {
+        commentList.comments = [testComment];
+        fixture.detectChanges();
+        let elements = fixture.nativeElement.querySelectorAll('#comment-message');
+        expect(elements.length).toBe(1);
+        expect(elements[0].innerText).toBe(testComment.message);
+        expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull();
+    });
+
+    it('should show comment user when input is given', () => {
+        commentList.comments = [testComment];
+        fixture.detectChanges();
+        let elements = fixture.nativeElement.querySelectorAll('#comment-user');
+        expect(elements.length).toBe(1);
+        expect(elements[0].innerText).toBe(testComment.createdBy.firstName + ' ' + testComment.createdBy.lastName);
+        expect(fixture.nativeElement.querySelector('#comment-user:empty')).toBeNull();
+    });
+
+    it('should show comment date time when input is given', () => {
+        commentList.comments = [testComment];
+        fixture.detectChanges();
+        let elements = fixture.nativeElement.querySelectorAll('#comment-time');
+        expect(elements.length).toBe(1);
+        expect(elements[0].innerText).toBe(commentList.transformDate(testDate.toDateString()));
+        expect(fixture.nativeElement.querySelector('#comment-time:empty')).toBeNull();
+    });
+
+    it('comment date time should start with Today when comment date is today', () => {
+        commentList.comments = [testComment];
+        fixture.detectChanges();
+        element = fixture.nativeElement.querySelector('#comment-time');
+        expect(element.innerText).toContain('Today');
+    });
+
+    it('comment date time should start with Yesterday when comment date is yesterday', () => {
+        testComment.created = (Date.now() - 24 * 3600 * 1000).toString();
+        commentList.comments = [testComment];
+        fixture.detectChanges();
+        element = fixture.nativeElement.querySelector('#comment-time');
+        expect(element.innerText).toContain('Yesterday');
+    });
+
+    it('comment date time should not start with Today/Yesterday when comment date is before yesterday', () => {
+        testComment.created = (Date.now() - 24 * 3600 * 1000 * 2).toString();
+        commentList.comments = [testComment];
+        fixture.detectChanges();
+        element = fixture.nativeElement.querySelector('#comment-time');
+        expect(element.innerText).not.toContain('Today');
+        expect(element.innerText).not.toContain('Yesterday');
+    });
+
+    it('should show user icon when input is given', () => {
+        commentList.comments = [testComment];
+        fixture.detectChanges();
+        let elements = fixture.nativeElement.querySelectorAll('#comment-user-icon');
+        expect(elements.length).toBe(1);
+        expect(elements[0].innerText).toContain(commentList.getUserShortName(testComment.createdBy));
+        expect(fixture.nativeElement.querySelector('#comment-user-icon:empty')).toBeNull();
+    });
+});

ng2-components/ng2-activiti-tasklist/src/components/adf-comment-list.component.ts

@@ -0,0 +1,80 @@
+/*!
+ * @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 { DatePipe } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Comment, User } from '../models/index';
+
+@Component({
+    selector: 'adf-comment-list',
+    templateUrl: './adf-comment-list.component.html',
+    styleUrls: ['./adf-comment-list.component.css']
+})
+
+export class AdfCommentListComponent {
+
+    @Input()
+    comments: Comment[];
+
+    @Output()
+    clickRow: EventEmitter<Comment> = new EventEmitter<Comment>();
+
+    selectedComment: Comment;
+
+    constructor(private datePipe: DatePipe) {
+    }
+
+    selectComment(event: any): void {
+        this.selectedComment = event.value.obj;
+        this.clickRow.emit(this.selectedComment);
+    }
+
+    getUserShortName(user: User): string {
+        let shortName = '';
+        if (user) {
+            if (user.firstName) {
+                shortName = user.firstName[0].toUpperCase();
+            }
+            if (user.lastName) {
+                shortName += user.lastName[0].toUpperCase();
+            }
+        }
+        return shortName;
+    }
+
+    transformDate(aDate: string): string {
+        let formattedDate: string;
+        let givenDate = Number.parseInt(this.datePipe.transform(aDate, 'yMMdd'));
+        let today = Number.parseInt(this.datePipe.transform(Date.now(), 'yMMdd'));
+        if (givenDate === today) {
+            formattedDate = 'Today, ' + this.datePipe.transform(aDate, 'hh:mm a');
+        }else {
+            let yesterday = Number.parseInt(this.datePipe.transform(Date.now() - 24 * 3600 * 1000, 'yMMdd'));
+            if (givenDate === yesterday) {
+                formattedDate = 'Yesterday, ' + this.datePipe.transform(aDate, 'hh:mm a');
+            }else {
+                formattedDate = this.datePipe.transform(aDate, 'MMM dd y, hh:mm a');
+            }
+        }
+        return formattedDate;
+    }
+
+    hasComments(): boolean {
+        return this.comments && this.comments.length && true;
+    }
+
+}

ng2-components/ng2-activiti-tasklist/src/components/index.ts

@@ -29,3 +29,4 @@ export * from './activiti-start-task.component';
 export * from './activiti-people-search.component';
 export * from './adf-create-task-attachment.component';
 export * from './adf-people-list.component';
+export * from './adf-comment-list.component';

ng2-components/ng2-activiti-tasklist/src/i18n/en.json

@@ -43,6 +43,7 @@
         "COMMENTS": {
             "NONE": "No comments.",
             "ADD": "Add a comment",
+            "HEADER": "Comments",
             "DIALOG": {
                 "TITLE": "New comment",
                 "LABELS": {