Browse Source

Refactor search filters

tags/v3.2.0-rc.1
Chocobozzz 1 year ago
parent
commit
2e46eb9715
No known key found for this signature in database GPG Key ID: 583A612D890159BE
47 changed files with 280 additions and 494 deletions
  1. +5
    -9
      client/src/app/+admin/follows/followers-list/followers-list.component.html
  2. +0
    -8
      client/src/app/+admin/follows/followers-list/followers-list.component.scss
  3. +3
    -3
      client/src/app/+admin/follows/followers-list/followers-list.component.ts
  4. +4
    -8
      client/src/app/+admin/follows/following-list/following-list.component.html
  5. +0
    -8
      client/src/app/+admin/follows/following-list/following-list.component.scss
  6. +3
    -3
      client/src/app/+admin/follows/following-list/following-list.component.ts
  7. +3
    -3
      client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
  8. +5
    -9
      client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
  9. +4
    -3
      client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
  10. +0
    -17
      client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
  11. +6
    -11
      client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
  12. +4
    -3
      client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
  13. +0
    -17
      client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
  14. +4
    -11
      client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
  15. +3
    -3
      client/src/app/+admin/system/jobs/jobs.component.ts
  16. +4
    -4
      client/src/app/+admin/users/user-list/user-list.component.html
  17. +7
    -12
      client/src/app/+admin/users/user-list/user-list.component.ts
  18. +1
    -6
      client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
  19. +15
    -31
      client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
  20. +13
    -19
      client/src/app/+my-library/my-history/my-history.component.html
  21. +40
    -35
      client/src/app/+my-library/my-history/my-history.component.ts
  22. +3
    -3
      client/src/app/+my-library/my-ownership/my-ownership.component.ts
  23. +1
    -6
      client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
  24. +1
    -0
      client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
  25. +9
    -26
      client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
  26. +1
    -1
      client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
  27. +1
    -6
      client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
  28. +14
    -31
      client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts
  29. +2
    -2
      client/src/app/+my-library/my-videos/my-videos.component.html
  30. +10
    -11
      client/src/app/+my-library/my-videos/my-videos.component.ts
  31. +10
    -9
      client/src/app/core/rest/rest-table.ts
  32. +0
    -1
      client/src/app/core/routing/index.ts
  33. +0
    -79
      client/src/app/core/routing/route-filter.ts
  34. +4
    -3
      client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
  35. +7
    -12
      client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
  36. +5
    -3
      client/src/app/shared/shared-forms/advanced-input-filter.component.html
  37. +69
    -8
      client/src/app/shared/shared-forms/advanced-input-filter.component.ts
  38. +2
    -2
      client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
  39. +2
    -7
      client/src/app/shared/shared-moderation/account-blocklist.component.html
  40. +0
    -10
      client/src/app/shared/shared-moderation/account-blocklist.component.scss
  41. +2
    -2
      client/src/app/shared/shared-moderation/account-blocklist.component.ts
  42. +0
    -17
      client/src/app/shared/shared-moderation/moderation.scss
  43. +5
    -9
      client/src/app/shared/shared-moderation/server-blocklist.component.html
  44. +0
    -18
      client/src/app/shared/shared-moderation/server-blocklist.component.scss
  45. +3
    -3
      client/src/app/shared/shared-moderation/server-blocklist.component.ts
  46. +2
    -2
      client/src/app/shared/shared-video-miniature/videos-selection.component.html
  47. +3
    -0
      client/src/app/shared/shared-video-miniature/videos-selection.component.ts

+ 5
- 9
client/src/app/+admin/follows/followers-list/followers-list.component.html 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>


+ 0
- 8
client/src/app/+admin/follows/followers-list/followers-list.component.scss 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;


+ 3
- 3
client/src/app/+admin/follows/followers-list/followers-list.component.ts 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 => {


+ 4
- 8
client/src/app/+admin/follows/following-list/following-list.component.html 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>


+ 0
- 8
client/src/app/+admin/follows/following-list/following-list.component.scss View File

@@ -16,14 +16,6 @@ a {
}
}

