From 2e46eb97154da909b82d5efe1d336a3412594ff0 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 3 May 2021 14:33:34 +0200 Subject: Refactor search filters --- .../my-video-channels.component.html | 7 +- .../my-video-channels.component.ts | 46 +++++-------- .../my-history/my-history.component.html | 32 ++++----- .../+my-library/my-history/my-history.component.ts | 75 ++++++++++++---------- .../my-ownership/my-ownership.component.ts | 6 +- .../my-subscriptions.component.html | 7 +- .../my-subscriptions.component.scss | 1 + .../my-subscriptions/my-subscriptions.component.ts | 35 +++------- .../my-video-imports/my-video-imports.component.ts | 2 +- .../my-video-playlists.component.html | 7 +- .../my-video-playlists.component.ts | 45 ++++--------- .../+my-library/my-videos/my-videos.component.html | 4 +- .../+my-library/my-videos/my-videos.component.ts | 21 +++--- 13 files changed, 111 insertions(+), 177 deletions(-) (limited to 'client/src/app/+my-library') diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html index 2ed0c93d6..8d5eb04e2 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html @@ -5,12 +5,7 @@
-
- - - Clear filters -
+ diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts index f6ba50a48..9e3bf35b4 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts @@ -1,29 +1,26 @@ import { ChartData } from 'chart.js' import { max, maxBy, min, minBy } from 'lodash-es' -import { Subject } from 'rxjs' -import { debounceTime, mergeMap } from 'rxjs/operators' -import { Component, OnInit } from '@angular/core' -import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core' +import { mergeMap } from 'rxjs/operators' +import { Component } from '@angular/core' +import { AuthService, ConfirmService, Notifier, ScreenService } from '@app/core' import { VideoChannel, VideoChannelService } from '@app/shared/shared-main' @Component({ templateUrl: './my-video-channels.component.html', styleUrls: [ './my-video-channels.component.scss' ] }) -export class MyVideoChannelsComponent implements OnInit { +export class MyVideoChannelsComponent { totalItems: number videoChannels: VideoChannel[] = [] + videoChannelsChartData: ChartData[] videoChannelsMinimumDailyViews = 0 videoChannelsMaximumDailyViews: number - channelsSearch: string - channelsSearchChanged = new Subject() - chartOptions: any - private user: User + search: string constructor ( private authService: AuthService, @@ -31,31 +28,15 @@ export class MyVideoChannelsComponent implements OnInit { private confirmService: ConfirmService, private videoChannelService: VideoChannelService, private screenService: ScreenService - ) {} - - ngOnInit () { - this.user = this.authService.getUser() - - this.loadVideoChannels() - - this.channelsSearchChanged - .pipe(debounceTime(500)) - .subscribe(() => { - this.loadVideoChannels() - }) - } + ) {} get isInSmallView () { return this.screenService.isInSmallView() } - resetSearch () { - this.channelsSearch = '' - this.onChannelsSearchChanged() - } - - onChannelsSearchChanged () { - this.channelsSearchChanged.next() + onSearch (search: string) { + this.search = search + this.loadVideoChannels() } async deleteVideoChannel (videoChannel: VideoChannel) { @@ -85,8 +66,11 @@ channel with the same name (${videoChannel.name})!`, private loadVideoChannels () { this.authService.userInformationLoaded - .pipe(mergeMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch))) - .subscribe(res => { + .pipe(mergeMap(() => { + const user = this.authService.getUser() + + return this.videoChannelService.listAccountVideoChannels(user.account, null, true, this.search) + })).subscribe(res => { this.videoChannels = res.data this.totalItems = res.total diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html index 9dec64645..45ca37e0d 100644 --- a/client/src/app/+my-library/my-history/my-history.component.html +++ b/client/src/app/+my-library/my-history/my-history.component.html @@ -5,14 +5,7 @@
-
- - - Clear filters -
+
@@ -26,14 +19,15 @@
- -
You don't have any video in your watch history yet.
- -
-
- -
-
+ diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts index 1695bd7ad..ad83db7ab 100644 --- a/client/src/app/+my-library/my-history/my-history.component.ts +++ b/client/src/app/+my-library/my-history/my-history.component.ts @@ -1,36 +1,55 @@ -import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core' +import { Subject } from 'rxjs' +import { tap } from 'rxjs/operators' +import { Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { AuthService, ComponentPagination, ConfirmService, + DisableForReuseHook, LocalStorageService, Notifier, ScreenService, ServerService, + User, UserService } from '@app/core' import { immutableAssign } from '@app/helpers' -import { UserHistoryService } from '@app/shared/shared-main' -import { AbstractVideoList } from '@app/shared/shared-video-miniature' -import { Subject } from 'rxjs' -import { debounceTime, tap, distinctUntilChanged } from 'rxjs/operators' +import { UserHistoryService, Video } from '@app/shared/shared-main' +import { MiniatureDisplayOptions, VideosSelectionComponent } from '@app/shared/shared-video-miniature' @Component({ templateUrl: './my-history.component.html', styleUrls: [ './my-history.component.scss' ] }) -export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy { +export class MyHistoryComponent implements OnInit, DisableForReuseHook { + @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent + titlePage: string pagination: ComponentPagination = { currentPage: 1, itemsPerPage: 5, totalItems: null } + videosHistoryEnabled: boolean - search: string - protected searchStream: Subject + miniatureDisplayOptions: MiniatureDisplayOptions = { + date: true, + views: true, + by: true, + privacyLabel: false, + privacyText: true, + state: true, + blacklistInfo: true + } + + getVideosObservableFunction = this.getVideosObservable.bind(this) + + user: User + + videos: Video[] = [] + search: string constructor ( protected router: Router, @@ -45,45 +64,31 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD private userHistoryService: UserHistoryService, protected cfr: ComponentFactoryResolver ) { - super() - this.titlePage = $localize`My watch history` } ngOnInit () { - super.ngOnInit() + this.user = this.authService.getUser() this.authService.userInformationLoaded - .subscribe(() => { - this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled - }) - - this.searchStream = new Subject() + .subscribe(() => this.videosHistoryEnabled = this.user.videosHistoryEnabled) + } - this.searchStream - .pipe( - debounceTime(400), - distinctUntilChanged() - ) - .subscribe(search => { - this.search = search - this.reloadVideos() - }) + disableForReuse () { + this.videosSelection.disableForReuse() } - onSearch (event: Event) { - const target = event.target as HTMLInputElement - this.searchStream.next(target.value) + enabledForReuse () { + this.videosSelection.enabledForReuse() } - resetSearch () { - const searchInput = document.getElementById('history-search') as HTMLInputElement - searchInput.value = '' - this.searchStream.next('') + reloadData () { + this.videosSelection.reloadVideos() } - ngOnDestroy () { - super.ngOnDestroy() + onSearch (search: string) { + this.search = search + this.reloadData() } getVideosObservable (page: number) { @@ -129,7 +134,7 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD () => { this.notifier.success($localize`Videos history deleted`) - this.reloadVideos() + this.reloadData() }, err => this.notifier.error(err.message) diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-ownership.component.ts index a938023b4..aaf028474 100644 --- a/client/src/app/+my-library/my-ownership/my-ownership.component.ts +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.ts @@ -48,18 +48,18 @@ export class MyOwnershipComponent extends RestTable implements OnInit { } accepted () { - this.loadData() + this.reloadData() } refuse (videoChangeOwnership: VideoChangeOwnership) { this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id) .subscribe( - () => this.loadData(), + () => this.reloadData(), err => this.notifier.error(err.message) ) } - protected loadData () { + protected reloadData () { return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort) .subscribe( resultList => { diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html index 853d47fe6..f91cebacf 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html @@ -7,12 +7,7 @@
-
- - - Clear filters -
+
You don't have any subscription yet.
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss index 53ceaa250..6c1ddf716 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss @@ -58,6 +58,7 @@ input[type=text] { .video-subscriptions-header { margin-bottom: 30px; + display: flex; } @media screen and (max-width: $small-view) { diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts index 3b748eccf..1f4a931a0 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts @@ -1,6 +1,5 @@ import { Subject } from 'rxjs' -import { debounceTime } from 'rxjs/operators' -import { Component, OnInit } from '@angular/core' +import { Component } from '@angular/core' import { ComponentPagination, Notifier } from '@app/core' import { VideoChannel } from '@app/shared/shared-main' import { UserSubscriptionService } from '@app/shared/shared-user-subscription' @@ -9,7 +8,7 @@ import { UserSubscriptionService } from '@app/shared/shared-user-subscription' templateUrl: './my-subscriptions.component.html', styleUrls: [ './my-subscriptions.component.scss' ] }) -export class MySubscriptionsComponent implements OnInit { +export class MySubscriptionsComponent { videoChannels: VideoChannel[] = [] pagination: ComponentPagination = { @@ -20,34 +19,13 @@ export class MySubscriptionsComponent implements OnInit { onDataSubject = new Subject() - subscriptionsSearch: string - subscriptionsSearchChanged = new Subject() + search: string constructor ( private userSubscriptionService: UserSubscriptionService, private notifier: Notifier ) {} - ngOnInit () { - this.loadSubscriptions() - - this.subscriptionsSearchChanged - .pipe(debounceTime(500)) - .subscribe(() => { - this.pagination.currentPage = 1 - this.loadSubscriptions(false) - }) - } - - resetSearch () { - this.subscriptionsSearch = '' - this.onSubscriptionsSearchChanged() - } - - onSubscriptionsSearchChanged () { - this.subscriptionsSearchChanged.next() - } - onNearOfBottom () { // Last page if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return @@ -56,8 +34,13 @@ export class MySubscriptionsComponent implements OnInit { this.loadSubscriptions() } + onSearch (search: string) { + this.search = search + this.loadSubscriptions(false) + } + private loadSubscriptions (more = true) { - this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch }) + this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search }) .subscribe( res => { this.videoChannels = more diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts index d6d7d7a1b..359535526 100644 --- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts +++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts @@ -62,7 +62,7 @@ export class MyVideoImportsComponent extends RestTable implements OnInit { return '/videos/update/' + video.uuid } - protected loadData () { + protected reloadData () { this.videoImportService.getMyVideoImports(this.pagination, this.sort) .subscribe( resultList => { diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html index b88ea3db7..309afcf13 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html @@ -4,12 +4,7 @@
-
- - - Clear filters -
+ diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts index f6d394923..d90102693 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts @@ -1,7 +1,7 @@ import { Subject } from 'rxjs' -import { debounceTime, mergeMap } from 'rxjs/operators' -import { Component, OnInit } from '@angular/core' -import { AuthService, ComponentPagination, ConfirmService, Notifier, User } from '@app/core' +import { mergeMap } from 'rxjs/operators' +import { Component } from '@angular/core' +import { AuthService, ComponentPagination, ConfirmService, Notifier } from '@app/core' import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' import { VideoPlaylistType } from '@shared/models' @@ -9,10 +9,8 @@ import { VideoPlaylistType } from '@shared/models' templateUrl: './my-video-playlists.component.html', styleUrls: [ './my-video-playlists.component.scss' ] }) -export class MyVideoPlaylistsComponent implements OnInit { - videoPlaylistsSearch: string +export class MyVideoPlaylistsComponent { videoPlaylists: VideoPlaylist[] = [] - videoPlaylistSearchChanged = new Subject() pagination: ComponentPagination = { currentPage: 1, @@ -22,27 +20,14 @@ export class MyVideoPlaylistsComponent implements OnInit { onDataSubject = new Subject() - private user: User + search: string constructor ( private authService: AuthService, private notifier: Notifier, private confirmService: ConfirmService, private videoPlaylistService: VideoPlaylistService - ) {} - - ngOnInit () { - this.user = this.authService.getUser() - - this.loadVideoPlaylists() - - this.videoPlaylistSearchChanged - .pipe( - debounceTime(500)) - .subscribe(() => { - this.loadVideoPlaylists(true) - }) - } + ) {} async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) { const res = await this.confirmService.confirm( @@ -76,22 +61,20 @@ export class MyVideoPlaylistsComponent implements OnInit { this.loadVideoPlaylists() } - resetSearch () { - this.videoPlaylistsSearch = '' - this.onVideoPlaylistSearchChanged() - } - - onVideoPlaylistSearchChanged () { - this.videoPlaylistSearchChanged.next() + onSearch (search: string) { + this.search = search + this.loadVideoPlaylists(true) } private loadVideoPlaylists (reset = false) { this.authService.userInformationLoaded .pipe(mergeMap(() => { - return this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt', this.videoPlaylistsSearch) - })) - .subscribe(res => { + const user = this.authService.getUser() + + return this.videoPlaylistService.listAccountPlaylists(user.account, this.pagination, '-updatedAt', this.search) + })).subscribe(res => { if (reset) this.videoPlaylists = [] + this.videoPlaylists = this.videoPlaylists.concat(res.data) this.pagination.totalItems = res.total diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html index 7c1cdb511..8d8b482ad 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.html +++ b/client/src/app/+my-library/my-videos/my-videos.component.html @@ -19,7 +19,7 @@
- +