diff --git a/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html b/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html index 5a3e24e90..59dfdd2ec 100644 --- a/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html +++ b/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html @@ -1,5 +1,5 @@  -
+
Radarr Settings
@@ -33,4 +33,4 @@
-
\ No newline at end of file + diff --git a/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.ts b/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.ts index 620daf41f..46014230e 100644 --- a/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.ts +++ b/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, QueryList, ViewChildren } from "@angular/core"; +import { Component, OnDestroy, OnInit, QueryList, ViewChildren } from "@angular/core"; import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms"; import { RadarrFacade } from "app/state/radarr"; @@ -6,36 +6,41 @@ import { IMinimumAvailability, IRadarrCombined, IRadarrProfile, IRadarrRootFolde import { NotificationService } from "../../services"; import { FeaturesFacade } from "../../state/features/features.facade"; import { RadarrFormComponent } from "./components/radarr-form.component"; +import { Observable, ReplaySubject, Subject, combineLatest, map, switchMap, takeUntil, tap } from "rxjs"; @Component({ templateUrl: "./radarr.component.html", styleUrls: ["./radarr.component.scss"] }) -export class RadarrComponent implements OnInit { +export class RadarrComponent implements OnInit, OnDestroy { public qualities: IRadarrProfile[]; public rootFolders: IRadarrRootFolder[]; public minimumAvailabilityOptions: IMinimumAvailability[]; public profilesRunning: boolean; public rootFoldersRunning: boolean; - public form: UntypedFormGroup; public is4kEnabled: boolean = false; - @ViewChildren('4kForm') public form4k: QueryList; - @ViewChildren('normalForm') public normalForm: QueryList; + public readonly form$: Observable; - constructor(private radarrFacade: RadarrFacade, - private notificationService: NotificationService, - private featureFacade: FeaturesFacade, - private fb: UntypedFormBuilder) { } + private readonly form4k$: ReplaySubject>; + private readonly normalForm$: ReplaySubject>; + private readonly destroyed$: Subject; + constructor( + private readonly radarrFacade: RadarrFacade, + private readonly notificationService: NotificationService, + private readonly featureFacade: FeaturesFacade, + readonly fb: UntypedFormBuilder + ) { + this.form4k$ = new ReplaySubject(); + this.normalForm$ = new ReplaySubject(); + this.destroyed$ = new Subject(); - public ngOnInit() { - this.is4kEnabled = this.featureFacade.is4kEnabled(); - this.radarrFacade.state$() - .subscribe(x => { - this.form = this.fb.group({ - radarr: this.fb.group({ + this.form$ = radarrFacade.state$() + .pipe( + map(x => fb.group({ + radarr: fb.group({ enabled: [x.settings.radarr.enabled], apiKey: [x.settings.radarr.apiKey], defaultQualityProfile: [+x.settings.radarr.defaultQualityProfile], @@ -50,7 +55,7 @@ export class RadarrComponent implements OnInit { minimumAvailability: [x.settings.radarr.minimumAvailability], scanForAvailability: [x.settings.radarr.scanForAvailability] }), - radarr4K: this.fb.group({ + radarr4K: fb.group({ enabled: [x.settings.radarr4K.enabled], apiKey: [x.settings.radarr4K.apiKey], defaultQualityProfile: [+x.settings.radarr4K.defaultQualityProfile], @@ -65,19 +70,44 @@ export class RadarrComponent implements OnInit { minimumAvailability: [x.settings.radarr4K.minimumAvailability], scanForAvailability: [x.settings.radarr4K.scanForAvailability] }), - }); - this.normalForm.changes.forEach((comp => { - comp.first.toggleValidators(); })) - if (this.is4kEnabled) { - this.form4k.changes.forEach((comp => { - comp.first.toggleValidators(); - })) - } - }); + ) + } + @ViewChildren('4kForm') + protected set form4k(component: QueryList) { + this.form4k$.next(component); } + @ViewChildren('normalForm') + protected set normalForm(component: QueryList) { + this.normalForm$.next(component); + } + + public ngOnInit() { + this.is4kEnabled = this.featureFacade.is4kEnabled(); + + combineLatest([this.form$, this.normalForm$]) + .pipe( + switchMap(([, normalForm]) => normalForm.changes), + tap(comp => comp.first.toggleValidators()), + takeUntil(this.destroyed$) + ).subscribe(); + + if (this.is4kEnabled) { + combineLatest([this.form$, this.form4k$]) + .pipe( + switchMap(([, form4k]) => form4k.changes), + tap(comp => comp.first.toggleValidators()), + takeUntil(this.destroyed$) + ).subscribe(); + } + } + + public ngOnDestroy(): void { + this.destroyed$.next(); + this.destroyed$.complete(); + } public onSubmit(form: UntypedFormGroup) { if (form.invalid) {