diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-09-14 11:57:49 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-09-14 11:57:49 +0200 |
commit | d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb (patch) | |
tree | 549b14b842de296efed846a11b3681efe08cfa9e /client/src/app/+admin/video-abuses | |
parent | 91f6f169b1110eeae6ebf5c387f4204b0d07703c (diff) | |
download | PeerTube-d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb.tar.gz PeerTube-d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb.tar.zst PeerTube-d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb.zip |
Move to HttpClient and PrimeNG data table
Diffstat (limited to 'client/src/app/+admin/video-abuses')
-rw-r--r-- | client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html | 18 | ||||
-rw-r--r-- | client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts | 84 |
2 files changed, 44 insertions, 58 deletions
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 index c6723a734..e73f38112 100644 --- 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 | |||
@@ -3,9 +3,21 @@ | |||
3 | 3 | ||
4 | <h3>Video abuses list</h3> | 4 | <h3>Video abuses list</h3> |
5 | 5 | ||
6 | <ng2-smart-table | 6 | <p-dataTable |
7 | [settings]="tableSettings" [source]="videoAbusesSource" | 7 | [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" |
8 | ></ng2-smart-table> | 8 | sortField="id" (onLazyLoad)="loadLazy($event)" |
9 | > | ||
10 | <p-column field="id" header="ID" [sortable]="true"></p-column> | ||
11 | <p-column field="reason" header="Reason"></p-column> | ||
12 | <p-column field="reporterPodHost" header="Reporter pod host"></p-column> | ||
13 | <p-column field="reporterUsername" header="Reporter username"></p-column> | ||
14 | <p-column header="Video" styleClass="action-cell"> | ||
15 | <ng-template pTemplate="body" let-videoAbuse="rowData"> | ||
16 | <a [routerLink]="getRouterVideoLink(videoAbuse.videoId)" title="Go to the video">{{ videoAbuse.videoId }}</a> | ||
17 | </ng-template> | ||
18 | </p-column> | ||
19 | <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> | ||
20 | </p-dataTable> | ||
9 | 21 | ||
10 | </div> | 22 | </div> |
11 | </div> | 23 | </div> |
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 index 7c838fbf0..cc9c1bdf4 100644 --- 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 | |||
@@ -1,72 +1,46 @@ | |||
1 | import { Component } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | 2 | ||
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { SortMeta } from 'primeng/primeng' | ||
4 | 5 | ||
5 | import { Utils, VideoAbuseService } from '../../../shared' | 6 | import { RestTable, RestPagination, VideoAbuseService } from '../../../shared' |
6 | import { VideoAbuse } from '../../../../../shared' | 7 | import { VideoAbuse } from '../../../../../../shared' |
7 | 8 | ||
8 | @Component({ | 9 | @Component({ |
9 | selector: 'my-video-abuse-list', | 10 | selector: 'my-video-abuse-list', |
10 | templateUrl: './video-abuse-list.component.html' | 11 | templateUrl: './video-abuse-list.component.html' |
11 | }) | 12 | }) |
12 | export class VideoAbuseListComponent { | 13 | export class VideoAbuseListComponent extends RestTable implements OnInit { |
13 | videoAbusesSource = null | 14 | videoAbuses: VideoAbuse[] = [] |
14 | tableSettings = { | 15 | totalRecords = 0 |
15 | mode: 'external', | 16 | rowsPerPage = 1 |
16 | attr: { | 17 | sort: SortMeta = { field: 'id', order: 1 } |
17 | class: 'table-hover' | 18 | pagination: RestPagination = { count: this.rowsPerPage, start: 0 } |
18 | }, | ||
19 | hideSubHeader: true, | ||
20 | actions: { | ||
21 | position: 'right', | ||
22 | add: false, | ||
23 | edit: false, | ||
24 | delete: false | ||
25 | }, | ||
26 | pager: { | ||
27 | display: true, | ||
28 | perPage: 10 | ||
29 | }, | ||
30 | columns: { | ||
31 | id: { | ||
32 | title: 'ID', | ||
33 | sortDirection: 'asc' | ||
34 | }, | ||
35 | reason: { | ||
36 | title: 'Reason', | ||
37 | sort: false | ||
38 | }, | ||
39 | reporterPodHost: { | ||
40 | title: 'Reporter pod host', | ||
41 | sort: false | ||
42 | }, | ||
43 | reporterUsername: { | ||
44 | title: 'Reporter username', | ||
45 | sort: false | ||
46 | }, | ||
47 | videoId: { | ||
48 | title: 'Video', | ||
49 | type: 'html', | ||
50 | sort: false, | ||
51 | valuePrepareFunction: this.buildVideoLink | ||
52 | }, | ||
53 | createdAt: { | ||
54 | title: 'Created Date', | ||
55 | valuePrepareFunction: Utils.dateToHuman | ||
56 | } | ||
57 | } | ||
58 | } | ||
59 | 19 | ||
60 | constructor ( | 20 | constructor ( |
61 | private notificationsService: NotificationsService, | 21 | private notificationsService: NotificationsService, |
62 | private videoAbuseService: VideoAbuseService | 22 | private videoAbuseService: VideoAbuseService |
63 | ) { | 23 | ) { |
64 | this.videoAbusesSource = this.videoAbuseService.getDataSource() | 24 | super() |
25 | } | ||
26 | |||
27 | ngOnInit () { | ||
28 | this.loadData() | ||
65 | } | 29 | } |
66 | 30 | ||
67 | buildVideoLink (videoId: string) { | 31 | getRouterVideoLink (videoId: number) { |
68 | // TODO: transform to routerLink | 32 | return [ '/videos', videoId ] |
69 | // https://github.com/akveo/ng2-smart-table/issues/57 | 33 | } |
70 | return `<a href="/videos/${videoId}" title="Go to the video">${videoId}</a>` | 34 | |
35 | protected loadData () { | ||
36 | return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort) | ||
37 | .subscribe( | ||
38 | resultList => { | ||
39 | this.videoAbuses = resultList.data | ||
40 | this.totalRecords = resultList.total | ||
41 | }, | ||
42 | |||
43 | err => this.notificationsService.error('Error', err) | ||
44 | ) | ||
71 | } | 45 | } |
72 | } | 46 | } |