-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Original PR #1293 -Updating Comments related stuff to the latest master configs and environment ## Introduction This PR includes the basic features of the Workflow Commenting feature of Texera--a feature implemented to support communication between contributors of a workflow and comprehension of people reading a workflow. Early Stage : - Now can add `commentBox` objects onto the canvas - a pop-up window will be displayed when double-clicking the comment icon - delete button on the top right corner which allows you to delete the commentBox - after opening the pop-up window, you can edit comments by typing in the input box. - the input box stores newly added comments and previous comments in a list.  ## Lifecycle of Comments A comment (the little dialog icon on canvas) consists of two components: a **CommentBox** and **a list of Comments**. **CommentBox** is generated when the dialog icon pops up, it is a container object with information of an id as identifier and a point representing its position on the canvas, and an empty list of **Comments**. **Comment** is generated and added to the list in **CommentBox** when someone types a comment and hits the send button. it contains information related to its creator, its content, and its creation time. Refer to `workflow-common.interface.ts` for more details. When the **Delete** button on the top-right corner of the icon is clicked, the commentBox gets deleted as well as all its corresponding comments. ## Storage of Comments Currently, CommentBoxes are components of a workflow (parallel with Links and Operators), it is persisted into the backend database as an attribute in the JSON object with every information embedded in -- position, ID, and all the comments inside. @Yicong-Huang, @zuozhiw and I have been discussing whether we should seperate comments from commentBoxes since the current method lacks the ability to handle detailed requests related to specific comments. ## 2022/02/26 Update - Updated to work with the share-editing feature. - Optimized front-end CommentBox UI for user-friendly purposes. Co-authored-by: Yicong Huang <[email protected]>
- Loading branch information
1 parent
c2f1dd3
commit 0edbbda
Showing
21 changed files
with
559 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
...workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <div class="modal-body"> | ||
| <nz-list [nzItemLayout]="'horizontal'"> | ||
| <nz-list-item *ngFor="let item of commentBox.comments"> | ||
| <nz-comment [nzAuthor]="item.creatorName" [nzDatetime]="toRelative(item.creationTime)"> | ||
| <!-- TODO: add user avatar--> | ||
| <!-- <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="item.avatar"></nz-avatar>--> | ||
| <nz-comment-content> | ||
| <p>{{ item.content }}</p> | ||
| </nz-comment-content> | ||
| </nz-comment> | ||
| </nz-list-item> | ||
| </nz-list> | ||
| </div> | ||
|
|
||
| <div class="modal-footer"> | ||
| <!-- TODO: add user avatar--> | ||
| <!-- <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="user.avatar"></nz-avatar>--> | ||
| <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton"> | ||
| <textarea | ||
| type="text" | ||
| placeholder="add new comment" | ||
| [(ngModel)]="inputValue" | ||
| nz-input | ||
| [nzAutosize]="{ minRows: 1, maxRows: 6}" | ||
| ></textarea> | ||
| </nz-input-group> | ||
| <ng-template #suffixIconButton> | ||
| <button | ||
| nz-button | ||
| nzType="primary" | ||
| [nzLoading]="submitting" | ||
| [disabled]="!user || !inputValue" | ||
| (click)="onClickAddComment()" | ||
| > | ||
| <i nz-icon nzType="send"></i> | ||
| </button> | ||
| </ng-template> | ||
| </div> |
15 changes: 15 additions & 0 deletions
15
...workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| .modal-body { | ||
| min-height: 20vh; | ||
| max-height: 60vh; | ||
| overflow-y: auto; | ||
| width: 100%; | ||
|
|
||
| p { | ||
| word-break: break-all; | ||
| white-space: normal; | ||
| } | ||
| } | ||
|
|
||
| .modal-dialog { | ||
| overflow-y: initial !important; | ||
| } |
Empty file.
70 changes: 70 additions & 0 deletions
70
...p/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { Component, HostListener, Inject, Input, LOCALE_ID } from "@angular/core"; | ||
| import { NzModalRef } from "ng-zorro-antd/modal"; | ||
| import { CommentBox } from "src/app/workspace/types/workflow-common.interface"; | ||
| import { WorkflowActionService } from "src/app/workspace/service/workflow-graph/model/workflow-action.service"; | ||
| import { UserService } from "src/app/common/service/user/user.service"; | ||
| import { NotificationService } from "../../../../common/service/notification/notification.service"; | ||
| import { User } from "src/app/common/type/user"; | ||
| import { untilDestroyed } from "@ngneat/until-destroy"; | ||
| import { UntilDestroy } from "@ngneat/until-destroy"; | ||
| import { formatDate } from "@angular/common"; | ||
|
|
||
| @UntilDestroy() | ||
| @Component({ | ||
| selector: "texera-nz-modal-comment-box", | ||
| templateUrl: "./nz-modal-comment-box.component.html", | ||
| styleUrls: ["./nz-modal-comment-box.component.scss"], | ||
| }) | ||
| export class NzModalCommentBoxComponent { | ||
| @Input() commentBox!: CommentBox; | ||
| public user?: User; | ||
|
|
||
| constructor( | ||
| @Inject(LOCALE_ID) public locale: string, | ||
| public workflowActionService: WorkflowActionService, | ||
| public userService: UserService, | ||
| public modal: NzModalRef<any, number>, | ||
| public notificationService: NotificationService | ||
| ) { | ||
| this.userService | ||
| .userChanged() | ||
| .pipe(untilDestroyed(this)) | ||
| .subscribe(user => (this.user = user)); | ||
| } | ||
|
|
||
| inputValue = ""; | ||
| submitting = false; | ||
|
|
||
| public onClickAddComment(): void { | ||
| this.submitting = true; | ||
| this.addComment(this.inputValue); | ||
| this.inputValue = ""; | ||
| this.submitting = false; | ||
| } | ||
|
|
||
| public addComment(content: string): void { | ||
| if (!this.user) { | ||
| return; | ||
| } | ||
| // A compromise: we create the timestamp in the frontend since the entire comment is managed together, in JSON format | ||
| const creationTime: string = new Date().toISOString(); | ||
| const creatorName = this.user.name; | ||
| const creatorID = this.user.uid; | ||
| this.workflowActionService.addComment( | ||
| { content, creatorName, creatorID, creationTime }, | ||
| this.commentBox.commentBoxID | ||
| ); | ||
| } | ||
|
|
||
| toRelative(datetime: string): string { | ||
| return formatDate(new Date(datetime), "MM/dd/yyyy, hh:mm:ss a z", this.locale); | ||
| } | ||
|
|
||
| @HostListener("window:keydown", ["$event"]) | ||
| onKeyDown(event: KeyboardEvent) { | ||
| if ((event.metaKey || event.ctrlKey) && event.key == "Enter") { | ||
| this.onClickAddComment(); | ||
| event.preventDefault(); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.