New packages org (#2639)

New packages org

lib/process-services/comments/comment-list.component.html

@@ -0,0 +1,37 @@
+<adf-datatable
+    [rows]="comments"
+    (rowClick)="selectComment($event)" *ngIf="hasComments()">
+
+    <data-columns>
+        <data-column key="createdBy" title="{{'ADF_TASK_LIST.DETAILS.COMMENTS.CREATED_BY_HEADER' | translate }}">
+            <ng-template let-entry="$implicit">
+                <div id="comment-user-icon"
+                class="adf-comment-img-container">
+                    <div
+                        *ngIf="!entry.row.obj.createdBy.pictureId" class="adf-comment-user-icon">
+                            {{getUserShortName(entry.row.obj.createdBy)}}</div>
+                    <div>
+                        <img *ngIf="entry.row.obj.createdBy.pictureId" class="adf-people-img"
+                            [src]="peopleProcessService.getUserImage(entry.row.obj.createdBy)"/>
+                    </div>
+                </div>
+            </ng-template>
+        </data-column>
+        <data-column key="message" title="{{'ADF_TASK_LIST.DETAILS.COMMENTS.MESSAGE_HEADER' | translate }}">
+            <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>

lib/process-services/comments/comment-list.component.scss

@@ -0,0 +1,74 @@
+@mixin adf-task-list-comment-list-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .adf {
+
+        &-comment-img-container {
+            float: left;
+            width: 40px;
+            padding: 5px 10px;
+            height: 100%;
+        }
+
+        &-comment-user-icon {
+            padding: 10px 5px;
+            width: 30px;
+            background-color: mat-color($primary);
+            border-radius: 50%;
+            font-size: 16px;
+            color: #fff;
+            text-align: center;
+            height: 18px;
+            background-size: cover;
+        }
+
+        &-comment-user-name {
+            float: left;
+            width: calc(100% - 120px);
+            padding: 2px 10px;
+            font-weight: 600;
+            color: #595959;
+        }
+
+        &-comment-message {
+            float: left;
+            width: calc(100% - 10px);
+            padding: 2px 10px;
+            font-style: italic;
+            color: #595959;
+            white-space: initial;
+        }
+
+        &-comment-message-time {
+            float: left;
+            width: calc(100% - 120px);
+            padding: 2px 10px;
+            font-size: 12px;
+            color: #595959;
+        }
+
+        &-comment-contents {
+            float: left;
+            width: calc(100% - 10px);
+        }
+
+        &-datatable ::ng-deep table {
+            border: none !important;
+            tbody td {
+                padding: 0px !important;
+                border-top: none !important;
+            }
+        }
+
+        &-people-img {
+            border-radius: 90%;
+            width: 40px;
+            height: 40px;
+            vertical-align: middle;
+        }
+
+    }
+}
+
+
+

lib/process-services/comments/comment-list.component.spec.ts

