From dba85a1e9e9f603ba52e1ea42deaf3fdd799b1d8 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 11 Jul 2019 14:40:19 +0200 Subject: WIP plugins: add plugin settings/uninstall in client --- .../plugin-list-installed.component.html | 28 +++++- .../plugin-list-installed.component.scss | 35 +++++++- .../plugin-list-installed.component.ts | 42 ++++++++- .../plugin-search/plugin-search.component.ts | 5 +- .../plugin-show-installed.component.html | 26 ++++++ .../plugin-show-installed.component.scss | 20 +++++ .../plugin-show-installed.component.ts | 100 ++++++++++++++++++++- client/src/app/+admin/plugins/plugins.routes.ts | 2 +- .../+admin/plugins/shared/plugin-api.service.ts | 68 +++++++++++++- .../+admin/plugins/shared/toggle-plugin-type.scss | 21 +++++ 10 files changed, 333 insertions(+), 14 deletions(-) create mode 100644 client/src/app/+admin/plugins/shared/toggle-plugin-type.scss (limited to 'client/src/app') 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 6bb8bcd75..d4501490f 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 @@ -7,7 +7,31 @@
-
- {{ plugin.name }} +
+
+
+ {{ plugin.name }} + + {{ plugin.version }} +
+ +
+
{{ plugin.description }}
+ +
+ + + Homepage + + + + + + +
+
+
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 index 9e98fcd34..f250404ed 100644 --- 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 @@ -1,8 +1,37 @@ @import '_variables'; @import '_mixins'; -.toggle-plugin-type { +.first-row { + margin-bottom: 10px; + + .plugin-name { + font-size: 16px; + margin-right: 10px; + font-weight: $font-semibold; + } + + .plugin-version { + opacity: 0.6; + } +} + +.second-row { display: flex; - justify-content: center; - margin-bottom: 30px; + align-items: center; + justify-content: space-between; + + .description { + opacity: 0.8 + } + + .buttons { + > *:not(:last-child) { + margin-right: 10px; + } + } +} + +.action-button { + @include peertube-button-link; + @include button-with-icon(21px, 0, -2px); } 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 9745bc36b..26a9a616e 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 @@ -3,13 +3,17 @@ 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 { ConfirmService, Notifier } from '@app/core' import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model' +import { ActivatedRoute, Router } from '@angular/router' @Component({ selector: 'my-plugin-list-installed', templateUrl: './plugin-list-installed.component.html', - styleUrls: [ './plugin-list-installed.component.scss' ] + styleUrls: [ + '../shared/toggle-plugin-type.scss', + './plugin-list-installed.component.scss' + ] }) export class PluginListInstalledComponent implements OnInit { pluginTypeOptions: { label: string, value: PluginType }[] = [] @@ -26,12 +30,18 @@ export class PluginListInstalledComponent implements OnInit { constructor ( private i18n: I18n, private pluginService: PluginApiService, - private notifier: Notifier + private notifier: Notifier, + private confirmService: ConfirmService, + private router: Router, + private route: ActivatedRoute ) { this.pluginTypeOptions = this.pluginService.getPluginTypeOptions() } ngOnInit () { + const query = this.route.snapshot.queryParams + if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10) + this.reloadPlugins() } @@ -39,6 +49,8 @@ export class PluginListInstalledComponent implements OnInit { this.pagination.currentPage = 1 this.plugins = [] + this.router.navigate([], { queryParams: { pluginType: this.pluginType }}) + this.loadMorePlugins() } @@ -69,4 +81,28 @@ export class PluginListInstalledComponent implements OnInit { return this.i18n('You don\'t have themes installed yet.') } + + async uninstall (plugin: PeerTubePlugin) { + const res = await this.confirmService.confirm( + this.i18n('Do you really want to uninstall {{pluginName}}?', { pluginName: plugin.name }), + this.i18n('Uninstall') + ) + if (res === false) return + + this.pluginService.uninstall(plugin.name, plugin.type) + .subscribe( + () => { + this.notifier.success(this.i18n('{{pluginName}} uninstalled.', { pluginName: plugin.name })) + + this.plugins = this.plugins.filter(p => p.name !== plugin.name) + this.pagination.totalItems-- + }, + + err => this.notifier.error(err.message) + ) + } + + getShowRouterLink (plugin: PeerTubePlugin) { + return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, plugin.type) ] + } } 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 db1f91f3d..787be2c8c 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 @@ -13,7 +13,10 @@ 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' ] + styleUrls: [ + '../shared/toggle-plugin-type.scss', + './plugin-search.component.scss' + ] }) export class PluginSearchComponent implements OnInit { pluginTypeOptions: { label: string, value: PluginType }[] = [] 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 index e69de29bb..aae08b94d 100644 --- 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 @@ -0,0 +1,26 @@ + + +

