WIP plugins: list installed plugins in client

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 @@
+<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.')
+  }
+}