Client: add basic support to report video abuses

7 files changed, 105 insertions, 0 deletions

diff --git a/client/src/app/admin/video-abuses/index.ts b/client/src/app/admin/video-abuses/index.ts
new file mode 100644
index 000000000..7f5e65f91
--- /dev/null
+++ b/client/src/app/admin/video-abuses/index.ts
@@ -0,0 +1,3 @@
+export * from './video-abuse-list';
+export * from './video-abuses.component';
+export * from './video-abuses.routes';
diff --git a/client/src/app/admin/video-abuses/video-abuse-list/index.ts b/client/src/app/admin/video-abuses/video-abuse-list/index.ts
new file mode 100644
index 000000000..3f2ed1714
--- /dev/null
+++ b/client/src/app/admin/video-abuses/video-abuse-list/index.ts
@@ -0,0 +1 @@
+export * from './video-abuse-list.component';
diff --git a/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.html
new file mode 100644
index 000000000..46043577c
--- /dev/null
+++ b/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.html
@@ -0,0 +1,27 @@
+<h3>Video abuses list</h3>
+
+<table class="table table-hover">
+  <thead>
+    <tr>
+      <th class="cell-id">ID</th>
+      <th class="cell-reason">Reason</th>
+      <th>Reporter pod host</th>
+      <th>Reporter username</th>
+      <th>Video</th>
+      <th>Created at</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr *ngFor="let videoAbuse of videoAbuses">
+      <td>{{ videoAbuse.id }}</td>
+      <td>{{ videoAbuse.reason }}</td>
+      <td>{{ videoAbuse.reporterPodHost }}</td>
+      <td>{{ videoAbuse.reporterUsername }}</td>
+      <td>
+        <a [routerLink]="buildVideoLink(videoAbuse)" title="Go to video">{{ videoAbuse.videoId }}</a>
+      </td>
+      <td>{{ videoAbuse.createdAt | date: 'medium' }}</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.scss b/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.scss
new file mode 100644
index 000000000..a094f74b8
--- /dev/null
+++ b/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.scss
@@ -0,0 +1,7 @@
+.cell-id {
+  width: 40px;
+}
+
+.cell-reason {
+  width: 200px;
+}
diff --git a/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.ts b/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
new file mode 100644
index 000000000..de58bba3d
--- /dev/null
+++ b/client/src/app/admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
@@ -0,0 +1,31 @@
+import { setInterval } from 'timers'
+import { Component, OnInit } from '@angular/core';
+
+import { VideoAbuseService, VideoAbuse} from '../../../shared';
+
+@Component({
+        selector: 'my-video-abuse-list',
+        templateUrl: './video-abuse-list.component.html',
+  styleUrls: [ './video-abuse-list.component.scss' ]
+})
+export class VideoAbuseListComponent implements OnInit {
+  videoAbuses: VideoAbuse[];
+
+  constructor(private videoAbuseService: VideoAbuseService) {  }
+
+  ngOnInit() {
+    this.getVideoAbuses();
+  }
+
+  buildVideoLink(videoAbuse: VideoAbuse) {
+    return `/videos/${videoAbuse.videoId}`;
+  }
+
+  private getVideoAbuses() {
+    this.videoAbuseService.getVideoAbuses().subscribe(
+      res => this.videoAbuses = res.videoAbuses,
+
+      err => alert(err.text)
+    );
+  }
+}
diff --git a/client/src/app/admin/video-abuses/video-abuses.component.ts b/client/src/app/admin/video-abuses/video-abuses.component.ts
new file mode 100644
index 000000000..001f27e87
--- /dev/null
+++ b/client/src/app/admin/video-abuses/video-abuses.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: '<router-outlet></router-outlet>'
+})
+
+export class VideoAbusesComponent {
+}
diff --git a/client/src/app/admin/video-abuses/video-abuses.routes.ts b/client/src/app/admin/video-abuses/video-abuses.routes.ts
new file mode 100644
index 000000000..26a761887
--- /dev/null
+++ b/client/src/app/admin/video-abuses/video-abuses.routes.ts
@@ -0,0 +1,28 @@
+import { Routes } from '@angular/router';
+
+import { VideoAbusesComponent } from './video-abuses.component';
+import { VideoAbuseListComponent } from './video-abuse-list';
+
+export const VideoAbusesRoutes: Routes = [
+  {
+      path: 'video-abuses',
+      component: VideoAbusesComponent
+      ,
+      children: [
+        {
+          path: '',
+          redirectTo: 'list',
+          pathMatch: 'full'
+        },
+        {
+          path: 'list',
+          component: VideoAbuseListComponent,
+          data: {
+            meta: {
+              titleSuffix: ' - Video abuses list'
+            }
+          }
+        }
+      ]
+    }
+];