From 693263e936763a851e3c8c020e3739def8bd4eca Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 4 Apr 2019 10:44:18 +0200 Subject: Refactor videos selection components --- .../video-auto-blacklist-list.component.html | 48 ++++++---------- .../video-auto-blacklist-list.component.scss | 67 +++------------------- .../video-auto-blacklist-list.component.ts | 56 ++++++------------ 3 files changed, 42 insertions(+), 129 deletions(-) (limited to 'client/src/app/+admin/moderation') diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html index 5ef497fa7..62dde60bb 100644 --- a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html +++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html @@ -1,33 +1,19 @@ -
No results.
+ + + + + Unblacklist + + -
-
-
- -
+ + + - - - -
-
- - Cancel - - - - - Unblacklist - -
-
- - -
-
+
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss index e43a2aa7b..85ebc6041 100644 --- a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss +++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss @@ -1,67 +1,14 @@ @import '_variables'; @import '_mixins'; -.action-selection-mode { - width: 194px; - display: flex; - justify-content: flex-end; +.action-button-unblacklist-selection { + display: inline-block; - .action-selection-mode-child { - position: fixed; + @include peertube-button; + @include orange-button; + @include button-with-icon(21px); - .action-button { - display: inline-block; - } - - .action-button-cancel-selection { - @include peertube-button; - @include grey-button; - - margin-right: 10px; - } - - .action-button-unblacklist-selection { - @include peertube-button; - @include orange-button; - @include button-with-icon(21px); - - my-global-icon { - @include apply-svg-color(#fff); - } - } - } -} - -.video { - @include row-blocks; - - &:first-child { - margin-top: 47px; - } - - .checkbox-container { - display: flex; - align-items: center; - margin-right: 20px; - margin-left: 12px; - } - - my-video-miniature { - flex-grow: 1; - } -} - -@media screen and (max-width: $small-view) { - .video { - flex-direction: column; - height: auto; - - .checkbox-container { - display: none; - } - - my-button { - margin-top: 10px; - } + my-global-icon { + @include apply-svg-color(#fff); } } diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts index d66a6dcae..fb2962b47 100644 --- a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts +++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts @@ -1,29 +1,23 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' +import { Component } from '@angular/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { ActivatedRoute, Router } from '@angular/router' -import { AbstractVideoList } from '@app/shared/video/abstract-video-list' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' import { AuthService, Notifier, ServerService } from '@app/core' -import { Video } from '@shared/models' import { VideoBlacklistService } from '@app/shared' import { immutableAssign } from '@app/shared/misc/utils' import { ScreenService } from '@app/shared/misc/screen.service' import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component' +import { SelectionType } from '@app/shared/video/videos-selection.component' +import { Video } from '@app/shared/video/video.model' @Component({ selector: 'my-video-auto-blacklist-list', templateUrl: './video-auto-blacklist-list.component.html', styleUrls: [ './video-auto-blacklist-list.component.scss' ] }) -export class VideoAutoBlacklistListComponent extends AbstractVideoList implements OnInit, OnDestroy { +export class VideoAutoBlacklistListComponent { titlePage: string - checkedVideos: { [ id: number ]: boolean } = {} - pagination: ComponentPagination = { - currentPage: 1, - itemsPerPage: 5, - totalItems: null - } - + selection: SelectionType = {} miniatureDisplayOptions: MiniatureDisplayOptions = { date: true, views: false, @@ -34,6 +28,13 @@ export class VideoAutoBlacklistListComponent extends AbstractVideoList implement blacklistInfo: false, nsfw: true } + pagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 5, + totalItems: null + } + videos: Video[] = [] + getVideosObservableFunction = this.getVideosObservable.bind(this) constructor ( protected router: Router, @@ -45,42 +46,21 @@ export class VideoAutoBlacklistListComponent extends AbstractVideoList implement private i18n: I18n, private videoBlacklistService: VideoBlacklistService ) { - super() - this.titlePage = this.i18n('Auto-blacklisted videos') } - ngOnInit () { - super.ngOnInit() - } - - ngOnDestroy () { - super.ngOnDestroy() - } - - abortSelectionMode () { - this.checkedVideos = {} - } - - isInSelectionMode () { - return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true) - } - getVideosObservable (page: number) { const newPagination = immutableAssign(this.pagination, { currentPage: page }) return this.videoBlacklistService.getAutoBlacklistedAsVideoList(newPagination) } - generateSyndicationList () { - throw new Error('Method not implemented.') - } - removeVideoFromBlacklist (entry: Video) { this.videoBlacklistService.removeVideoFromBlacklist(entry.id).subscribe( () => { this.notifier.success(this.i18n('Video {{name}} removed from blacklist.', { name: entry.name })) - this.reloadVideos() + + this.videos = this.videos.filter(v => v.id !== entry.id) }, error => this.notifier.error(error.message) @@ -88,16 +68,16 @@ export class VideoAutoBlacklistListComponent extends AbstractVideoList implement } removeSelectedVideosFromBlacklist () { - const toReleaseVideosIds = Object.keys(this.checkedVideos) - .filter(k => this.checkedVideos[ k ] === true) + const toReleaseVideosIds = Object.keys(this.selection) + .filter(k => this.selection[ k ] === true) .map(k => parseInt(k, 10)) this.videoBlacklistService.removeVideoFromBlacklist(toReleaseVideosIds).subscribe( () => { this.notifier.success(this.i18n('{{num}} videos removed from blacklist.', { num: toReleaseVideosIds.length })) - this.abortSelectionMode() - this.reloadVideos() + this.selection = {} + this.videos = this.videos.filter(v => toReleaseVideosIds.includes(v.id) === false) }, error => this.notifier.error(error.message) -- cgit v1.2.3