client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts

   1 import { Component, OnInit } from '@angular/core'
   2 import { Notifier, ServerService } from '@app/core'
   3 import { ConfirmService } from '../../../core'
   4 import { I18n } from '@ngx-translate/i18n-polyfill'
   5 import { PluginType } from '@shared/models/plugins/plugin.type'
   6 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
   7 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
   8 import { ActivatedRoute, Router } from '@angular/router'
   9 import { PeerTubePluginIndex } from '@shared/models/plugins/peertube-plugin-index.model'
  10 import { Subject } from 'rxjs'
  11 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
  12
  13 @Component({
  14   selector: 'my-plugin-search',
  15   templateUrl: './plugin-search.component.html',
  16   styleUrls: [
  17     '../shared/toggle-plugin-type.scss',
  18     '../shared/plugin-list.component.scss',
  19     './plugin-search.component.scss'
  20   ]
  21 })
  22 export class PluginSearchComponent implements OnInit {
  23   pluginTypeOptions: { label: string, value: PluginType }[] = []
  24   pluginType: PluginType = PluginType.PLUGIN
  25
  26   pagination: ComponentPagination = {
  27     currentPage: 1,
  28     itemsPerPage: 10,
  29     totalItems: null
  30   }
  31   sort = '-popularity'
  32
  33   search = ''
  34   isSearching = false
  35
  36   plugins: PeerTubePluginIndex[] = []
  37   installing: { [name: string]: boolean } = {}
  38   pluginInstalled = false
  39
  40   onDataSubject = new Subject<any[]>()
  41
  42   private searchSubject = new Subject<string>()
  43
  44   constructor (
  45     private server: ServerService,
  46     private i18n: I18n,
  47     private pluginService: PluginApiService,
  48     private notifier: Notifier,
  49     private confirmService: ConfirmService,
  50     private router: Router,
  51     private route: ActivatedRoute
  52   ) {
  53     this.pluginTypeOptions = this.pluginService.getPluginTypeOptions()
  54   }
  55
  56   ngOnInit () {
  57     const query = this.route.snapshot.queryParams
  58     if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10)
  59
  60     this.searchSubject.asObservable()
  61         .pipe(
  62           debounceTime(400),
  63           distinctUntilChanged()
  64         )
  65         .subscribe(search => {
  66           this.search = search
  67           this.reloadPlugins()
  68         })
  69
  70     this.reloadPlugins()
  71   }
  72
  73   onSearchChange (event: Event) {
  74     const target = event.target as HTMLInputElement
  75
  76     this.searchSubject.next(target.value)
  77   }
  78
  79   reloadPlugins () {
  80     this.pagination.currentPage = 1
  81     this.plugins = []
  82
  83     this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
  84
  85     this.loadMorePlugins()
  86   }
  87
  88   loadMorePlugins () {
  89     this.isSearching = true
  90
  91     this.pluginService.searchAvailablePlugins(this.pluginType, this.pagination, this.sort, this.search)
  92         .subscribe(
  93           res => {
  94             this.isSearching = false
  95
  96             this.plugins = this.plugins.concat(res.data)
  97             this.pagination.totalItems = res.total
  98
  99             this.onDataSubject.next(res.data)
 100           },
 101
 102           err => {
 103             console.error(err)
 104
 105             const message = this.i18n('The plugin index is not available. Please retry later.')
 106             this.notifier.error(message)
 107           }
 108         )
 109   }
 110
 111   onNearOfBottom () {
 112     if (!hasMoreItems(this.pagination)) return
 113
 114     this.pagination.currentPage += 1
 115
 116     this.loadMorePlugins()
 117   }
 118
 119   isInstalling (plugin: PeerTubePluginIndex) {
 120     return !!this.installing[plugin.npmName]
 121   }
 122
 123   async install (plugin: PeerTubePluginIndex) {
 124     if (this.installing[plugin.npmName]) return
 125
 126     const res = await this.confirmService.confirm(
 127       this.i18n('Please only install plugins or themes you trust, since they can execute any code on your instance.'),
 128       this.i18n('Install {{pluginName}}?', { pluginName: plugin.name })
 129     )
 130     if (res === false) return
 131
 132     this.installing[plugin.npmName] = true
 133
 134     this.pluginService.install(plugin.npmName)
 135         .subscribe(
 136           () => {
 137             this.installing[plugin.npmName] = false
 138             this.pluginInstalled = true
 139
 140             this.notifier.success(this.i18n('{{pluginName}} installed.', { pluginName: plugin.name }))
 141
 142             plugin.installed = true
 143           },
 144
 145           err => this.notifier.error(err.message)
 146         )
 147   }
 148 }