diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-subscriptions')
3 files changed, 48 insertions, 14 deletions
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html index 3b4c3022e..6cec7c0d5 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html | |||
@@ -1,6 +1,15 @@ | |||
1 | <h1> | 1 | <h1 class="d-flex justify-content-between"> |
2 | <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> | 2 | <span> |
3 | <ng-container i18n>My subscriptions</ng-container> | 3 | <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> |
4 | <ng-container i18n>My subscriptions</ng-container> | ||
5 | <span class="badge badge-secondary"> {{ pagination.totalItems }}</span> | ||
6 | </span> | ||
7 | |||
8 | <div class="has-feedback has-clear"> | ||
9 | <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch" (ngModelChange)="onSubscriptionsSearchChanged()" /> | ||
10 | <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a> | ||
11 | <span class="sr-only" i18n>Clear filters</span> | ||
12 | </div> | ||
4 | </h1> | 13 | </h1> |
5 | 14 | ||
6 | <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div> | 15 | <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div> |
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss index dd990c42b..884959070 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss | |||
@@ -1,6 +1,10 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | input[type=text] { | ||
5 | @include peertube-input-text(300px); | ||
6 | } | ||
7 | |||
4 | .video-channel { | 8 | .video-channel { |
5 | @include row-blocks; | 9 | @include row-blocks; |
6 | 10 | ||
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts index 390293a28..994fe5142 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts | |||
@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core' | |||
3 | import { ComponentPagination, Notifier } from '@app/core' | 3 | import { ComponentPagination, Notifier } from '@app/core' |
4 | import { VideoChannel } from '@app/shared/shared-main' | 4 | import { VideoChannel } from '@app/shared/shared-main' |
5 | import { UserSubscriptionService } from '@app/shared/shared-user-subscription' | 5 | import { UserSubscriptionService } from '@app/shared/shared-user-subscription' |
6 | import { debounceTime } from 'rxjs/operators' | ||
6 | 7 | ||
7 | @Component({ | 8 | @Component({ |
8 | selector: 'my-account-subscriptions', | 9 | selector: 'my-account-subscriptions', |
@@ -20,6 +21,9 @@ export class MyAccountSubscriptionsComponent implements OnInit { | |||
20 | 21 | ||
21 | onDataSubject = new Subject<any[]>() | 22 | onDataSubject = new Subject<any[]>() |
22 | 23 | ||
24 | subscriptionsSearch: string | ||
25 | subscriptionsSearchChanged = new Subject<string>() | ||
26 | |||
23 | constructor ( | 27 | constructor ( |
24 | private userSubscriptionService: UserSubscriptionService, | 28 | private userSubscriptionService: UserSubscriptionService, |
25 | private notifier: Notifier | 29 | private notifier: Notifier |
@@ -27,20 +31,22 @@ export class MyAccountSubscriptionsComponent implements OnInit { | |||
27 | 31 | ||
28 | ngOnInit () { | 32 | ngOnInit () { |
29 | this.loadSubscriptions() | 33 | this.loadSubscriptions() |
30 | } | ||
31 | 34 | ||
32 | loadSubscriptions () { | 35 | this.subscriptionsSearchChanged |
33 | this.userSubscriptionService.listSubscriptions(this.pagination) | 36 | .pipe(debounceTime(500)) |
34 | .subscribe( | 37 | .subscribe(() => { |
35 | res => { | 38 | this.pagination.currentPage = 1 |
36 | this.videoChannels = this.videoChannels.concat(res.data) | 39 | this.loadSubscriptions(false) |
37 | this.pagination.totalItems = res.total | 40 | }) |
41 | } | ||
38 | 42 | ||
39 | this.onDataSubject.next(res.data) | 43 | resetSearch () { |
40 | }, | 44 | this.subscriptionsSearch = '' |
45 | this.onSubscriptionsSearchChanged() | ||
46 | } | ||
41 | 47 | ||
42 | error => this.notifier.error(error.message) | 48 | onSubscriptionsSearchChanged () { |
43 | ) | 49 | this.subscriptionsSearchChanged.next() |
44 | } | 50 | } |
45 | 51 | ||
46 | onNearOfBottom () { | 52 | onNearOfBottom () { |
@@ -51,4 +57,19 @@ export class MyAccountSubscriptionsComponent implements OnInit { | |||
51 | this.loadSubscriptions() | 57 | this.loadSubscriptions() |
52 | } | 58 | } |
53 | 59 | ||
60 | private loadSubscriptions (more = true) { | ||
61 | this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch }) | ||
62 | .subscribe( | ||
63 | res => { | ||
64 | this.videoChannels = more | ||
65 | ? this.videoChannels.concat(res.data) | ||
66 | : res.data | ||
67 | this.pagination.totalItems = res.total | ||
68 | |||
69 | this.onDataSubject.next(res.data) | ||
70 | }, | ||
71 | |||
72 | error => this.notifier.error(error.message) | ||
73 | ) | ||
74 | } | ||
54 | } | 75 | } |