@@ -0,0 +1,136 @@
+/*!
+ * @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 { CommentProcessModel, UserProcessModel } from '@alfresco/core';
+import { DataRowEvent, ObjectDataRow } from '@alfresco/core';
+import { CommentListComponent } from './comment-list.component';
+
+const testUser: UserProcessModel = new UserProcessModel({
+    id: '1',
+    firstName: 'Test',
+    lastName: 'User',
+    email: 'tu@domain.com'
+});
+const testDate = new Date();
+const testComment: CommentProcessModel = new CommentProcessModel({id: 1, message: 'Test Comment', created: testDate.toDateString(), createdBy: testUser});
+
+describe('CommentListComponent', () => {
+
+    let commentList: CommentListComponent;
+    let fixture: ComponentFixture<CommentListComponent>;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+
+            declarations: [
+                CommentListComponent
+            ],
+            providers: [
+                DatePipe
+            ]
+        }).compileComponents().then(() => {
+
+            fixture = TestBed.createComponent(CommentListComponent);
+            commentList = fixture.componentInstance;
+            element = fixture.nativeElement;
+            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 = new Date((Date.now() - 24 * 3600 * 1000));
+        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 = new Date((Date.now() - 24 * 3600 * 1000 * 2));
+        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();
+    });
+});

lib/process-services/comments/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 { CommentProcessModel, PeopleProcessService, UserProcessModel } from '@alfresco/core';
+import { DatePipe } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'adf-comment-list',
+    templateUrl: './comment-list.component.html',
+    styleUrls: ['./comment-list.component.scss']
+})
+
+export class CommentListComponent {
+
+    @Input()
+    comments: CommentProcessModel[];
+
+    @Output()
+    clickRow: EventEmitter<CommentProcessModel> = new EventEmitter<CommentProcessModel>();
+
+    selectedComment: CommentProcessModel;
+
+    constructor(private datePipe: DatePipe, public peopleProcessService: PeopleProcessService) {
+    }
+
+    selectComment(event: any): void {
+        this.selectedComment = event.value.obj;
+        this.clickRow.emit(this.selectedComment);
+    }
+
+    getUserShortName(user: UserProcessModel): 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;
+    }
+
+}

lib/process-services/comments/comments.component.css

@@ -0,0 +1,31 @@
+.adf-comments-container {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+}
+
+.adf-comments-header {
+    padding: 10px 20px;
+    font-size: 14px;
+    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%;
+}
+
+adf-comment-list {
+    float: left;
+    overflow: auto;
+    height: calc(100% - 101px);
+    width: 100%;
+}

lib/process-services/comments/comments.component.html

@@ -0,0 +1,15 @@
+<div class="adf-comments-container">
+    <div id="comment-header" class="adf-comments-header">
+        {{'ADF_TASK_LIST.DETAILS.COMMENTS.HEADER' | translate: { count: comments?.length} }}
+    </div>
+    <div class="adf-comments-input-container" *ngIf="!isReadOnly()">
+            <mat-form-field class="adf-full-width">
+                <input matInput id="comment-input" placeholder="{{'ADF_TASK_LIST.DETAILS.COMMENTS.ADD' | translate}}" [(ngModel)]="message" (keyup.enter)="add()" (keyup.esc)="clear()">
+            </mat-form-field>
+    </div>
+
+    <div *ngIf="comments.length > 0">
+        <adf-comment-list [comments]="comments">
+        </adf-comment-list>
+    </div>
+</div>

lib/process-services/comments/comments.component.spec.ts

@@ -0,0 +1,233 @@
+/*!
+ * @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 { SimpleChange } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Rx';
+
+import { FormModule } from '@alfresco/core';
+import { CommentProcessService } from '@alfresco/core';
+
+import { DatePipe } from '@angular/common';
+import { MatInputModule } from '@angular/material';
+import { PeopleProcessService } from '@alfresco/core';
+import { TaskListService } from '../task-list/services/tasklist.service';
+import { CommentListComponent } from './comment-list.component';
+import { CommentsComponent } from './comments.component';
+
+describe('CommentsComponent', () => {
+
+    let service: TaskListService;
+    let component: CommentsComponent;
+    let fixture: ComponentFixture<CommentsComponent>;
+    let getCommentsSpy: jasmine.Spy;
+    let addCommentSpy: jasmine.Spy;
+    let commentProcessService: CommentProcessService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                FormModule,
+                MatInputModule
+            ],
+            declarations: [
+                CommentsComponent,
+                CommentListComponent
+            ],
+            providers: [
+                TaskListService,
+                DatePipe,
+                PeopleProcessService,
+                CommentProcessService
+            ]
+        }).compileComponents();
+
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CommentsComponent);
+        component = fixture.componentInstance;
+        service = fixture.debugElement.injector.get(TaskListService);
+        commentProcessService = fixture.debugElement.injector.get(CommentProcessService);
+
+        getCommentsSpy = spyOn(commentProcessService, 'getTaskComments').and.returnValue(Observable.of([
+            { message: 'Test1', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} },
+            { message: 'Test2', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} },
+            { message: 'Test3', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} }
+        ]));
+        addCommentSpy = spyOn(commentProcessService, 'addTaskComment').and.returnValue(Observable.of({id: 123, message: 'Test Comment', createdBy: {id: '999'}}));
+
+    });
+
+    it('should load comments when taskId specified', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'taskId': change });
+
+        expect(getCommentsSpy).toHaveBeenCalled();
+    });
+
+    it('should emit an error when an error occurs loading comments', () => {
+        let emitSpy = spyOn(component.error, 'emit');
+        getCommentsSpy.and.returnValue(Observable.throw({}));
+
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'taskId': change });
+
+        expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should not load comments when no taskId is specified', () => {
+        fixture.detectChanges();
+        expect(getCommentsSpy).not.toHaveBeenCalled();
+    });
+
+    it('should display comments when the task has comments', async(() => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'taskId': change });
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            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).toBe('ADF_TASK_LIST.DETAILS.COMMENTS.HEADER');
+        });
+    });
+
+    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.nativeElement.querySelector('#comment-input')).toBeNull();
+        });
+    }));
+
+    describe('change detection', () => {
+
+        let change = new SimpleChange('123', '456', true);
+        let nullChange = new SimpleChange('123', null, true);
+
+        beforeEach(async(() => {
+            component.taskId = '123';
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                getCommentsSpy.calls.reset();
+            });
+        }));
+
+        it('should fetch new comments when taskId changed', () => {
+            component.ngOnChanges({ 'taskId': change });
+            expect(getCommentsSpy).toHaveBeenCalledWith('456');
+        });
+
+        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', () => {
+            component.ngOnChanges({ 'taskId': nullChange });
+            expect(getCommentsSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('Add comment', () => {
+
+        beforeEach(async(() => {
+            component.taskId = '123';
+            fixture.detectChanges();
+            fixture.whenStable();
+        }));
+
+        it('should call service to add a comment when enter key is pressed', async(() => {
+            let event = new KeyboardEvent('keyup', {'key': 'Enter'});
+            let element = fixture.nativeElement.querySelector('#comment-input');
+            component.message = 'Test Comment';
+            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 not call service to add a comment when comment is empty', async(() => {
+            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';
+            element.dispatchEvent(event);
+            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.message = 'Test comment';
+            component.add();
+            expect(emitSpy).toHaveBeenCalled();
+        });
+
+    });
+
+});

lib/process-services/comments/comments.component.ts

@@ -0,0 +1,117 @@
+/*!
+ * @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 { CommentProcessModel, CommentProcessService } from '@alfresco/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Observable, Observer } from 'rxjs/Rx';
+
+@Component({
+    selector: 'adf-comments',
+    templateUrl: './comments.component.html',
+    styleUrls: ['./comments.component.css']
+})
+export class CommentsComponent implements OnChanges {
+
+    @Input()
+    taskId: string;
+
+    @Input()
+    readOnly: boolean = false;
+
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
+    comments: CommentProcessModel [] = [];
+
+    private commentObserver: Observer<CommentProcessModel>;
+    comment$: Observable<CommentProcessModel>;
+
+    message: string;
+
+    beingAdded: boolean = false;
+
+    constructor(private commentProcessService: CommentProcessService) {
+        this.comment$ = new Observable<CommentProcessModel>(observer =>  this.commentObserver = observer).share();
+        this.comment$.subscribe((comment: CommentProcessModel) => {
+            this.comments.push(comment);
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        let taskId = changes['taskId'];
+        if (taskId) {
+            if (taskId.currentValue) {
+                this.getTaskComments(taskId.currentValue);
+            } else {
+                this.resetComments();
+            }
+        }
+    }
+
+    private getTaskComments(taskId: string): void {
+        this.resetComments();
+        if (taskId) {
+            this.commentProcessService.getTaskComments(taskId).subscribe(
+                (res: CommentProcessModel[]) => {
+                    res = res.sort((comment1: CommentProcessModel, comment2: CommentProcessModel) => {
+                        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);
+                    });
+                    },
+                (err) => {
+                    this.error.emit(err);
+                }
+            );
+        }
+    }
+
+    private resetComments(): void {
+        this.comments = [];
+    }
+
+    add(): void {
+        if (this.message && this.message.trim() && !this.beingAdded) {
+            this.beingAdded = true;
+            this.commentProcessService.addTaskComment(this.taskId, this.message)
+            .subscribe(
+                (res: CommentProcessModel) => {
+                        this.comments.unshift(res);
+                        this.message = '';
+                        this.beingAdded = false;
+
+                },
+                (err) => {
+                    this.error.emit(err);
+                    this.beingAdded = false;
+                }
+            );
+        }
+    }
+
+    clear(): void {
+        this.message = '';
+    }
+
+    isReadOnly(): boolean {
+        return this.readOnly;
+    }
+
+}

lib/process-services/comments/comments.module.ts

@@ -0,0 +1,50 @@
+/*!
+ * @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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MaterialModule } from '../material.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DataColumnModule, DataTableModule } from '@alfresco/core';
+
+import { ProcessCommentsComponent } from './process-comments.component';
+import { CommentListComponent } from './comment-list.component';
+import { CommentsComponent } from './comments.component';
+
+@NgModule({
+    imports: [
+        DataColumnModule,
+        DataTableModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MaterialModule,
+        CommonModule,
+        TranslateModule
+    ],
+    declarations: [
+        ProcessCommentsComponent,
+        CommentListComponent,
+        CommentsComponent
+    ],
+    exports: [
+        ProcessCommentsComponent,
+        CommentListComponent,
+        CommentsComponent
+    ]
+})
+export class CommentsModule {}

lib/process-services/comments/index.ts

@@ -0,0 +1,18 @@
+/*!
+ * @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.
+ */
+
+export * from './public-api';

