[AAE-10768] Make the comments reusable (#7983)

* [AAE-10768] Refactor core comments

* [AAE-10768] Add models export in core comments refactor

* [AAE-10768] Add comments implementation inside process-services package

* [AAE-10768] Add task comments module to process module

* [AAE-10768] Add node comments module to content services

* [AAE-10768] Add id check to getComments and addComments in adf-core comments component

* [AAE-10768] Remove unused service files in process-comments module

* [AAE-10768] Remove unused service files in process-comments module

* [AAE-10768] Add testing logic to spec files

* [AAE-10768] Add comments components readme

* [AAE-10768] Add a mock service to inject into the comment stories file

* [AAE-10768] Add mock data for comments stories

* [AAE-10768] Add mock service to inject into comments stories

* [AAE-10768] Rename mock service and mock data

* [AAE-10768] change taskId with id into the comments test because taskId is never used

* [AAE-10768] Resolve pr suggestions

* [AAE-10768] Resolve task-comments pr suggestions

* [AAE-10768] Resolve comments pr suggestions

* [AAE-10768] Fix merge error in comments.component.html

* [AAE-10768] Add missing markdown files

* [AAE-10768] Remove events from md files

* [AAE-10768] Update upgrade50-60.md with renamed input property

Co-authored-by: Amedeo Lepore <amedeo.lepore@hyland.com>
This commit is contained in:
Diogo Bastos
2022-12-20 10:51:54 +00:00
committed by GitHub
parent 9077572199
commit 3864aaf9cb
43 changed files with 1667 additions and 356 deletions

View File

@@ -15,12 +15,21 @@
* limitations under the License.
*/
import { CommentProcessService } from '../services/comment-process.service';
import { CommentContentService } from '../services/comment-content.service';
import { CommentModel } from '../models/comment.model';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import {
Component,
EventEmitter,
Inject,
Input,
OnChanges,
Output,
SimpleChanges,
ViewEncapsulation
} from '@angular/core';
import { Observable, Observer } from 'rxjs';
import { share } from 'rxjs/operators';
import { ADF_COMMENTS_SERVICE } from './interfaces/comments.token';
import { CommentsService } from './interfaces/comments-service.interface';
@Component({
selector: 'adf-comments',
@@ -32,11 +41,7 @@ export class CommentsComponent implements OnChanges {
/** The numeric ID of the task. */
@Input()
taskId: string;
/** The numeric ID of the node. */
@Input()
nodeId: string;
id: string;
/** Are the comments read only? */
@Input()
@@ -46,143 +51,129 @@ export class CommentsComponent implements OnChanges {
@Output()
error: EventEmitter<any> = new EventEmitter<any>();
comments: CommentModel [] = [];
private commentObserver: Observer<CommentModel>;
comment$: Observable<CommentModel>;
comments: CommentModel[] = [];
message: string;
beingAdded: boolean = false;
constructor(private commentProcessService: CommentProcessService,
private commentContentService: CommentContentService) {
private commentObserver: Observer<CommentModel>;
comment$: Observable<CommentModel>;
constructor(@Inject(ADF_COMMENTS_SERVICE) private commentsService: CommentsService) {
this.comment$ = new Observable<CommentModel>((observer) => this.commentObserver = observer)
.pipe(share());
.pipe(
share()
);
this.comment$.subscribe((comment: CommentModel) => {
this.comments.push(comment);
});
}
ngOnChanges(changes: SimpleChanges) {
this.taskId = null;
this.nodeId = null;
ngOnChanges(changes: SimpleChanges): void {
this.id = null;
this.taskId = changes['taskId'] ? changes['taskId'].currentValue : null;
this.nodeId = changes['nodeId'] ? changes['nodeId'].currentValue : null;
this.id = changes['id'] ? changes['id'].currentValue : null;
if (this.taskId || this.nodeId) {
this.getComments();
if (this.id) {
this.loadComments();
} else {
this.resetComments();
}
}
private getComments(): void {
loadComments() {
this.resetComments();
if (this.isATask()) {
this.commentProcessService.getTaskComments(this.taskId).subscribe(
(comments: CommentModel[]) => {
if (comments && comments instanceof Array) {
comments = comments.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;
});
comments.forEach((currentComment) => {
this.commentObserver.next(currentComment);
});
}
if (!this.hasId()) {
return;
}
this.commentsService.get(this.id).subscribe(
(comments: CommentModel[]) => {
if (!this.isArrayInstance(comments)) {
return;
}
comments = this.sortedComments(comments);
this.addCommentsToObserver(comments);
},
(err) => {
this.error.emit(err);
}
);
}
addComment() {
if (!this.canAddComment()) {
return;
}
const comment: string = this.sanitize(this.message);
this.beingAdded = true;
this.commentsService.add(this.id, comment)
.subscribe(
(res: CommentModel) => {
this.addToComments(res);
this.resetMessage();
},
(err) => {
this.error.emit(err);
}
);
}
if (this.isANode()) {
this.commentContentService.getNodeComments(this.nodeId).subscribe(
(comments: CommentModel[]) => {
if (comments && comments instanceof Array) {
comments = comments.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;
});
comments.forEach((comment) => {
this.commentObserver.next(comment);
});
}
},
(err) => {
this.error.emit(err);
() => {
this.beingAdded = false;
}
);
}
}
clearMessage(event: Event): void {
event.stopPropagation();
this.resetMessage();
}
private addToComments(comment: CommentModel): void {
this.comments.unshift(comment);
}
private resetMessage(): void {
this.message = '';
}
private canAddComment(): boolean {
return this.hasId() && this.message && this.message.trim() && !this.beingAdded;
}
private hasId(): boolean {
return !!this.id;
}
private isArrayInstance(entity: any): boolean {
return entity && entity instanceof Array;
}
private sortedComments(comments: CommentModel[]): CommentModel[] {
return comments.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;
});
}
private addCommentsToObserver(comments: CommentModel[]): void {
comments.forEach((currentComment: CommentModel) => {
this.commentObserver.next(currentComment);
});
}
private resetComments(): void {
this.comments = [];
}
add(): void {
if (this.message && this.message.trim() && !this.beingAdded) {
const comment = this.sanitize(this.message);
this.beingAdded = true;
if (this.isATask()) {
this.commentProcessService.addTaskComment(this.taskId, comment)
.subscribe(
(res: CommentModel) => {
this.comments.unshift(res);
this.message = '';
this.beingAdded = false;
},
(err) => {
this.error.emit(err);
this.beingAdded = false;
}
);
}
if (this.isANode()) {
this.commentContentService.addNodeComment(this.nodeId, comment)
.subscribe(
(res: CommentModel) => {
this.comments.unshift(res);
this.message = '';
this.beingAdded = false;
},
(err) => {
this.error.emit(err);
this.beingAdded = false;
}
);
}
}
}
clear(event: Event): void {
event.stopPropagation();
this.message = '';
}
isReadOnly(): boolean {
return this.readOnly;
}
isATask(): boolean {
return !!this.taskId;
}
isANode(): boolean {
return !!this.nodeId;
}
private sanitize(input: string): string {
return input.replace(/<[^>]+>/g, '')
.replace(/^\s+|\s+$|\s+(?=\s)/g, '')