Merge pull request #7 from Team-Kaleidoscope/devHEADv0.2main

Second Stage: Complete

3 files changed, 140 insertions, 74 deletions

diff --git a/src/app/components/comment/comment.component.css b/src/app/components/comment/comment.component.css
index d82f10e..48d9174 100644
--- a/src/app/components/comment/comment.component.css
+++ b/src/app/components/comment/comment.component.css
@@ -1,59 +1,30 @@
-.comment {
-  display: flex;
-  width: 100%;
-
-  margin: .5em auto;
+.left-pane {
   box-sizing: border-box;
-  padding: .5em;
-  background-color: var(--card-bg);
-}
-
-.comment:first-child {
-  margin-top: 0;
 }
 
 /* Author */
 
-.author {
-  display: flex;
-  margin-bottom: .2em;
-}
-
-.author:hover {
-  cursor: pointer;
-}
-
-.author > img {
-  width: 1.7em;
-  height: 1.7em;
-  margin-right: .2em;
-}
-
-.author-info > .name {
-  font-size: .8em;
-}
-
-.author-info > .handle {
-  font-size: .6em;
-  color: gray;
+.author-picture {
+  width: 2.2em;
+  height: 2.2em;
 }
 
 /* Content */
 
 .content {
-  flex: 1;
+  padding: 0 var(--card-padding);
 }
 
 .message {
-  margin: .3em 0;
-  word-break: break-all;
+  word-break: break-word;
 }
 
-.timestamp {
-  font-size: .5em;
-  color: gray;
+.comment-details {
+  margin-bottom: calc(var(--card-padding) / 1.5);
+  padding: 0.2em 0;
 }
 
-.message:hover, .timestamp:hover {
-  cursor: pointer;
+.comment-details > * {
+  margin-left: 1.1em;
 }
+
diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html
index 718e25c..9403ea2 100644
--- a/src/app/components/comment/comment.component.html
+++ b/src/app/components/comment/comment.component.html
@@ -1,23 +1,46 @@
 <app-loading *ngIf="!loaded"></app-loading>
 
-<div class="comment rounded-border" *ngIf="loaded">
-	<div class="content">
-		<div class="author" (click)="goToAuthorProfile()">
-			<img class="round-image" [src]="user.profilePictureURL">
-			<div class="author-info">
-				<div class="name">
-					{{ user.firstName }} {{ user.lastName }}
-				</div>
-				<div class="handle">
-					@{{ user.userName }}
-				</div>
-			</div>
-		</div>
-		<div class="message" (click)="goToCommentPage()">
+<section class="card flex-row" [hidden]="loaded" (mouseleave)="resetShareBtn()">
+	<aside class="left-pane">
+		<img class="author-picture round-image hover-half-opacity" [src]="user.profilePictureURL" (click)="goToAuthorProfile()">
+	</aside>
+	<main class="content flexible">
+		<summary class="font-size-dot8 text-vertical-middle hover-half-opacity" (click)="goToAuthorProfile()">
+			<span>
+				{{ user.firstName }} {{ user.lastName }}
+			</span>
+			<span class="fg-faded">
+				@{{ user.userName }}
+			</span>
+		</summary>
+		<form [formGroup]="editCommentFormGroup" *ngIf="editingComment" (ngSubmit)="editComment()">
+			<textarea class="textarea-new-msg width-full border-faded-slim border-bottom-only padding-dot2 margin-bot-dot5" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea>
+			<button type="submit" class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-dot5">
+				Update Comment
+			</button>
+		</form>
+		<article class="message margin-top-bot-dot2" *ngIf="!editingComment">
 			{{ comment.message }}
-		</div>
-		<div class="timestamp" (click)="goToCommentPage()">
-			{{ timeCreated }}
-		</div>
-	</div>
-</div>
+		</article>
+		<section class="comment-details flex-row flex-justify-end font-size-dot7 border-faded-slim border-bottom-only">
+			<time class="flex-row flex-center-align-items">
+				<img class="height-font" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
+				<span>
+					{{ timeCreated }}
+				</span>
+			</time>
+		</section>
+		<section class="flex-row justify-children-center align-children-center">
+			<button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="toggleEditing()">
+				<img src="/assets/icons/tabler-icon-edit.svg">
+			</button>
+			<button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="showCopiedMessage()">
+				<img src="/assets/icons/tabler-icon-link.svg">
+				&nbsp;Share
+			</button>
+			<button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="deleteComment()">
+				<img src="/assets/icons/tabler-icon-trash.svg">
+			</button>
+		</section>
+	</main>
+</section>
diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts
index 5076769..2a54f92 100644
--- a/src/app/components/comment/comment.component.ts
+++ b/src/app/components/comment/comment.component.ts
@@ -1,54 +1,126 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
 import { CommentService } from 'src/app/services/comment.service';
+import { TokenService } from 'src/app/services/token.service';
 import { UserService } from 'src/app/services/user.service';
-import { Comment } from 'src/models/comment';
-import { User } from 'src/models/identity/user';
+import { Comment } from 'src/models/comment.model';
+import { User } from 'src/models/identity/user.model';
 
 @Component({
   selector: 'app-comment',
   templateUrl: './comment.component.html',
   styleUrls: ['./comment.component.css']
 })
-export class CommentComponent implements OnInit {
+export class CommentComponent implements OnInit, AfterViewInit {
   public loaded = false;
+  public loggedInAuthor = false;
+  public editingComment = false;
   public user: User;
   public comment: Comment;
   public timeCreated: string;
   @Input() paramId: string;
+  public editCommentFormGroup: FormGroup;
+  @ViewChild('share') shareBtn: ElementRef;
+  private _defaultShareBtnInnerHTML: string;
+  private _linkShared = false;
 
-  constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService)
+  constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder, private _elem: ElementRef, private _renderer: Renderer2)
   { }
 
   ngOnInit(): void {
     this.comment = this._commentService.getDefaultComment();
     this.user = this._userService.getDefaultUser();
 
-    this._commentService.getCommentRequest(Guid.parse(this.paramId)).subscribe(
-      (result: object) => {
+    this._commentService.getCommentRequest(Guid.parse(this.paramId)).subscribe({
+      next: (result: object) => {
         Object.assign(this.comment, result);
 
         this.timeCreated = new Date(this.comment.timeCreated).toLocaleString('en-GB');
         this.loadUser();
       }
-    );
+    });
+
+    this.editCommentFormGroup = this._fb.group({
+      newCommentMessage: new FormControl('')
+    });
   }
 
   private loadUser(): void {
-    this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe(
-      (result: object) => {
+    this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe({
+      next: (result: object) => {
         Object.assign(this.user, result);
+
+        if (this._tokenService.getTokenFromSessionStorage() !== '') {
+          this.loggedInAuthor = this._tokenService.getUsernameFromSessionStorageToken() === this.comment.issuerUsername;
+          this.editCommentFormGroup.get('newCommentMessage')?.setValue(this.comment.message);
+        }
+
         this.loaded = true;
       }
-    );
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this._defaultShareBtnInnerHTML = this.shareBtn.nativeElement.innerHTML;
   }
 
   goToAuthorProfile(): void {
     this._router.navigate(['/profile/' + this.comment.issuerUsername]);
   }
 
-  goToCommentPage(): void {
-    this._router.navigate(['/comment/' + this.comment.commentId]);
+  toggleEditing(): void {
+    this.editingComment = !this.editingComment;
+  }
+
+  editComment(): void {
+    if (this._tokenService.getTokenFromSessionStorage() === '') {
+      this._router.navigate(['/login']);
+      return;
+    }
+
+    if (this.editingComment) {
+      const newMessage = this.editCommentFormGroup.get('newCommentMessage')?.value;
+
+      if (newMessage !== '' && newMessage !== this.comment.message) {
+        this._commentService.putCommentWithSessionStorageRequest(Guid.parse(this.paramId), this.comment.postId, newMessage).subscribe({
+          next: () => {
+            this.reloadPage();
+          }
+        });
+      }
+    }
+    this.editingComment = !this.editingComment;
+  }
+
+  deleteComment(): void {
+    this._commentService.deleteCommentWithSessionStorage(Guid.parse(this.paramId)).subscribe({
+      next: () => {
+        this.reloadPage();
+      }
+    });
+  }
+
+  private reloadPage(): void {
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+    this._router.navigate([this._router.url]);
+  }
+
+  resetShareBtn(): void {
+    if (this._linkShared) {
+      this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', this._defaultShareBtnInnerHTML);
+      this._linkShared = false;
+    }
+  }
+
+  showCopiedMessage(): void {
+    this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', 'Link copied to clipboard!');
+    this._linkShared = true;
+  }
+
+  getPostLink(): string {
+    return location.origin + '/comment/' + this.paramId;
   }
 }