From 1fd61899eaea245a5844e33e21f04b2562f16e5e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 3 May 2021 11:06:19 +0200 Subject: Add ability to filter my videos by live --- .../abuse-list/abuse-list.component.html | 2 +- .../video-block-list.component.html | 20 +----- .../video-block-list/video-block-list.component.ts | 31 ++++----- .../video-comment-list.component.html | 20 +----- .../video-comment-list.component.ts | 12 ++++ .../users/user-list/user-list.component.html | 19 +----- .../users/user-list/user-list.component.scss | 22 +----- .../+admin/users/user-list/user-list.component.ts | 22 ++++-- .../my-account-abuses-list.component.html | 2 +- .../+my-library/my-videos/my-videos.component.html | 7 +- .../+my-library/my-videos/my-videos.component.ts | 40 ++++++----- client/src/app/core/rest/rest-table.ts | 72 +------------------- client/src/app/core/routing/index.ts | 1 + client/src/app/core/routing/route-filter.ts | 79 ++++++++++++++++++++++ .../shared-abuse-list/abuse-details.component.html | 12 ++-- .../shared-abuse-list/abuse-details.component.ts | 2 - .../abuse-list-table.component.html | 25 +------ .../abuse-list-table.component.ts | 25 ++++++- .../shared-actor-image/actor-avatar.component.ts | 2 +- .../advanced-input-filter.component.html | 22 ++++++ .../advanced-input-filter.component.scss | 10 +++ .../advanced-input-filter.component.ts | 27 ++++++++ client/src/app/shared/shared-forms/index.ts | 10 +-- .../app/shared/shared-forms/shared-form.module.ts | 9 ++- .../app/shared/shared-main/video/video.service.ts | 18 ++++- .../shared/shared-search/advanced-search.model.ts | 6 +- client/src/sass/primeng-custom.scss | 8 +-- 27 files changed, 284 insertions(+), 241 deletions(-) create mode 100644 client/src/app/core/routing/route-filter.ts create mode 100644 client/src/app/shared/shared-forms/advanced-input-filter.component.html create mode 100644 client/src/app/shared/shared-forms/advanced-input-filter.component.scss create mode 100644 client/src/app/shared/shared-forms/advanced-input-filter.component.ts (limited to 'client/src') diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html index 9a6c124e1..a9e0931f8 100644 --- a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html +++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html @@ -3,4 +3,4 @@ Reports - + diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html index c7275de1b..cf2466bdb 100644 --- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html +++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html @@ -13,25 +13,7 @@
-
-
-
- -
- -
-
Advanced block filters
- Automatic blocks - Manual blocks -
-
- - - Clear filters -
+
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts index d6aca10e7..dfd8dc745 100644 --- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts +++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts @@ -6,6 +6,7 @@ import { AfterViewInit, Component, OnInit } from '@angular/core' import { DomSanitizer } from '@angular/platform-browser' import { ActivatedRoute, Params, 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' import { VideoBlockService } from '@app/shared/shared-moderation' import { VideoBlacklist, VideoBlacklistType } from '@shared/models' @@ -24,6 +25,17 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV videoBlocklistActions: DropdownAction[][] = [] + inputFilters: AdvancedInputFilter[] = [ + { + queryParams: { 'search': 'type:auto' }, + label: $localize`Automatic blocks` + }, + { + queryParams: { 'search': 'type:manual' }, + label: $localize`Manual blocks` + } + ] + constructor ( protected route: ActivatedRoute, protected router: Router, @@ -111,25 +123,6 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV if (this.search) this.setTableFilter(this.search, false) } - /* Table filter functions */ - onBlockSearch (event: Event) { - this.onSearch(event) - this.setQueryParams((event.target as HTMLInputElement).value) - } - - setQueryParams (search: string) { - const queryParams: Params = {} - if (search) Object.assign(queryParams, { search }) - this.router.navigate([ '/admin/moderation/video-blocks/list' ], { queryParams }) - } - - resetTableFilter () { - this.setTableFilter('') - this.setQueryParams('') - this.resetSearch() - } - /* END Table filter functions */ - getIdentifier () { return 'VideoBlockListComponent' } diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html index b6cec9c51..5cc0ff137 100644 --- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html @@ -26,25 +26,7 @@
-
-
-
- -
- -
-
Advanced comments filters
- Local comments - Remote comments -
-
- - - Clear filters -
+
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts index 63493d00d..ebbbddb43 100644 --- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts @@ -2,6 +2,7 @@ import { SortMeta } from 'primeng/api' import { AfterViewInit, Component, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { AuthService, ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core' +import { AdvancedInputFilter } from '@app/shared/shared-forms' import { DropdownAction } from '@app/shared/shared-main' import { BulkService } from '@app/shared/shared-moderation' import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment' @@ -43,6 +44,17 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte selectedComments: VideoCommentAdmin[] = [] bulkCommentActions: DropdownAction[] = [] + inputFilters: AdvancedInputFilter[] = [ + { + queryParams: { 'search': 'local:true' }, + label: $localize`Local comments` + }, + { + queryParams: { 'search': 'local:false' }, + label: $localize`Remote comments` + } + ] + get authUser () { return this.auth.getUser() } diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index f84d3fd0c..7170d7019 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -22,24 +22,7 @@
-
-
-
- -
- -
-
Advanced user filters
- Banned users -
-
- - - Clear filters -
+
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index f18747ec3..db4979a51 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -11,6 +11,7 @@ tr.banned > td { .table-email { @include disable-default-a-behaviour; + color: pvar(--mainForegroundColor); } @@ -28,14 +29,6 @@ tr.banned > td { margin-left: 0.1rem; } -.caption { - justify-content: space-between; - - input { - @include peertube-input-text(250px); - } -} - p-tableCheckbox { position: relative; top: -2.5px; @@ -55,18 +48,7 @@ my-global-icon { .progress { @include progressbar($small: true); + width: auto; max-width: 100%; } - -.input-group { - @include peertube-input-group(300px); - - input { - flex: 1; - } - - .dropdown-toggle::after { - margin-left: 0; - } -} diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts index 339e18206..435bc17d7 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.ts +++ b/client/src/app/+admin/users/user-list/user-list.component.ts @@ -1,8 +1,9 @@ import { SortMeta } from 'primeng/api' -import { Component, OnInit, ViewChild } from '@angular/core' -import { ActivatedRoute, Params, Router } from '@angular/router' +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core' -import { Account, DropdownAction } from '@app/shared/shared-main' +import { AdvancedInputFilter } from '@app/shared/shared-forms' +import { DropdownAction } from '@app/shared/shared-main' import { UserBanModalComponent } from '@app/shared/shared-moderation' import { ServerConfig, User, UserRole } from '@shared/models' @@ -18,19 +19,28 @@ type UserForList = User & { templateUrl: './user-list.component.html', styleUrls: [ './user-list.component.scss' ] }) -export class UserListComponent extends RestTable implements OnInit { +export class UserListComponent extends RestTable implements OnInit, AfterViewInit { @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent users: User[] = [] + totalRecords = 0 sort: SortMeta = { field: 'createdAt', order: 1 } pagination: RestPagination = { count: this.rowsPerPage, start: 0 } + highlightBannedUsers = false selectedUsers: User[] = [] bulkUserActions: DropdownAction[][] = [] columns: { id: string, label: string }[] + inputFilters: AdvancedInputFilter[] = [ + { + queryParams: { 'search': 'banned:true' }, + label: $localize`Banned users` + } + ] + private _selectedColumns: string[] private serverConfig: ServerConfig @@ -117,6 +127,10 @@ export class UserListComponent extends RestTable implements OnInit { this.columns.push({ id: 'lastLoginDate', label: 'Last login' }) } + ngAfterViewInit () { + if (this.search) this.setTableFilter(this.search, false) + } + getIdentifier () { return 'UserListComponent' } diff --git a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html index 59ca61be6..e83b59019 100644 --- a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html +++ b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html @@ -3,4 +3,4 @@ Reports - + diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html index e9f436378..7c1cdb511 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.html +++ b/client/src/app/+my-library/my-videos/my-videos.component.html @@ -19,12 +19,7 @@
-
- - - Clear filters -
+
- - Clear filters -
+
@@ -171,7 +150,7 @@ - + diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts index 8b5771237..f393c0d1e 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts @@ -14,6 +14,7 @@ import { AbuseState, AdminAbuse } from '@shared/models' 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') @@ -24,7 +25,6 @@ const logger = debug('peertube:moderation:AbuseListTableComponent') }) export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit { @Input() viewType: 'admin' | 'user' - @Input() baseRoute: string @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent @@ -36,6 +36,29 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV abuseActions: DropdownAction[][] = [] + inputFilters: AdvancedInputFilter[] = [ + { + queryParams: { 'search': 'state:pending' }, + label: $localize`Unsolved reports` + }, + { + queryParams: { 'search': 'state:accepted' }, + label: $localize`Accepted reports` + }, + { + queryParams: { 'search': 'state:rejected' }, + label: $localize`Refused reports` + }, + { + queryParams: { 'search': 'videoIs:blacklisted' }, + label: $localize`Reports with blocked videos` + }, + { + queryParams: { 'search': 'videoIs:deleted' }, + label: $localize`Reports with deleted videos` + } + ] + constructor ( protected route: ActivatedRoute, protected router: Router, diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts index e4efbe475..835e15110 100644 --- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts @@ -98,7 +98,7 @@ export class ActorAvatarComponent { jkl: 'gray', mno: 'yellow', pqr: 'orange', - stv: 'red', + stvu: 'red', wxyz: 'dark-blue' } diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html new file mode 100644 index 000000000..03c4f127b --- /dev/null +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html @@ -0,0 +1,22 @@ +
+
+
+ +
+ +
+
Advanced filters
+ + + {{ filter.label }} + + +
+
+ + + Clear filters +
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss new file mode 100644 index 000000000..7c2198927 --- /dev/null +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss @@ -0,0 +1,10 @@ +@import '_variables'; +@import '_mixins'; + +input { + @include peertube-input-text(250px); +} + +.input-group-text { + background-color: transparent; +} diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts new file mode 100644 index 000000000..394090751 --- /dev/null +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts @@ -0,0 +1,27 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core' +import { Params } from '@angular/router' + +export type AdvancedInputFilter = { + label: string + queryParams: Params +} + +@Component({ + selector: 'my-advanced-input-filter', + templateUrl: './advanced-input-filter.component.html', + styleUrls: [ './advanced-input-filter.component.scss' ] +}) +export class AdvancedInputFilterComponent { + @Input() filters: AdvancedInputFilter[] = [] + + @Output() resetTableFilter = new EventEmitter() + @Output() search = new EventEmitter() + + onSearch (event: Event) { + this.search.emit(event) + } + + onResetTableFilter () { + this.resetTableFilter.emit() + } +} diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts index 1d859b991..727416a40 100644 --- a/client/src/app/shared/shared-forms/index.ts +++ b/client/src/app/shared/shared-forms/index.ts @@ -1,12 +1,14 @@ -export * from './form-validator.service' +export * from './advanced-input-filter.component' export * from './form-reactive' -export * from './select' -export * from './input-toggle-hidden.component' +export * from './form-validator.service' +export * from './form-validator.service' export * from './input-switch.component' +export * from './input-toggle-hidden.component' export * from './markdown-textarea.component' export * from './peertube-checkbox.component' export * from './preview-upload.component' export * from './reactive-file.component' +export * from './select' +export * from './shared-form.module' export * from './textarea-autoresize.directive' export * from './timestamp-input.component' -export * from './shared-form.module' diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts index 9bdd138a1..5417f7342 100644 --- a/client/src/app/shared/shared-forms/shared-form.module.ts +++ b/client/src/app/shared/shared-forms/shared-form.module.ts @@ -5,6 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { NgSelectModule } from '@ng-select/ng-select' import { SharedGlobalIconModule } from '../shared-icons' import { SharedMainModule } from '../shared-main/shared-main.module' +import { AdvancedInputFilterComponent } from './advanced-input-filter.component' import { DynamicFormFieldComponent } from './dynamic-form-field.component' import { FormValidatorService } from './form-validator.service' import { InputSwitchComponent } from './input-switch.component' @@ -52,7 +53,9 @@ import { TimestampInputComponent } from './timestamp-input.component' SelectCheckboxComponent, SelectCustomValueComponent, - DynamicFormFieldComponent + DynamicFormFieldComponent, + + AdvancedInputFilterComponent ], exports: [ @@ -78,7 +81,9 @@ import { TimestampInputComponent } from './timestamp-input.component' SelectCheckboxComponent, SelectCustomValueComponent, - DynamicFormFieldComponent + DynamicFormFieldComponent, + + AdvancedInputFilterComponent ], providers: [ diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts index 0b708b692..668e51f73 100644 --- a/client/src/app/shared/shared-main/video/video.service.ts +++ b/client/src/app/shared/shared-main/video/video.service.ts @@ -124,7 +124,23 @@ export class VideoService implements VideosProvider { let params = new HttpParams() params = this.restService.addRestGetParams(params, pagination, sort) - params = this.restService.addObjectParams(params, { search }) + + if (search) { + const filters = this.restService.parseQueryStringFilter(search, { + isLive: { + prefix: 'isLive:', + isBoolean: true, + handler: v => { + if (v === 'true') return v + if (v === 'false') return v + + return undefined + } + } + }) + + params = this.restService.addObjectParams(params, filters) + } return this.authHttp .get>(UserService.BASE_USERS_URL + 'me/videos', { params }) diff --git a/client/src/app/shared/shared-search/advanced-search.model.ts b/client/src/app/shared/shared-search/advanced-search.model.ts index 30badc8fa..0e3924841 100644 --- a/client/src/app/shared/shared-search/advanced-search.model.ts +++ b/client/src/app/shared/shared-search/advanced-search.model.ts @@ -1,4 +1,4 @@ -import { NSFWQuery, SearchTargetType } from '@shared/models' +import { BooleanBothQuery, SearchTargetType } from '@shared/models' export class AdvancedSearch { startDate: string // ISO 8601 @@ -7,7 +7,7 @@ export class AdvancedSearch { originallyPublishedStartDate: string // ISO 8601 originallyPublishedEndDate: string // ISO 8601 - nsfw: NSFWQuery + nsfw: BooleanBothQuery categoryOneOf: string @@ -33,7 +33,7 @@ export class AdvancedSearch { endDate?: string originallyPublishedStartDate?: string originallyPublishedEndDate?: string - nsfw?: NSFWQuery + nsfw?: BooleanBothQuery categoryOneOf?: string licenceOneOf?: string languageOneOf?: string diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 1abcd30e4..6a4d89dff 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -9,6 +9,10 @@ input[type=button] { border-radius: inherit; } +p-table .p-datatable-header .caption { + margin-bottom: 15px; +} + // Taken from old nova light theme body .p-disabled { @@ -512,10 +516,6 @@ p-table { .left-buttons { padding-left: 15px; } - - .input-group-text { - background-color: transparent; - } } } -- cgit v1.2.3