diff options
Diffstat (limited to 'src/app/components/post-page')
| -rw-r--r-- | src/app/components/post-page/post-page.component.css | 62 | ||||
| -rw-r--r-- | src/app/components/post-page/post-page.component.html | 37 | ||||
| -rw-r--r-- | src/app/components/post-page/post-page.component.ts | 162 |
3 files changed, 261 insertions, 0 deletions
diff --git a/src/app/components/post-page/post-page.component.css b/src/app/components/post-page/post-page.component.css new file mode 100644 index 0000000..3eec851 --- /dev/null +++ b/src/app/components/post-page/post-page.component.css @@ -0,0 +1,62 @@ +#content { + justify-content: flex-start !important; +} + +#content > * { + width: 100%; +} + +.many-buttons { + width: 100%; + display: flex; +} + +.many-buttons > * { + flex: 1; + margin-right: .3em; +} + +.many-buttons > *:last-of-type { + 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; + margin-bottom: .5em; +} diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html new file mode 100644 index 0000000..8665865 --- /dev/null +++ b/src/app/components/post-page/post-page.component.html @@ -0,0 +1,37 @@ +<app-loading *ngIf="!dataArrived"></app-loading> + +<div id="content" *ngIf="dataArrived"> + <div class="many-buttons" *ngIf="loggedIn"> + <button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button> + <button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button> + </div> + <button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button> + <app-post [paramId]="postId.toString()"></app-post> + <div class="many-buttons" *ngIf="editable"> + <button class="submit-btn" (click)="editPost()">Edit post</button> + <button class="submit-btn delete-btn" (click)="deletePost()">Delete post</button> + </div> + <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 ? file.name : 'Attachment' }} + <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" /> + </form> + <div> + <div class="comment" *ngFor="let comm of post?.comments"> + <app-comment [paramId]="comm.id.toString()"></app-comment> + </div> + </div> +<div> diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts new file mode 100644 index 0000000..413ff80 --- /dev/null +++ b/src/app/components/post-page/post-page.component.ts @@ -0,0 +1,162 @@ +import { HttpErrorResponse } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; +import { Title } from '@angular/platform-browser'; +import { Router } from '@angular/router'; +import { Guid } from 'guid-typescript'; +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', + templateUrl: './post-page.component.html', + styleUrls: ['./post-page.component.css'] +}) +export class PostPageComponent implements OnInit { + private _title = 'Post'; + public dataArrived = false; + public loggedIn = false; + public editable = false; + 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, 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(); + } + if (this.post.fileURLs.length > 0) { + this.loadFiles(); + } + else { + this.dataArrived = true; + } + }, + (err: HttpErrorResponse) => { + this._router.navigate(['/not-found']); + } + ); + + this.editPostFormGroup = this._fb.group({ + newPostMessage: new FormControl(''), + fileUpload: new FormControl('') + }); + + this.addCommentFormGroup = this._fb.group({ + newComment: new FormControl('') + }); + } + + private loadFiles(): void { + for (const fileURL of this.post.fileURLs) { + this._cloudinaryService.getFileRequest(fileURL).subscribe( + (result: object) => { + const file = result as File; + const tmp = { + name: fileURL.match('(?<=\/)(?:.(?!\/))+$')?.pop() ?? 'Attachment' + }; + + Object.assign(file, tmp); + this.files.push(file); + + if (this.files.length === this.post.fileURLs.length) { + this.dataArrived = true; + } + } + ); + } + } + + backToFeed(): void { + this._router.navigate(['/']); + } + + backToProfile(): void { + this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]); + } + + toLogin(): void { + 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(); + return; + } + + if (this.editingPost) { + let newMessage = this.editPostFormGroup.get('newPostMessage')?.value; + if (newMessage === '') { + newMessage = this.post.message; + } + this._postService.putPostWithSessionStorageRequest(this.postId, newMessage, this.files).subscribe( + (result: object) => { + this.reloadPage(); + } + ); + this.dataArrived = false; + } + this.editingPost = !this.editingPost; + } + + addComment(): void { + if (!this.loggedIn) { + this._router.navigate(['/login']); + return; + } + + const newComment = this.addCommentFormGroup.get('newComment')?.value; + if (newComment !== '' && newComment !== null) { + this._commentService.createCommentWithSessionStorageRequest(this.postId, newComment).subscribe( + (result: object) => { + this.editPostFormGroup.reset(); + this.reloadPage(); + } + ); + } + } + + deletePost(): void { + this._postService.deletePostWithSessionStorage(this.postId).subscribe( + (result: object) => { + this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]); + } + ); + } + + private reloadPage(): void { + this._router.routeReuseStrategy.shouldReuseRoute = () => false; + this._router.onSameUrlNavigation = 'reload'; + this._router.navigate([this._router.url]); + } +} |