[ADF-2588] make comment component compatible with content (#3128)

lib/process-services/process-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/process-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/process-comments/process-comments.component.scss

@@ -0,0 +1,62 @@
+@mixin adf-process-comment-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $header-border: 1px solid mat-color($foreground, divider);
+
+    :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: $header-border;
+    }
+
+    .adf-comments-input-container {
+        padding: 0 15px;
+        width: calc(100% - 30px);
+        padding-top: 8px;
+        border-bottom: $header-border;
+    }
+
+    .adf-full-width {
+        width: 100%;
+    }
+
+    adf-comment-list {
+        float: left;
+        overflow: auto;
+        height: calc(100% - 101px);
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,149 @@
+/*!
+ * @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/Observable';
+
+import { CommentProcessService, PeopleProcessService } from '@alfresco/adf-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
+            ],
+            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', async(() => {
+        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/process-comments/process-comments.component.ts

@@ -0,0 +1,125 @@
+/*!
+ * @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 { CommentModel, CommentProcessService } from '@alfresco/adf-core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+
+@Component({
+    selector: 'adf-process-instance-comments',
+    templateUrl: './process-comments.component.html',
+    styleUrls: ['./process-comments.component.scss']
+})
+export class ProcessCommentsComponent implements OnChanges {
+
+    /** (**required**) The numeric ID of the process instance to display comments for. */
+    @Input()
+    processInstanceId: string;
+
+    /** Should the comments be read-only? */
+    @Input()
+    readOnly: boolean = true;
+
+    /** Emitted when an error occurs. */
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
+    comments: CommentModel [] = [];
+
+    private commentObserver: Observer<CommentModel>;
+    comment$: Observable<CommentModel>;
+
+    message: string;
+
+    beingAdded: boolean = false;
+
+    constructor(private commentProcessService: CommentProcessService) {
+        this.comment$ = new Observable<CommentModel>(observer =>  this.commentObserver = observer).share();
+        this.comment$.subscribe((comment: CommentModel) => {
+            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: CommentModel[]) => {
+                    res = res.sort((comment1: CommentModel, comment2: CommentModel) => {
+                        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: CommentModel) => {
+                        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/process-comments/process-comments.module.ts

@@ -0,0 +1,46 @@
+/*!
+ * @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, CommentsModule } from '@alfresco/adf-core';
+
+import { ProcessCommentsComponent } from './process-comments.component';
+
+@NgModule({
+    imports: [
+        DataColumnModule,
+        DataTableModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MaterialModule,
+        CommonModule,
+        TranslateModule,
+        CommentsModule
+    ],
+    declarations: [
+        ProcessCommentsComponent
+    ],
+    exports: [
+        ProcessCommentsComponent
+    ]
+})
+export class ProcessCommentsModule {
+}

lib/process-services/process-comments/public-api.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 './process-comments.component';