From 4cb6d4578893db310297d7e118ce2fb7ecb952a3 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 4 Jan 2018 11:19:16 +0100 Subject: Add ability to delete comments --- client/src/app/app.component.ts | 6 +-- client/src/app/shared/account/account.model.ts | 2 +- .../+video-edit/shared/video-edit.component.scss | 2 - .../comment/video-comment.component.html | 6 ++- .../comment/video-comment.component.scss | 11 ++++- .../comment/video-comment.component.ts | 26 +++++++--- .../+video-watch/comment/video-comment.service.ts | 9 ++++ .../comment/video-comments.component.html | 2 + .../comment/video-comments.component.ts | 57 ++++++++++++++++++++-- .../videos/+video-watch/video-watch.component.ts | 2 +- client/tsconfig.json | 6 ++- 11 files changed, 106 insertions(+), 23 deletions(-) (limited to 'client') diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index b1818c298..ef8597203 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core' import { Router } from '@angular/router' -import { AuthService, ServerService } from './core' +import { AuthService, ServerService } from '@app/core' @Component({ selector: 'my-app', @@ -50,10 +50,6 @@ export class AppComponent implements OnInit { } } - isInAdmin () { - return this.router.url.indexOf('/admin/') !== -1 - } - toggleMenu () { window.scrollTo(0, 0) this.isMenuDisplayed = !this.isMenuDisplayed diff --git a/client/src/app/shared/account/account.model.ts b/client/src/app/shared/account/account.model.ts index cc46dad77..1dce0003c 100644 --- a/client/src/app/shared/account/account.model.ts +++ b/client/src/app/shared/account/account.model.ts @@ -1,11 +1,11 @@ import { Account as ServerAccount } from '../../../../../shared/models/actors/account.model' import { Avatar } from '../../../../../shared/models/avatars/avatar.model' -import { environment } from '../../../environments/environment' import { getAbsoluteAPIUrl } from '../misc/utils' export class Account implements ServerAccount { id: number uuid: string + url: string name: string displayName: string host: string diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index 0fefcee28..1df9d4006 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -51,8 +51,6 @@ .submit-container { text-align: right; - position: relative; - bottom: $button-height; .message-submit { display: inline-block; diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html index e9c23929c..4f9597607 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html @@ -3,13 +3,14 @@
{{ comment.text }}
Reply
+
Delete
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index aae03ab6d..a22c5a9fd 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -20,6 +20,9 @@ margin-bottom: 4px; .comment-account { + @include disable-default-a-behaviour; + + color: #000; font-weight: $font-bold; } @@ -31,10 +34,16 @@ .comment-actions { margin: 10px 0; + display: flex; - .comment-action-reply { + .comment-action-reply, .comment-action-delete { color: #585858; cursor: pointer; + margin-right: 10px; + + &:hover { + color: #000; + } } } } diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts index b305c639a..9bc9c8844 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts @@ -1,5 +1,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core' import { Account as AccountInterface } from '../../../../../../shared/models/actors' +import { UserRight } from '../../../../../../shared/models/users' import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' import { AuthService } from '../../../core/auth' import { Account } from '../../../shared/account/account.model' @@ -17,7 +18,9 @@ export class VideoCommentComponent { @Input() commentTree: VideoCommentThreadTree @Input() inReplyToCommentId: number + @Output() wantedToDelete = new EventEmitter() @Output() wantedToReply = new EventEmitter() + @Output() threadCreated = new EventEmitter() @Output() resetReply = new EventEmitter() constructor (private authService: AuthService) {} @@ -32,6 +35,8 @@ export class VideoCommentComponent { comment: this.comment, children: [] } + + this.threadCreated.emit(this.commentTree) } this.commentTree.children.push({ @@ -41,17 +46,16 @@ export class VideoCommentComponent { this.resetReply.emit() } - onWantToReply () { - this.wantedToReply.emit(this.comment) + onWantToReply (comment?: VideoComment) { + this.wantedToReply.emit(comment || this.comment) } - isUserLoggedIn () { - return this.authService.isLoggedIn() + onWantToDelete (comment?: VideoComment) { + this.wantedToDelete.emit(comment || this.comment) } - // Event from child comment - onWantedToReply (comment: VideoComment) { - this.wantedToReply.emit(comment) + isUserLoggedIn () { + return this.authService.isLoggedIn() } onResetReply () { @@ -61,4 +65,12 @@ export class VideoCommentComponent { getAvatarUrl (account: AccountInterface) { return Account.GET_ACCOUNT_AVATAR_URL(account) } + + isRemovableByUser () { + return this.isUserLoggedIn() && + ( + this.user.account.id === this.comment.account.id || + this.user.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT) + ) + } } diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts index 2fe6cc3e9..c42f55496 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts @@ -66,6 +66,15 @@ export class VideoCommentService { .catch((res) => this.restExtractor.handleError(res)) } + deleteVideoComment (videoId: number | string, commentId: number) { + const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comments/${commentId}` + + return this.authHttp + .delete(url) + .map(this.restExtractor.extractDataBool) + .catch((res) => this.restExtractor.handleError(res)) + } + private extractVideoComment (videoComment: VideoCommentServerModel) { return new VideoComment(videoComment) } diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html index 4a4248073..80b200931 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html @@ -27,6 +27,8 @@ [inReplyToCommentId]="inReplyToCommentId" [commentTree]="threadComments[comment.id]" (wantedToReply)="onWantedToReply($event)" + (wantedToDelete)="onWantedToDelete($event)" + (threadCreated)="onThreadCreated($event)" (resetReply)="onResetReply()" > diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts index 1230725c1..030dee9af 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts @@ -1,6 +1,7 @@ import { Component, Input, OnInit } from '@angular/core' +import { ConfirmService } from '@app/core' import { NotificationsService } from 'angular2-notifications' -import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' +import { VideoComment as VideoCommentInterface, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' import { AuthService } from '../../../core/auth' import { ComponentPagination } from '../../../shared/rest/component-pagination.model' import { User } from '../../../shared/users' @@ -32,6 +33,7 @@ export class VideoCommentsComponent implements OnInit { constructor ( private authService: AuthService, private notificationsService: NotificationsService, + private confirmService: ConfirmService, private videoCommentService: VideoCommentService ) {} @@ -41,7 +43,7 @@ export class VideoCommentsComponent implements OnInit { } } - viewReplies (comment: VideoComment) { + viewReplies (comment: VideoCommentInterface) { this.threadLoading[comment.id] = true this.videoCommentService.getVideoThreadComments(this.video.id, comment.id) @@ -79,6 +81,44 @@ export class VideoCommentsComponent implements OnInit { this.inReplyToCommentId = undefined } + onThreadCreated (commentTree: VideoCommentThreadTree) { + this.viewReplies(commentTree.comment) + } + + onWantedToDelete (commentToDelete: VideoComment) { + let message = 'Do you really want to delete this comment?' + if (commentToDelete.totalReplies !== 0) message += `${commentToDelete.totalReplies} would be deleted too.` + + this.confirmService.confirm(message, 'Delete').subscribe( + res => { + if (res === false) return + + this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id) + .subscribe( + () => { + // Delete the comment in the tree + if (commentToDelete.inReplyToCommentId) { + const thread = this.threadComments[commentToDelete.threadId] + if (!thread) { + console.error(`Cannot find thread ${commentToDelete.threadId} of the comment to delete ${commentToDelete.id}`) + return + } + + this.deleteLocalCommentThread(thread, commentToDelete) + return + } + + // Delete the thread + this.comments = this.comments.filter(c => c.id !== commentToDelete.id) + this.componentPagination.totalItems-- + }, + + err => this.notificationsService.error('Error', err.message) + ) + } + ) + } + isUserLoggedIn () { return this.authService.isLoggedIn() } @@ -91,7 +131,7 @@ export class VideoCommentsComponent implements OnInit { } } - protected hasMoreComments () { + private hasMoreComments () { // No results if (this.componentPagination.totalItems === 0) return false @@ -101,4 +141,15 @@ export class VideoCommentsComponent implements OnInit { const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage return maxPage > this.componentPagination.currentPage } + + private deleteLocalCommentThread (parentComment: VideoCommentThreadTree, commentToDelete: VideoComment) { + for (const commentChild of parentComment.children) { + if (commentChild.comment.id === commentToDelete.id) { + parentComment.children = parentComment.children.filter(c => c.comment.id !== commentToDelete.id) + return + } + + this.deleteLocalCommentThread(commentChild, commentToDelete) + } + } } diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 0f44d3dd7..f1f194764 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -137,7 +137,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { blacklistVideo (event: Event) { event.preventDefault() - this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').subscribe( + this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist').subscribe( res => { if (res === false) return diff --git a/client/tsconfig.json b/client/tsconfig.json index a6c016bf3..43b27ce8e 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -14,6 +14,10 @@ "lib": [ "es2017", "dom" - ] + ], + "baseUrl": "src", + "paths": { + "@app/*": [ "app/*" ] + } } } -- cgit v1.2.3