aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-08 14:34:17 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-08 14:34:17 +0100
commitcd83ea1b908efe594c1e03f886c0dc4742b91360 (patch)
tree7ce95792ede104e5a761830ecd7aaf3ee19fd8dc /client/src/app
parent04e0fc488826f505a8de3ce99113f3cb2fcec147 (diff)
downloadPeerTube-cd83ea1b908efe594c1e03f886c0dc4742b91360.tar.gz
PeerTube-cd83ea1b908efe594c1e03f886c0dc4742b91360.tar.zst
PeerTube-cd83ea1b908efe594c1e03f886c0dc4742b91360.zip
Design admin data tables
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+admin/jobs/jobs-list/jobs-list.component.html36
-rw-r--r--client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss3
-rw-r--r--client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts24
-rw-r--r--client/src/app/+admin/jobs/shared/job.service.ts7
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.html16
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.scss10
-rw-r--r--client/src/app/account/account-videos/account-videos.component.html12
-rw-r--r--client/src/app/account/account-videos/account-videos.component.scss27
-rw-r--r--client/src/app/shared/misc/button.component.scss27
-rw-r--r--client/src/app/shared/misc/delete-button.component.html4
-rw-r--r--client/src/app/shared/misc/delete-button.component.ts10
-rw-r--r--client/src/app/shared/misc/edit-button.component.html4
-rw-r--r--client/src/app/shared/misc/edit-button.component.ts11
-rw-r--r--client/src/app/shared/misc/utils.ts5
-rw-r--r--client/src/app/shared/shared.module.ts6
15 files changed, 117 insertions, 85 deletions
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
index a90267172..29103c06b 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
@@ -1,18 +1,20 @@
1<div class="row"> 1<div class="admin-sub-header">
2 <div class="content-padding"> 2 <div class="admin-sub-title">Jobs list</div>
3 <h3>Jobs list</h3>
4
5 <p-dataTable
6 [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
7 sortField="createdAt" (onLazyLoad)="loadLazy($event)"
8 >
9 <p-column field="id" header="ID"></p-column>
10 <p-column field="category" header="Category"></p-column>
11 <p-column field="handlerName" header="Handler name"></p-column>
12 <p-column field="handlerInputData" header="Input data"></p-column>
13 <p-column field="state" header="State"></p-column>
14 <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
15 <p-column field="updatedAt" header="Updated date"></p-column>
16 </p-dataTable>
17 </div>
18</div> 3</div>
4
5<p-dataTable
6 [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
7 sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight"
8>
9 <p-column field="id" header="ID" [style]="{ width: '40px' }"></p-column>
10 <p-column field="category" header="Category" [style]="{ width: '100px' }"></p-column>
11 <p-column field="handlerName" header="Handler name" [style]="{ width: '150px' }"></p-column>
12 <p-column header="Input data">
13 <ng-template pTemplate="body" let-job="rowData">
14 <pre>{{ job.handlerInputData }}</pre>
15 </ng-template>
16 </p-column>
17 <p-column field="state" header="State" [style]="{ width: '100px' }"></p-column>
18 <p-column field="createdAt" header="Created date" [sortable]="true" [style]="{ width: '250px' }"></p-column>
19 <p-column field="updatedAt" header="Updated date" [style]="{ width: '250px' }"></p-column>
20</p-dataTable>
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
new file mode 100644
index 000000000..9dde13216
--- /dev/null
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
@@ -0,0 +1,3 @@
1pre {
2 font-size: 13px;
3}
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
index 88fe259fb..f93847f29 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
@@ -1,22 +1,24 @@
1import { Component } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications' 2import { NotificationsService } from 'angular2-notifications'
3import { SortMeta } from 'primeng/primeng' 3import { SortMeta } from 'primeng/primeng'
4import { Job } from '../../../../../../shared/index' 4import { Job } from '../../../../../../shared/index'
5import { RestPagination, RestTable } from '../../../shared' 5import { RestPagination, RestTable } from '../../../shared'
6import { viewportHeight } from '../../../shared/misc/utils'
6import { JobService } from '../shared' 7import { JobService } from '../shared'
7import { RestExtractor } from '../../../shared/rest/rest-extractor.service' 8import { RestExtractor } from '../../../shared/rest/rest-extractor.service'
8 9
9@Component({ 10@Component({
10 selector: 'my-jobs-list', 11 selector: 'my-jobs-list',
11 templateUrl: './jobs-list.component.html', 12 templateUrl: './jobs-list.component.html',
12 styleUrls: [ ] 13 styleUrls: [ './jobs-list.component.scss' ]
13}) 14})
14export class JobsListComponent extends RestTable { 15export class JobsListComponent extends RestTable implements OnInit {
15 jobs: Job[] = [] 16 jobs: Job[] = []
16 totalRecords = 0 17 totalRecords = 0
17 rowsPerPage = 10 18 rowsPerPage = 20
18 sort: SortMeta = { field: 'createdAt', order: 1 } 19 sort: SortMeta = { field: 'createdAt', order: 1 }
19 pagination: RestPagination = { count: this.rowsPerPage, start: 0 } 20 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
21 scrollHeight = ''
20 22
21 constructor ( 23 constructor (
22 private notificationsService: NotificationsService, 24 private notificationsService: NotificationsService,
@@ -26,10 +28,14 @@ export class JobsListComponent extends RestTable {
26 super() 28 super()
27 } 29 }
28 30
31 ngOnInit () {
32 // 270 -> headers + footer...
33 this.scrollHeight = (viewportHeight() - 380) + 'px'
34 }
35
29 protected loadData () { 36 protected loadData () {
30 this.jobsService 37 this.jobsService
31 .getJobs(this.pagination, this.sort) 38 .getJobs(this.pagination, this.sort)
32 .map(res => this.restExtractor.applyToResultListData(res, this.formatJob.bind(this)))
33 .subscribe( 39 .subscribe(
34 resultList => { 40 resultList => {
35 this.jobs = resultList.data 41 this.jobs = resultList.data
@@ -39,12 +45,4 @@ export class JobsListComponent extends RestTable {
39 err => this.notificationsService.error('Error', err.message) 45 err => this.notificationsService.error('Error', err.message)
40 ) 46 )
41 } 47 }
42
43 private formatJob (job: Job) {
44 const handlerInputData = JSON.stringify(job.handlerInputData)
45
46 return Object.assign(job, {
47 handlerInputData
48 })
49 }
50} 48}
diff --git a/client/src/app/+admin/jobs/shared/job.service.ts b/client/src/app/+admin/jobs/shared/job.service.ts
index 49f1ab6f5..0cfbdbbea 100644
--- a/client/src/app/+admin/jobs/shared/job.service.ts
+++ b/client/src/app/+admin/jobs/shared/job.service.ts
@@ -25,6 +25,13 @@ export class JobService {
25 25
26 return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL, { params }) 26 return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL, { params })
27 .map(res => this.restExtractor.convertResultListDateToHuman(res)) 27 .map(res => this.restExtractor.convertResultListDateToHuman(res))
28 .map(res => this.restExtractor.applyToResultListData(res, this.prettyPrintData))
28 .catch(err => this.restExtractor.handleError(err)) 29 .catch(err => this.restExtractor.handleError(err))
29 } 30 }
31
32 private prettyPrintData (obj: Job) {
33 const handlerInputData = JSON.stringify(obj.handlerInputData, null, 2)
34
35 return Object.assign(obj, { handlerInputData })
36 }
30} 37}
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index a100ddfaa..5a19edfde 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -1,4 +1,4 @@
1<div class="sub-header"> 1<div class="admin-sub-header">
2 <div class="admin-sub-title">Users list</div> 2 <div class="admin-sub-title">Users list</div>
3 3
4 <a class="add-button" routerLink="/admin/users/add"> 4 <a class="add-button" routerLink="/admin/users/add">
@@ -17,16 +17,10 @@
17 <p-column field="videoQuota" header="Video quota"></p-column> 17 <p-column field="videoQuota" header="Video quota"></p-column>
18 <p-column field="roleLabel" header="Role"></p-column> 18 <p-column field="roleLabel" header="Role"></p-column>
19 <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> 19 <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
20 <p-column header="Edit" styleClass="action-cell"> 20 <p-column styleClass="action-cell">
21 <ng-template pTemplate="body" let-user="rowData"> 21 <ng-template pTemplate="body" let-user="rowData">
22 <a [routerLink]="getRouterUserEditLink(user)" title="Edit this user"> 22 <my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>
23 <span class="glyphicon glyphicon-pencil glyphicon-black"></span> 23 <my-delete-button (click)="removeUser(user)"></my-delete-button>
24 </a>
25 </ng-template>
26 </p-column>
27 <p-column header="Delete" styleClass="action-cell">
28 <ng-template pTemplate="body" let-user="rowData">
29 <span (click)="removeUser(user)" class="glyphicon glyphicon-remove glyphicon-black" title="Remove this user"></span>
30 </ng-template> 24 </ng-template>
31 </p-column> 25 </p-column>
32</p-dataTable> 26</p-dataTable>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 54ecb61b4..8b22f67ff 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -1,12 +1,3 @@
1.sub-header {
2 display: flex;
3 align-items: center;
4 margin-bottom: 30px;
5
6 .admin-sub-title {
7 flex-grow: 1;
8 }
9
10 .add-button { 1 .add-button {
11 @include peertube-button-link; 2 @include peertube-button-link;
12 @include orange-button; 3 @include orange-button;
@@ -18,4 +9,3 @@
18 background-image: url('../../../../assets/images/admin/add.svg'); 9 background-image: url('../../../../assets/images/admin/add.svg');
19 } 10 }
20 } 11 }
21}
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
index 030c2f19c..641fcb38a 100644
--- a/client/src/app/account/account-videos/account-videos.component.html
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -22,7 +22,7 @@
22 Cancel 22 Cancel
23 </span> 23 </span>
24 24
25 <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()"> 25 <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
26 <span class="icon icon-delete-white"></span> 26 <span class="icon icon-delete-white"></span>
27 Delete 27 Delete
28 </span> 28 </span>
@@ -30,15 +30,9 @@
30 </div> 30 </div>
31 31
32 <ng-template [ngIf]="isInSelectionMode() === false"> 32 <ng-template [ngIf]="isInSelectionMode() === false">
33 <span class="action-button action-button-delete" (click)="deleteVideo(video)"> 33 <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
34 <span class="icon icon-delete-grey"></span>
35 Delete
36 </span>
37 34
38 <a class="action-button" [routerLink]="[ '/videos', 'edit', video.uuid ]"> 35 <my-edit-button [routerLink]="[ '/videos', 'edit', video.uuid ]"></my-edit-button>
39 <span class="icon icon-edit"></span>
40 Edit
41 </a>
42 </ng-template> 36 </ng-template>
43 </div> 37 </div>
44</div> 38</div>
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index 083918e29..670fe992c 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -6,17 +6,7 @@
6 } 6 }
7} 7}
8 8
9.action-button { 9/deep/ .action-button {
10 @include peertube-button-link;
11
12 font-size: 15px;
13 font-weight: $font-semibold;
14 color: #585858;
15 background-color: #E5E5E5;
16
17 &:hover {
18 background-color: #EFEFEF;
19 }
20 10
21 &.action-button-delete { 11 &.action-button-delete {
22 margin-right: 10px; 12 margin-right: 10px;
@@ -32,21 +22,8 @@
32 } 22 }
33 23
34 .icon { 24 .icon {
35 @include icon(21px);
36
37 position: relative;
38 top: -2px;
39
40 &.icon-edit {
41 background-image: url('../../../assets/images/global/edit.svg');
42 }
43
44 &.icon-delete-grey {
45 background-image: url('../../../assets/images/account/delete-grey.svg');
46 }
47
48 &.icon-delete-white { 25 &.icon-delete-white {
49 background-image: url('../../../assets/images/account/delete-white.svg'); 26 background-image: url('../../../assets/images/global/delete-white.svg');
50 } 27 }
51 } 28 }
52} 29}
diff --git a/client/src/app/shared/misc/button.component.scss b/client/src/app/shared/misc/button.component.scss
new file mode 100644
index 000000000..5fcae4f10
--- /dev/null
+++ b/client/src/app/shared/misc/button.component.scss
@@ -0,0 +1,27 @@
1.action-button {
2 @include peertube-button-link;
3
4 font-size: 15px;
5 font-weight: $font-semibold;
6 color: #585858;
7 background-color: #E5E5E5;
8
9 &:hover {
10 background-color: #EFEFEF;
11 }
12
13 .icon {
14 @include icon(21px);
15
16 position: relative;
17 top: -2px;
18
19 &.icon-edit {
20 background-image: url('../../../assets/images/global/edit.svg');
21 }
22
23 &.icon-delete-grey {
24 background-image: url('../../../assets/images/global/delete-grey.svg');
25 }
26 }
27}
diff --git a/client/src/app/shared/misc/delete-button.component.html b/client/src/app/shared/misc/delete-button.component.html
new file mode 100644
index 000000000..3db483882
--- /dev/null
+++ b/client/src/app/shared/misc/delete-button.component.html
@@ -0,0 +1,4 @@
1<span class="action-button action-button-delete" >
2 <span class="icon icon-delete-grey"></span>
3 Delete
4</span>
diff --git a/client/src/app/shared/misc/delete-button.component.ts b/client/src/app/shared/misc/delete-button.component.ts
new file mode 100644
index 000000000..e04039f69
--- /dev/null
+++ b/client/src/app/shared/misc/delete-button.component.ts
@@ -0,0 +1,10 @@
1import { Component } from '@angular/core'
2
3@Component({
4 selector: 'my-delete-button',
5 styleUrls: [ './button.component.scss' ],
6 templateUrl: './delete-button.component.html'
7})
8
9export class DeleteButtonComponent {
10}
diff --git a/client/src/app/shared/misc/edit-button.component.html b/client/src/app/shared/misc/edit-button.component.html
new file mode 100644
index 000000000..6e9564bd7
--- /dev/null
+++ b/client/src/app/shared/misc/edit-button.component.html
@@ -0,0 +1,4 @@
1<a class="action-button" [routerLink]="routerLink">
2 <span class="icon icon-edit"></span>
3 Edit
4</a>
diff --git a/client/src/app/shared/misc/edit-button.component.ts b/client/src/app/shared/misc/edit-button.component.ts
new file mode 100644
index 000000000..201a618ec
--- /dev/null
+++ b/client/src/app/shared/misc/edit-button.component.ts
@@ -0,0 +1,11 @@
1import { Component, Input } from '@angular/core'
2
3@Component({
4 selector: 'my-edit-button',
5 styleUrls: [ './button.component.scss' ],
6 templateUrl: './edit-button.component.html'
7})
8
9export class EditButtonComponent {
10 @Input() routerLink = []
11}
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 2b5c3686e..df9e0381a 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -13,6 +13,11 @@ function getParameterByName (name: string, url: string) {
13 return decodeURIComponent(results[2].replace(/\+/g, ' ')) 13 return decodeURIComponent(results[2].replace(/\+/g, ' '))
14} 14}
15 15
16function viewportHeight () {
17 return Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
18}
19
16export { 20export {
21 viewportHeight,
17 getParameterByName 22 getParameterByName
18} 23}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 74f6f579d..d0e163f69 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -12,6 +12,8 @@ import { SharedModule as PrimeSharedModule } from 'primeng/components/common/sha
12import { DataTableModule } from 'primeng/components/datatable/datatable' 12import { DataTableModule } from 'primeng/components/datatable/datatable'
13 13
14import { AUTH_INTERCEPTOR_PROVIDER } from './auth' 14import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
15import { DeleteButtonComponent } from './misc/delete-button.component'
16import { EditButtonComponent } from './misc/edit-button.component'
15import { FromNowPipe } from './misc/from-now.pipe' 17import { FromNowPipe } from './misc/from-now.pipe'
16import { LoaderComponent } from './misc/loader.component' 18import { LoaderComponent } from './misc/loader.component'
17import { NumberFormatterPipe } from './misc/number-formatter.pipe' 19import { NumberFormatterPipe } from './misc/number-formatter.pipe'
@@ -44,6 +46,8 @@ import { VideoService } from './video/video.service'
44 LoaderComponent, 46 LoaderComponent,
45 VideoThumbnailComponent, 47 VideoThumbnailComponent,
46 VideoMiniatureComponent, 48 VideoMiniatureComponent,
49 DeleteButtonComponent,
50 EditButtonComponent,
47 NumberFormatterPipe, 51 NumberFormatterPipe,
48 FromNowPipe 52 FromNowPipe
49 ], 53 ],
@@ -66,6 +70,8 @@ import { VideoService } from './video/video.service'
66 LoaderComponent, 70 LoaderComponent,
67 VideoThumbnailComponent, 71 VideoThumbnailComponent,
68 VideoMiniatureComponent, 72 VideoMiniatureComponent,
73 DeleteButtonComponent,
74 EditButtonComponent,
69 75
70 NumberFormatterPipe, 76 NumberFormatterPipe,
71 FromNowPipe 77 FromNowPipe