From 5c5bcea2e64daf0a66a796c89432732ed27308d2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 7 Oct 2022 15:26:53 +0200 Subject: Refactor form reactive --- .../abuse-message-modal.component.ts | 4 +- .../moderation-comment-modal.component.ts | 4 +- .../shared/shared-forms/form-reactive.service.ts | 2 +- .../src/app/shared/shared-forms/form-reactive.ts | 82 +++------------------- .../batch-domains-modal.component.ts | 4 +- .../report-modals/account-report.component.ts | 4 +- .../report-modals/comment-report.component.ts | 4 +- .../report-modals/video-report.component.ts | 4 +- .../shared-moderation/user-ban-modal.component.ts | 4 +- .../shared-moderation/video-block.component.ts | 4 +- .../user-interface-settings.component.ts | 4 +- .../user-video-settings.component.ts | 4 +- .../remote-subscribe.component.ts | 4 +- .../video-add-to-playlist.component.ts | 4 +- 14 files changed, 33 insertions(+), 99 deletions(-) (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts index d24a5d58d..12d503f56 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' import { AuthService, HtmlRendererService, Notifier } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' import { logger } from '@root-helpers/logger' @@ -29,7 +29,7 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit { private abuse: UserAbuse constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private modalService: NgbModal, private htmlRenderer: HtmlRendererService, private auth: AuthService, diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts index 2600da8da..4ad807d25 100644 --- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts +++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' import { Notifier } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { AbuseService } from '@app/shared/shared-moderation' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' @@ -20,7 +20,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI private openedModal: NgbModalRef constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private modalService: NgbModal, private notifier: Notifier, private abuseService: AbuseService diff --git a/client/src/app/shared/shared-forms/form-reactive.service.ts b/client/src/app/shared/shared-forms/form-reactive.service.ts index 69077eb07..f1b7e0ef2 100644 --- a/client/src/app/shared/shared-forms/form-reactive.service.ts +++ b/client/src/app/shared/shared-forms/form-reactive.service.ts @@ -56,7 +56,7 @@ export class FormReactiveService { } } - protected forceCheck (form: FormGroup, formErrors: any, validationMessages: FormReactiveValidationMessages) { + forceCheck (form: FormGroup, formErrors: any, validationMessages: FormReactiveValidationMessages) { this.onStatusChanged({ form, formErrors, validationMessages, onlyDirty: false }) } diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts index acaeaba33..d1e7be802 100644 --- a/client/src/app/shared/shared-forms/form-reactive.ts +++ b/client/src/app/shared/shared-forms/form-reactive.ts @@ -1,11 +1,9 @@ -import { AbstractControl, FormGroup } from '@angular/forms' -import { wait } from '@root-helpers/utils' +import { FormGroup } from '@angular/forms' import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model' -import { FormReactiveErrors, FormReactiveValidationMessages } from './form-reactive.service' -import { FormValidatorService } from './form-validator.service' +import { FormReactiveService, FormReactiveValidationMessages } from './form-reactive.service' export abstract class FormReactive { - protected abstract formValidatorService: FormValidatorService + protected abstract formReactiveService: FormReactiveService protected formChanged = false form: FormGroup @@ -13,86 +11,22 @@ export abstract class FormReactive { validationMessages: FormReactiveValidationMessages buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) { - const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues) + const { formErrors, validationMessages, form } = this.formReactiveService.buildForm(obj, defaultValues) this.form = form this.formErrors = formErrors this.validationMessages = validationMessages - - this.form.statusChanges.subscribe(async () => { - // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed - await this.waitPendingCheck() - - this.onStatusChanged(this.form, this.formErrors, this.validationMessages) - }) } protected async waitPendingCheck () { - if (this.form.status !== 'PENDING') return - - // FIXME: the following line does not work: https://github.com/angular/angular/issues/41519 - // return firstValueFrom(this.form.statusChanges.pipe(filter(status => status !== 'PENDING'))) - // So we have to fallback to active wait :/ - - do { - await wait(10) - } while (this.form.status === 'PENDING') + return this.formReactiveService.waitPendingCheck(this.form) } - protected markAllAsDirty (controlsArg?: { [ key: string ]: AbstractControl }) { - const controls = controlsArg || this.form.controls - - for (const key of Object.keys(controls)) { - const control = controls[key] - - if (control instanceof FormGroup) { - this.markAllAsDirty(control.controls) - continue - } - - control.markAsDirty() - } + protected markAllAsDirty () { + return this.formReactiveService.markAllAsDirty(this.form.controls) } protected forceCheck () { - this.onStatusChanged(this.form, this.formErrors, this.validationMessages, false) - } - - private onStatusChanged ( - form: FormGroup, - formErrors: FormReactiveErrors, - validationMessages: FormReactiveValidationMessages, - onlyDirty = true - ) { - for (const field of Object.keys(formErrors)) { - if (formErrors[field] && typeof formErrors[field] === 'object') { - this.onStatusChanged( - form.controls[field] as FormGroup, - formErrors[field] as FormReactiveErrors, - validationMessages[field] as FormReactiveValidationMessages, - onlyDirty - ) - continue - } - - // clear previous error message (if any) - formErrors[field] = '' - const control = form.get(field) - - if (control.dirty) this.formChanged = true - - if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue - - const staticMessages = validationMessages[field] - for (const key of Object.keys(control.errors)) { - const formErrorValue = control.errors[key] - - // Try to find error message in static validation messages first - // Then check if the validator returns a string that is the error - if (staticMessages[key]) formErrors[field] += staticMessages[key] + ' ' - else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key] - else throw new Error('Form error value of ' + field + ' is invalid') - } - } + return this.formReactiveService.forceCheck(this.form, this.formErrors, this.validationMessages) } } diff --git a/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts b/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts index 20be728f6..ec2fea528 100644 --- a/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts +++ b/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' import { splitAndGetNotEmpty, UNIQUE_HOSTS_VALIDATOR } from '../form-validators/host-validators' @@ -18,7 +18,7 @@ export class BatchDomainsModalComponent extends FormReactive implements OnInit { private openedModal: NgbModalRef constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private modalService: NgbModal ) { super() diff --git a/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts index 78c9b3382..d587a9709 100644 --- a/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts +++ b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts @@ -2,7 +2,7 @@ import { mapValues, pickBy } from 'lodash-es' import { Component, OnInit, ViewChild } from '@angular/core' import { Notifier } from '@app/core' import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { Account } from '@app/shared/shared-main' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' @@ -26,7 +26,7 @@ export class AccountReportComponent extends FormReactive implements OnInit { private openedModal: NgbModalRef constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private modalService: NgbModal, private abuseService: AbuseService, private notifier: Notifier diff --git a/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts index 7c0907ce4..e35d70c8f 100644 --- a/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts +++ b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts @@ -2,7 +2,7 @@ import { mapValues, pickBy } from 'lodash-es' import { Component, Input, OnInit, ViewChild } from '@angular/core' import { Notifier } from '@app/core' import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { VideoComment } from '@app/shared/shared-video-comment' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' @@ -27,7 +27,7 @@ export class CommentReportComponent extends FormReactive implements OnInit { private openedModal: NgbModalRef constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private modalService: NgbModal, private abuseService: AbuseService, private notifier: Notifier diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts index 38dd92910..16be8e0a1 100644 --- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts +++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts @@ -3,7 +3,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core' import { DomSanitizer } from '@angular/platform-browser' import { Notifier } from '@app/core' import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' import { abusePredefinedReasonsMap } from '@shared/core-utils/abuse' @@ -27,7 +27,7 @@ export class VideoReportComponent extends FormReactive implements OnInit { private openedModal: NgbModalRef constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private modalService: NgbModal, private abuseService: AbuseService, private notifier: Notifier, diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts index 617408f2a..27dcf043a 100644 --- a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts +++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts @@ -2,7 +2,7 @@ import { forkJoin } from 'rxjs' import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' import { Notifier } from '@app/core' import { prepareIcu } from '@app/helpers' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' import { User } from '@shared/models' @@ -25,7 +25,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit { modalMessage = '' constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private modalService: NgbModal, private notifier: Notifier, private userAdminService: UserAdminService, diff --git a/client/src/app/shared/shared-moderation/video-block.component.ts b/client/src/app/shared/shared-moderation/video-block.component.ts index f8b22a3f6..3ff53443a 100644 --- a/client/src/app/shared/shared-moderation/video-block.component.ts +++ b/client/src/app/shared/shared-moderation/video-block.component.ts @@ -1,7 +1,7 @@ import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' import { Notifier } from '@app/core' import { prepareIcu } from '@app/helpers' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { Video } from '@app/shared/shared-main' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' @@ -25,7 +25,7 @@ export class VideoBlockComponent extends FormReactive implements OnInit { private openedModal: NgbModalRef constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private modalService: NgbModal, private videoBlocklistService: VideoBlockService, private notifier: Notifier diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts index 13e2e5424..c2c30d38b 100644 --- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts +++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts @@ -1,7 +1,7 @@ import { Subject, Subscription } from 'rxjs' import { Component, Input, OnDestroy, OnInit } from '@angular/core' import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models' import { SelectOptionsItem } from 'src/types' @@ -22,7 +22,7 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn private serverConfig: HTMLServerConfig constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private authService: AuthService, private notifier: Notifier, private userService: UserService, diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts index 7d6b69469..af0870f12 100644 --- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts +++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts @@ -3,7 +3,7 @@ import { Subject, Subscription } from 'rxjs' import { first } from 'rxjs/operators' import { Component, Input, OnDestroy, OnInit } from '@angular/core' import { AuthService, Notifier, ServerService, User, UserService } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { UserUpdateMe } from '@shared/models' import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' @@ -22,7 +22,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, formValuesWatcher: Subscription constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private authService: AuthService, private notifier: Notifier, private userService: UserService, diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts index 7bcfdd8aa..61bcd5345 100644 --- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts +++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnInit } from '@angular/core' import { Notifier } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { logger } from '@root-helpers/logger' import { USER_HANDLE_VALIDATOR } from '../form-validators/user-validators' @@ -15,7 +15,7 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit { @Input() showHelp = false constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private notifier: Notifier ) { super() diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts index e019fdd26..f81de7c6b 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts @@ -3,7 +3,7 @@ import { Subject, Subscription } from 'rxjs' import { debounceTime, filter } from 'rxjs/operators' import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core' import { AuthService, DisableForReuseHook, Notifier } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { secondsToTime } from '@shared/core-utils' import { Video, @@ -59,7 +59,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, private pendingAddId: number constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private authService: AuthService, private notifier: Notifier, private videoPlaylistService: VideoPlaylistService, -- cgit v1.2.3