+ {{ pluginTypeLabel }} + {{ plugin.name }} +

+ +
+
+ + + + +
+ {{ formErrors[setting.name] }} +
+
+ + +
+ +
+ This {{ pluginTypeLabel }} does not have settings. +
+ + 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 index 5e6774739..42fc1b634 100644 --- 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 @@ -1,2 +1,22 @@ @import '_variables'; @import '_mixins'; + +h2 { + margin-bottom: 20px; +} + +input:not([type=submit]) { + @include peertube-input-text(340px); + display: block; +} + +.peertube-select-container { + @include peertube-select-container(340px); +} + +input[type=submit], button { + @include peertube-button; + @include orange-button; + + margin-top: 10px; +} 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 index f65599532..8750bfd38 100644 --- 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 @@ -1,14 +1,110 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit } from '@angular/core' +import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service' +import { Notifier } from '@app/core' +import { ActivatedRoute } from '@angular/router' +import { Subscription } from 'rxjs' +import { map, switchMap } from 'rxjs/operators' +import { RegisterSettingOptions } from '@shared/models/plugins/register-setting.model' +import { BuildFormArgument, BuildFormDefaultValues, FormReactive, FormValidatorService } from '@app/shared' @Component({ selector: 'my-plugin-show-installed', templateUrl: './plugin-show-installed.component.html', styleUrls: [ './plugin-show-installed.component.scss' ] }) -export class PluginShowInstalledComponent implements OnInit { +export class PluginShowInstalledComponent extends FormReactive implements OnInit, OnDestroy{ + plugin: PeerTubePlugin + registeredSettings: RegisterSettingOptions[] = [] + pluginTypeLabel: string + + private sub: Subscription + + constructor ( + protected formValidatorService: FormValidatorService, + private i18n: I18n, + private pluginService: PluginApiService, + private notifier: Notifier, + private route: ActivatedRoute + ) { + super() + } ngOnInit () { + this.sub = this.route.params.subscribe( + routeParams => { + const npmName = routeParams['npmName'] + + this.loadPlugin(npmName) + } + ) + } + + ngOnDestroy () { + if (this.sub) this.sub.unsubscribe() + } + + formValidated () { + const settings = this.form.value + + this.pluginService.updatePluginSettings(this.plugin.name, this.plugin.type, settings) + .subscribe( + () => { + this.notifier.success(this.i18n('Settings updated.')) + }, + + err => this.notifier.error(err.message) + ) + } + + hasRegisteredSettings () { + return Array.isArray(this.registeredSettings) && this.registeredSettings.length !== 0 + } + + private loadPlugin (npmName: string) { + this.pluginService.getPlugin(npmName) + .pipe(switchMap(plugin => { + return this.pluginService.getPluginRegisteredSettings(plugin.name, plugin.type) + .pipe(map(data => ({ plugin, registeredSettings: data.settings }))) + })) + .subscribe( + ({ plugin, registeredSettings }) => { + this.plugin = plugin + this.registeredSettings = registeredSettings + + this.pluginTypeLabel = this.pluginService.getPluginTypeLabel(this.plugin.type) + + this.buildSettingsForm() + }, + + err => this.notifier.error(err.message) + ) + } + + private buildSettingsForm () { + const defaultValues: BuildFormDefaultValues = {} + const buildOptions: BuildFormArgument = {} + const settingsValues: any = {} + + for (const setting of this.registeredSettings) { + buildOptions[ setting.name ] = null + settingsValues[ setting.name ] = this.getSetting(setting.name) + } + + this.buildForm(buildOptions) + + this.form.patchValue(settingsValues) + } + + private getSetting (name: string) { + const settings = this.plugin.settings + + if (settings && settings[name]) return settings[name] + + const registered = this.registeredSettings.find(r => r.name === name) + return registered.default } } diff --git a/client/src/app/+admin/plugins/plugins.routes.ts b/client/src/app/+admin/plugins/plugins.routes.ts index 58b5534fb..02e8fd324 100644 --- a/client/src/app/+admin/plugins/plugins.routes.ts +++ b/client/src/app/+admin/plugins/plugins.routes.ts @@ -40,7 +40,7 @@ export const PluginsRoutes: Routes = [ } }, { - path: 'show/:name', + path: 'show/:npmName', component: PluginShowInstalledComponent, data: { meta: { 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 bfc2b918f..1d33cd179 100644 --- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts +++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts @@ -8,6 +8,9 @@ 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' +import { ManagePlugin } from '@shared/models/plugins/manage-plugin.model' +import { InstallPlugin } from '@shared/models/plugins/install-plugin.model' +import { RegisterSettingOptions } from '@shared/models/plugins/register-setting.model' @Injectable() export class PluginApiService { @@ -23,16 +26,24 @@ export class PluginApiService { getPluginTypeOptions () { return [ { - label: this.i18n('Plugin'), + label: this.i18n('Plugins'), value: PluginType.PLUGIN }, { - label: this.i18n('Theme'), + label: this.i18n('Themes'), value: PluginType.THEME } ] } + getPluginTypeLabel (type: PluginType) { + if (type === PluginType.PLUGIN) { + return this.i18n('plugin') + } + + return this.i18n('theme') + } + getPlugins ( type: PluginType, componentPagination: ComponentPagination, @@ -47,4 +58,57 @@ export class PluginApiService { return this.authHttp.get>(PluginApiService.BASE_APPLICATION_URL, { params }) .pipe(catchError(res => this.restExtractor.handleError(res))) } + + getPlugin (npmName: string) { + const path = PluginApiService.BASE_APPLICATION_URL + '/' + npmName + + return this.authHttp.get(path) + .pipe(catchError(res => this.restExtractor.handleError(res))) + } + + getPluginRegisteredSettings (pluginName: string, pluginType: PluginType) { + const path = PluginApiService.BASE_APPLICATION_URL + '/' + this.nameToNpmName(pluginName, pluginType) + '/registered-settings' + + return this.authHttp.get<{ settings: RegisterSettingOptions[] }>(path) + .pipe(catchError(res => this.restExtractor.handleError(res))) + } + + updatePluginSettings (pluginName: string, pluginType: PluginType, settings: any) { + const path = PluginApiService.BASE_APPLICATION_URL + '/' + this.nameToNpmName(pluginName, pluginType) + '/settings' + + return this.authHttp.put(path, { settings }) + .pipe(catchError(res => this.restExtractor.handleError(res))) + } + + uninstall (pluginName: string, pluginType: PluginType) { + const body: ManagePlugin = { + npmName: this.nameToNpmName(pluginName, pluginType) + } + + return this.authHttp.post(PluginApiService.BASE_APPLICATION_URL + '/uninstall', body) + .pipe(catchError(res => this.restExtractor.handleError(res))) + } + + install (npmName: string) { + const body: InstallPlugin = { + npmName + } + + return this.authHttp.post(PluginApiService.BASE_APPLICATION_URL + '/install', body) + .pipe(catchError(res => this.restExtractor.handleError(res))) + } + + nameToNpmName (name: string, type: PluginType) { + const prefix = type === PluginType.PLUGIN + ? 'peertube-plugin-' + : 'peertube-theme-' + + return prefix + name + } + + pluginTypeFromNpmName (npmName: string) { + return npmName.startsWith('peertube-plugin-') + ? PluginType.PLUGIN + : PluginType.THEME + } } diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss new file mode 100644 index 000000000..ea2eda28c --- /dev/null +++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss @@ -0,0 +1,21 @@ +@import '_variables'; +@import '_mixins'; + +.toggle-plugin-type { + display: flex; + justify-content: center; + margin-bottom: 30px; + + p-selectButton { + /deep/ { + .ui-button-text { + font-size: 15px; + } + + .ui-button.ui-state-active { + background-color: var(--mainColor); + border-color: var(--mainColor); + } + } + } +} -- cgit v1.2.3