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

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