From 94148c9028829b5576a5dcbfba2c7fb9cf6443d3 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 27 Jul 2020 11:40:30 +0200 Subject: Add abuse messages management in my account --- .../abuse-message-modal.component.html | 40 ------- .../abuse-message-modal.component.scss | 57 ---------- .../abuse-message-modal.component.ts | 115 --------------------- .../app/shared/shared-moderation/abuse.service.ts | 93 +++++++++++------ client/src/app/shared/shared-moderation/index.ts | 1 - .../app/shared/shared-moderation/moderation.scss | 50 +++++++++ .../server-blocklist.component.scss | 13 +++ .../shared-moderation/shared-moderation.module.ts | 7 +- 8 files changed, 129 insertions(+), 247 deletions(-) delete mode 100644 client/src/app/shared/shared-moderation/abuse-message-modal.component.html delete mode 100644 client/src/app/shared/shared-moderation/abuse-message-modal.component.scss delete mode 100644 client/src/app/shared/shared-moderation/abuse-message-modal.component.ts create mode 100644 client/src/app/shared/shared-moderation/moderation.scss (limited to 'client/src/app/shared/shared-moderation') diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.html b/client/src/app/shared/shared-moderation/abuse-message-modal.component.html deleted file mode 100644 index 67c6a3081..000000000 --- a/client/src/app/shared/shared-moderation/abuse-message-modal.component.html +++ /dev/null @@ -1,40 +0,0 @@ - -
-

Messages

