diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-video-playlists')
3 files changed, 25 insertions, 2 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html index 307884c70..878772359 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html | |||
@@ -1,4 +1,6 @@ | |||
1 | <div class="video-playlists-header"> | 1 | <div class="video-playlists-header"> |
2 | <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" /> | ||
3 | |||
2 | <a class="create-button" routerLink="create"> | 4 | <a class="create-button" routerLink="create"> |
3 | <my-global-icon iconName="add"></my-global-icon> | 5 | <my-global-icon iconName="add"></my-global-icon> |
4 | <ng-container i18n>Create a new playlist</ng-container> | 6 | <ng-container i18n>Create a new playlist</ng-container> |
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss index d5635417d..4fb4ed4be 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss | |||
@@ -29,12 +29,19 @@ | |||
29 | 29 | ||
30 | .video-playlist-buttons { | 30 | .video-playlist-buttons { |
31 | min-width: 190px; | 31 | min-width: 190px; |
32 | height: max-content; | ||
32 | } | 33 | } |
33 | } | 34 | } |
34 | 35 | ||
35 | .video-playlists-header { | 36 | .video-playlists-header { |
37 | display: flex; | ||
38 | justify-content: space-between; | ||
36 | text-align: right; | 39 | text-align: right; |
37 | margin: 20px 0 50px; | 40 | margin: 20px 0 50px; |
41 | |||
42 | input[type=text] { | ||
43 | @include peertube-input-text(300px); | ||
44 | } | ||
38 | } | 45 | } |
39 | 46 | ||
40 | @media screen and (max-width: 800px) { | 47 | @media screen and (max-width: 800px) { |
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 76b13fe2b..42e4782eb 100644 --- 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 | |||
@@ -3,7 +3,7 @@ import { Notifier } from '@app/core' | |||
3 | import { AuthService } from '../../core/auth' | 3 | import { AuthService } from '../../core/auth' |
4 | import { ConfirmService } from '../../core/confirm' | 4 | import { ConfirmService } from '../../core/confirm' |
5 | import { User } from '@app/shared' | 5 | import { User } from '@app/shared' |
6 | import { flatMap } from 'rxjs/operators' | 6 | import { flatMap, debounceTime } from 'rxjs/operators' |
7 | import { I18n } from '@ngx-translate/i18n-polyfill' | 7 | import { I18n } from '@ngx-translate/i18n-polyfill' |
8 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | 8 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' |
9 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | 9 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' |
@@ -17,7 +17,9 @@ import { Subject } from 'rxjs' | |||
17 | styleUrls: [ './my-account-video-playlists.component.scss' ] | 17 | styleUrls: [ './my-account-video-playlists.component.scss' ] |
18 | }) | 18 | }) |
19 | export class MyAccountVideoPlaylistsComponent implements OnInit { | 19 | export class MyAccountVideoPlaylistsComponent implements OnInit { |
20 | videoPlaylistsSearch: string | ||
20 | videoPlaylists: VideoPlaylist[] = [] | 21 | videoPlaylists: VideoPlaylist[] = [] |
22 | videoPlaylistSearchChanged = new Subject<string>() | ||
21 | 23 | ||
22 | pagination: ComponentPagination = { | 24 | pagination: ComponentPagination = { |
23 | currentPage: 1, | 25 | currentPage: 1, |
@@ -41,6 +43,13 @@ export class MyAccountVideoPlaylistsComponent implements OnInit { | |||
41 | this.user = this.authService.getUser() | 43 | this.user = this.authService.getUser() |
42 | 44 | ||
43 | this.loadVideoPlaylists() | 45 | this.loadVideoPlaylists() |
46 | |||
47 | this.videoPlaylistSearchChanged | ||
48 | .pipe( | ||
49 | debounceTime(500)) | ||
50 | .subscribe(() => { | ||
51 | this.loadVideoPlaylists() | ||
52 | }) | ||
44 | } | 53 | } |
45 | 54 | ||
46 | async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) { | 55 | async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) { |
@@ -80,12 +89,17 @@ export class MyAccountVideoPlaylistsComponent implements OnInit { | |||
80 | this.loadVideoPlaylists() | 89 | this.loadVideoPlaylists() |
81 | } | 90 | } |
82 | 91 | ||
92 | onVideoPlaylistSearchChanged () { | ||
93 | this.videoPlaylistSearchChanged.next() | ||
94 | } | ||
95 | |||
83 | private loadVideoPlaylists () { | 96 | private loadVideoPlaylists () { |
84 | this.authService.userInformationLoaded | 97 | this.authService.userInformationLoaded |
85 | .pipe(flatMap(() => { | 98 | .pipe(flatMap(() => { |
86 | return this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt') | 99 | return this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt', this.videoPlaylistsSearch) |
87 | })) | 100 | })) |
88 | .subscribe(res => { | 101 | .subscribe(res => { |
102 | this.videoPlaylists = [] | ||
89 | this.videoPlaylists = this.videoPlaylists.concat(res.data) | 103 | this.videoPlaylists = this.videoPlaylists.concat(res.data) |
90 | this.pagination.totalItems = res.total | 104 | this.pagination.totalItems = res.total |
91 | 105 | ||