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   }
  30   sort = '-popularity'
  31
  32   search = ''
  33   isSearching = false
  34
  35   plugins: PeerTubePluginIndex[] = []
  36   installing: { [name: string]: boolean } = {}
  37   pluginInstalled = false
  38
  39   onDataSubject = new Subject<any[]>()
  40
  41   private searchSubject = new Subject<string>()
  42
  43   constructor (
  44     private server: ServerService,
  45     private i18n: I18n,
  46     private pluginService: PluginApiService,
  47     private notifier: Notifier,
  48     private confirmService: ConfirmService,
  49     private router: Router,
  50     private route: ActivatedRoute
  51   ) {
  52     this.pluginTypeOptions = this.pluginService.getPluginTypeOptions()
  53   }
  54
  55   ngOnInit () {
  56     const query = this.route.snapshot.queryParams
  57     if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10)
  58
  59     this.searchSubject.asObservable()
  60         .pipe(
  61           debounceTime(400),
  62           distinctUntilChanged()
  63         )
  64         .subscribe(search => {
  65           this.search = search
  66           this.reloadPlugins()
  67         })
  68
  69     this.reloadPlugins()
  70   }
  71
  72   onSearchChange (search: string) {
  73     this.searchSubject.next(search)
  74   }
  75
  76   reloadPlugins () {
  77     this.pagination.currentPage = 1
  78     this.plugins = []
  79
  80     this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
  81
  82     this.loadMorePlugins()
  83   }
  84
  85   loadMorePlugins () {
  86     this.isSearching = true
  87
  88     this.pluginService.searchAvailablePlugins(this.pluginType, this.pagination, this.sort, this.search)
  89         .subscribe(
  90           res => {
  91             this.isSearching = false
  92
  93             this.plugins = this.plugins.concat(res.data)
  94             this.pagination.totalItems = res.total
  95
  96             this.onDataSubject.next(res.data)
  97           },
  98
  99           err => {
 100             console.error(err)
 101
 102             const message = this.i18n('The plugin index is not available. Please retry later.')
 103             this.notifier.error(message)
 104           }
 105         )
 106   }
 107
 108   onNearOfBottom () {
 109     if (!hasMoreItems(this.pagination)) return
 110
 111     this.pagination.currentPage += 1
 112
 113     this.loadMorePlugins()
 114   }
 115
 116   isInstalling (plugin: PeerTubePluginIndex) {
 117     return !!this.installing[plugin.npmName]
 118   }
 119
 120   async install (plugin: PeerTubePluginIndex) {
 121     if (this.installing[plugin.npmName]) return
 122
 123     const res = await this.confirmService.confirm(
 124       this.i18n('Please only install plugins or themes you trust, since they can execute any code on your instance.'),
 125       this.i18n('Install {{pluginName}}?', { pluginName: plugin.name })
 126     )
 127     if (res === false) return
 128
 129     this.installing[plugin.npmName] = true
 130
 131     this.pluginService.install(plugin.npmName)
 132         .subscribe(
 133           () => {
 134             this.installing[plugin.npmName] = false
 135             this.pluginInstalled = true
 136
 137             this.notifier.success(this.i18n('{{pluginName}} installed.', { pluginName: plugin.name }))
 138
 139             plugin.installed = true
 140           },
 141
 142           err => this.notifier.error(err.message)
 143         )
 144   }
 145 }