From ff249f499ccca2e37757f338384e7ba44c906a69 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Dec 2017 11:15:19 +0100 Subject: Move video form inside a component --- .../src/app/shared/forms/form-validators/video.ts | 6 ++ .../+video-edit/shared/video-edit.component.html | 85 +++++++++++++++++++++ .../+video-edit/shared/video-edit.component.ts | 83 ++++++++++++++++++++ .../videos/+video-edit/shared/video-edit.module.ts | 7 +- .../videos/+video-edit/video-update.component.html | 88 +--------------------- .../videos/+video-edit/video-update.component.ts | 46 ++--------- .../videos/+video-watch/video-watch.component.ts | 10 +-- 7 files changed, 190 insertions(+), 135 deletions(-) create mode 100644 client/src/app/videos/+video-edit/shared/video-edit.component.html create mode 100644 client/src/app/videos/+video-edit/shared/video-edit.component.ts (limited to 'client/src') diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts index 65f11f5da..8e512e8c8 100644 --- a/client/src/app/shared/forms/form-validators/video.ts +++ b/client/src/app/shared/forms/form-validators/video.ts @@ -1,5 +1,11 @@ import { Validators } from '@angular/forms' +export type ValidatorMessage = { + [ id: string ]: { + [ error: string ]: string + } +} + export const VIDEO_NAME = { VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ], MESSAGES: { diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html new file mode 100644 index 000000000..e087b71a4 --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -0,0 +1,85 @@ +
+
+ + +
+ {{ formErrors.name }} +
+
+ +
+ + + +
+ {{ formErrors.privacy }} +
+
+ +
+ + +
+ +
+ + + +
+ {{ formErrors.category }} +
+
+ +
+ + + +
+ {{ formErrors.licence }} +
+
+ +
+ + + +
+ {{ formErrors.language }} +
+
+ +
+ (press enter to add the tag) + +
+ +
+ + + +
+ {{ formErrors.description }} +
+
+
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts new file mode 100644 index 000000000..5b1cc3f9c --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts @@ -0,0 +1,83 @@ +import { Component, Input, OnInit } from '@angular/core' +import { FormBuilder, FormControl, FormGroup } from '@angular/forms' +import { ActivatedRoute, Router } from '@angular/router' +import { NotificationsService } from 'angular2-notifications' +import { ServerService } from 'app/core' +import { VideoEdit } from 'app/shared/video/video-edit.model' +import 'rxjs/add/observable/forkJoin' +import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum' +import { + ValidatorMessage, + VIDEO_CATEGORY, + VIDEO_DESCRIPTION, + VIDEO_LANGUAGE, + VIDEO_LICENCE, + VIDEO_NAME, + VIDEO_PRIVACY, + VIDEO_TAGS +} from '../../../shared/forms/form-validators' + +@Component({ + selector: 'my-video-edit', + styleUrls: [ './video-edit.component.scss' ], + templateUrl: './video-edit.component.html' +}) + +export class VideoEditComponent implements OnInit { + @Input() form: FormGroup + @Input() formErrors: { [ id: string ]: string } = {} + @Input() validationMessages: ValidatorMessage = {} + @Input() videoPrivacies = [] + + tags: string[] = [] + videoCategories = [] + videoLicences = [] + videoLanguages = [] + video: VideoEdit + + tagValidators = VIDEO_TAGS.VALIDATORS + tagValidatorsMessages = VIDEO_TAGS.MESSAGES + + error: string = null + + constructor ( + private formBuilder: FormBuilder, + private route: ActivatedRoute, + private router: Router, + private notificationsService: NotificationsService, + private serverService: ServerService + ) { } + + updateForm () { + this.formErrors['name'] = '' + this.formErrors['privacy'] = '' + this.formErrors['category'] = '' + this.formErrors['licence'] = '' + this.formErrors['language'] = '' + this.formErrors['description'] = '' + + this.validationMessages['name'] = VIDEO_NAME.MESSAGES + this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES + this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES + this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES + this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES + this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES + + this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS)) + this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS)) + this.form.addControl('nsfw', new FormControl(false)) + this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS)) + this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS)) + this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS)) + this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS)) + this.form.addControl('tags', new FormControl('')) + } + + ngOnInit () { + this.updateForm() + + this.videoCategories = this.serverService.getVideoCategories() + this.videoLicences = this.serverService.getVideoLicences() + this.videoLanguages = this.serverService.getVideoLanguages() + } +} diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts index cdab694f9..c7ed8c351 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts +++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts @@ -5,6 +5,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs' import { MarkdownService, VideoDescriptionComponent } from '../../shared' import { SharedModule } from '../../../shared' +import { VideoEditComponent } from './video-edit.component' @NgModule({ imports: [ @@ -15,14 +16,16 @@ import { SharedModule } from '../../../shared' ], declarations: [ - VideoDescriptionComponent + VideoDescriptionComponent, + VideoEditComponent ], exports: [ TagInputModule, TabsModule, - VideoDescriptionComponent + VideoDescriptionComponent, + VideoEditComponent ], providers: [ diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html index b9c6139b2..c57f35da0 100644 --- a/client/src/app/videos/+video-edit/video-update.component.html +++ b/client/src/app/videos/+video-edit/video-update.component.html @@ -3,92 +3,12 @@

Update {{ video?.name }}

-
{{ error }}
-
-
- - -
- {{ formErrors.name }} -
-
- -
- - - -
- {{ formErrors.privacy }} -
-
- -
- - -
- -
- - -
- {{ formErrors.category }} -
-
- -
- - - -
- {{ formErrors.licence }} -
-
- -
- - - -
- {{ formErrors.language }} -
-
- -
- (press enter to add the tag) - -
- -
- - - -
- {{ formErrors.description }} -
-
+
this.onValueChanged(data)) } ngOnInit () { this.buildForm() - this.videoCategories = this.serverService.getVideoCategories() - this.videoLicences = this.serverService.getVideoLicences() - this.videoLanguages = this.serverService.getVideoLanguages() this.videoPrivacies = this.serverService.getVideoPrivacies() const uuid: string = this.route.snapshot.params['uuid'] - this.videoService.getVideo(uuid) .switchMap(video => { return this.videoService @@ -103,7 +69,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { video => { this.video = new VideoEdit(video) - // We cannot set private a video that was not private anymore + // We cannot set private a video that was not private if (video.privacy !== VideoPrivacy.PRIVATE) { const newVideoPrivacies = [] for (const p of this.videoPrivacies) { diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 3c6951403..87db023bf 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -11,12 +11,12 @@ import '../../../assets/player/peertube-videojs-plugin' import { AuthService, ConfirmService } from '../../core' import { VideoBlacklistService } from '../../shared' import { Account } from '../../shared/account/account.model' +import { VideoDetails } from '../../shared/video/video-details.model' import { Video } from '../../shared/video/video.model' import { MarkdownService } from '../shared' import { VideoDownloadComponent } from './video-download.component' import { VideoReportComponent } from './video-report.component' import { VideoShareComponent } from './video-share.component' -import { VideoDetails } from '../../shared/video/video-details.model' @Component({ selector: 'my-video-watch', @@ -199,14 +199,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.authService.isLoggedIn() } - canUserUpdateVideo () { - return this.video.isUpdatableBy(this.authService.getUser()) - } - - isVideoRemovable () { - return this.video.isRemovableBy(this.authService.getUser()) - } - isVideoBlacklistable () { return this.video.isBlackistableBy(this.authService.getUser()) } -- cgit v1.2.3