aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-12-29 12:14:06 +0100
committerChocobozzz <me@florianbigard.com>2021-12-29 12:17:11 +0100
commit2accfdd8ecd092de7e8c71fbd1235e139ad29832 (patch)
tree24b5bb7da7192fa11054a48ac0e4384b8ec8fb72 /client/src/app/+admin
parent9744bb2ae8284c4589b66055c1d99997abf18748 (diff)
downloadPeerTube-2accfdd8ecd092de7e8c71fbd1235e139ad29832.tar.gz
PeerTube-2accfdd8ecd092de7e8c71fbd1235e139ad29832.tar.zst
PeerTube-2accfdd8ecd092de7e8c71fbd1235e139ad29832.zip
Refactor admin plugins
Diffstat (limited to 'client/src/app/+admin')
-rw-r--r--client/src/app/+admin/admin.module.ts6
-rw-r--r--client/src/app/+admin/plugins/index.ts2
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html4
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts26
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.html19
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss24
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts34
-rw-r--r--client/src/app/+admin/plugins/plugins.component.html9
-rw-r--r--client/src/app/+admin/plugins/plugins.component.ts7
-rw-r--r--client/src/app/+admin/plugins/plugins.routes.ts2
-rw-r--r--client/src/app/+admin/plugins/shared/index.ts1
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-api.service.ts13
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-navigation.component.html11
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-navigation.component.scss (renamed from client/src/app/+admin/plugins/shared/toggle-plugin-type.scss)7
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-navigation.component.ts11
15 files changed, 83 insertions, 93 deletions
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index dbced0e86..e0dea3ba5 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -1,5 +1,4 @@
1import { ChartModule } from 'primeng/chart' 1import { ChartModule } from 'primeng/chart'
2import { SelectButtonModule } from 'primeng/selectbutton'
3import { TableModule } from 'primeng/table' 2import { TableModule } from 'primeng/table'
4import { NgModule } from '@angular/core' 3import { NgModule } from '@angular/core'
5import { SharedAbuseListModule } from '@app/shared/shared-abuse-list' 4import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
@@ -45,7 +44,7 @@ import {
45 PluginApiService, 44 PluginApiService,
46 PluginCardComponent, 45 PluginCardComponent,
47 PluginListInstalledComponent, 46 PluginListInstalledComponent,
48 PluginsComponent, 47 PluginNavigationComponent,
49 PluginSearchComponent, 48 PluginSearchComponent,
50 PluginShowInstalledComponent 49 PluginShowInstalledComponent
51} from './plugins' 50} from './plugins'
@@ -70,7 +69,6 @@ import { JobsComponent } from './system/jobs/jobs.component'
70 SharedTablesModule, 69 SharedTablesModule,
71 70
72 TableModule, 71 TableModule,
73 SelectButtonModule,
74 ChartModule 72 ChartModule
75 ], 73 ],
76 74
@@ -98,11 +96,11 @@ import { JobsComponent } from './system/jobs/jobs.component'
98 InstanceServerBlocklistComponent, 96 InstanceServerBlocklistComponent,
99 InstanceAccountBlocklistComponent, 97 InstanceAccountBlocklistComponent,
100 98
101 PluginsComponent,
102 PluginListInstalledComponent, 99 PluginListInstalledComponent,
103 PluginSearchComponent, 100 PluginSearchComponent,
104 PluginShowInstalledComponent, 101 PluginShowInstalledComponent,
105 PluginCardComponent, 102 PluginCardComponent,
103 PluginNavigationComponent,
106 104
107 JobsComponent, 105 JobsComponent,
108 LogsComponent, 106 LogsComponent,
diff --git a/client/src/app/+admin/plugins/index.ts b/client/src/app/+admin/plugins/index.ts
index c70b6568e..30de8dc8f 100644
--- a/client/src/app/+admin/plugins/index.ts
+++ b/client/src/app/+admin/plugins/index.ts
@@ -1,6 +1,4 @@
1export * from './plugins.component'
2export * from './shared' 1export * from './shared'
3export * from './plugin-list-installed' 2export * from './plugin-list-installed'
4export * from './plugin-search' 3export * from './plugin-search'
5export * from './plugin-show-installed' 4export * from './plugin-show-installed'
6
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 2591c9a50..c5d440c8c 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -1,6 +1,4 @@
1<div class="toggle-plugin-type"> 1<my-plugin-navigation [pluginType]="pluginType"></my-plugin-navigation>
2 <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton>
3</div>
4 2
5<div class="no-results" *ngIf="pagination.totalItems === 0"> 3<div class="no-results" *ngIf="pagination.totalItems === 0">
6 {{ getNoResultMessage() }} 4 {{ getNoResultMessage() }}
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index 6fd238848..6d66869dd 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -10,14 +10,10 @@ import { PeerTubePlugin, PluginType } from '@shared/models'
10@Component({ 10@Component({
11 selector: 'my-plugin-list-installed', 11 selector: 'my-plugin-list-installed',
12 templateUrl: './plugin-list-installed.component.html', 12 templateUrl: './plugin-list-installed.component.html',
13 styleUrls: [ 13 styleUrls: [ './plugin-list-installed.component.scss' ]
14 '../shared/toggle-plugin-type.scss',
15 './plugin-list-installed.component.scss'
16 ]
17}) 14})
18export class PluginListInstalledComponent implements OnInit { 15export class PluginListInstalledComponent implements OnInit {
19 pluginTypeOptions: { label: string, value: PluginType }[] = [] 16 pluginType: PluginType
20 pluginType: PluginType = PluginType.PLUGIN
21 17
22 pagination: ComponentPagination = { 18 pagination: ComponentPagination = {
23 currentPage: 1, 19 currentPage: 1,
@@ -39,22 +35,28 @@ export class PluginListInstalledComponent implements OnInit {
39 private router: Router, 35 private router: Router,
40 private route: ActivatedRoute 36 private route: ActivatedRoute
41 ) { 37 ) {
42 this.pluginTypeOptions = this.pluginApiService.getPluginTypeOptions()
43 } 38 }
44 39
45 ngOnInit () { 40 ngOnInit () {
46 const query = this.route.snapshot.queryParams 41 if (!this.route.snapshot.queryParams['pluginType']) {
47 if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10) 42 const queryParams = { pluginType: PluginType.PLUGIN }
48 43
49 this.reloadPlugins() 44 this.router.navigate([], { queryParams })
45 }
46
47 this.route.queryParams.subscribe(query => {
48 if (!query['pluginType']) return
49
50 this.pluginType = parseInt(query['pluginType'], 10)
51
52 this.reloadPlugins()
53 })
50 } 54 }
51 55
52 reloadPlugins () { 56 reloadPlugins () {
53 this.pagination.currentPage = 1 57 this.pagination.currentPage = 1
54 this.plugins = [] 58 this.plugins = []
55 59
56 this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
57
58 this.loadMorePlugins() 60 this.loadMorePlugins()
59 } 61 }
60 62
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 14f28f7ef..33575ef52 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -1,28 +1,27 @@
1<div class="toggle-plugin-type"> 1<my-plugin-navigation [pluginType]="pluginType"></my-plugin-navigation>
2 <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton>
3</div>
4
5<div class="search-bar">
6 <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
7</div>
8 2
9<div class="alert alert-info" i18n *ngIf="pluginInstalled"> 3<div class="alert alert-info" i18n *ngIf="pluginInstalled">
10 To load your new installed plugins or themes, refresh the page. 4 To load your new installed plugins or themes, refresh the page.
11</div> 5</div>
12 6
13<div class="result-title" *ngIf="!isSearching"> 7<div class="result-and-search">
14 <ng-container *ngIf="!search"> 8 <ng-container *ngIf="!search">
15 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon> 9 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
16 <ng-container i18n>Popular</ng-container> 10 <ng-container *ngIf="!isThemeSearch()" i18n>Popular plugins</ng-container>
11 <ng-container *ngIf="isThemeSearch()" i18n>Popular themes</ng-container>
17 </ng-container> 12 </ng-container>
18 13
19 <ng-container *ngIf="!!search"> 14 <ng-container *ngIf="search && !isSearching">
20 <my-global-icon iconName="search"></my-global-icon> 15 <my-global-icon iconName="search"></my-global-icon>
21 16
22 <ng-container i18n> 17 <ng-container i18n>
23 {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}" 18 {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
24 </ng-container> 19 </ng-container>
25 </ng-container> 20 </ng-container>
21
22 <div class="search-bar">
23 <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
24 </div>
26</div> 25</div>
27 26
28<div class="no-results" i18n *ngIf="pagination.totalItems === 0"> 27<div class="no-results" i18n *ngIf="pagination.totalItems === 0">
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index 16b838682..8bb710fc2 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -1,24 +1,24 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.search-bar { 4.result-and-search {
5 font-size: 22px;
6 font-weight: 600;
7 margin: 30px 0 15px;
5 display: flex; 8 display: flex;
6 justify-content: center;
7 margin: 30px 0;
8 9
9 input { 10 my-global-icon {
10 @include peertube-input-text(60%); 11 @include margin-right(5px);
11 height: 35px;
12 } 12 }
13} 13}
14 14
15.result-title { 15.search-bar {
16 font-size: 22px; 16 margin-left: auto;
17 font-weight: 600;
18 margin-bottom: 15px;
19 17
20 my-global-icon { 18 input {
21 @include margin-right(5px); 19 @include peertube-input-text(500px);
20
21 height: 35px;
22 } 22 }
23} 23}
24 24
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index ef704c83b..d39c2ea1c 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -9,14 +9,10 @@ import { PeerTubePluginIndex, PluginType } from '@shared/models'
9@Component({ 9@Component({
10 selector: 'my-plugin-search', 10 selector: 'my-plugin-search',
11 templateUrl: './plugin-search.component.html', 11 templateUrl: './plugin-search.component.html',
12 styleUrls: [ 12 styleUrls: [ './plugin-search.component.scss' ]
13 '../shared/toggle-plugin-type.scss',
14 './plugin-search.component.scss'
15 ]
16}) 13})
17export class PluginSearchComponent implements OnInit { 14export class PluginSearchComponent implements OnInit {
18 pluginTypeOptions: { label: string, value: PluginType }[] = [] 15 pluginType: PluginType
19 pluginType: PluginType = PluginType.PLUGIN
20 16
21 pagination: ComponentPagination = { 17 pagination: ComponentPagination = {
22 currentPage: 1, 18 currentPage: 1,
@@ -44,24 +40,30 @@ export class PluginSearchComponent implements OnInit {
44 private router: Router, 40 private router: Router,
45 private route: ActivatedRoute 41 private route: ActivatedRoute
46 ) { 42 ) {
47 this.pluginTypeOptions = this.pluginApiService.getPluginTypeOptions()
48 } 43 }
49 44
50 ngOnInit () { 45 ngOnInit () {
51 const query = this.route.snapshot.queryParams 46 if (!this.route.snapshot.queryParams['pluginType']) {
52 if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10) 47 const queryParams = { pluginType: PluginType.PLUGIN }
48
49 this.router.navigate([], { queryParams })
50 }
51
52 this.route.queryParams.subscribe(query => {
53 if (!query['pluginType']) return
54
55 this.pluginType = parseInt(query['pluginType'], 10)
56 this.search = query['search'] || ''
57
58 this.reloadPlugins()
59 })
53 60
54 this.searchSubject.asObservable() 61 this.searchSubject.asObservable()
55 .pipe( 62 .pipe(
56 debounceTime(400), 63 debounceTime(400),
57 distinctUntilChanged() 64 distinctUntilChanged()
58 ) 65 )
59 .subscribe(search => { 66 .subscribe(search => this.router.navigate([], { queryParams: { search }, queryParamsHandling: 'merge' }))
60 this.search = search
61 this.reloadPlugins()
62 })
63
64 this.reloadPlugins()
65 } 67 }
66 68
67 onSearchChange (event: Event) { 69 onSearchChange (event: Event) {
@@ -74,8 +76,6 @@ export class PluginSearchComponent implements OnInit {
74 this.pagination.currentPage = 1 76 this.pagination.currentPage = 1
75 this.plugins = [] 77 this.plugins = []
76 78
77 this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
78
79 this.loadMorePlugins() 79 this.loadMorePlugins()
80 } 80 }
81 81
diff --git a/client/src/app/+admin/plugins/plugins.component.html b/client/src/app/+admin/plugins/plugins.component.html
deleted file mode 100644
index 199ae12cf..000000000
--- a/client/src/app/+admin/plugins/plugins.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
1<div class="admin-sub-header">
2 <div class="admin-sub-nav">
3 <a i18n routerLink="list-installed" routerLinkActive="active">Installed</a>
4
5 <a i18n routerLink="search" routerLinkActive="active">Search</a>
6 </div>
7</div>
8
9<router-outlet></router-outlet>
diff --git a/client/src/app/+admin/plugins/plugins.component.ts b/client/src/app/+admin/plugins/plugins.component.ts
deleted file mode 100644
index de06c0671..000000000
--- a/client/src/app/+admin/plugins/plugins.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
1import { Component } from '@angular/core'
2
3@Component({
4 templateUrl: './plugins.component.html'
5})
6export class PluginsComponent {
7}
diff --git a/client/src/app/+admin/plugins/plugins.routes.ts b/client/src/app/+admin/plugins/plugins.routes.ts
index 4cf55dda2..f735a490b 100644
--- a/client/src/app/+admin/plugins/plugins.routes.ts
+++ b/client/src/app/+admin/plugins/plugins.routes.ts
@@ -2,14 +2,12 @@ import { Routes } from '@angular/router'
2import { PluginListInstalledComponent } from '@app/+admin/plugins/plugin-list-installed/plugin-list-installed.component' 2import { PluginListInstalledComponent } from '@app/+admin/plugins/plugin-list-installed/plugin-list-installed.component'
3import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-search.component' 3import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-search.component'
4import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component' 4import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component'
5import { PluginsComponent } from '@app/+admin/plugins/plugins.component'
6import { UserRightGuard } from '@app/core' 5import { UserRightGuard } from '@app/core'
7import { UserRight } from '@shared/models' 6import { UserRight } from '@shared/models'
8 7
9export const PluginsRoutes: Routes = [ 8export const PluginsRoutes: Routes = [
10 { 9 {
11 path: 'plugins', 10 path: 'plugins',
12 component: PluginsComponent,
13 canActivate: [ UserRightGuard ], 11 canActivate: [ UserRightGuard ],
14 data: { 12 data: {
15 userRight: UserRight.MANAGE_PLUGINS 13 userRight: UserRight.MANAGE_PLUGINS
diff --git a/client/src/app/+admin/plugins/shared/index.ts b/client/src/app/+admin/plugins/shared/index.ts
index de037c437..6d616b372 100644
--- a/client/src/app/+admin/plugins/shared/index.ts
+++ b/client/src/app/+admin/plugins/shared/index.ts
@@ -1,2 +1,3 @@
1export * from './plugin-api.service' 1export * from './plugin-api.service'
2export * from './plugin-card.component' 2export * from './plugin-card.component'
3export * from './plugin-navigation.component'
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index b95ee0c9d..fbfdaea18 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -25,19 +25,6 @@ export class PluginApiService {
25 private pluginService: PluginService 25 private pluginService: PluginService
26 ) { } 26 ) { }
27 27
28 getPluginTypeOptions () {
29 return [
30 {
31 label: $localize`Plugins`,
32 value: PluginType.PLUGIN
33 },
34 {
35 label: $localize`Themes`,
36 value: PluginType.THEME
37 }
38 ]
39 }
40
41 getPluginTypeLabel (type: PluginType) { 28 getPluginTypeLabel (type: PluginType) {
42 if (type === PluginType.PLUGIN) { 29 if (type === PluginType.PLUGIN) {
43 return $localize`plugin` 30 return $localize`plugin`
diff --git a/client/src/app/+admin/plugins/shared/plugin-navigation.component.html b/client/src/app/+admin/plugins/shared/plugin-navigation.component.html
new file mode 100644
index 000000000..fd298d145
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.html
@@ -0,0 +1,11 @@
1<div class="root">
2 <div class="btn-group" role="group" i18n-aria-label aria-label="Navigate between installed plugins and themes or find new ones">
3 <a i18n routerLink="/admin/plugins/list-installed" [queryParams]="{ pluginType: pluginType }" routerLinkActive="active">Installed</a>
4 <a i18n routerLink="/admin/plugins/search" [queryParams]="{ pluginType: pluginType }" routerLinkActive="active">Search</a>
5 </div>
6
7 <div class="btn-group" role="group" i18n-aria-label aria-label="Navigate between plugins and themes">
8 <a [ngClass]="{ active: pluginType === 1 }" routerLink="." [queryParams]="{ pluginType: 1 }" queryParamsHandling="merge" class="">Plugins</a>
9 <a [ngClass]="{ active: pluginType === 2 }" routerLink="." [queryParams]="{ pluginType: 2 }" queryParamsHandling="merge" class="">Themes</a>
10 </div>
11</div>
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/plugin-navigation.component.scss
index 67213ea72..5802acd56 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.scss
@@ -1,8 +1,11 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.toggle-plugin-type { 4.root {
5 display: flex; 5 display: flex;
6 justify-content: center; 6 justify-content: center;
7 margin-bottom: 30px; 7}
8
9.btn-group:not(:last-child) {
10 @include margin-right(15px);
8} 11}
diff --git a/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts b/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts
new file mode 100644
index 000000000..1c963f521
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts
@@ -0,0 +1,11 @@
1import { Component, Input } from '@angular/core'
2import { PluginType } from '@shared/models/plugins'
3
4@Component({
5 selector: 'my-plugin-navigation',
6 templateUrl: './plugin-navigation.component.html',
7 styleUrls: [ './plugin-navigation.component.scss' ]
8})
9export class PluginNavigationComponent {
10 @Input() pluginType: PluginType
11}