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 +---- 3 files changed, 39 insertions(+), 63 deletions(-) (limited to 'client/src/app/videos/+video-edit') 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()) -- cgit v1.2.3