client/src/app/core/rest/rest-table.ts

   1 import * as debug from 'debug'
   2 import { LazyLoadEvent, SortMeta } from 'primeng/api'
   3 import { Subject } from 'rxjs'
   4 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
   5 import { ActivatedRoute, Params, Router } from '@angular/router'
   6 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
   7 import { RestPagination } from './rest-pagination'
   8
   9 const logger = debug('peertube:tables:RestTable')
  10
  11 export abstract class RestTable {
  12
  13   abstract totalRecords: number
  14   abstract sort: SortMeta
  15   abstract pagination: RestPagination
  16
  17   search: string
  18   rowsPerPageOptions = [ 10, 20, 50, 100 ]
  19   rowsPerPage = this.rowsPerPageOptions[0]
  20   expandedRows = {}
  21
  22   baseRoute: string
  23
  24   protected searchStream: Subject<string>
  25
  26   protected route: ActivatedRoute
  27   protected router: Router
  28
  29   abstract getIdentifier (): string
  30
  31   initialize () {
  32     this.loadSort()
  33     this.initSearch()
  34   }
  35
  36   loadSort () {
  37     const result = peertubeLocalStorage.getItem(this.getSortLocalStorageKey())
  38
  39     if (result) {
  40       try {
  41         this.sort = JSON.parse(result)
  42       } catch (err) {
  43         console.error('Cannot load sort of local storage key ' + this.getSortLocalStorageKey(), err)
  44       }
  45     }
  46   }
  47
  48   loadLazy (event: LazyLoadEvent) {
  49     logger('Load lazy %o.', event)
  50
  51     this.sort = {
  52       order: event.sortOrder,
  53       field: event.sortField
  54     }
  55
  56     this.pagination = {
  57       start: event.first,
  58       count: this.rowsPerPage
  59     }
  60
  61     this.loadData()
  62     this.saveSort()
  63   }
  64
  65   saveSort () {
  66     peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort))
  67   }
  68
  69   initSearch () {
  70     this.searchStream = new Subject()
  71
  72     this.searchStream
  73       .pipe(
  74         debounceTime(400),
  75         distinctUntilChanged()
  76       )
  77       .subscribe(search => {
  78         this.search = search
  79
  80         logger('On search %s.', this.search)
  81
  82         this.loadData()
  83       })
  84   }
  85
  86   onSearch (event: Event) {
  87     const target = event.target as HTMLInputElement
  88     this.searchStream.next(target.value)
  89
  90     this.setQueryParams((event.target as HTMLInputElement).value)
  91   }
  92
  93   setQueryParams (search: string) {
  94     if (!this.baseRoute) return
  95
  96     const queryParams: Params = {}
  97
  98     if (search) Object.assign(queryParams, { search })
  99     this.router.navigate([ this.baseRoute ], { queryParams })
 100   }
 101
 102   resetTableFilter () {
 103     this.setTableFilter('')
 104     this.setQueryParams('')
 105     this.resetSearch()
 106   }
 107
 108   listenToSearchChange () {
 109     this.route.queryParams
 110       .subscribe(params => {
 111         this.search = params.search || ''
 112
 113         this.setTableFilter(this.search)
 114         this.loadData()
 115       })
 116   }
 117
 118   onPage (event: { first: number, rows: number }) {
 119     logger('On page %o.', event)
 120
 121     if (this.rowsPerPage !== event.rows) {
 122       this.rowsPerPage = event.rows
 123       this.pagination = {
 124         start: event.first,
 125         count: this.rowsPerPage
 126       }
 127
 128       this.loadData()
 129     }
 130
 131     this.expandedRows = {}
 132   }
 133
 134   setTableFilter (filter: string) {
 135     // FIXME: cannot use ViewChild, so create a component for the filter input
 136     const filterInput = document.getElementById('table-filter') as HTMLInputElement
 137     if (filterInput) filterInput.value = filter
 138   }
 139
 140   resetSearch () {
 141     this.searchStream.next('')
 142     this.setTableFilter('')
 143   }
 144
 145   protected abstract loadData (): void
 146
 147   private getSortLocalStorageKey () {
 148     return 'rest-table-sort-' + this.getIdentifier()
 149   }
 150 }