Implemented ui for editing a post's files; waiting for api request to be fixed

7 files changed, 137 insertions, 44 deletions

diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css
index c3fee62..cb155c6 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -152,43 +152,6 @@
   pointer-events: none;
 }
 
-#attachments {
-  display: flex;
-  flex-wrap: wrap;
-  color: gray;
-  font-size: .75em;
-  margin: 0 .3em;
-}
-
-.attachment {
-  border: 2px solid black;
-  border-radius: .6em;
-  margin-top: .2em;
-  margin-right: .2em;
-  padding: .2em;
-  display: flex;
-  align-items: center;
-}
-
-.attachment:last-child {
-  margin-right: 0;
-}
-
-.remove-attachment {
-  font-size: .9em;
-  color: var(--failure);
-  background-color: white;
-  border-radius: .2em;
-  margin: 0 .2em;
-  padding: .2em;
-}
-
-.remove-attachment:hover {
-  color: white;
-  background-color: var(--failure);
-  cursor: pointer;
-}
-
 /* Posts */
 
 #no-posts-msg {
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
index f394cad..a50d9fb 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -25,10 +25,10 @@
 						<img id="attachment-img" src="assets/images/paper-clip.png">
 						<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 					</div>
-					<div id="attachments">
-						<div *ngFor="let file of files" class="attachment">
+					<div class="form-attachments">
+						<div *ngFor="let file of files" class="form-attachment">
 							{{ file.name }}
-							<div class="remove-attachment" (click)="removeAttachment(file.name)">
+							<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
 								☒
 							</div>
 						</div>
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.css b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css
index b886bc1..3eec851 100644
--- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.css
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css
@@ -20,6 +20,41 @@
   margin-right: 0;
 }
 
