diff options
Diffstat (limited to 'client/src/app/+admin/plugins/plugin-list-installed')
3 files changed, 93 insertions, 0 deletions
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 new file mode 100644 index 000000000..6bb8bcd75 --- /dev/null +++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html | |||
@@ -0,0 +1,13 @@ | |||
1 | <div class="toggle-plugin-type"> | ||
2 | <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton> | ||
3 | </div> | ||
4 | |||
5 | <div class="no-results" i18n *ngIf="pagination.totalItems === 0"> | ||
6 | {{ getNoResultMessage() }} | ||
7 | </div> | ||
8 | |||
9 | <div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true"> | ||
10 | <div class="section plugin" *ngFor="let plugin of plugins"> | ||
11 | {{ plugin.name }} | ||
12 | </div> | ||
13 | </div> | ||
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss new file mode 100644 index 000000000..9e98fcd34 --- /dev/null +++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss | |||
@@ -0,0 +1,8 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .toggle-plugin-type { | ||
5 | display: flex; | ||
6 | justify-content: center; | ||
7 | margin-bottom: 30px; | ||
8 | } | ||
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 new file mode 100644 index 000000000..9745bc36b --- /dev/null +++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts | |||
@@ -0,0 +1,72 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { PluginType } from '@shared/models/plugins/plugin.type' | ||
3 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
4 | import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service' | ||
5 | import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model' | ||
6 | import { Notifier } from '@app/core' | ||
7 | import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model' | ||
8 | |||
9 | @Component({ | ||
10 | selector: 'my-plugin-list-installed', | ||
11 | templateUrl: './plugin-list-installed.component.html', | ||
12 | styleUrls: [ './plugin-list-installed.component.scss' ] | ||
13 | }) | ||
14 | export class PluginListInstalledComponent implements OnInit { | ||
15 | pluginTypeOptions: { label: string, value: PluginType }[] = [] | ||
16 | pluginType: PluginType = PluginType.PLUGIN | ||
17 | |||
18 | pagination: ComponentPagination = { | ||
19 | currentPage: 1, | ||
20 | itemsPerPage: 10 | ||
21 | } | ||
22 | sort = 'name' | ||
23 | |||
24 | plugins: PeerTubePlugin[] = [] | ||
25 | |||
26 | constructor ( | ||
27 | private i18n: I18n, | ||
28 | private pluginService: PluginApiService, | ||
29 | private notifier: Notifier | ||
30 | ) { | ||
31 | this.pluginTypeOptions = this.pluginService.getPluginTypeOptions() | ||
32 | } | ||
33 | |||
34 | ngOnInit () { | ||
35 | this.reloadPlugins() | ||
36 | } | ||
37 | |||
38 | reloadPlugins () { | ||
39 | this.pagination.currentPage = 1 | ||
40 | this.plugins = [] | ||
41 | |||
42 | this.loadMorePlugins() | ||
43 | } | ||
44 | |||
45 | loadMorePlugins () { | ||
46 | this.pluginService.getPlugins(this.pluginType, this.pagination, this.sort) | ||
47 | .subscribe( | ||
48 | res => { | ||
49 | this.plugins = this.plugins.concat(res.data) | ||
50 | this.pagination.totalItems = res.total | ||
51 | }, | ||
52 | |||
53 | err => this.notifier.error(err.message) | ||
54 | ) | ||
55 | } | ||
56 | |||
57 | onNearOfBottom () { | ||
58 | if (!hasMoreItems(this.pagination)) return | ||
59 | |||
60 | this.pagination.currentPage += 1 | ||
61 | |||
62 | this.loadMorePlugins() | ||
63 | } | ||
64 | |||
65 | getNoResultMessage () { | ||
66 | if (this.pluginType === PluginType.PLUGIN) { | ||
67 | return this.i18n('You don\'t have plugins installed yet.') | ||
68 | } | ||
69 | |||
70 | return this.i18n('You don\'t have themes installed yet.') | ||
71 | } | ||
72 | } | ||