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

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