Added design and very small part of functionality for file uploading when creating a post

3 files changed, 119 insertions, 20 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 73e1f3e..c3fee62 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -75,13 +75,9 @@
 
 /* Top bar */
 
-form {
-  width: 100%;
-  height: 100%;
-}
-
 #top-bar {
   display: flex;
+  flex-direction: column;
   width: 98%;
   margin: 0 auto;
   margin-bottom: .5em;
@@ -99,6 +95,29 @@ form {
   width: inherit;
 }
 
+#top-bar-open-chat {
+  /* Until implemented */
+  display: none;
+}
+
+#main-content {
+  display: flex;
+}
+
+/* Create post */
+
+#create-post-form {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+#form-inputs {
+  display: flex;
+}
+
 #top-bar-create-post {
   flex: 1;
   font-size: inherit;
@@ -110,9 +129,64 @@ form {
   border-radius: .6em;
 }
 
-#top-bar-open-chat {
-  /* Until implemented */
-  display: none;
+#file-upload {
+  font-size: inherit;
+  color: transparent;
+  width: 1.5em;
+  height: 1.5em;
+}
+
+#file-upload:hover {
+  cursor: pointer;
+}
+
+#file-upload::-webkit-file-upload-button {
+  visibility: hidden;
+}
+
+#attachment-img {
+  height: 1.5em;
+  width: 1.5em;
+  position: absolute;
+  right: .4em;
+  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 */
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 1ec040b..055ca16 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -15,15 +15,29 @@
 		<button class="submit-btn" (click)="logout()">Logout</button>
 	</nav>
 	<div id="feed-content">
-		<nav id="top-bar" class="rounded-border">
-			<img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()">
-			<form [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
-				<input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/>
-				<input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent -->
-			</form>
-			<a id="top-bar-open-chat" href="">
-				<img src="assets/images/feed/chat-pic.png" alt=""/>
-			</a>
+		<nav id="top-bar">
+			<div id="main-content">
+				<img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()">
+				<form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
+					<div id="form-inputs">
+						<input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/>
+						<input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent -->
+						<img id="attachment-img" src="assets/images/paper-clip.png">
+						<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)">
+					</div>
+					<div id="attachments">
+						<div *ngFor="let file of files" class="attachment">
+							{{ file.name }}
+							<div class="remove-attachment" (click)="removeAttachment(file.name)">
+								☒
+							</div>
+						</div>
+					</div>
+				</form>
+				<a id="top-bar-open-chat" href="">
+					<img src="assets/images/feed/chat-pic.png" alt=""/>
+				</a>
+			</div>
 		</nav>
 		<div id="posts" class="scroll-standalone">
 			<div id="no-posts-msg" *ngIf="posts.length === 0">
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
index 0684ddb..7ce1133 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -23,6 +23,7 @@ export class FeedComponent implements OnInit {
   public user: User;
   public posts: Post[];
   public createPostFormGroup: FormGroup;
+  public files: File[];
 
   constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _feedService: FeedService, private _postService: PostService, private _tokenService: TokenService) {
     this._titleService.setTitle(this._title);
@@ -36,13 +37,15 @@ export class FeedComponent implements OnInit {
 
     this.posts = [];
     this.user = this._userService.getDefaultUser();
+    this.files = [];
 
     const now = new Date();
     now.setHours(now.getHours() + 2); // accounting for eastern european timezone
     this._timeLoaded = now.toISOString();
 
     this.createPostFormGroup = this._fb.group({
-      newPostMessage: new FormControl('')
+      newPostMessage: new FormControl(''),
+      fileUpload: new FormControl('')
     });
 
     this._userService.getUserFromSessionStorageRequest().subscribe(
@@ -62,8 +65,7 @@ export class FeedComponent implements OnInit {
         this.posts = Object.values(result)[0];
         this.finishUserLoading();
       },
-      (err: HttpErrorResponse) => {
-        const test = err.status;
+      (err) => {
         this.finishUserLoading();
       }
     );
@@ -86,6 +88,15 @@ export class FeedComponent implements OnInit {
     this._router.navigate(['/login']);
   }
 
+  onFileUpload(event: any): void {
+    this.files.push(event.target.files[0]);
+    this.createPostFormGroup.get('fileUpload')?.reset();
+  }
+
+  removeAttachment(fileName: string): void {
+    this.files = this.files.filter(x => x.name !== fileName);
+  }
+
   createPost(): void {
     const postMessage = this.createPostFormGroup.get('newPostMessage')?.value;