- - -
- -
-
-
- -
{{ message.account.name }}
- -
-
{{ message.message }}
-
{{ message.createdAt | date }}
-
-
-
- -
-
- - -
- {{ formErrors.message }} -
-
- -
- -
-
- -
- - diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss b/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss deleted file mode 100644 index 89d6b88c1..000000000 --- a/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -form { - margin: 20px 20px 0 0; -} - -textarea { - @include peertube-textarea(100%, 70px); - - margin-top: 20px; -} - -.messages { - display: flex; - flex-direction: column; - overflow-y: scroll; - margin-right: 5px; -} - -.message-block { - margin-bottom: 10px; - max-width: 60%; - - .author { - color: var(--greyForegroundColor); - font-size: 14px; - } - - .bubble { - color: var(--mainForegroundColor); - background-color: var(--greyBackgroundColor); - border-radius: 10px; - padding: 5px 10px; - - &.by-me { - color: var(--mainForegroundColor); - background-color: var(--secondaryColor); - } - - &.by-moderator { - color: #fff; - background-color: var(--mainColor); - - align-self: flex-end; - } - - .content { - font-size: 15px; - } - - .date { - font-size: 13px; - color: var(--greyForegroundColor); - } - } -} diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts b/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts deleted file mode 100644 index 5822dfe1d..000000000 --- a/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { Component, ElementRef, EventEmitter, Output, ViewChild, OnInit } from '@angular/core' -import { Notifier, AuthService } from '@app/core' -import { FormReactive, FormValidatorService, AbuseValidatorsService } from '@app/shared/shared-forms' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { AbuseMessage, UserAbuse } from '@shared/models' -import { AbuseService } from './abuse.service' - -@Component({ - selector: 'my-abuse-message-modal', - templateUrl: './abuse-message-modal.component.html', - styleUrls: [ './abuse-message-modal.component.scss' ] -}) -export class AbuseMessageModalComponent extends FormReactive implements OnInit { - @ViewChild('modal', { static: true }) modal: NgbModal - @ViewChild('messagesBlock', { static: false }) messagesBlock: ElementRef - - @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>() - - abuseMessages: AbuseMessage[] = [] - textareaMessage: string - sendingMessage = false - - private openedModal: NgbModalRef - private abuse: UserAbuse - - constructor ( - protected formValidatorService: FormValidatorService, - private abuseValidatorsService: AbuseValidatorsService, - private modalService: NgbModal, - private auth: AuthService, - private notifier: Notifier, - private i18n: I18n, - private abuseService: AbuseService - ) { - super() - } - - ngOnInit () { - this.buildForm({ - message: this.abuseValidatorsService.ABUSE_MESSAGE - }) - } - - openModal (abuse: UserAbuse) { - this.abuse = abuse - - this.openedModal = this.modalService.open(this.modal, { centered: true }) - - this.loadMessages() - } - - hide () { - this.abuseMessages = [] - this.openedModal.close() - } - - addMessage () { - this.sendingMessage = true - - this.abuseService.addAbuseMessage(this.abuse, this.form.value['message']) - .subscribe( - () => { - this.form.reset() - this.sendingMessage = false - this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length + 1 }) - - this.loadMessages() - }, - - err => { - this.sendingMessage = false - console.error(err) - this.notifier.error('Sorry but you cannot send this message. Please retry later') - } - ) - } - - deleteMessage (abuseMessage: AbuseMessage) { - this.abuseService.deleteAbuseMessage(this.abuse, abuseMessage) - .subscribe( - () => { - this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length - 1 }) - - this.abuseMessages = this.abuseMessages.filter(m => m.id !== abuseMessage.id) - }, - - err => this.notifier.error(err.message) - ) - } - - isMessageByMe (abuseMessage: AbuseMessage) { - return this.auth.getUser().account.id === abuseMessage.account.id - } - - private loadMessages () { - this.abuseService.listAbuseMessages(this.abuse) - .subscribe( - res => { - this.abuseMessages = res.data - - setTimeout(() => { - if (!this.messagesBlock) return - - const element = this.messagesBlock.nativeElement as HTMLElement - element.scrollIntoView({ block: 'end', inline: 'nearest' }) - }) - }, - - err => this.notifier.error(err.message) - ) - } - -} diff --git a/client/src/app/shared/shared-moderation/abuse.service.ts b/client/src/app/shared/shared-moderation/abuse.service.ts index 652d8370f..c1aa62023 100644 --- a/client/src/app/shared/shared-moderation/abuse.service.ts +++ b/client/src/app/shared/shared-moderation/abuse.service.ts @@ -5,13 +5,24 @@ import { catchError, map } from 'rxjs/operators' import { HttpClient, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' import { RestExtractor, RestPagination, RestService } from '@app/core' -import { AdminAbuse, AbuseCreate, AbuseFilter, AbusePredefinedReasonsString, AbuseState, AbuseUpdate, ResultList, UserAbuse, AbuseMessage } from '@shared/models' -import { environment } from '../../../environments/environment' import { I18n } from '@ngx-translate/i18n-polyfill' +import { + AbuseCreate, + AbuseFilter, + AbuseMessage, + AbusePredefinedReasonsString, + AbuseState, + AbuseUpdate, + AdminAbuse, + ResultList, + UserAbuse +} from '@shared/models' +import { environment } from '../../../environments/environment' @Injectable() export class AbuseService { private static BASE_ABUSE_URL = environment.apiUrl + '/api/v1/abuses' + private static BASE_MY_ABUSE_URL = environment.apiUrl + '/api/v1/users/me/abuses' constructor ( private i18n: I18n, @@ -32,33 +43,7 @@ export class AbuseService { params = this.restService.addRestGetParams(params, pagination, sort) if (search) { - const filters = this.restService.parseQueryStringFilter(search, { - id: { prefix: '#' }, - state: { - prefix: 'state:', - handler: v => { - if (v === 'accepted') return AbuseState.ACCEPTED - if (v === 'pending') return AbuseState.PENDING - if (v === 'rejected') return AbuseState.REJECTED - - return undefined - } - }, - videoIs: { - prefix: 'videoIs:', - handler: v => { - if (v === 'deleted') return v - if (v === 'blacklisted') return v - - return undefined - } - }, - searchReporter: { prefix: 'reporter:' }, - searchReportee: { prefix: 'reportee:' }, - predefinedReason: { prefix: 'tag:' } - }) - - params = this.restService.addObjectParams(params, filters) + params = this.buildParamsFromSearch(search, params) } return this.authHttp.get>(url, { params }) @@ -67,6 +52,27 @@ export class AbuseService { ) } + getUserAbuses (options: { + pagination: RestPagination, + sort: SortMeta, + search?: string + }): Observable> { + const { pagination, sort, search } = options + const url = AbuseService.BASE_MY_ABUSE_URL + + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination, sort) + + if (search) { + params = this.buildParamsFromSearch(search, params) + } + + return this.authHttp.get>(url, { params }) + .pipe( + catchError(res => this.restExtractor.handleError(res)) + ) + } + reportVideo (parameters: AbuseCreate) { const url = AbuseService.BASE_ABUSE_URL @@ -180,4 +186,33 @@ export class AbuseService { return reasons } + private buildParamsFromSearch (search: string, params: HttpParams) { + const filters = this.restService.parseQueryStringFilter(search, { + id: { prefix: '#' }, + state: { + prefix: 'state:', + handler: v => { + if (v === 'accepted') return AbuseState.ACCEPTED + if (v === 'pending') return AbuseState.PENDING + if (v === 'rejected') return AbuseState.REJECTED + + return undefined + } + }, + videoIs: { + prefix: 'videoIs:', + handler: v => { + if (v === 'deleted') return v + if (v === 'blacklisted') return v + + return undefined + } + }, + searchReporter: { prefix: 'reporter:' }, + searchReportee: { prefix: 'reportee:' }, + predefinedReason: { prefix: 'tag:' } + }) + + return this.restService.addObjectParams(params, filters) + } } diff --git a/client/src/app/shared/shared-moderation/index.ts b/client/src/app/shared/shared-moderation/index.ts index c8082d4b3..41c910ffe 100644 --- a/client/src/app/shared/shared-moderation/index.ts +++ b/client/src/app/shared/shared-moderation/index.ts @@ -1,6 +1,5 @@ export * from './report-modals' -export * from './abuse-message-modal.component' export * from './abuse.service' export * from './account-block.model' export * from './account-blocklist.component' diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss new file mode 100644 index 000000000..260346dc5 --- /dev/null +++ b/client/src/app/shared/shared-moderation/moderation.scss @@ -0,0 +1,50 @@ +@import 'variables'; +@import 'mixins'; +@import 'miniature'; + +.moderation-expanded { + font-size: 90%; + + .moderation-expanded-label { + font-weight: $font-semibold; + display: inline-block; + vertical-align: top; + text-align: right; + } + + .moderation-expanded-text { + display: inline-flex; + word-wrap: break-word; + + ::ng-deep p:last-child { + margin-bottom: 0px !important; + } + } +} + +.input-group { + @include peertube-input-group(300px); + + .dropdown-toggle::after { + margin-left: 0; + } +} + +.chip { + @include chip; +} + +.caption { + justify-content: flex-end; + + input { + @include peertube-input-text(250px); + flex-grow: 1; + } +} + +my-action-dropdown.show { + ::ng-deep .dropdown-root { + display: block !important; + } +} diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss index 9ddb76850..31db4d92b 100644 --- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss +++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss @@ -32,3 +32,16 @@ a { .block-button { @include create-button; } + +.caption { + justify-content: flex-end; + + input { + @include peertube-input-text(250px); + flex-grow: 1; + } +} + +.chip { + @include chip; +} diff --git a/client/src/app/shared/shared-moderation/shared-moderation.module.ts b/client/src/app/shared/shared-moderation/shared-moderation.module.ts index b5b6daf27..b1b98f8d0 100644 --- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts +++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts @@ -4,7 +4,6 @@ import { SharedFormModule } from '../shared-forms/shared-form.module' import { SharedGlobalIconModule } from '../shared-icons' import { SharedMainModule } from '../shared-main/shared-main.module' import { SharedVideoCommentModule } from '../shared-video-comment' -import { AbuseMessageModalComponent } from './abuse-message-modal.component' import { AbuseService } from './abuse.service' import { BatchDomainsModalComponent } from './batch-domains-modal.component' import { BlocklistService } from './blocklist.service' @@ -30,8 +29,7 @@ import { VideoBlockService } from './video-block.service' VideoReportComponent, BatchDomainsModalComponent, CommentReportComponent, - AccountReportComponent, - AbuseMessageModalComponent + AccountReportComponent ], exports: [ @@ -41,8 +39,7 @@ import { VideoBlockService } from './video-block.service' VideoReportComponent, BatchDomainsModalComponent, CommentReportComponent, - AccountReportComponent, - AbuseMessageModalComponent + AccountReportComponent ], providers: [ -- cgit v1.2.3