WIP plugins: list installed plugins in client

15 files changed, 271 insertions, 0 deletions

diff --git a/client/src/app/+admin/plugins/index.ts b/client/src/app/+admin/plugins/index.ts
new file mode 100644
index 000000000..b75a94556
--- /dev/null
+++ b/client/src/app/+admin/plugins/index.ts
@@ -0,0 +1 @@
+export * from './plugins.component'
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 @@
+<div class="toggle-plugin-type">
+  <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton>
+</div>
+
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">
+  {{ getNoResultMessage() }}
+</div>
+
+<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
+  <div class="section plugin" *ngFor="let plugin of plugins">
+    {{ plugin.name }}
+  </div>
+</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 @@
+@import '_variables';
+@import '_mixins';
+
+.toggle-plugin-type {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+}
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 @@
+import { Component, OnInit } from '@angular/core'
+import { PluginType } from '@shared/models/plugins/plugin.type'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
+import { Notifier } from '@app/core'
+import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
+
+@Component({
+  selector: 'my-plugin-list-installed',
+  templateUrl: './plugin-list-installed.component.html',
+  styleUrls: [ './plugin-list-installed.component.scss' ]
+})
+export class PluginListInstalledComponent implements OnInit {
+  pluginTypeOptions: { label: string, value: PluginType }[] = []
+  pluginType: PluginType = PluginType.PLUGIN
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10
+  }
+  sort = 'name'
+
+  plugins: PeerTubePlugin[] = []
+
+  constructor (
+    private i18n: I18n,
+    private pluginService: PluginApiService,
+    private notifier: Notifier
+  ) {
+    this.pluginTypeOptions = this.pluginService.getPluginTypeOptions()
+  }
+
+  ngOnInit () {
+    this.reloadPlugins()
+  }
+
+  reloadPlugins () {
+    this.pagination.currentPage = 1
+    this.plugins = []
+
+    this.loadMorePlugins()
+  }
+
+  loadMorePlugins () {
+    this.pluginService.getPlugins(this.pluginType, this.pagination, this.sort)
+        .subscribe(
+          res => {
+            this.plugins = this.plugins.concat(res.data)
+            this.pagination.totalItems = res.total
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  onNearOfBottom () {
+    if (!hasMoreItems(this.pagination)) return
+
+    this.pagination.currentPage += 1
+
+    this.loadMorePlugins()
+  }
+
+  getNoResultMessage () {
+    if (this.pluginType === PluginType.PLUGIN) {
+      return this.i18n('You don\'t have plugins installed yet.')
+    }
+
+    return this.i18n('You don\'t have themes installed yet.')
+  }
+}
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
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
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
new file mode 100644
index 000000000..5e6774739
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -0,0 +1,2 @@
+@import '_variables';
+@import '_mixins';
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
new file mode 100644
index 000000000..db1f91f3d
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { SortMeta } from 'primeng/components/common/sortmeta'
+import { ConfirmService, ServerService } from '../../../core'
+import { RestPagination, RestTable, UserService } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { User } from '../../../../../../shared'
+import { UserBanModalComponent } from '@app/shared/moderation'
+import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
+import { PluginType } from '@shared/models/plugins/plugin.type'
+import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
+
+@Component({
+  selector: 'my-plugin-search',
+  templateUrl: './plugin-search.component.html',
+  styleUrls: [ './plugin-search.component.scss' ]
+})
+export class PluginSearchComponent implements OnInit {
+  pluginTypeOptions: { label: string, value: PluginType }[] = []
+
+  constructor (
+    private i18n: I18n,
+    private pluginService: PluginApiService
+  ) {
+    this.pluginTypeOptions = this.pluginService.getPluginTypeOptions()
+  }
+
+  ngOnInit () {
+  }
+}
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
new file mode 100644
index 000000000..5e6774739
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@@ -0,0 +1,2 @@
+@import '_variables';
+@import '_mixins';
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
new file mode 100644
index 000000000..f65599532
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core'
+
+@Component({
+  selector: 'my-plugin-show-installed',
+  templateUrl: './plugin-show-installed.component.html',
+  styleUrls: [ './plugin-show-installed.component.scss' ]
+})
+export class PluginShowInstalledComponent implements OnInit {
+
+  ngOnInit () {
+
+  }
+
+}
diff --git a/client/src/app/+admin/plugins/plugins.component.html b/client/src/app/+admin/plugins/plugins.component.html
new file mode 100644
index 000000000..3dc4939da
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugins.component.html
@@ -0,0 +1,11 @@
+<div class="admin-sub-header">
+  <div i18n class="form-sub-title">Plugins/Themes</div>
+
+  <div class="admin-sub-nav">
+    <a i18n routerLink="list-installed" routerLinkActive="active">Installed</a>
+
+    <a i18n routerLink="search" routerLinkActive="active">Search</a>
+  </div>
+</div>
+
+<router-outlet></router-outlet>
diff --git a/client/src/app/+admin/plugins/plugins.component.scss b/client/src/app/+admin/plugins/plugins.component.scss
new file mode 100644
index 000000000..9f61bcf7a
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugins.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+
+.form-sub-title {
+  flex-grow: 0;
+  margin-right: 30px;
+}
diff --git a/client/src/app/+admin/plugins/plugins.component.ts b/client/src/app/+admin/plugins/plugins.component.ts
new file mode 100644
index 000000000..6ec6fa4a1
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugins.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  templateUrl: './plugins.component.html',
+  styleUrls: [ './plugins.component.scss' ]
+})
+export class PluginsComponent {
+}
diff --git a/client/src/app/+admin/plugins/plugins.routes.ts b/client/src/app/+admin/plugins/plugins.routes.ts
new file mode 100644
index 000000000..58b5534fb
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugins.routes.ts
@@ -0,0 +1,53 @@
+import { Routes } from '@angular/router'
+
+import { UserRightGuard } from '../../core'
+import { UserRight } from '../../../../../shared'
+import { PluginListInstalledComponent } from '@app/+admin/plugins/plugin-list-installed/plugin-list-installed.component'
+import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-search.component'
+import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component'
+import { PluginsComponent } from '@app/+admin/plugins/plugins.component'
+
+export const PluginsRoutes: Routes = [
+  {
+    path: 'plugins',
+    component: PluginsComponent,
+    canActivate: [ UserRightGuard ],
+    data: {
+      userRight: UserRight.MANAGE_PLUGINS
+    },
+    children: [
+      {
+        path: '',
+        redirectTo: 'list-installed',
+        pathMatch: 'full'
+      },
+      {
+        path: 'list-installed',
+        component: PluginListInstalledComponent,
+        data: {
+          meta: {
+            title: 'List installed plugins'
+          }
+        }
+      },
+      {
+        path: 'search',
+        component: PluginSearchComponent,
+        data: {
+          meta: {
+            title: 'Search plugins'
+          }
+        }
+      },
+      {
+        path: 'show/:name',
+        component: PluginShowInstalledComponent,
+        data: {
+          meta: {
+            title: 'Show plugin'
+          }
+        }
+      }
+    ]
+  }
+]
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
new file mode 100644
index 000000000..bfc2b918f
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -0,0 +1,50 @@
+import { catchError } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { environment } from '../../../../environments/environment'
+import { RestExtractor, RestService } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { PluginType } from '@shared/models/plugins/plugin.type'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { ResultList } from '@shared/models'
+import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
+
+@Injectable()
+export class PluginApiService {
+  private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/plugins'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private i18n: I18n
+  ) { }
+
+  getPluginTypeOptions () {
+    return [
+      {
+        label: this.i18n('Plugin'),
+        value: PluginType.PLUGIN
+      },
+      {
+        label: this.i18n('Theme'),
+        value: PluginType.THEME
+      }
+    ]
+  }
+
+  getPlugins (
+    type: PluginType,
+    componentPagination: ComponentPagination,
+    sort: string
+  ) {
+    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+    params = params.append('type', type.toString())
+
+    return this.authHttp.get<ResultList<PeerTubePlugin>>(PluginApiService.BASE_APPLICATION_URL, { params })
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+}