diff options
author | Gaƫtan Rizio <gaetan@rizio.fr> | 2018-09-04 08:57:13 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-09-04 08:57:13 +0200 |
commit | 74d63469355bad731cdd32defdc85913df3cbd5c (patch) | |
tree | 5e7a9033a507fd69c554ddc7cc6ce3f7a6416ca1 /client/src/app/+my-account/my-account-videos | |
parent | 2303a803aa19c2857efac9f2af2223ccae5757e2 (diff) | |
download | PeerTube-74d63469355bad731cdd32defdc85913df3cbd5c.tar.gz PeerTube-74d63469355bad731cdd32defdc85913df3cbd5c.tar.zst PeerTube-74d63469355bad731cdd32defdc85913df3cbd5c.zip |
Users can change ownership of their video [#510] (#888)
* [#510] Create a new route to get the list of user names
To be able to transfer ownership to a user,
we need to be able to select him from the list of users.
Because the list could be too big, we add a autocomplete feature.
This commit does the following:
* Add a API endpoint to get a list of user names by searching its name
* [#510] The user can choose the next owner of the video
To be able to transfer ownership to a user,
we need the owner to be able to select the user.
The server can autocomplete the name of the user to give the ownership.
We add a dialog for the user to actually select it.
This commit does the following:
* Create a modal for the owner to select the next one
* Opens this modal with a button into the menu *more*
* Make the dependency injection
* [#510] When the user choose the next owner, create a request in database
For the change of ownership to happen, we need to store the temporary requests.
When the user make the request, save it to database.
This commit does the following:
* Create the model to persist change ownership requests
* Add an API to manage ownership operations
* Add a route to persist an ownership request
* [#510] A user can fetch its ownership requests sent to him
To be able to accept or refuse a change of ownership,
the user must be able to fetch them.
This commit does the following:
* Add an API to list ownership for a user
* Add the query to database model
* [#510] A user can validate an ownership requests sent to him - server
The user can accept or refuse any ownership request that was sent to him.
This commit focus only on the server part.
This commit does the following:
* Add an API for the user to accept or refuse a video ownership
* Add validators to ensure security access
* Add a query to load a specific video change ownership request
* [#510] A user can validate an ownership requests sent to him - web
The user can accept or refuse any ownership request that was sent to him.
This commit focus only on the web part.
This commit does the following:
* Add a page to list user ownership changes
* Add actions to accept or refuse them
* When accepting, show a modal requiring the channel to send the video
* Correct lint - to squash
* [#510] PR reviews - to squash
This commit does the following:
* Search parameter for user autocompletion is required from middleware directly
* [#510] PR reviews - to squash with creation in database commit
This commit does the following:
* Add the status attribute in model
* Set this attribute on instance creation
* Use AccountModel method `loadLocalByName`
* [#510] PR reviews - to squash with fetch ownership
This commit does the following:
* Add the scope `FULL` for database queries with includes
* Add classic pagination middlewares
* [#510] PR reviews - to squash with ownership validation - server
This commit does the following:
* Add a middleware to validate whether a user can validate an ownership
* Change the ownership status instead of deleting the row
* [#510] PR reviews - to squash with ownership validation - client
This commit does the following:
* Correct indentation of html files with two-spaces indentation
* Use event emitter instead of function for accept event
* Update the sort of ownership change table for a decreasing order by creation date
* Add the status in ownership change table
* Use classic method syntax
* code style - to squash
* Add new user right - to squash
* Move the change to my-account instead of video-watch - to squash
As requested in pull-request, move the action to change ownership into my videos page.
The rest of the logic was not really changed.
This commit does the following:
- Move the modal into my video page
- Create the generic component `button` to keep some styles and logic
* [#510] Add tests for the new feature
To avoid regression, we add tests for all api of ownership change.
This commit does the following:
- Create an end-to-end test for ownership change
- Divide it to one test per request
* [#510] Do not send twice the same request to avoid spam
We can send several time the same request to change ownership.
However, it will spam the user.
To avoid this, we do not save a request already existing in database.
This commit does the following:
- Check whether the request exist in database
- Add tests to verify this new condition
* [#510] Change icons
Change icons so they remains logic with the rest of the application.
This commit does the following:
- Add svg for missing icons
- Add icons in `my-button` component
- Use these new icons
* [#510] Add control about the user quota
The user should be able to accept a new video only if his quota allows it.
This commit does the following:
- Update the middleware to control the quota
- Add tests verifying the control
* Correct merge
- Use new modal system
- Move button to new directory `buttons`
* PR reviews - to squash
Diffstat (limited to 'client/src/app/+my-account/my-account-videos')
6 files changed, 137 insertions, 7 deletions
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index 8a6cb5c32..276d01408 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html | |||
@@ -42,7 +42,15 @@ | |||
42 | <my-delete-button (click)="deleteVideo(video)"></my-delete-button> | 42 | <my-delete-button (click)="deleteVideo(video)"></my-delete-button> |
43 | 43 | ||
44 | <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button> | 44 | <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button> |
45 | |||
46 | <my-button i18n label="Change ownership" | ||
47 | className="action-button-change-ownership" | ||
48 | icon="icon-im-with-her" | ||
49 | (click)="changeOwnership($event, video)" | ||
50 | ></my-button> | ||
45 | </div> | 51 | </div> |
46 | </div> | 52 | </div> |
47 | </div> | 53 | </div> |
48 | </div> | 54 | </div> |
55 | |||
56 | <my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership> \ No newline at end of file | ||
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index cd805be73..8d0dec07d 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss | |||
@@ -35,12 +35,6 @@ | |||
35 | } | 35 | } |
36 | } | 36 | } |
37 | 37 | ||
38 | /deep/ .action-button { | ||
39 | &.action-button-delete { | ||
40 | margin-right: 10px; | ||
41 | } | ||
42 | } | ||
43 | |||
44 | .video { | 38 | .video { |
45 | @include row-blocks; | 39 | @include row-blocks; |
46 | 40 | ||
@@ -96,6 +90,10 @@ | |||
96 | 90 | ||
97 | .video-buttons { | 91 | .video-buttons { |
98 | min-width: 190px; | 92 | min-width: 190px; |
93 | |||
94 | *:not(:last-child) { | ||
95 | margin-right: 10px; | ||
96 | } | ||
99 | } | 97 | } |
100 | } | 98 | } |
101 | 99 | ||
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts index 01e1ef1da..7560f0128 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | import { from as observableFrom, Observable } from 'rxjs' | 1 | import { from as observableFrom, Observable } from 'rxjs' |
2 | import { concatAll, tap } from 'rxjs/operators' | 2 | import { concatAll, tap } from 'rxjs/operators' |
3 | import { Component, OnDestroy, OnInit, Inject, LOCALE_ID } from '@angular/core' | 3 | import { Component, OnDestroy, OnInit, Inject, LOCALE_ID, ViewChild } from '@angular/core' |
4 | import { ActivatedRoute, Router } from '@angular/router' | 4 | import { ActivatedRoute, Router } from '@angular/router' |
5 | import { Location } from '@angular/common' | 5 | import { Location } from '@angular/common' |
6 | import { immutableAssign } from '@app/shared/misc/utils' | 6 | import { immutableAssign } from '@app/shared/misc/utils' |
@@ -14,6 +14,7 @@ import { VideoService } from '../../shared/video/video.service' | |||
14 | import { I18n } from '@ngx-translate/i18n-polyfill' | 14 | import { I18n } from '@ngx-translate/i18n-polyfill' |
15 | import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos' | 15 | import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos' |
16 | import { ScreenService } from '@app/shared/misc/screen.service' | 16 | import { ScreenService } from '@app/shared/misc/screen.service' |
17 | import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component' | ||
17 | 18 | ||
18 | @Component({ | 19 | @Component({ |
19 | selector: 'my-account-videos', | 20 | selector: 'my-account-videos', |
@@ -33,6 +34,8 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni | |||
33 | protected baseVideoWidth = -1 | 34 | protected baseVideoWidth = -1 |
34 | protected baseVideoHeight = 155 | 35 | protected baseVideoHeight = 155 |
35 | 36 | ||
37 | @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent | ||
38 | |||
36 | constructor ( | 39 | constructor ( |
37 | protected router: Router, | 40 | protected router: Router, |
38 | protected route: ActivatedRoute, | 41 | protected route: ActivatedRoute, |
@@ -133,6 +136,11 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni | |||
133 | ) | 136 | ) |
134 | } | 137 | } |
135 | 138 | ||
139 | changeOwnership (event: Event, video: Video) { | ||
140 | event.preventDefault() | ||
141 | this.videoChangeOwnershipModal.show(video) | ||
142 | } | ||
143 | |||
136 | getStateLabel (video: Video) { | 144 | getStateLabel (video: Video) { |
137 | let suffix: string | 145 | let suffix: string |
138 | 146 | ||
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html new file mode 100644 index 000000000..69b198faa --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html | |||
@@ -0,0 +1,31 @@ | |||
1 | <ng-template #modal let-close="close" let-dismiss="dismiss"> | ||
2 | <div class="modal-header"> | ||
3 | <h4 i18n class="modal-title">Change ownership</h4> | ||
4 | <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span> | ||
5 | </div> | ||
6 | |||
7 | <div class="modal-body" [formGroup]="form"> | ||
8 | <div class="form-group"> | ||
9 | <label i18n for="next-ownership-username">Select the next owner</label> | ||
10 | <p-autoComplete formControlName="username" [suggestions]="usernamePropositions" | ||
11 | (completeMethod)="search($event)" id="next-ownership-username"></p-autoComplete> | ||
12 | <div *ngIf="formErrors.username" class="form-error"> | ||
13 | {{ formErrors.username }} | ||
14 | </div> | ||
15 | </div> | ||
16 | </div> | ||
17 | |||
18 | <div class="modal-footer inputs"> | ||
19 | <div class="form-group inputs"> | ||
20 | <span i18n class="action-button action-button-cancel" (click)="dismiss()"> | ||
21 | Cancel | ||
22 | </span> | ||
23 | |||
24 | <input | ||
25 | type="submit" i18n-value value="Submit" class="action-button-submit" | ||
26 | [disabled]="!form.valid" | ||
27 | (click)="close()" | ||
28 | /> | ||
29 | </div> | ||
30 | </div> | ||
31 | </ng-template> | ||
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss new file mode 100644 index 000000000..a79fec179 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss | |||
@@ -0,0 +1,10 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | p-autocomplete { | ||
5 | display: block; | ||
6 | } | ||
7 | |||
8 | .form-group { | ||
9 | margin: 20px 0; | ||
10 | } \ No newline at end of file | ||
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts new file mode 100644 index 000000000..0aa4c32ee --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts | |||
@@ -0,0 +1,75 @@ | |||
1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' | ||
2 | import { NotificationsService } from 'angular2-notifications' | ||
3 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
4 | import { FormReactive, UserService } from '../../../shared/index' | ||
5 | import { Video } from '@app/shared/video/video.model' | ||
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
7 | import { FormValidatorService, VideoChangeOwnershipValidatorsService } from '@app/shared' | ||
8 | import { VideoOwnershipService } from '@app/shared/video-ownership' | ||
9 | |||
10 | @Component({ | ||
11 | selector: 'my-video-change-ownership', | ||
12 | templateUrl: './video-change-ownership.component.html', | ||
13 | styleUrls: [ './video-change-ownership.component.scss' ] | ||
14 | }) | ||
15 | export class VideoChangeOwnershipComponent extends FormReactive implements OnInit { | ||
16 | @ViewChild('modal') modal: ElementRef | ||
17 | |||
18 | usernamePropositions: string[] | ||
19 | |||
20 | error: string = null | ||
21 | |||
22 | private video: Video | undefined = undefined | ||
23 | |||
24 | constructor ( | ||
25 | protected formValidatorService: FormValidatorService, | ||
26 | private videoChangeOwnershipValidatorsService: VideoChangeOwnershipValidatorsService, | ||
27 | private videoOwnershipService: VideoOwnershipService, | ||
28 | private notificationsService: NotificationsService, | ||
29 | private userService: UserService, | ||
30 | private modalService: NgbModal, | ||
31 | private i18n: I18n | ||
32 | ) { | ||
33 | super() | ||
34 | } | ||
35 | |||
36 | ngOnInit () { | ||
37 | this.buildForm({ | ||
38 | username: this.videoChangeOwnershipValidatorsService.USERNAME | ||
39 | }) | ||
40 | this.usernamePropositions = [] | ||
41 | } | ||
42 | |||
43 | show (video: Video) { | ||
44 | this.video = video | ||
45 | this.modalService | ||
46 | .open(this.modal) | ||
47 | .result | ||
48 | .then(() => this.changeOwnership()) | ||
49 | .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing | ||
50 | } | ||
51 | |||
52 | search (event) { | ||
53 | const query = event.query | ||
54 | this.userService.autocomplete(query) | ||
55 | .subscribe( | ||
56 | (usernames) => { | ||
57 | this.usernamePropositions = usernames | ||
58 | }, | ||
59 | |||
60 | err => this.notificationsService.error('Error', err.message) | ||
61 | ) | ||
62 | } | ||
63 | |||
64 | changeOwnership () { | ||
65 | const username = this.form.value['username'] | ||
66 | |||
67 | this.videoOwnershipService | ||
68 | .changeOwnership(this.video.id, username) | ||
69 | .subscribe( | ||
70 | () => this.notificationsService.success(this.i18n('Success'), this.i18n('Ownership changed.')), | ||
71 | |||
72 | err => this.notificationsService.error(this.i18n('Error'), err.message) | ||
73 | ) | ||
74 | } | ||
75 | } | ||