From d18d64787b3ea174f7dc2740c8c8c9555625047e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 5 Jun 2018 10:58:45 +0200 Subject: Form validators refractoring --- .../+video-edit/shared/video-edit.component.ts | 71 ++++++++++------------ .../app/videos/+video-edit/video-add.component.ts | 16 +---- .../videos/+video-edit/video-update.component.ts | 15 +---- .../comment/video-comment-add.component.ts | 24 ++------ .../+video-watch/modal/video-report.component.ts | 21 ++----- 5 files changed, 49 insertions(+), 98 deletions(-) (limited to 'client/src/app/videos') 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 index ccfae5fcc..cd2a26ae3 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts @@ -1,7 +1,7 @@ import { Component, Input, OnInit } from '@angular/core' -import { FormBuilder, FormControl, FormGroup } from '@angular/forms' +import { FormGroup } from '@angular/forms' import { ActivatedRoute, Router } from '@angular/router' -import { VIDEO_IMAGE, VIDEO_SUPPORT } from '@app/shared' +import { VIDEO_SUPPORT } from '@app/shared' import { NotificationsService } from 'angular2-notifications' import { ServerService } from '../../../core/server' import { VIDEO_CHANNEL } from '../../../shared/forms/form-validators' @@ -17,6 +17,7 @@ import { } from '../../../shared/forms/form-validators/video' import { VideoEdit } from '../../../shared/video/video-edit.model' import { map } from 'rxjs/operators' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' @Component({ selector: 'my-video-edit', @@ -42,7 +43,7 @@ export class VideoEditComponent implements OnInit { error: string = null constructor ( - private formBuilder: FormBuilder, + private formValidatorService: FormValidatorService, private route: ActivatedRoute, private router: Router, private notificationsService: NotificationsService, @@ -50,41 +51,34 @@ export class VideoEditComponent implements OnInit { ) { } updateForm () { - this.formErrors['name'] = '' - this.formErrors['privacy'] = '' - this.formErrors['channelId'] = '' - this.formErrors['category'] = '' - this.formErrors['licence'] = '' - this.formErrors['language'] = '' - this.formErrors['description'] = '' - this.formErrors['thumbnailfile'] = '' - this.formErrors['previewfile'] = '' - this.formErrors['support'] = '' - - this.validationMessages['name'] = VIDEO_NAME.MESSAGES - this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES - this.validationMessages['channelId'] = VIDEO_CHANNEL.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.validationMessages['thumbnailfile'] = VIDEO_IMAGE.MESSAGES - this.validationMessages['previewfile'] = VIDEO_IMAGE.MESSAGES - this.validationMessages['support'] = VIDEO_SUPPORT.MESSAGES - - this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS)) - this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS)) - this.form.addControl('channelId', new FormControl('', VIDEO_CHANNEL.VALIDATORS)) - this.form.addControl('nsfw', new FormControl(false)) - this.form.addControl('commentsEnabled', new FormControl(true)) - 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([])) - this.form.addControl('thumbnailfile', new FormControl('')) - this.form.addControl('previewfile', new FormControl('')) - this.form.addControl('support', new FormControl('', VIDEO_SUPPORT.VALIDATORS)) + const defaultValues = { + nsfw: 'false', + commentsEnabled: 'true', + tags: [] + } + const obj = { + name: VIDEO_NAME, + privacy: VIDEO_PRIVACY, + channelId: VIDEO_CHANNEL, + nsfw: null, + commentsEnabled: null, + category: VIDEO_CATEGORY, + licence: VIDEO_LICENCE, + language: VIDEO_LANGUAGE, + description: VIDEO_DESCRIPTION, + tags: null, + thumbnailfile: null, + previewfile: null, + support: VIDEO_SUPPORT + } + + this.formValidatorService.updateForm( + this.form, + this.formErrors, + this.validationMessages, + obj, + defaultValues + ) // We will update the "support" field depending on the channel this.form.controls['channelId'] @@ -98,6 +92,7 @@ export class VideoEditComponent implements OnInit { // Not initialized yet if (isNaN(newChannelId)) return const newChannel = this.userVideoChannels.find(c => c.id === newChannelId) + if (!newChannel) return // First time we set the channel? if (isNaN(oldChannelId)) return this.updateSupportField(newChannel.support) diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index a615fd92c..332f757d7 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts @@ -1,6 +1,5 @@ import { HttpEventType, HttpResponse } from '@angular/common/http' import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' -import { FormBuilder, FormGroup } from '@angular/forms' import { Router } from '@angular/router' import { UserService } from '@app/shared' import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service' @@ -11,11 +10,11 @@ import { Subscription } from 'rxjs' import { VideoPrivacy } from '../../../../../shared/models/videos' import { AuthService, ServerService } from '../../core' import { FormReactive } from '../../shared' -import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message' import { populateAsyncUserVideoChannels } from '../../shared/misc/utils' import { VideoEdit } from '../../shared/video/video-edit.model' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' @Component({ selector: 'my-videos-add', @@ -39,10 +38,6 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy } videoFileName: string - form: FormGroup - formErrors: { [ id: string ]: string } = {} - validationMessages: ValidatorMessage = {} - userVideoChannels: { id: number, label: string, support: string }[] = [] userVideoQuotaUsed = 0 videoPrivacies = [] @@ -50,7 +45,7 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy firstStepChannelId = 0 constructor ( - private formBuilder: FormBuilder, + protected formValidatorService: FormValidatorService, private router: Router, private notificationsService: NotificationsService, private authService: AuthService, @@ -67,13 +62,8 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy return this.serverService.getConfig().video.file.extensions.join(',') } - buildForm () { - this.form = this.formBuilder.group({}) - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) - } - ngOnInit () { - this.buildForm() + this.buildForm({}) populateAsyncUserVideoChannels(this.authService, this.userVideoChannels) .then(() => this.firstStepChannelId = this.userVideoChannels[0].id) diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts index e37dd526f..0266164af 100644 --- a/client/src/app/videos/+video-edit/video-update.component.ts +++ b/client/src/app/videos/+video-edit/video-update.component.ts @@ -1,6 +1,5 @@ import { map, switchMap } from 'rxjs/operators' import { Component, OnInit } from '@angular/core' -import { FormBuilder, FormGroup } from '@angular/forms' import { ActivatedRoute, Router } from '@angular/router' import { LoadingBarService } from '@ngx-loading-bar/core' import { NotificationsService } from 'angular2-notifications' @@ -8,11 +7,11 @@ import { VideoPrivacy } from '../../../../../shared/models/videos' import { ServerService } from '../../core' import { AuthService } from '../../core/auth' import { FormReactive } from '../../shared' -import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message' import { VideoEdit } from '../../shared/video/video-edit.model' import { VideoService } from '../../shared/video/video.service' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { I18n } from '@ngx-translate/i18n-polyfill' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' @Component({ selector: 'my-videos-update', @@ -23,14 +22,11 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { video: VideoEdit isUpdatingVideo = false - form: FormGroup - formErrors: { [ id: string ]: string } = {} - validationMessages: ValidatorMessage = {} videoPrivacies = [] userVideoChannels = [] constructor ( - private formBuilder: FormBuilder, + protected formValidatorService: FormValidatorService, private route: ActivatedRoute, private router: Router, private notificationsService: NotificationsService, @@ -44,13 +40,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { super() } - buildForm () { - this.form = this.formBuilder.group({}) - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) - } - ngOnInit () { - this.buildForm() + this.buildForm({}) this.serverService.videoPrivaciesLoaded .subscribe(() => this.videoPrivacies = this.serverService.getVideoPrivacies()) diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts index 2ee5f5ef1..c70e544a3 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts @@ -1,5 +1,4 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' -import { FormBuilder, FormGroup } from '@angular/forms' import { NotificationsService } from 'angular2-notifications' import { Observable } from 'rxjs' import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model' @@ -10,6 +9,7 @@ import { Video } from '../../../shared/video/video.model' import { VideoComment } from './video-comment.model' import { VideoCommentService } from './video-comment.service' import { I18n } from '@ngx-translate/i18n-polyfill' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' @Component({ selector: 'my-video-comment-add', @@ -25,18 +25,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { @Output() commentCreated = new EventEmitter() - form: FormGroup - formErrors = { - 'text': '' - } - validationMessages = { - 'text': VIDEO_COMMENT_TEXT.MESSAGES - } - @ViewChild('textarea') private textareaElement: ElementRef constructor ( - private formBuilder: FormBuilder, + protected formValidatorService: FormValidatorService, private notificationsService: NotificationsService, private videoCommentService: VideoCommentService, private i18n: I18n @@ -44,16 +36,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { super() } - buildForm () { - this.form = this.formBuilder.group({ - text: [ '', VIDEO_COMMENT_TEXT.VALIDATORS ] - }) - - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) - } - ngOnInit () { - this.buildForm() + this.buildForm({ + text: VIDEO_COMMENT_TEXT + }) if (this.focusOnInit === true) { this.textareaElement.nativeElement.focus() diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.ts b/client/src/app/videos/+video-watch/modal/video-report.component.ts index 1bbd30226..8641e8dfb 100644 --- a/client/src/app/videos/+video-watch/modal/video-report.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-report.component.ts @@ -5,6 +5,8 @@ import { ModalDirective } from 'ngx-bootstrap/modal' import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../../shared/index' import { VideoDetails } from '../../../shared/video/video-details.model' import { I18n } from '@ngx-translate/i18n-polyfill' +import { FormReactiveErrors, FormReactiveValidationMessages } from '@app/shared' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' @Component({ selector: 'my-video-report', @@ -17,16 +19,9 @@ export class VideoReportComponent extends FormReactive implements OnInit { @ViewChild('modal') modal: ModalDirective error: string = null - form: FormGroup - formErrors = { - reason: '' - } - validationMessages = { - reason: VIDEO_ABUSE_REASON.MESSAGES - } constructor ( - private formBuilder: FormBuilder, + protected formValidatorService: FormValidatorService, private videoAbuseService: VideoAbuseService, private notificationsService: NotificationsService, private i18n: I18n @@ -35,15 +30,9 @@ export class VideoReportComponent extends FormReactive implements OnInit { } ngOnInit () { - this.buildForm() - } - - buildForm () { - this.form = this.formBuilder.group({ - reason: [ '', VIDEO_ABUSE_REASON.VALIDATORS ] + this.buildForm({ + reason: VIDEO_ABUSE_REASON }) - - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) } show () { -- cgit v1.2.3