diff --git a/docs/process-services/components/process-comments.component.md b/docs/process-services/components/process-comments.component.md index 7bb82fdb60..53ba7f2f3a 100644 --- a/docs/process-services/components/process-comments.component.md +++ b/docs/process-services/components/process-comments.component.md @@ -12,7 +12,9 @@ Displays comments associated with a particular process instance and allows the u ```html + [processInstanceId]="YOUR_PROCESS_INSTANCE_ID" + [readOnly]="YOUR_READ_ONLY_FLAG" +> ``` @@ -22,11 +24,5 @@ Displays comments associated with a particular process instance and allows the u | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | -| processInstanceId | `string` | | (**required**) The numeric ID of the process instance to display comments for. | -| readOnly | `boolean` | true | Should the comments be read-only? | - -### Events - -| Name | Type | Description | -| ---- | ---- | ----------- | -| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when an error occurs. | +| processInstanceId | `string` | | The numeric ID of the process instance to display comments for. | +| readOnly | `boolean` | | Should the comments be read-only? | diff --git a/lib/process-services/src/lib/process-comments/process-comments.component.html b/lib/process-services/src/lib/process-comments/process-comments.component.html index b903e369fc..f894016c1f 100644 --- a/lib/process-services/src/lib/process-comments/process-comments.component.html +++ b/lib/process-services/src/lib/process-comments/process-comments.component.html @@ -1,21 +1,5 @@ -
-
- {{ 'ADF_PROCESS_LIST.DETAILS.COMMENTS.HEADER' | translate : { count: comments?.length } }} -
-
- - - -
- -
- -
-
+ + diff --git a/lib/process-services/src/lib/process-comments/process-comments.component.scss b/lib/process-services/src/lib/process-comments/process-comments.component.scss deleted file mode 100644 index 54735ed867..0000000000 --- a/lib/process-services/src/lib/process-comments/process-comments.component.scss +++ /dev/null @@ -1,53 +0,0 @@ -.adf-process-instance-comments { - width: 100%; -} - -.adf-activiti-label { - font-weight: bolder; - vertical-align: top; -} - -.adf-activiti-label + .adf-icon { - position: relative; - top: -2px; -} - -.adf-list-wrap { - word-wrap: break-word; - word-break: break-all; - hyphens: auto; -} - -.adf-hide-long-names { - overflow: auto; -} - -.adf-comments-container { - height: 100%; - width: 100%; - overflow: auto; -} - -.adf-comments-header { - padding: 10px 20px; - font-size: var(--theme-body-1-font-size); - font-weight: 600; - border-bottom: 1px solid var(--adf-theme-foreground-divider-color); -} - -.adf-comments-input-container { - width: calc(100% - 30px); - padding: 8px 15px 0; - border-bottom: 1px solid var(--adf-theme-foreground-divider-color); -} - -.adf-full-width { - width: 100%; -} - -adf-comment-list { - float: left; - overflow: auto; - height: calc(100% - 101px); - width: 100%; -} diff --git a/lib/process-services/src/lib/process-comments/process-comments.component.spec.ts b/lib/process-services/src/lib/process-comments/process-comments.component.spec.ts deleted file mode 100644 index b535f3000d..0000000000 --- a/lib/process-services/src/lib/process-comments/process-comments.component.spec.ts +++ /dev/null @@ -1,127 +0,0 @@ -/*! - * @license - * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved. - * - * 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 { ComponentFixture, TestBed } from '@angular/core/testing'; -import { of, throwError } from 'rxjs'; -import { CommentProcessService } from './services/comment-process.service'; -import { ProcessCommentsComponent } from './process-comments.component'; -import { ProcessTestingModule } from '../testing/process.testing.module'; -import { mockProcessInstanceComments } from '../testing/mock/process/process-comments.mock'; - -describe('ProcessCommentsComponent', () => { - let component: ProcessCommentsComponent; - let fixture: ComponentFixture; - let getCommentsSpy: jasmine.Spy; - let commentProcessService: CommentProcessService; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ProcessTestingModule, ProcessCommentsComponent] - }); - fixture = TestBed.createComponent(ProcessCommentsComponent); - component = fixture.componentInstance; - commentProcessService = TestBed.inject(CommentProcessService); - - getCommentsSpy = spyOn(commentProcessService, 'get').and.returnValue(of(mockProcessInstanceComments)); - }); - - it('should load comments when processInstanceId specified', () => { - const 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', () => { - const emitSpy = spyOn(component.error, 'emit'); - getCommentsSpy.and.returnValue(throwError({})); - - const 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 () => { - const change = new SimpleChange(null, '123', true); - component.ngOnChanges({ processInstanceId: change }); - - fixture.detectChanges(); - await fixture.whenStable(); - - expect(fixture.nativeElement.querySelectorAll('.adf-comment-message').length).toBe(3); - expect(fixture.nativeElement.querySelector('.adf-comment-message:empty')).toBeNull(); - }); - - it('should display comments count when the process has comments', async () => { - const change = new SimpleChange(null, '123', true); - component.ngOnChanges({ processInstanceId: change }); - - fixture.detectChanges(); - await fixture.whenStable(); - - const 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 () => { - const change = new SimpleChange(null, '123', true); - component.ngOnChanges({ processInstanceId: change }); - - getCommentsSpy.and.returnValue(of([])); - - fixture.detectChanges(); - await fixture.whenStable(); - - expect(fixture.nativeElement.querySelector('#comment-container')).toBeNull(); - }); - - it('should not display comments input by default', async () => { - const change = new SimpleChange(null, '123', true); - component.ngOnChanges({ processInstanceId: change }); - - fixture.detectChanges(); - await fixture.whenStable(); - - expect(fixture.nativeElement.querySelector('#comment-input')).toBeNull(); - }); - - it('should not display comments input when the process is readonly', async () => { - component.readOnly = true; - - fixture.detectChanges(); - await fixture.whenStable(); - - expect(fixture.nativeElement.querySelector('#comment-input')).toBeNull(); - }); - - it('should display comments input when the process is not readonly', async () => { - component.readOnly = false; - - fixture.detectChanges(); - await fixture.whenStable(); - - expect(fixture.nativeElement.querySelector('#comment-input')).not.toBeNull(); - }); -}); diff --git a/lib/process-services/src/lib/process-comments/process-comments.component.ts b/lib/process-services/src/lib/process-comments/process-comments.component.ts index d9e1aa164b..68daa60ffa 100644 --- a/lib/process-services/src/lib/process-comments/process-comments.component.ts +++ b/lib/process-services/src/lib/process-comments/process-comments.component.ts @@ -15,21 +15,15 @@ * limitations under the License. */ -import { ADF_COMMENTS_SERVICE, CommentListComponent, CommentModel } from '@alfresco/adf-core'; +import { ADF_COMMENTS_SERVICE, CommentsComponent } from '@alfresco/adf-core'; import { CommentProcessService } from './services/comment-process.service'; -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, ViewEncapsulation } from '@angular/core'; -import { Observable, Observer, Subject } from 'rxjs'; -import { share, takeUntil } from 'rxjs/operators'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { TranslateModule } from '@ngx-translate/core'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatInputModule } from '@angular/material/input'; -import { FormsModule } from '@angular/forms'; - @Component({ selector: 'adf-process-instance-comments', standalone: true, - imports: [CommonModule, TranslateModule, MatFormFieldModule, MatInputModule, CommentListComponent, FormsModule], + + imports: [CommonModule, CommentsComponent], providers: [ { provide: ADF_COMMENTS_SERVICE, @@ -37,103 +31,14 @@ import { FormsModule } from '@angular/forms'; } ], templateUrl: './process-comments.component.html', - styleUrls: ['./process-comments.component.scss'], - encapsulation: ViewEncapsulation.None, - host: { class: 'adf-process-instance-comments' } + encapsulation: ViewEncapsulation.None }) -export class ProcessCommentsComponent implements OnChanges, OnDestroy { +export class ProcessCommentsComponent { /** (**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 = new EventEmitter(); - - comments: CommentModel[] = []; - comment$: Observable; - message: string; - beingAdded: boolean = false; - - private commentObserver: Observer; - private onDestroy$ = new Subject(); - - constructor(private commentProcessService: CommentProcessService) { - this.comment$ = new Observable((observer) => (this.commentObserver = observer)).pipe(share()); - this.comment$.pipe(takeUntil(this.onDestroy$)).subscribe((comment) => this.comments.push(comment)); - } - - ngOnDestroy() { - this.onDestroy$.next(true); - this.onDestroy$.complete(); - } - - ngOnChanges(changes: SimpleChanges) { - const processInstanceId = changes['processInstanceId']; - if (processInstanceId) { - if (processInstanceId.currentValue) { - this.getProcessInstanceComments(processInstanceId.currentValue); - } else { - this.resetComments(); - } - } - } - - add(): void { - if (this.message?.trim() && !this.beingAdded) { - this.beingAdded = true; - this.commentProcessService.add(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); - } - - private getProcessInstanceComments(processInstanceId: string): void { - this.resetComments(); - if (processInstanceId) { - this.commentProcessService.get(processInstanceId).subscribe( - (res: CommentModel[]) => { - res = res.sort((comment1: CommentModel, comment2: CommentModel) => { - const date1 = new Date(comment1.created); - const 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 = []; - } + readOnly: boolean; }