.caption {
justify-content: flex-end;

input {
@include peertube-input-text(250px);
}
}

.follow-button {
@include create-button;
}

+ 3
- 3
client/src/app/+admin/follows/following-list/following-list.component.ts 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 => {


+ 3
- 3
client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts 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,


+ 5
- 9
client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html 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>


+ 4
- 3
client/src/app/+admin/moderation/video-block-list/video-block-list.component.html 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>


+ 0
- 17
client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss 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;
}

+ 6
- 11
client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts 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,


+ 4
- 3
client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html 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>


+ 0
- 17
client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss 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;


+ 4
- 11
client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts 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)
)


+ 3
- 3
client/src/app/+admin/system/jobs/jobs.component.ts 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



+ 4
- 4
client/src/app/+admin/users/user-list/user-list.component.html 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>


+ 7
- 12
client/src/app/+admin/users/user-list/user-list.component.ts 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({


+ 1
- 6
client/src/app/+my-library/+my-video-channels/my-video-channels.component.html 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>


+ 15
- 31
client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts 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



+ 13
- 19
client/src/app/+my-library/my-history/my-history.component.html 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>

+ 40
- 35
client/src/app/+my-library/my-history/my-history.component.ts 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>
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)


+ 3
- 3
client/src/app/+my-library/my-ownership/my-ownership.component.ts 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 => {


+ 1
- 6
client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html 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>


+ 1
- 0
client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss View File

@@ -58,6 +58,7 @@ input[type=text] {

.video-subscriptions-header {
margin-bottom: 30px;
display: flex;
}

@media screen and (max-width: $small-view) {


+ 9
- 26
client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts 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


+ 1
- 1
client/src/app/+my-library/my-video-imports/my-video-imports.component.ts 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 => {


+ 1
- 6
client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html 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>


+ 14
- 31
client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts 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



+ 2
- 2
client/src/app/+my-library/my-videos/my-videos.component.html 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>

+ 10
- 11
client/src/app/+my-library/my-videos/my-videos.component.ts 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()
}



+ 10
- 9
client/src/app/core/rest/rest-table.ts 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()


+ 0
- 1
client/src/app/core/routing/index.ts 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'

+ 0
- 79
client/src/app/core/routing/route-filter.ts 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 })
}
}

+ 4
- 3
client/src/app/shared/shared-abuse-list/abuse-list-table.component.html 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>


+ 7
- 12
client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts 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 = {


+ 5
- 3
client/src/app/shared/shared-forms/advanced-input-filter.component.html 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>

+ 69
- 8
client/src/app/shared/shared-forms/advanced-input-filter.component.ts 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>()

searchValue: string

private searchStream: Subject<string>

constructor (
private route: ActivatedRoute,
private router: Router
) { }

ngOnInit () {
this.initSearchStream()
this.listenToRouteSearchChange()
}

onSearch (event: Event) {
this.search.emit(event)
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 })
}
}

+ 2
- 2
client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss 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;
}



+ 2
- 7
client/src/app/shared/shared-moderation/account-blocklist.component.html 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>


+ 0
- 10
client/src/app/shared/shared-moderation/account-blocklist.component.scss 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;
}


+ 2
- 2
client/src/app/shared/shared-moderation/account-blocklist.component.ts 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,


+ 0
- 17
client/src/app/shared/shared-moderation/moderation.scss 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;


+ 5
- 9
client/src/app/shared/shared-moderation/server-blocklist.component.html 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>


+ 0
- 18
client/src/app/shared/shared-moderation/server-blocklist.component.scss 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;
}

+ 3
- 3
client/src/app/shared/shared-moderation/server-blocklist.component.ts 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,


+ 2
- 2
client/src/app/shared/shared-video-miniature/videos-selection.component.html 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>



+ 3
- 0
client/src/app/shared/shared-video-miniature/videos-selection.component.ts 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>>



Loading…
Cancel
Save