inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-8806] refactor process comments (#10230)

Browse Source 
* ACS-8806 refactor process comments, datatable access in task list and process list

* ACS-8806 docs mistake

* ACS-8806 revert datatable access changes in task and process lists
This commit is contained in:
Grzegorz Jaśkowski 2024-09-19 09:17:30 +02:00 committed by GitHub
parent 414dc1f5a9
commit 76aeab4d10
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 17 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/process-services/components/process-comments.component.md
View File

@ -12,7 +12,9 @@ Displays comments associated with a particular process instance and allows the u
```html
<adf-process-instance-comments
processInstanceId="YOUR_PROCESS_INSTANCE_ID">
[processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
[readOnly]="YOUR_READ_ONLY_FLAG"
>
</adf-process-instance-comments>
```
@ -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)`<any>` | 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? |

26
lib/process-services/src/lib/process-comments/process-comments.component.html
View File

@ -1,21 +1,5 @@
<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.escape)="clear()"
/>
</mat-form-field>
</div>
<div *ngIf="comments.length > 0">
<adf-comment-list [comments]="comments"> </adf-comment-list>
</div>
</div>
<adf-comments
[readOnly]="readOnly"
[id]="processInstanceId"
>
</adf-comments>

53
lib/process-services/src/lib/process-comments/process-comments.component.scss
View File

@ -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%;
}

127
lib/process-services/src/lib/process-comments/process-comments.component.spec.ts
View File

@ -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<ProcessCommentsComponent>;
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();
});
});

109
lib/process-services/src/lib/process-comments/process-comments.component.ts
View File

@ -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<any> = new EventEmitter<any>();
comments: CommentModel[] = [];
comment$: Observable<CommentModel>;
message: string;
beingAdded: boolean = false;
private commentObserver: Observer<CommentModel>;
private onDestroy$ = new Subject<boolean>();
constructor(private commentProcessService: CommentProcessService) {
this.comment$ = new Observable<CommentModel>((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;
}