From 440d78ed4109b73434cc8672d0b89509a45719dc Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Mon, 11 Jan 2021 12:02:34 +0100 Subject: [PATCH] WIP: account search --- .../account-search.component.ts | 91 +++++++++++++++++++ .../app/+accounts/accounts-routing.module.ts | 34 ++++--- .../src/app/+accounts/accounts.component.html | 4 +- .../src/app/+accounts/accounts.component.ts | 12 +++ client/src/app/+accounts/accounts.module.ts | 4 +- .../src/app/shared/shared-main/misc/index.ts | 1 + .../misc/simple-search-input.component.html | 13 +++ .../misc/simple-search-input.component.scss | 24 +++++ .../misc/simple-search-input.component.ts | 58 ++++++++++++ .../shared/shared-main/shared-main.module.ts | 4 +- client/src/sass/include/_mixins.scss | 5 + 11 files changed, 235 insertions(+), 15 deletions(-) create mode 100644 client/src/app/+accounts/account-search/account-search.component.ts create mode 100644 client/src/app/shared/shared-main/misc/simple-search-input.component.html create mode 100644 client/src/app/shared/shared-main/misc/simple-search-input.component.scss create mode 100644 client/src/app/shared/shared-main/misc/simple-search-input.component.ts diff --git a/client/src/app/+accounts/account-search/account-search.component.ts b/client/src/app/+accounts/account-search/account-search.component.ts new file mode 100644 index 000000000000..6db4e7636172 --- /dev/null +++ b/client/src/app/+accounts/account-search/account-search.component.ts @@ -0,0 +1,91 @@ +import { Subscription } from 'rxjs' +import { first, tap } from 'rxjs/operators' +import { Component, OnDestroy, OnInit } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' +import { immutableAssign } from '@app/helpers' +import { Account, AccountService, VideoService } from '@app/shared/shared-main' +import { AbstractVideoList } from '@app/shared/shared-video-miniature' +import { VideoFilter } from '@shared/models' + +@Component({ + selector: 'my-account-search', + templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html', + styleUrls: [ + '../../shared/shared-video-miniature/abstract-video-list.scss' + ] +}) +export class AccountSearchComponent extends AbstractVideoList implements OnInit, OnDestroy { + titlePage: string + loadOnInit = false + + filter: VideoFilter = null + + private account: Account + private accountSub: Subscription + + constructor ( + protected router: Router, + protected serverService: ServerService, + protected route: ActivatedRoute, + protected authService: AuthService, + protected userService: UserService, + protected notifier: Notifier, + protected confirmService: ConfirmService, + protected screenService: ScreenService, + protected storageService: LocalStorageService, + private accountService: AccountService, + private videoService: VideoService + ) { + super() + } + + ngOnInit () { + super.ngOnInit() + + this.enableAllFilterIfPossible() + + // Parent get the account for us + this.accountSub = this.accountService.accountLoaded + .pipe(first()) + .subscribe(account => { + this.account = account + + this.reloadVideos() + this.generateSyndicationList() + }) + } + + ngOnDestroy () { + if (this.accountSub) this.accountSub.unsubscribe() + + super.ngOnDestroy() + } + + getVideosObservable (page: number) { + const newPagination = immutableAssign(this.pagination, { currentPage: page }) + const options = { + account: this.account, + videoPagination: newPagination, + sort: this.sort, + nsfwPolicy: this.nsfwPolicy, + videoFilter: this.filter + } + + return this.videoService + .getAccountVideos(options) + .pipe( + tap(({ total }) => { + this.titlePage = $localize`${total} results on this account for TODO` + }) + ) + } + + toggleModerationDisplay () { + this.filter = this.buildLocalFilter(this.filter, null) + + this.reloadVideos() + } + + generateSyndicationList () {} +} diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts index d2ca784b0378..15937a67b548 100644 --- a/client/src/app/+accounts/accounts-routing.module.ts +++ b/client/src/app/+accounts/accounts-routing.module.ts @@ -5,6 +5,7 @@ import { AccountsComponent } from './accounts.component' import { AccountVideosComponent } from './account-videos/account-videos.component' import { AccountAboutComponent } from './account-about/account-about.component' import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component' +import { AccountSearchComponent } from './account-search/account-search.component' const accountsRoutes: Routes = [ { @@ -21,6 +22,24 @@ const accountsRoutes: Routes = [ redirectTo: 'video-channels', pathMatch: 'full' }, + { + path: 'video-channels', + component: AccountVideoChannelsComponent, + data: { + meta: { + title: $localize`Account video channels` + } + } + }, + { + path: 'about', + component: AccountAboutComponent, + data: { + meta: { + title: $localize`About account` + } + } + }, { path: 'videos', component: AccountVideosComponent, @@ -35,20 +54,11 @@ const accountsRoutes: Routes = [ } }, { - path: 'video-channels', - component: AccountVideoChannelsComponent, + path: 'search', + component: AccountSearchComponent, data: { meta: { - title: $localize`Account video channels` - } - } - }, - { - path: 'about', - component: AccountAboutComponent, - data: { - meta: { - title: $localize`About account` + title: $localize`Search videos within account` } } } diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html index 31c8e3a8ec49..15170f821a6a 100644 --- a/client/src/app/+accounts/accounts.component.html +++ b/client/src/app/+accounts/accounts.component.html @@ -44,11 +44,13 @@ + +
- +
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index 4820eaf3253d..840537013f97 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -7,6 +7,7 @@ import { Account, AccountService, DropdownAction, ListOverflowItem, VideoChannel import { AccountReportComponent } from '@app/shared/shared-moderation' import { User, UserRight } from '@shared/models' import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' +import { AccountSearchComponent } from './account-search/account-search.component' @Component({ templateUrl: './accounts.component.html', @@ -99,6 +100,17 @@ export class AccountsComponent implements OnInit, OnDestroy { return $localize`${count} subscribers` } + onOutletLoaded (component: Component) { + if (component instanceof AccountSearchComponent) { + console.log('AccounSearchComponent') + } + console.log('not AccountSearchComponent') + } + + searchChanged (search: string) { + console.log('search: ' + search) + } + private onAccount (account: Account) { this.prependModerationActions = undefined diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts index 815360341fc7..6da65cbc1489 100644 --- a/client/src/app/+accounts/accounts.module.ts +++ b/client/src/app/+accounts/accounts.module.ts @@ -8,6 +8,7 @@ import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' import { AccountAboutComponent } from './account-about/account-about.component' import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component' import { AccountVideosComponent } from './account-videos/account-videos.component' +import { AccountSearchComponent } from './account-search/account-search.component' import { AccountsRoutingModule } from './accounts-routing.module' import { AccountsComponent } from './accounts.component' @@ -27,7 +28,8 @@ import { AccountsComponent } from './accounts.component' AccountsComponent, AccountVideosComponent, AccountVideoChannelsComponent, - AccountAboutComponent + AccountAboutComponent, + AccountSearchComponent ], exports: [ diff --git a/client/src/app/shared/shared-main/misc/index.ts b/client/src/app/shared/shared-main/misc/index.ts index e806fd2f24c1..dc8ef97546c4 100644 --- a/client/src/app/shared/shared-main/misc/index.ts +++ b/client/src/app/shared/shared-main/misc/index.ts @@ -1,3 +1,4 @@ export * from './help.component' export * from './list-overflow.component' export * from './top-menu-dropdown.component' +export * from './simple-search-input.component' diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html new file mode 100644 index 000000000000..bdcd0dae7f1d --- /dev/null +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html @@ -0,0 +1,13 @@ + + + diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss new file mode 100644 index 000000000000..1565158adf07 --- /dev/null +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss @@ -0,0 +1,24 @@ +@import '_variables'; +@import '_mixins'; + +my-global-icon { + height: 18px; + position: relative; + top: -2px; + + opacity: .6; + color: pvar(--mainForegroundColor); +} + +input { + @include peertube-input-text(150px); + + height: 24px; // maximum height for the account/video-channels links + padding-left: 10px; + background-color: transparent; + border: none; + + &::placeholder { + font-size: 15px; + } +} diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts new file mode 100644 index 000000000000..1ea94bce2cd9 --- /dev/null +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts @@ -0,0 +1,58 @@ +import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { Subject } from 'rxjs' +import { debounceTime, distinctUntilChanged } from 'rxjs/operators' + +@Component({ + selector: 'simple-search-input', + templateUrl: './simple-search-input.component.html', + styleUrls: [ './simple-search-input.component.scss' ] +}) +export class SimpleSearchInputComponent implements OnInit { + @ViewChild("searchVideos") input: ElementRef + + @Input() enter: string + + @Output() searchChanged = new EventEmitter() + + search = '' + shown: boolean + + private searchSubject= new Subject() + + constructor ( + private router: Router, + private route: ActivatedRoute + ) {} + + ngOnInit () { + this.searchSubject + .pipe( + debounceTime(400), + distinctUntilChanged() + ) + .subscribe(value => this.searchChanged.emit(value)) + + this.searchSubject.next(this.search) + } + + showInput () { + this.shown = true + setTimeout(()=> { + this.input.nativeElement.focus() + }) + } + + focusLost () { + if (this.search !== '') return + this.shown = false + } + + searchChange () { + this.searchChanged.emit(this.search) + } + + navigate () { + this.router.navigate(['./search'], { relativeTo: this.route }) + } +} diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index 74bb4559aaa4..ee4092a44849 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/client/src/app/shared/shared-main/shared-main.module.ts @@ -28,7 +28,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu import { DateToggleComponent } from './date' import { FeedComponent } from './feeds' import { LoaderComponent, SmallLoaderComponent } from './loaders' -import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent } from './misc' +import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent, SimpleSearchInputComponent } from './misc' import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users' import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video' import { VideoCaptionService } from './video-caption' @@ -83,6 +83,7 @@ import { VideoChannelService } from './video-channel' HelpComponent, ListOverflowComponent, TopMenuDropdownComponent, + SimpleSearchInputComponent, UserQuotaComponent, UserNotificationsComponent @@ -132,6 +133,7 @@ import { VideoChannelService } from './video-channel' HelpComponent, ListOverflowComponent, TopMenuDropdownComponent, + SimpleSearchInputComponent, UserQuotaComponent, UserNotificationsComponent diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 10ab44f57a40..7c101d9d7548 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -656,6 +656,11 @@ font-size: 130%; } } + + list-overflow { + display: inline-block; + width: max-content; + } } }