From 801d957155d574bda984206021cdd1fe58ef56b9 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Sun, 3 May 2020 16:24:12 +0200
Subject: [PATCH] Move abuse-list details into its own component
---
client/src/app/+admin/admin.module.ts | 2 +
.../video-abuse-details.component.html | 77 +++++++++++++++++++
.../video-abuse-details.component.ts | 16 ++++
.../video-abuse-list.component.html | 75 +-----------------
4 files changed, 96 insertions(+), 74 deletions(-)
create mode 100644 client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
create mode 100644 client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 16273f6d8..d04313c0a 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -29,6 +29,7 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
import { VideoRedundancyInformationComponent } from '@app/+admin/follows/video-redundancies-list/video-redundancy-information.component'
import { ChartModule } from 'primeng/chart'
import { BatchDomainsModalComponent } from './config/shared/batch-domains-modal.component'
+import { VideoAbuseDetailsComponent } from './moderation/video-abuse-list/video-abuse-details.component'
@NgModule({
imports: [
@@ -60,6 +61,7 @@ import { BatchDomainsModalComponent } from './config/shared/batch-domains-modal.
ModerationComponent,
VideoBlacklistListComponent,
VideoAbuseListComponent,
+ VideoAbuseDetailsComponent,
VideoAutoBlacklistListComponent,
ModerationCommentModalComponent,
InstanceServerBlocklistComponent,
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
new file mode 100644
index 000000000..704d43ac4
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
@@ -0,0 +1,77 @@
+<div class="d-flex moderation-expanded">
+ <!-- report left part (report details) -->
+ <div class="col-8">
+
+ <!-- report metadata -->
+ <div class="d-flex">
+ <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
+ <span class="col-9 moderation-expanded-text">
+ <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:"' + videoAbuse.reporterAccount.displayName + '"' }" class="chip">
+ <img
+ class="avatar"
+ [src]="videoAbuse.reporterAccount.avatar.path"
+ (error)="switchToDefaultAvatar($event)"
+ alt="Avatar"
+ >
+ <div>
+ <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
+ </div>
+ </a>
+ <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' + videoAbuse.reporterAccount.displayName + '"' }" class="ml-auto text-muted video-details-links" i18n>
+ {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+ </a>
+ </span>
+ </div>
+
+ <div class="d-flex">
+ <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
+ <span class="col-9 moderation-expanded-text">
+ <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' +videoAbuse.video.channel.ownerAccount.displayName + '"' }" class="chip">
+ <img
+ class="avatar"
+ [src]="videoAbuse.video.channel.ownerAccount?.avatar.path"
+ (error)="switchToDefaultAvatar($event)"
+ alt="Avatar"
+ >
+ <div>
+ <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
+ </div>
+ </a>
+ <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' +videoAbuse.video.channel.ownerAccount.displayName + '"' }" class="ml-auto text-muted video-details-links" i18n>
+ {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+ </a>
+ </span>
+ </div>
+
+ <div class="d-flex" *ngIf="videoAbuse.updatedAt">
+ <span class="col-3 moderation-expanded-label" i18n>Updated</span>
+ <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
+ </div>
+
+ <!-- report text -->
+ <div class="mt-3 d-flex">
+ <span class="col-3 moderation-expanded-label">
+ <ng-container i18n>Report</ng-container>
+ <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': '#' + videoAbuse.id }" class="ml-1 text-muted">#{{ videoAbuse.id }}</a>
+ </span>
+ <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
+ </div>
+
+ <div class="mt-3 d-flex" *ngIf="videoAbuse.moderationComment">
+ <span class="col-3 moderation-expanded-label" i18n>Note</span>
+ <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
+ </div>
+
+ </div>
+
+ <!-- report right part (video details) -->
+ <div class="col-4">
+ <div class="screenratio">
+ <div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
+ <span i18n *ngIf="videoAbuse.video.deleted">The video was deleted</span>
+ <span i18n *ngIf="!videoAbuse.video.deleted">The video was blacklisted</span>
+ </div>
+ <div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
new file mode 100644
index 000000000..5481915b9
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation, Input } from '@angular/core'
+import { VideoAbuse } from '../../../../../../shared'
+import { Account } from '@app/shared/account/account.model'
+
+@Component({
+ selector: 'my-video-abuse-details',
+ templateUrl: './video-abuse-details.component.html',
+ styleUrls: [ '../moderation.component.scss' ]
+})
+export class VideoAbuseDetailsComponent {
+ @Input() videoAbuse: VideoAbuse
+
+ createByString (account: Account) {
+ return Account.CREATE_BY_STRING(account.name, account.host)
+ }
+}
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index bf73f9169..2e7b60e2f 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -133,80 +133,7 @@
<ng-template pTemplate="rowexpansion" let-videoAbuse>
<tr>
<td class="expand-cell" colspan="6">
- <div class="d-flex moderation-expanded">
- <!-- report left part (report details) -->
- <div class="col-8">
-
- <!-- report metadata -->
- <div class="d-flex">
- <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
- <span class="col-9 moderation-expanded-text">
- <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:"' + videoAbuse.reporterAccount.displayName + '"' }" class="chip">
- <img
- class="avatar"
- [src]="videoAbuse.reporterAccount.avatar.path"
- (error)="switchToDefaultAvatar($event)"
- alt="Avatar"
- >
- <div>
- <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
- </div>
- </a>
- <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' + videoAbuse.reporterAccount.displayName + '"' }" class="ml-auto text-muted video-details-links" i18n>
- {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
- </a>
- </span>
- </div>
-
- <div class="d-flex">
- <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
- <span class="col-9 moderation-expanded-text">
- <div class="chip">
- <img
- class="avatar"
- [src]="videoAbuse.video.channel.ownerAccount?.avatar.path"
- (error)="switchToDefaultAvatar($event)"
- alt="Avatar"
- >
- <div>
- <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
- </div>
- </div>
- <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' +videoAbuse.video.channel.ownerAccount.displayName + '"' }" class="ml-auto text-muted video-details-links" i18n>
- {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
- </a>
- </span>
- </div>
-
- <div class="d-flex">
- <span class="col-3 moderation-expanded-label" i18n>Updated</span>
- <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
- </div>
-
- <!-- report text -->
- <div class="mt-3 d-flex">
- <span class="col-3 moderation-expanded-label" i18n>Report #{{ videoAbuse.id }}</span>
- <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
- </div>
-
- <div class="mt-3 d-flex" *ngIf="videoAbuse.moderationComment">
- <span class="col-3 moderation-expanded-label" i18n>Note</span>
- <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
- </div>
-
- </div>
-
- <!-- report right part (video details) -->
- <div class="col-4">
- <div class="screenratio">
- <div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
- <span i18n *ngIf="videoAbuse.video.deleted">The video was deleted</span>
- <span i18n *ngIf="!videoAbuse.video.deleted">The video was blacklisted</span>
- </div>
- <div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
- </div>
- </div>
- </div>
+ <my-video-abuse-details [videoAbuse]="videoAbuse"></my-video-abuse-details>
</td>
</tr>
</ng-template>