lib/process-services/comments/process-comments.component.css

@@ -0,0 +1,58 @@
+:host {
+    width: 100%;
+}
+
+.activiti-label {
+    font-weight: bolder;
+    vertical-align: top;
+}
+
+.activiti-label + .icon {
+    position: relative;
+    top: -2px;
+}
+
+.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-container {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+}
+
+.adf-comments-header {
+    padding: 10px 20px;
+    font-size: 14px;
+    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%;
+}
+
+adf-comment-list {
+    float: left;
+    overflow: auto;
+    height: calc(100% - 101px);
+    width: 100%;
+}

lib/process-services/comments/process-comments.component.html

@@ -0,0 +1,15 @@
+<div class="adf-comments-container">
+    <div id="comment-header" class="adf-comments-header">
+        {{'ADF_PROCESS_LIST.DETAILS.COMMENTS.HEADER' | translate: { count: comments?.length} }}
+    </div>
+    <div class="adf-comments-input-container" *ngIf="!isReadOnly()">
+        <mat-form-field class="adf-full-width">
+            <input matInput id="comment-input" placeholder="{{'ADF_PROCESS_LIST.DETAILS.COMMENTS.ADD' | translate}}" [(ngModel)]="message" (keyup.enter)="add()" (keyup.esc)="clear()">
+        </mat-form-field>
+    </div>
+
+    <div *ngIf="comments.length > 0">
+        <adf-comment-list [comments]="comments">
+        </adf-comment-list>
+    </div>
+</div>

