diff options
Diffstat (limited to 'src/DevHive.Angular')
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; +} + |