+#editPost {
+  display: flex;
+  position: relative;
+}
+
+#new-message-input {
+  flex: 1;
+  box-sizing: border-box;
+}
+
+#file-upload {
+  font-size: inherit;
+  color: transparent;
+  width: 1.99em;
+  height: 1.99em;
+  margin-left: .3em;
+}
+
+#file-upload:hover {
+  cursor: pointer;
+}
+
+#file-upload::-webkit-file-upload-button {
+  visibility: hidden;
+}
+
+#attachment-img {
+  height: 1.99em;
+  width: 1.99em;
+  position: absolute;
+  right: 0;
+  pointer-events: none;
+}
+
+
 .submit-btn {
   max-width: 98%;
   margin: 0 auto;
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
index 08e63f9..8fb998e 100644
--- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
@@ -9,10 +9,20 @@
 		<button class="submit-btn" (click)="editPost()">Edit post</button>
 		<button class="submit-btn delete-btn" (click)="deletePost()">Delete post</button>
 	</div>
-	<form  [formGroup]="editPostFormGroup" (ngSubmit)="editPost()">
-		<input type="text" *ngIf="editingPost" placeholder="New post message" class="input-field" formControlName="newPostMessage">
+	<form  id="editPost" [formGroup]="editPostFormGroup"  *ngIf="editingPost" (ngSubmit)="editPost()">
+		<input id="new-message-input" type="text" placeholder="New post message" class="input-field" formControlName="newPostMessage">
+		<img id="attachment-img" src="assets/images/paper-clip.png">
+		<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 		<input type="submit" style="display: none" />
 	</form>
+	<div class="form-attachments" *ngIf="editingPost">
+		<div *ngFor="let file of files" class="form-attachment">
+			{{ file.name }}
+			<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
+				☒
+			</div>
+		</div>
+	</div>
 	<form [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
 		<input type="text" placeholder="Add comment" class="input-field" formControlName="newComment">
 		<input type="submit" style="display: none" />
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
index 95bf58f..cf5934e 100644
--- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
@@ -8,6 +8,7 @@ import { CommentService } from 'src/app/services/comment.service';
 import { PostService } from 'src/app/services/post.service';
 import { TokenService } from 'src/app/services/token.service';
 import { Post } from 'src/models/post';
+import { CloudinaryService } from 'src/app/services/cloudinary.service';
 
 @Component({
   selector: 'app-post-page',
@@ -21,25 +22,29 @@ export class PostPageComponent implements OnInit {
   public editingPost = false;
   public postId: Guid;
   public post: Post;
+  public files: File[];
   public editPostFormGroup: FormGroup;
   public addCommentFormGroup: FormGroup;
 
-  constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService, private _commentService: CommentService){
+  constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService, private _commentService: CommentService, private _cloudinaryService: CloudinaryService){
     this._titleService.setTitle(this._title);
   }
 
   ngOnInit(): void {
     this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
     this.postId = Guid.parse(this._router.url.substring(6));
+    this.files = [];
 
     // Gets the post and the logged in user and compares them,
     // to determine if the current post is made by the user
     this._postService.getPostRequest(this.postId).subscribe(
       (result: object) => {
         this.post = result as Post;
+        this.post.fileURLs = Object.values(result)[7];
         if (this.loggedIn) {
           this.editable = this.post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken();
         }
+        this.loadFiles();
       },
       (err: HttpErrorResponse) => {
         this._router.navigate(['/not-found']);
@@ -47,7 +52,8 @@ export class PostPageComponent implements OnInit {
     );
 
     this.editPostFormGroup = this._fb.group({
-      newPostMessage: new FormControl('')
+      newPostMessage: new FormControl(''),
+      fileUpload: new FormControl('')
     });
 
     this.addCommentFormGroup = this._fb.group({
@@ -55,6 +61,18 @@ export class PostPageComponent implements OnInit {
     });
   }
 
+  private loadFiles(): void {
+    for (const fileURL of this.post.fileURLs) {
+      this._cloudinaryService.getFileRequest(fileURL).subscribe(
+        (result: object) => {
+          const file = result as File;
+          file.name = 'Attachment';
+          this.files.push(file);
+        }
+      );
+    }
+  }
+
   backToFeed(): void {
     this._router.navigate(['/']);
   }
@@ -67,6 +85,16 @@ export class PostPageComponent implements OnInit {
     this._router.navigate(['/login']);
   }
 
+  onFileUpload(event: any): void {
+    this.files.push(...event.target.files);
+    this.editPostFormGroup.get('fileUpload')?.reset();
+  }
+
+  removeAttachment(fileName: string): void {
+    this.files = this.files.filter(x => x.name !== fileName);
+  }
+
+
   editPost(): void {
     if (this._tokenService.getTokenFromSessionStorage() === '') {
       this.toLogin();
diff --git a/src/DevHive.Angular/src/app/services/cloudinary.service.ts b/src/DevHive.Angular/src/app/services/cloudinary.service.ts
new file mode 100644
index 0000000..999e498
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/cloudinary.service.ts
@@ -0,0 +1,17 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class CloudinaryService {
+  constructor(private _http: HttpClient)
+  { }
+
+  getFileRequest(fileLink: string): Observable<Blob> {
+    return this._http.get(fileLink, {
+      responseType: 'blob'
+    });
+  }
+}
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index 6849190..eeb93fe 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -220,3 +220,43 @@ input:focus, button:focus {
   color: indianred;
   border-color: indianred !important;
 }
+
+/* Form attachments (the ones that are shown while creating and editing a post) */
+
+.form-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  color: gray;
+  font-size: .75em;
+  margin: 0 .3em;
+}
+
+.form-attachment {
+  border: 2px solid black;
+  border-radius: .6em;
+  margin-top: .2em;
+  margin-right: .2em;
+  padding: .2em;
+  display: flex;
+  align-items: center;
+}
+
+.form-attachment:last-child {
+  margin-right: 0;
+}
+
+.remove-form-attachment {
+  font-size: .9em;
+  color: var(--failure);
+  background-color: white;
+  border-radius: .2em;
+  margin: 0 .2em;
+  padding: .2em;
+}
+
+.remove-form-attachment:hover {
+  color: white;
+  background-color: var(--failure);
+  cursor: pointer;
+}
+