lib/process-services/comments/process-comments.component.spec.ts

@@ -0,0 +1,152 @@
+/*!
+ * @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 { SimpleChange } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatInputModule } from '@angular/material';
+import { Observable } from 'rxjs/Rx';
+
+import { CommentListComponent, CommentsComponent } from '../index';
+import { CommentProcessService, PeopleProcessService } from '@alfresco/core';
+
+import { ProcessService } from '../process-list/services/process.service';
+import { ProcessCommentsComponent } from './process-comments.component';
+
+describe('ActivitiProcessInstanceComments', () => {
+
+    let component: ProcessCommentsComponent;
+    let fixture: ComponentFixture<ProcessCommentsComponent>;
+    let getCommentsSpy: jasmine.Spy;
+    let commentProcessService: CommentProcessService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MatInputModule
+            ],
+            declarations: [
+                ProcessCommentsComponent,
+                CommentsComponent,
+                CommentListComponent
+            ],
+            providers: [
+                ProcessService,
+                DatePipe,
+                PeopleProcessService,
+                CommentProcessService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+
+        fixture = TestBed.createComponent(ProcessCommentsComponent);
+        component = fixture.componentInstance;
+        commentProcessService = TestBed.get(CommentProcessService);
+
+        getCommentsSpy = spyOn(commentProcessService, 'getProcessInstanceComments').and.returnValue(Observable.of([
+            { message: 'Test1', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} },
+            { message: 'Test2', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} },
+            { message: 'Test3', created: Date.now(), createdBy: {firstName: 'Admin', lastName: 'User'} }
+        ]));
+    });
+
+    it('should load comments when processInstanceId specified', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+        fixture.detectChanges();
+        expect(getCommentsSpy).toHaveBeenCalled();
+    });
+
+    it('should emit an error when an error occurs loading comments', () => {
+        let emitSpy = spyOn(component.error, 'emit');
+        getCommentsSpy.and.returnValue(Observable.throw({}));
+
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+
+        fixture.detectChanges();
+        expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should not load comments when no processInstanceId is specified', () => {
+        fixture.detectChanges();
+        expect(getCommentsSpy).not.toHaveBeenCalled();
+    });
+
+    it('should display comments when the process has comments', async(() => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelectorAll('#comment-message').length).toBe(3);
+            expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull();
+        });
+    }));
+
+    it('should display comments count when the process has comments', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let element = fixture.nativeElement.querySelector('#comment-header');
+            expect(element.innerText).toBe('ADF_PROCESS_LIST.DETAILS.COMMENTS.HEADER');
+        });
+    });
+
+    it('should not display comments when the process has no comments', async(() => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+
+        getCommentsSpy.and.returnValue(Observable.of([]));
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('#comment-container')).toBeNull();
+        });
+    }));
+
+    it('should not display comments input by default', async(() => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('#comment-input')).toBeNull();
+        });
+    }));
+
+    it('should not display comments input when the process is readonly', async(() => {
+        component.readOnly = true;
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('#comment-input')).toBeNull();
+        });
+    }));
+
+    it('should display comments input when the process isn\'t readonly', async(() => {
+        component.readOnly = false;
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('#comment-input')).not.toBeNull();
+        });
+    }));
+});

lib/process-services/comments/process-comments.component.ts

@@ -0,0 +1,121 @@
+/*!
+ * @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 { CommentProcessModel, CommentProcessService } from '@alfresco/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Observable, Observer } from 'rxjs/Rx';
+
+@Component({
+    selector: 'adf-process-instance-comments',
+    templateUrl: './process-comments.component.html',
+    styleUrls: ['./process-comments.component.css']
+})
+export class ProcessCommentsComponent implements OnChanges {
+
+    @Input()
+    processInstanceId: string;
+
+    @Input()
+    readOnly: boolean = true;
+
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
+    comments: CommentProcessModel [] = [];
+
+    private commentObserver: Observer<CommentProcessModel>;
+    comment$: Observable<CommentProcessModel>;
+
+    message: string;
+
+    beingAdded: boolean = false;
+
+    constructor(private commentProcessService: CommentProcessService) {
+        this.comment$ = new Observable<CommentProcessModel>(observer =>  this.commentObserver = observer).share();
+        this.comment$.subscribe((comment: CommentProcessModel) => {
+            this.comments.push(comment);
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        let processInstanceId = changes['processInstanceId'];
+        if (processInstanceId) {
+            if (processInstanceId.currentValue) {
+                this.getProcessInstanceComments(processInstanceId.currentValue);
+            } else {
+                this.resetComments();
+            }
+        }
+    }
+
+    private getProcessInstanceComments(processInstanceId: string): void {
+        this.resetComments();
+        if (processInstanceId) {
+            this.commentProcessService.getProcessInstanceComments(processInstanceId).subscribe(
+                (res: CommentProcessModel[]) => {
+                    res = res.sort((comment1: CommentProcessModel, comment2: CommentProcessModel) => {
+                        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);
+                    });
+                },
+                (err) => {
+                    this.error.emit(err);
+                }
+            );
+        }
+    }
+
+    private resetComments(): void {
+        this.comments = [];
+    }
+
+    add(): void {
+        if (this.message && this.message.trim() && !this.beingAdded) {
+            this.beingAdded = true;
+            this.commentProcessService.addProcessInstanceComment(this.processInstanceId, this.message)
+                .subscribe(
+                    (res: CommentProcessModel) => {
+                        this.comments.unshift(res);
+                        this.message = '';
+                        this.beingAdded = false;
+
+                    },
+                    (err) => {
+                        this.error.emit(err);
+                        this.beingAdded = false;
+                    }
+                );
+        }
+    }
+
+    clear(): void {
+        this.message = '';
+    }
+
+    isReadOnly(): boolean {
+        return this.readOnly;
+    }
+
+    onError(error: any) {
+        this.error.emit(error);
+    }
+
+}

lib/process-services/comments/public-api.ts

@@ -0,0 +1,22 @@
+/*!
+ * @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.
+ */
+
+export * from './process-comments.component';
+export * from './comment-list.component';
+export * from './comments.component';
+
+export * from './comments.module';