Refactor search filters

pull/4042/head
Chocobozzz 2021-05-03 14:33:34 +02:00
parent 514e8168fb
commit 2e46eb9715
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
47 changed files with 282 additions and 496 deletions

View File

@ -4,20 +4,16 @@
</h1>
<p-table
[value]="followers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
[value]="followers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
[lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} followers"
>
<ng-template pTemplate="caption">
<div class="caption">
<div class="ml-auto has-feedback has-clear">
<input
type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
(keyup)="onSearch($event)"
>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
<div class="ml-auto">
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>
</ng-template>

View File

@ -1,14 +1,6 @@
@import '_variables';
@import '_mixins';
.caption {
justify-content: flex-end;
input {
@include peertube-input-text(250px);
}
}
a {
@include disable-default-a-behaviour;
display: inline-block;

View File

@ -59,7 +59,7 @@ export class FollowersListComponent extends RestTable implements OnInit {
const handle = follow.follower.name + '@' + follow.follower.host
this.notifier.success($localize`${handle} rejected from instance followers`)
this.loadData()
this.reloadData()
},
err => {
@ -80,14 +80,14 @@ export class FollowersListComponent extends RestTable implements OnInit {
const handle = follow.follower.name + '@' + follow.follower.host
this.notifier.success($localize`${handle} removed from instance followers`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
)
}
protected loadData () {
protected reloadData () {
this.followService.getFollowers({ pagination: this.pagination, sort: this.sort, search: this.search })
.subscribe(
resultList => {

View File

@ -4,8 +4,9 @@
</h1>
<p-table
[value]="following" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
[lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} hosts"
>
@ -18,13 +19,8 @@
</a>
</div>
<div class="ml-auto has-feedback has-clear">
<input
type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
(keyup)="onSearch($event)"
>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
<div class="ml-auto">
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>
</ng-template>

View File

@ -16,14 +16,6 @@ a {
}
}
.caption {
justify-content: flex-end;
input {
@include peertube-input-text(250px);
}
}
.follow-button {
@include create-button;
}

View File

@ -45,7 +45,7 @@ export class FollowingListComponent extends RestTable implements OnInit {
this.followService.follow(hosts).subscribe(
() => {
this.notifier.success($localize`Follow request(s) sent!`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
@ -62,14 +62,14 @@ export class FollowingListComponent extends RestTable implements OnInit {
this.followService.unfollow(follow).subscribe(
() => {
this.notifier.success($localize`You are not following ${follow.following.host} anymore.`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
)
}
protected loadData () {
protected reloadData () {
this.followService.getFollowing({ pagination: this.pagination, sort: this.sort, search: this.search })
.subscribe(
resultList => {

View File

@ -78,7 +78,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
this.pagination.start = 0
this.saveSelectLocalStorage()
this.loadData()
this.reloadData()
}
getRedundancyStrategy (redundancy: VideoRedundancy) {
@ -145,7 +145,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
.subscribe(
() => {
this.notifier.success($localize`Video redundancies removed!`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
@ -153,7 +153,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
}
protected loadData () {
protected reloadData () {
const options = {
pagination: this.pagination,
sort: this.sort,

View File

@ -1,18 +1,14 @@
<p-table
[value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
[value]="blockedAccounts" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
[lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted accounts"
>
<ng-template pTemplate="caption">
<div class="caption">
<div class="ml-auto has-feedback has-clear">
<input
type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
(keyup)="onSearch($event)"
>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
<div class="ml-auto">
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>
</ng-template>

View File

@ -4,8 +4,9 @@
</h1>
<p-table
[value]="blocklist" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
[value]="blocklist" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" dataKey="id"
[lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} blocked videos"
(onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@ -13,7 +14,7 @@
<ng-template pTemplate="caption">
<div class="caption">
<div class="ml-auto">
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>
</ng-template>

View File

@ -5,23 +5,6 @@ my-global-icon {
height: 24px;
}
.input-group {
@include peertube-input-group(300px);
.dropdown-toggle::after {
margin-left: 0;
}
}
.caption {
justify-content: flex-end;
input {
@include peertube-input-text(250px);
flex-grow: 1;
}
}
.badge {
@include table-badge;
}

View File

@ -2,9 +2,9 @@ import { SortMeta } from 'primeng/api'
import { switchMap } from 'rxjs/operators'
import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
import { environment } from 'src/environments/environment'
import { AfterViewInit, Component, OnInit } from '@angular/core'
import { Component, OnInit } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'
import { ActivatedRoute, Params, Router } from '@angular/router'
import { ActivatedRoute, Router } from '@angular/router'
import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
import { AdvancedInputFilter } from '@app/shared/shared-forms'
import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
@ -16,7 +16,7 @@ import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
templateUrl: './video-block-list.component.html',
styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
})
export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit {
export class VideoBlockListComponent extends RestTable implements OnInit {
blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
totalRecords = 0
sort: SortMeta = { field: 'createdAt', order: -1 }
@ -64,7 +64,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
).subscribe(
() => {
this.notifier.success($localize`Video ${videoBlock.video.name} switched to manual block.`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
@ -116,11 +116,6 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
})
this.initialize()
this.listenToSearchChange()
}
ngAfterViewInit () {
if (this.search) this.setTableFilter(this.search, false)
}
getIdentifier () {
@ -144,7 +139,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
this.videoBlocklistService.unblockVideo(entry.video.id).subscribe(
() => {
this.notifier.success($localize`Video ${entry.video.name} unblocked.`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
@ -162,7 +157,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
)
}
protected loadData () {
protected reloadData () {
this.videoBlocklistService.listBlocks({
pagination: this.pagination,
sort: this.sort,

View File

@ -8,8 +8,9 @@
<em i18n>This view also shows comments from muted accounts.</em>
<p-table
[value]="comments" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
[value]="comments" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" dataKey="id"
[lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} comments"
(onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@ -26,7 +27,7 @@
</div>
<div class="ml-auto">
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>
</ng-template>

View File

@ -11,23 +11,6 @@ my-global-icon {
height: 24px;
}
.input-group {
@include peertube-input-group(300px);
.dropdown-toggle::after {
margin-left: 0;
}
}
.caption {
justify-content: flex-end;
input {
@include peertube-input-text(250px);
flex-grow: 1;
}
}
.video {
display: flex;
flex-direction: column;

View File

@ -13,9 +13,7 @@ import { FeedFormat, UserRight } from '@shared/models'
templateUrl: './video-comment-list.component.html',
styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-comment-list.component.scss' ]
})
export class VideoCommentListComponent extends RestTable implements OnInit, AfterViewInit {
baseRoute = '/admin/moderation/video-comments/list'
export class VideoCommentListComponent extends RestTable implements OnInit {
comments: VideoCommentAdmin[]
totalRecords = 0
sort: SortMeta = { field: 'createdAt', order: -1 }
@ -91,7 +89,6 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
ngOnInit () {
this.initialize()
this.listenToSearchChange()
this.bulkCommentActions = [
{
@ -103,10 +100,6 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
]
}
ngAfterViewInit () {
if (this.search) this.setTableFilter(this.search, false)
}
getIdentifier () {
return 'VideoCommentListComponent'
}
@ -119,7 +112,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
return this.selectedComments.length !== 0
}
protected loadData () {
protected reloadData () {
this.videoCommentService.getAdminVideoComments({
pagination: this.pagination,
sort: this.sort,
@ -147,7 +140,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
this.videoCommentService.deleteVideoComments(commentArgs).subscribe(
() => {
this.notifier.success($localize`${commentArgs.length} comments deleted.`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message),
@ -159,7 +152,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
private deleteComment (comment: VideoCommentAdmin) {
this.videoCommentService.deleteVideoComment(comment.video.id, comment.id)
.subscribe(
() => this.loadData(),
() => this.reloadData(),
err => this.notifier.error(err.message)
)

View File

@ -86,7 +86,7 @@ export class JobsComponent extends RestTable implements OnInit {
onJobStateOrTypeChanged () {
this.pagination.start = 0
this.loadData()
this.reloadData()
this.saveJobStateAndType()
}
@ -104,10 +104,10 @@ export class JobsComponent extends RestTable implements OnInit {
this.jobs = []
this.totalRecords = 0
this.loadData()
this.reloadData()
}
protected loadData () {
protected reloadData () {
let jobState = this.jobState as JobState
if (this.jobState === 'all') jobState = null

View File

@ -1,7 +1,7 @@
<p-table
[value]="users" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
[(selection)]="selectedUsers"
[value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" dataKey="id" [resizableColumns]="true" [(selection)]="selectedUsers"
[lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users"
(onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@ -22,7 +22,7 @@
</div>
<div class="ml-auto">
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>

View File

@ -1,5 +1,5 @@
import { SortMeta } from 'primeng/api'
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
import { Component, OnInit, ViewChild } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core'
import { AdvancedInputFilter } from '@app/shared/shared-forms'
@ -19,7 +19,7 @@ type UserForList = User & {
templateUrl: './user-list.component.html',
styleUrls: [ './user-list.component.scss' ]
})
export class UserListComponent extends RestTable implements OnInit, AfterViewInit {
export class UserListComponent extends RestTable implements OnInit {
@ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
users: User[] = []
@ -78,7 +78,6 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
.subscribe(config => this.serverConfig = config)
this.initialize()
this.listenToSearchChange()
this.bulkUserActions = [
[
@ -127,10 +126,6 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
this.columns.push({ id: 'lastLoginDate', label: 'Last login' })
}
ngAfterViewInit () {
if (this.search) this.setTableFilter(this.search, false)
}
getIdentifier () {
return 'UserListComponent'
}
@ -174,7 +169,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
}
onUserChanged () {
this.loadData()
this.reloadData()
}
async unbanUsers (users: User[]) {
@ -185,7 +180,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
.subscribe(
() => {
this.notifier.success($localize`${users.length} users unbanned.`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
@ -207,7 +202,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
this.userService.removeUser(users).subscribe(
() => {
this.notifier.success($localize`${users.length} users deleted.`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
@ -218,7 +213,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
this.userService.updateUsers(users, { emailVerified: true }).subscribe(
() => {
this.notifier.success($localize`${users.length} users email set as verified.`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
@ -229,7 +224,7 @@ export class UserListComponent extends RestTable implements OnInit, AfterViewIni
return this.selectedUsers.length !== 0
}
protected loadData () {
protected reloadData () {
this.selectedUsers = []
this.userService.getUsers({

View File

@ -5,12 +5,7 @@
</h1>
<div class="video-channels-header d-flex justify-content-between">
<div class="has-feedback has-clear">
<input type="text" placeholder="Search your channels" i18n-placeholder [(ngModel)]="channelsSearch"
(ngModelChange)="onChannelsSearchChanged()" />
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
</div>
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
<a class="create-button" routerLink="create">
<my-global-icon iconName="add" aria-hidden="true"></my-global-icon>

View File

@ -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<string>()
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

View File

@ -5,14 +5,7 @@
<div class="top-buttons">
<div class="search-wrapper">
<div class="input-group has-feedback has-clear">
<input
type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
(keyup)="onSearch($event)"
>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
</div>
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
</div>
<div class="history-switch">
@ -26,14 +19,15 @@
</button>
</div>
<div class="no-history" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">You don't have any video in your watch history yet.</div>
<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
<div class="video" *ngFor="let video of videos">
<my-video-miniature
[video]="video" [displayAsRow]="true"
(videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)"
></my-video-miniature>
</div>
</div>
<my-videos-selection
[pagination]="pagination"
[(videosModel)]="videos"
[miniatureDisplayOptions]="miniatureDisplayOptions"
[titlePage]="titlePage"
[getVideosObservableFunction]="getVideosObservableFunction"
[user]="user"
[loadOnInit]="false"
i18n-noResultMessage noResultMessage="You don't have any video in your watch history yet."
[enableSelection]="false"
#videosSelection
></my-videos-selection>

View File

@ -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<string>
videosHistoryEnabled: boolean
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()
this.searchStream
.pipe(
debounceTime(400),
distinctUntilChanged()
)
.subscribe(search => {
this.search = search
this.reloadVideos()
})
.subscribe(() => this.videosHistoryEnabled = this.user.videosHistoryEnabled)
}
onSearch (event: Event) {
const target = event.target as HTMLInputElement
this.searchStream.next(target.value)
disableForReuse () {
this.videosSelection.disableForReuse()
}
resetSearch () {
const searchInput = document.getElementById('history-search') as HTMLInputElement
searchInput.value = ''
this.searchStream.next('')
enabledForReuse () {
this.videosSelection.enabledForReuse()
}
ngOnDestroy () {
super.ngOnDestroy()
reloadData () {
this.videosSelection.reloadVideos()
}
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)

View File

@ -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 => {

View File

@ -7,12 +7,7 @@
</h1>
<div class="video-subscriptions-header">
<div class="has-feedback has-clear">
<input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
(ngModelChange)="onSubscriptionsSearchChanged()" />
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
</div>
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
</div>
<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>

View File

@ -58,6 +58,7 @@ input[type=text] {
.video-subscriptions-header {
margin-bottom: 30px;
display: flex;
}
@media screen and (max-width: $small-view) {

View File

@ -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<any[]>()
subscriptionsSearch: string
subscriptionsSearchChanged = new Subject<string>()
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

View File

@ -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 => {

View File

@ -4,12 +4,7 @@
</h1>
<div class="video-playlists-header d-flex justify-content-between">
<div class="has-feedback has-clear">
<input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch"
(ngModelChange)="onVideoPlaylistSearchChanged()" />
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
</div>
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
<a class="create-button" routerLink="create">
<my-global-icon iconName="add" aria-hidden="true"></my-global-icon>

View File

@ -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<string>()
pagination: ComponentPagination = {
currentPage: 1,
@ -22,27 +20,14 @@ export class MyVideoPlaylistsComponent implements OnInit {
onDataSubject = new Subject<any[]>()
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

View File

@ -19,7 +19,7 @@
</h1>
<div class="videos-header d-flex justify-content-between">
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
<div class="peertube-select-container peertube-select-button">
<select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
@ -41,6 +41,7 @@
[titlePage]="titlePage"
[getVideosObservableFunction]="getVideosObservableFunction"
[user]="user"
[loadOnInit]="false"
#videosSelection
>
<ng-template ptTemplate="globalButtons">
@ -59,6 +60,5 @@
</ng-template>
</my-videos-selection>
<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
<my-live-stream-information #liveStreamInformationModal></my-live-stream-information>

View File

@ -1,8 +1,8 @@
import { concat, Observable } from 'rxjs'
import { tap, toArray } from 'rxjs/operators'
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
import { Component, OnInit, ViewChild } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { AuthService, ComponentPagination, ConfirmService, Notifier, RouteFilter, ScreenService, ServerService, User } from '@app/core'
import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
import { immutableAssign } from '@app/helpers'
import { AdvancedInputFilter } from '@app/shared/shared-forms'
@ -16,7 +16,7 @@ import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.c
templateUrl: './my-videos.component.html',
styleUrls: [ './my-videos.component.scss' ]
})
export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewInit, DisableForReuseHook {
export class MyVideosComponent implements OnInit, DisableForReuseHook {
@ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
@ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
@ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
@ -42,6 +42,7 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
videos: Video[] = []
getVideosObservableFunction = this.getVideosObservable.bind(this)
sort: VideoSortField = '-publishedAt'
user: User
@ -53,6 +54,8 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
}
]
private search: string
constructor (
protected router: Router,
protected serverService: ServerService,
@ -63,8 +66,6 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
private confirmService: ConfirmService,
private videoService: VideoService
) {
super()
this.titlePage = $localize`My videos`
}
@ -72,16 +73,14 @@ export class MyVideosComponent extends RouteFilter implements OnInit, AfterViewI
this.buildActions()
this.user = this.authService.getUser()
this.initSearch()
this.listenToSearchChange()
}
ngAfterViewInit () {
if (this.search) this.setTableFilter(this.search, false)
onSearch (search: string) {
this.search = search
this.reloadData()
}
loadData () {
reloadData () {
this.videosSelection.reloadVideos()
}

View File

@ -1,25 +1,22 @@
import * as debug from 'debug'
import { LazyLoadEvent, SortMeta } from 'primeng/api'
import { Subject } from 'rxjs'
import { ActivatedRoute, Router } from '@angular/router'
import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
import { RouteFilter } from '../routing'
import { RestPagination } from './rest-pagination'
const logger = debug('peertube:tables:RestTable')
export abstract class RestTable extends RouteFilter {
export abstract class RestTable {
abstract totalRecords: number
abstract sort: SortMeta
abstract pagination: RestPagination
search: string
rowsPerPageOptions = [ 10, 20, 50, 100 ]
rowsPerPage = this.rowsPerPageOptions[0]
expandedRows = {}
protected searchStream: Subject<string>
search: string
protected route: ActivatedRoute
protected router: Router
@ -28,7 +25,6 @@ export abstract class RestTable extends RouteFilter {
initialize () {
this.loadSort()
this.initSearch()
}
loadSort () {
@ -56,7 +52,7 @@ export abstract class RestTable extends RouteFilter {
count: this.rowsPerPage
}
this.loadData()
this.reloadData()
this.saveSort()
}
@ -74,13 +70,18 @@ export abstract class RestTable extends RouteFilter {
count: this.rowsPerPage
}
this.loadData()
this.reloadData()
}
this.expandedRows = {}
}
protected abstract loadData (): void
onSearch (search: string) {
this.search = search
this.reloadData()
}
protected abstract reloadData (): void
private getSortLocalStorageKey () {
return 'rest-table-sort-' + this.getIdentifier()

View File

@ -5,7 +5,6 @@ export * from './login-guard.service'
export * from './menu-guard.service'
export * from './preload-selected-modules-list'
export * from './redirect.service'
export * from './route-filter'
export * from './server-config-resolver.service'
export * from './unlogged-guard.service'
export * from './user-right-guard.service'

View File

@ -1,79 +0,0 @@
import * as debug from 'debug'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
import { ActivatedRoute, Params, Router } from '@angular/router'
const logger = debug('peertube:tables:RouteFilter')
export abstract class RouteFilter {
search: string
protected searchStream: Subject<string>
protected route: ActivatedRoute
protected router: Router
initSearch () {
this.searchStream = new Subject()
this.searchStream
.pipe(
debounceTime(200),
distinctUntilChanged()
)
.subscribe(search => {
this.search = search
logger('On search %s.', this.search)
this.loadData()
})
}
onSearch (event: Event) {
const target = event.target as HTMLInputElement
this.searchStream.next(target.value)
this.setQueryParams(target.value)
}
resetTableFilter () {
this.setTableFilter('')
this.setQueryParams('')
this.resetSearch()
}
resetSearch () {
this.searchStream.next('')
this.setTableFilter('')
}
listenToSearchChange () {
this.route.queryParams
.subscribe(params => {
this.search = params.search || ''
// Primeng table will run an event to load data
this.setTableFilter(this.search)
})
}
setTableFilter (filter: string, triggerEvent = true) {
// FIXME: cannot use ViewChild, so create a component for the filter input
const filterInput = document.getElementById('table-filter') as HTMLInputElement
if (!filterInput) return
filterInput.value = filter
if (triggerEvent) filterInput.dispatchEvent(new Event('keyup'))
}
protected abstract loadData (): void
private setQueryParams (search: string) {
const queryParams: Params = {}
if (search) Object.assign(queryParams, { search })
this.router.navigate([ ], { queryParams })
}
}

View File

@ -1,6 +1,7 @@
<p-table
[value]="abuses" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
[value]="abuses" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" dataKey="id" [resizableColumns]="true"
[lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
(onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
@ -8,7 +9,7 @@
<ng-template pTemplate="caption">
<div class="caption">
<div class="ml-auto">
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)" (resetTableFilter)="resetTableFilter()"></my-advanced-input-filter>
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>
</ng-template>

View File

@ -3,7 +3,7 @@ import truncate from 'lodash-es/truncate'
import { SortMeta } from 'primeng/api'
import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
import { environment } from 'src/environments/environment'
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core'
import { Component, Input, OnInit, ViewChild } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'
import { ActivatedRoute, Router } from '@angular/router'
import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
@ -11,10 +11,10 @@ import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared
import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
import { VideoCommentService } from '@app/shared/shared-video-comment'
import { AbuseState, AdminAbuse } from '@shared/models'
import { AdvancedInputFilter } from '../shared-forms'
import { AbuseMessageModalComponent } from './abuse-message-modal.component'
import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
import { ProcessedAbuse } from './processed-abuse.model'
import { AdvancedInputFilter } from '../shared-forms'
const logger = debug('peertube:moderation:AbuseListTableComponent')
@ -23,7 +23,7 @@ const logger = debug('peertube:moderation:AbuseListTableComponent')
templateUrl: './abuse-list-table.component.html',
styleUrls: [ '../shared-moderation/moderation.scss', './abuse-list-table.component.scss' ]
})
export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit {
export class AbuseListTableComponent extends RestTable implements OnInit {
@Input() viewType: 'admin' | 'user'
@ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
@ -89,11 +89,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
]
this.initialize()
this.listenToSearchChange()
}
ngAfterViewInit () {
if (this.search) this.setTableFilter(this.search, false)
}
isAdminView () {
@ -109,7 +104,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
}
onModerationCommentUpdated () {
this.loadData()
this.reloadData()
}
isAbuseAccepted (abuse: AdminAbuse) {
@ -152,7 +147,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
this.abuseService.removeAbuse(abuse).subscribe(
() => {
this.notifier.success($localize`Abuse deleted.`)
this.loadData()
this.reloadData()
},
err => this.notifier.error(err.message)
@ -162,7 +157,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
this.abuseService.updateAbuse(abuse, { state })
.subscribe(
() => this.loadData(),
() => this.reloadData(),
err => this.notifier.error(err.message)
)
@ -189,7 +184,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
return Actor.IS_LOCAL(abuse.reporterAccount.host)
}
protected loadData () {
protected reloadData () {
logger('Loading data.')
const options = {

View File

@ -1,5 +1,5 @@
<div class="input-group has-feedback has-clear">
<div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
<div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
<div class="input-group-text" ngbDropdownToggle>
<span class="caret" aria-haspopup="menu" role="button"></span>
</div>
@ -10,13 +10,15 @@
<a *ngFor="let filter of filters" [routerLink]="[ '.' ]" [queryParams]="filter.queryParams" class="dropdown-item">
{{ filter.label }}
</a>
</div>
</div>
<input
type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
(keyup)="onSearch($event)"
[(ngModel)]="searchValue"
(keyup)="onInputSearch($event)"
>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
<span class="sr-only" i18n>Clear filters</span>
</div>

View File

@ -1,27 +1,88 @@
import { Component, EventEmitter, Input, Output } from '@angular/core'
import { Params } from '@angular/router'
import * as debug from 'debug'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { ActivatedRoute, Params, Router } from '@angular/router'
export type AdvancedInputFilter = {
label: string
queryParams: Params
}
const logger = debug('peertube:AdvancedInputFilterComponent')
@Component({
selector: 'my-advanced-input-filter',
templateUrl: './advanced-input-filter.component.html',
styleUrls: [ './advanced-input-filter.component.scss' ]
})
export class AdvancedInputFilterComponent {
export class AdvancedInputFilterComponent implements OnInit {
@Input() filters: AdvancedInputFilter[] = []
@Output() resetTableFilter = new EventEmitter<void>()
@Output() search = new EventEmitter<Event>()
@Output() search = new EventEmitter<string>()
onSearch (event: Event) {
this.search.emit(event)
searchValue: string
private searchStream: Subject<string>
constructor (
private route: ActivatedRoute,
private router: Router
) { }
ngOnInit () {
this.initSearchStream()
this.listenToRouteSearchChange()
}
onInputSearch (event: Event) {
this.updateSearch((event.target as HTMLInputElement).value)
}
onResetTableFilter () {
this.resetTableFilter.emit()
this.updateSearch('')
}
hasFilters () {
return this.filters.length !== 0
}
private updateSearch (value: string) {
this.searchValue = value
this.searchStream.next(this.searchValue)
}
private listenToRouteSearchChange () {
this.route.queryParams
.subscribe(params => {
const search = params.search || ''
logger('On route search change "%s".', search)
this.updateSearch(search)
})
}
private initSearchStream () {
this.searchStream = new Subject()
this.searchStream
.pipe(
debounceTime(200),
distinctUntilChanged()
)
.subscribe(() => {
logger('On search "%s".', this.searchValue)
this.setQueryParams(this.searchValue)
this.search.emit(this.searchValue)
})
}
private setQueryParams (search: string) {
const queryParams: Params = {}
if (search) Object.assign(queryParams, { search })
this.router.navigate([ ], { queryParams })
}
}

View File

@ -11,12 +11,12 @@
}
}
::ng-deep .dropdown-toggle::after {
.sub-menu ::ng-deep .dropdown-toggle::after {
position: relative;
top: 2px;
}
::ng-deep .dropdown-menu {
.sub-menu ::ng-deep .dropdown-menu {
margin-top: 0 !important;
}

View File

@ -11,13 +11,8 @@
>
<ng-template pTemplate="caption">
<div class="caption">
<div class="ml-auto has-feedback has-clear">
<input
type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
(keyup)="onSearch($event)"
>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
<div class="ml-auto">
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>
</ng-template>

View File

@ -1,16 +1,6 @@
@import '_variables';
@import '_mixins';
.caption {
justify-content: flex-end;
input {
@include peertube-input-text(250px);
flex-grow: 1;
}
}
.chip {
@include chip;
}

View File

@ -44,12 +44,12 @@ export class GenericAccountBlocklistComponent extends RestTable implements OnIni
: $localize`Account ${blockedAccount.nameWithHost} unmuted by your instance.`
)
this.loadData()
this.reloadData()
}
)
}
protected loadData () {
protected reloadData () {
const operation = this.mode === BlocklistComponentType.Account
? this.blocklistService.getUserAccountBlocklist({
pagination: this.pagination,

View File

@ -39,27 +39,10 @@
}
}
.input-group {
@include peertube-input-group(300px);
.dropdown-toggle::after {
margin-left: 0;
}
}
.chip {
@include chip;
}
.caption {
justify-content: flex-end;
input {
@include peertube-input-text(250px);
flex-grow: 1;
}
}
my-action-dropdown.show {
::ng-deep .dropdown-root {
display: block !important;

View File

@ -4,8 +4,9 @@
</h1>
<p-table
[value]="blockedServers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
[value]="blockedServers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onPage)="onPage($event)"
[lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted instances"
>
@ -18,13 +19,8 @@
</a>
</div>
<div class="ml-auto has-feedback has-clear">
<input
type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
(keyup)="onSearch($event)"
>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
<span class="sr-only" i18n>Clear filters</span>
<div class="ml-auto">
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
</div>
</div>
</ng-template>

View File

@ -16,15 +16,6 @@ a {
}
}
.caption {
justify-content: flex-end;
input {
@include peertube-input-text(250px);
flex-grow: 1;
}
}
.unblock-button {
@include peertube-button;
@include grey-button;
@ -34,15 +25,6 @@ a {
@include create-button;
}
.caption {
justify-content: flex-end;
input {
@include peertube-input-text(250px);
flex-grow: 1;
}
}
.chip {
@include chip;
}

View File

@ -46,7 +46,7 @@ export class GenericServerBlocklistComponent extends RestTable implements OnInit
: $localize`Instance ${host} unmuted by your instance.`
)
this.loadData()
this.reloadData()
}
)
}
@ -69,13 +69,13 @@ export class GenericServerBlocklistComponent extends RestTable implements OnInit
: $localize`Instance ${domain} muted by your instance.`
)
this.loadData()
this.reloadData()
}
)
})
}
protected loadData () {
protected reloadData () {
const operation = this.mode === BlocklistComponentType.Account
? this.blocklistService.getUserServerBlocklist({
pagination: this.pagination,

View File

@ -1,9 +1,9 @@
<div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
<div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">{{ noResultMessage }}</div>
<div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()" class="videos">
<div class="video" *ngFor="let video of videos; let i = index; trackBy: videoById">
<div class="checkbox-container">
<div class="checkbox-container" *ngIf="enableSelection">
<my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="_selection[video.id]"></my-peertube-checkbox>
</div>

View File

@ -31,6 +31,9 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
@Input() pagination: ComponentPagination
@Input() titlePage: string
@Input() miniatureDisplayOptions: MiniatureDisplayOptions
@Input() noResultMessage = $localize`No results.`
@Input() enableSelection = true
@Input() loadOnInit = true
@Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>