From 17119e4a546522468878cf115558b17949ab50d0 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 12 Nov 2020 15:28:54 +0100 Subject: Reorganize left menu and account menu Add my-settings and my-library in left menu Move administration below my-library Split account menu: my-setting and my library --- .../my-accept-ownership.component.html | 36 +++++++++ .../my-accept-ownership.component.scss | 14 ++++ .../my-accept-ownership.component.ts | 72 +++++++++++++++++ .../my-ownership/my-ownership.component.html | 90 ++++++++++++++++++++++ .../my-ownership/my-ownership.component.scss | 71 +++++++++++++++++ .../my-ownership/my-ownership.component.ts | 81 +++++++++++++++++++ 6 files changed, 364 insertions(+) create mode 100644 client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html create mode 100644 client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss create mode 100644 client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts create mode 100644 client/src/app/+my-library/my-ownership/my-ownership.component.html create mode 100644 client/src/app/+my-library/my-ownership/my-ownership.component.scss create mode 100644 client/src/app/+my-library/my-ownership/my-ownership.component.ts (limited to 'client/src/app/+my-library/my-ownership') diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html new file mode 100644 index 000000000..def1cbab6 --- /dev/null +++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html @@ -0,0 +1,36 @@ + +
+

Accept ownership

+ + +
+ +
+
+ +
+ +
+
{{ formErrors.channel }}
+
+
+ +
+
+ + + +
+
+ diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss new file mode 100644 index 000000000..c7357f62d --- /dev/null +++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss @@ -0,0 +1,14 @@ +@import '_variables'; +@import '_mixins'; + +select { + display: block; +} + +.peertube-select-container { + @include peertube-select-container(350px); +} + +.form-group { + margin: 20px 0; +} \ No newline at end of file diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts new file mode 100644 index 000000000..587a455f0 --- /dev/null +++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts @@ -0,0 +1,72 @@ +import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' +import { AuthService, Notifier } from '@app/core' +import { OWNERSHIP_CHANGE_CHANNEL_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators' +import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { VideoChannelService, VideoOwnershipService } from '@app/shared/shared-main' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { VideoChangeOwnership, VideoChannel } from '@shared/models' + +@Component({ + selector: 'my-accept-ownership', + templateUrl: './my-accept-ownership.component.html', + styleUrls: [ './my-accept-ownership.component.scss' ] +}) +export class MyAcceptOwnershipComponent extends FormReactive implements OnInit { + @Output() accepted = new EventEmitter() + + @ViewChild('modal', { static: true }) modal: ElementRef + + videoChangeOwnership: VideoChangeOwnership | undefined = undefined + + videoChannels: VideoChannel[] + + error: string = null + + constructor ( + protected formValidatorService: FormValidatorService, + private videoOwnershipService: VideoOwnershipService, + private notifier: Notifier, + private authService: AuthService, + private videoChannelService: VideoChannelService, + private modalService: NgbModal + ) { + super() + } + + ngOnInit () { + this.videoChannels = [] + + this.videoChannelService.listAccountVideoChannels(this.authService.getUser().account) + .subscribe(videoChannels => this.videoChannels = videoChannels.data) + + this.buildForm({ + channel: OWNERSHIP_CHANGE_CHANNEL_VALIDATOR + }) + } + + show (videoChangeOwnership: VideoChangeOwnership) { + this.videoChangeOwnership = videoChangeOwnership + this.modalService + .open(this.modal, { centered: true }) + .result + .then(() => this.acceptOwnership()) + .catch(() => this.videoChangeOwnership = undefined) + } + + acceptOwnership () { + const channel = this.form.value['channel'] + + const videoChangeOwnership = this.videoChangeOwnership + this.videoOwnershipService + .acceptOwnership(videoChangeOwnership.id, { channelId: channel }) + .subscribe( + () => { + this.notifier.success($localize`Ownership accepted`) + if (this.accepted) this.accepted.emit() + this.videoChangeOwnership = undefined + }, + + err => this.notifier.error(err.message) + ) + } +} diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html new file mode 100644 index 000000000..6bf562986 --- /dev/null +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html @@ -0,0 +1,90 @@ +

+ + My ownership changes +

