From 0b460098a81a04d9c8273e3c036213664cbbd3e7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 2 Feb 2021 17:14:47 +0200 Subject: Implemented ui for editing a post's files; waiting for api request to be fixed --- .../src/app/components/feed/feed.component.css | 37 -------------------- .../src/app/components/feed/feed.component.html | 6 ++-- .../components/post-page/post-page.component.css | 35 +++++++++++++++++++ .../components/post-page/post-page.component.html | 14 ++++++-- .../components/post-page/post-page.component.ts | 32 +++++++++++++++-- .../src/app/services/cloudinary.service.ts | 17 +++++++++ src/DevHive.Angular/src/styles.css | 40 ++++++++++++++++++++++ 7 files changed, 137 insertions(+), 44 deletions(-) create mode 100644 src/DevHive.Angular/src/app/services/cloudinary.service.ts 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 @@ -
-
+
+
{{ file.name }} -
+
☒
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 @@
-
- + + + +
+
+
+ {{ file.name }} +
+ ☒ +
+
+
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 { + 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; +} + -- cgit v1.2.3