From 0a16705c40735e81afa1f3d58c7cba224f46dbcd Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 16:32:44 +0200 Subject: Implemented (moved from post page) functionality for editing and deleting your posts into post component --- .vim/coc-settings.json | 3 + .../components/post-page/post-page.component.ts | 46 +---------- src/app/components/post/post.component.css | 21 +++++ src/app/components/post/post.component.html | 38 +++++++-- src/app/components/post/post.component.ts | 82 +++++++++++++++++++- src/assets/icons/tabler-icon-edit.svg | 76 ++++++++++++++++++ src/assets/icons/tabler-icon-trash.svg | 90 ++++++++++++++++++++++ 7 files changed, 307 insertions(+), 49 deletions(-) create mode 100644 .vim/coc-settings.json create mode 100644 src/assets/icons/tabler-icon-edit.svg create mode 100644 src/assets/icons/tabler-icon-trash.svg diff --git a/.vim/coc-settings.json b/.vim/coc-settings.json new file mode 100644 index 0000000..d69e97e --- /dev/null +++ b/.vim/coc-settings.json @@ -0,0 +1,3 @@ +{ + "angular.enable-experimental-ivy-prompt": false +} \ No newline at end of file diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts index e159c69..0babfdf 100644 --- a/src/app/components/post-page/post-page.component.ts +++ b/src/app/components/post-page/post-page.component.ts @@ -7,7 +7,6 @@ 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.model'; -import { CloudinaryService } from 'src/app/services/cloudinary.service'; @Component({ selector: 'app-post-page', @@ -18,22 +17,17 @@ 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){ + constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService, private _commentService: CommentService) { 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 @@ -41,52 +35,19 @@ export class PostPageComponent implements OnInit { next: (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.editPostFormGroup.get('newPostMessage')?.setValue(this.post.message); - } - if (this.post.fileURLs.length > 0) { - this.loadFiles(); - } - else { - this.dataArrived = true; - } + + this.dataArrived = true; }, error: () => { 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({ - next: (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; - } - } - }); - } - } - addComment(): void { if (!this.loggedIn) { this._router.navigate(['/login']); @@ -97,7 +58,6 @@ export class PostPageComponent implements OnInit { if (newComment !== '' && newComment !== null) { this._commentService.createCommentWithSessionStorageRequest(this.postId, newComment).subscribe({ next: () => { - this.editPostFormGroup.reset(); this.reloadPage(); } }); diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css index c5919fd..1015564 100644 --- a/src/app/components/post/post.component.css +++ b/src/app/components/post/post.component.css @@ -32,3 +32,24 @@ height: 1.2em; width: 1.2em; } + +/* Edit */ + +#attachments-btns img, .file-button > input { + height: 1.4em; + width: 1.4em; +} + +.file-button { + position: relative; +} + +.file-button > img { + position: absolute; + pointer-events: none; +} + +.file-button > input { + font-size: inherit; + color: transparent; +} diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index 133b747..1831c5e 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -13,14 +13,36 @@ @{{ user.userName }} -
+
{{ post.message }}
-
+
+
+ +
+
+ + +
+
+
+
+
+
+ {{ file.name ? file.name : 'Attachment' }} +
+
+ +
+
+
+
-
- + - +