Add abuse messages management in my account

8 files changed, 129 insertions, 247 deletions

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 @@
-<ng-template #modal>
-  <div class="modal-header">
-    <h4 i18n class="modal-title">Messages</h4>
-
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
-  </div>
-
-  <div class="modal-body">
-    <div class="messages" #messagesBlock>
-      <div
-        *ngFor="let message of abuseMessages"
-        class="message-block" [ngClass]="{ 'by-moderator': message.byModerator, 'by-me': isMessageByMe(message) }"
-      >
-
-        <div class="author">{{ message.account.name }}</div>
-
-        <div class="bubble">
-          <div class="content">{{ message.message }}</div>
-          <div class="date">{{ message.createdAt | date }}</div>
-        </div>
-      </div>
-    </div>
-
-    <form novalidate [formGroup]="form" (ngSubmit)="addMessage()">
-      <div class="form-group">
-        <textarea formControlName="message" ngbAutofocus [ngClass]="{ 'input-error': formErrors['message'] }" class="form-control"></textarea>
-
-        <div *ngIf="formErrors.message" class="form-error">
-          {{ formErrors.message }}
-        </div>
-      </div>
-
-      <div class="form-group inputs">
-        <input type="submit" i18n-value value="Add message" class="action-button-submit" [disabled]="!form.valid || sendingMessage">
-      </div>
-    </form>
-
-  </div>
-
-</ng-template>
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<ResultList<AdminAbuse>>(url, { params })
@@ -67,6 +52,27 @@ export class AbuseService {
       )
   }
 
+  getUserAbuses (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    search?: string
+  }): Observable<ResultList<UserAbuse>> {
+    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<ResultList<UserAbuse>>(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: [