+ + + + + Actions + Initiator + Video + + Created + + + Status + + + + + + + + + + + + + +
+ Avatar +
+ {{ videoChangeOwnership.initiatorAccount.displayName }} + {{ videoChangeOwnership.initiatorAccount.nameWithHost }} +
+
+ + + + + +
+
+ +
+
+
+ {{ videoChangeOwnership.video.name }} +
+
by {{ videoChangeOwnership.video.channel?.displayName }}
+
+
+ + + + {{ videoChangeOwnership.createdAt | date: 'short' }} + + + {{ videoChangeOwnership.status }} + + + + + + + +
+ No ownership change request found. +
+ + + + + + diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss new file mode 100644 index 000000000..7cac9c9f3 --- /dev/null +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss @@ -0,0 +1,71 @@ +@import 'miniature'; +@import 'mixins'; + +.chip { + @include chip; +} + +.badge { + @include table-badge; +} + +.video-table-video { + display: inline-flex; + + .video-table-video-image { + @include miniature-thumbnail; + + $image-height: 45px; + + height: $image-height; + width: #{(16/9) * $image-height}; + margin-right: 0.5rem; + border-radius: 2px; + border: none; + background: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + position: relative; + + img { + height: 100%; + width: 100%; + border-radius: 2px; + } + + span { + color: pvar(--inputPlaceholderColor); + } + + .video-table-video-image-label { + @include static-thumbnail-overlay; + position: absolute; + border-radius: 3px; + font-size: 10px; + padding: 0 3px; + line-height: 1.3; + bottom: 2px; + right: 2px; + } + } + + .video-table-video-text { + display: inline-flex; + flex-direction: column; + justify-content: center; + font-size: 90%; + color: pvar(--mainForegroundColor); + line-height: 1rem; + + div .glyphicon { + font-size: 80%; + color: gray; + margin-left: 0.1rem; + } + + div + div { + font-size: 80%; + } + } +} diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-ownership.component.ts new file mode 100644 index 000000000..e1aca65f6 --- /dev/null +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.ts @@ -0,0 +1,81 @@ +import { SortMeta } from 'primeng/api' +import { Component, OnInit, ViewChild } from '@angular/core' +import { Notifier, RestPagination, RestTable } from '@app/core' +import { Account, Actor, VideoOwnershipService } from '@app/shared/shared-main' +import { VideoChangeOwnership, VideoChangeOwnershipStatus } from '@shared/models' +import { MyAcceptOwnershipComponent } from './my-accept-ownership/my-accept-ownership.component' + +@Component({ + templateUrl: './my-ownership.component.html', + styleUrls: [ './my-ownership.component.scss' ] +}) +export class MyOwnershipComponent extends RestTable implements OnInit { + videoChangeOwnerships: VideoChangeOwnership[] = [] + totalRecords = 0 + sort: SortMeta = { field: 'createdAt', order: -1 } + pagination: RestPagination = { count: this.rowsPerPage, start: 0 } + + @ViewChild('myAcceptOwnershipComponent', { static: true }) myAccountAcceptOwnershipComponent: MyAcceptOwnershipComponent + + constructor ( + private notifier: Notifier, + private videoOwnershipService: VideoOwnershipService + ) { + super() + } + + ngOnInit () { + this.initialize() + } + + getIdentifier () { + return 'MyOwnershipComponent' + } + + getStatusClass (status: VideoChangeOwnershipStatus) { + switch (status) { + case VideoChangeOwnershipStatus.ACCEPTED: + return 'badge-green' + case VideoChangeOwnershipStatus.REFUSED: + return 'badge-red' + default: + return 'badge-yellow' + } + } + + switchToDefaultAvatar ($event: Event) { + ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() + } + + openAcceptModal (videoChangeOwnership: VideoChangeOwnership) { + this.myAccountAcceptOwnershipComponent.show(videoChangeOwnership) + } + + accepted () { + this.loadData() + } + + refuse (videoChangeOwnership: VideoChangeOwnership) { + this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id) + .subscribe( + () => this.loadData(), + err => this.notifier.error(err.message) + ) + } + + protected loadData () { + return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort) + .subscribe( + resultList => { + this.videoChangeOwnerships = resultList.data.map(change => ({ + ...change, + initiatorAccount: new Account(change.initiatorAccount), + nextOwnerAccount: new Account(change.nextOwnerAccount) + })) + this.totalRecords = resultList.total + }, + + err => this.notifier.error(err.message) + ) + } +} -- cgit v1.2.3