Create mock subcomment on a top level comment

Click "Comment on Comment" on a TLC, enter text into a field that pops up, click "Submit Comment on Comment", and comment is "saved" temporarily. Like the other comment buttons, hides other types of commenting. Issue #147 (Create comment object) Epic #217 (Comment on Abstracts) Epic #131 (Submission Card View)
Megabittron · Nov 30, 2019 · 6cfd5f9 · 6cfd5f9
1 parent a78f869
commit 6cfd5f9
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/abstracts.seed.json b/abstracts.seed.json
@@ -33,7 +33,7 @@
         "additionalMediaEquipment": "no",
         "additionalRequirements": "NA",
         "other": "NA",
-        "timestamp": "Wed Jan 25 16:23:20 CST 2019",
+        "timestamp": "Wed Jan 25 16:23:20 CST 2020",
         "comments": null,
         "approval": false,
         "rejection": false,

diff --git a/client/src/app/submissionView/submissionView.component.html b/client/src/app/submissionView/submissionView.component.html
@@ -77,7 +77,7 @@ <h2 style="text-align: center">Comments</h2>
         <p>To leave a comment, either highlight the part of the abstract you want to quote or click "New Comment."</p>
 
         <button mat-button class="new-comment-btn" (click)="makeNewComment()">
-            <mat-icon>edit</mat-icon> New Comment [W]
+            <mat-icon>edit</mat-icon> Comment on Thread [W]
         </button>
 
         <div class="top-level-comment">
@@ -87,6 +87,9 @@ <h2 style="text-align: center">Comments</h2>
             <i class="quote">"Denim was-- denim was invented, so that like, cows, when they bit you, it didn't hurt very bad."</i>
             <p>Please formalize your prose... why is it so conversational? You should also add that that used to be the
                 tagline underneath Levi's: "So it doesn't hurt so bad when cows bite you."</p>
+            <button mat-button class="respond-comment-btn" (click)="makeSubcomment()">
+                <mat-icon>edit</mat-icon> Comment on Comment [W]
+            </button>
         </div>
         <div class="sub-comment">
             <i class="material-icons">person</i>
@@ -101,6 +104,25 @@ <h2 style="text-align: center">Comments</h2>
             <p>Looks good for the most part. Though you could condense the two sentences about the Levi's tagline
                 into one.</p>
         </div>
+        <div class="sub-comment" *ngIf="!createSubcomment">
+            <i class="material-icons">person_outline</i>
+            <b>Submitted by REVIEWER on Feb 21, 2:08PM</b>
+            <br>
+            <p>{{subComment}}</p>
+        </div>
+
+        <div class="debug-comment" *ngIf="createSubcomment">
+            <u>Leave a comment on this comment:</u>
+            <br><br>
+            <mat-form-field class="leave-a-comment">
+                <textarea matInput placeholder="Leave a comment"
+                          (input)="subComment= $event.target.value"></textarea>
+            </mat-form-field>
+
+            <button mat-button class="leave-comment-btn" (click)="saveSubcomment()">
+                <mat-icon>edit</mat-icon> Submit Comment of Comment [W]
+            </button>
+        </div>
 
         <div class="debug-comment" *ngIf="newComment">
             <u>Leave a comment without quoting & highlighting:</u>
@@ -117,7 +139,7 @@ <h2 style="text-align: center">Comments</h2>
         <div class="debug-comment" *ngIf="selectedText">
             <u>Leave a comment that quotes & highlights the abstract:</u>
             <br><br>
-            <i>"{{selectedText}}"</i>
+            <i class="quote">"{{selectedText}}"</i>
             <br><br>
 
             <mat-form-field class="leave-a-comment">

diff --git a/client/src/app/submissionView/submissionView.component.scss b/client/src/app/submissionView/submissionView.component.scss
@@ -71,6 +71,13 @@
     margin: 0.5rem;
 }
 
+.respond-comment-btn {
+    background-color: cadetblue;
+    margin: 0.5rem;
+    float: right;
+    font-size: 0.8rem;
+}
+
 .debug-comment { //for debugging
     border: 1px solid black;
     display: inline-block;

diff --git a/client/src/app/submissionView/submissionView.component.ts b/client/src/app/submissionView/submissionView.component.ts
@@ -38,13 +38,28 @@ export class SubmissionViewComponent implements OnInit {
         }
         this.selectedText = text;
         this.newComment = false;
+        this.createSubcomment = false;
         console.log(text);
     }
 
     newComment: boolean = false;
     makeNewComment() {
         this.newComment = true;
         this.selectedText = '';
+        this.createSubcomment = false;
+    }
+
+    createSubcomment: boolean = false;
+    makeSubcomment() {
+        this.createSubcomment = true;
+        this.newComment = false;
+        this.selectedText = '';
+    }
+
+    subComment: string = "";
+    saveSubcomment() {
+        this.createSubcomment = false;
+        this.selectedText = '';
     }
 
     ngOnInit() {