fix reactive file upload button

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-account / my-account-video-playlists / my-account-video-playlists.component.ts

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
index 761ce90e877fd98e0062af0a755a96c8736ef114..ea3bcde4fddc4284ad6a7e9603c1b81caac19c42 100644 (file)
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
@@ -1,13 +1,9 @@
+import { Subject } from 'rxjs'
+import { debounceTime, flatMap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
-import { Notifier } from '@app/core'
-import { AuthService } from '../../core/auth'
-import { ConfirmService } from '../../core/confirm'
-import { User } from '@app/shared'
-import { flatMap } from 'rxjs/operators'
+import { AuthService, ComponentPagination, ConfirmService, Notifier, User } from '@app/core'
+import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { VideoPlaylistType } from '@shared/models'
 
 @Component({
@@ -16,14 +12,18 @@ import { VideoPlaylistType } from '@shared/models'
   styleUrls: [ './my-account-video-playlists.component.scss' ]
 })
 export class MyAccountVideoPlaylistsComponent implements OnInit {
+  videoPlaylistsSearch: string
   videoPlaylists: VideoPlaylist[] = []
+  videoPlaylistSearchChanged = new Subject<string>()
 
   pagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 10,
+    itemsPerPage: 5,
     totalItems: null
   }
 
+  onDataSubject = new Subject<any[]>()
+
   private user: User
 
   constructor (
@@ -38,6 +38,13 @@ export class MyAccountVideoPlaylistsComponent implements OnInit {
     this.user = this.authService.getUser()
 
     this.loadVideoPlaylists()
+
+    this.videoPlaylistSearchChanged
+      .pipe(
+        debounceTime(500))
+      .subscribe(() => {
+        this.loadVideoPlaylists(true)
+      })
   }
 
   async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
@@ -69,17 +76,29 @@ export class MyAccountVideoPlaylistsComponent implements OnInit {
     return playlist.type.id === VideoPlaylistType.REGULAR
   }
 
-  private loadVideoPlaylists () {
-    this.authService.userInformationLoaded
-        .pipe(flatMap(() => this.videoPlaylistService.listAccountPlaylists(this.user.account)))
-        .subscribe(res => this.videoPlaylists = res.data)
-  }
-
-  private ofNearOfBottom () {
+  onNearOfBottom () {
     // Last page
     if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
 
     this.pagination.currentPage += 1
     this.loadVideoPlaylists()
   }
+
+  onVideoPlaylistSearchChanged () {
+    this.videoPlaylistSearchChanged.next()
+  }
+
+  private loadVideoPlaylists (reset = false) {
+    this.authService.userInformationLoaded
+        .pipe(flatMap(() => {
+          return this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt', this.videoPlaylistsSearch)
+        }))
+        .subscribe(res => {
+          if (reset) this.videoPlaylists = []
+          this.videoPlaylists = this.videoPlaylists.concat(res.data)
+          this.pagination.totalItems = res.total
+
+          this.onDataSubject.next(res.data)
+        })
+  }
 }