From 97b493d869feee59d360b484a6c59388a2aead1f Mon Sep 17 00:00:00 2001 From: tidusjar Date: Thu, 14 Oct 2021 15:12:24 +0100 Subject: [PATCH] perf: :zap: Use ngxs store for the whole customization section of the app --- src/Ombi/ClientApp/package.json | 2 + src/Ombi/ClientApp/src/app/app.component.ts | 2 - src/Ombi/ClientApp/src/app/app.module.ts | 41 ++++--------------- .../app/landingpage/landingpage.component.ts | 5 ++- .../src/app/login/login.component.ts | 8 ++-- .../src/app/login/resetpassword.component.ts | 5 ++- .../app/login/tokenresetpassword.component.ts | 19 +++++---- .../src/app/services/settings.service.ts | 2 +- .../customization/customization.component.ts | 12 +++--- .../customization-initializer.ts | 10 +++++ .../customization/customization.actions.ts | 8 +++- .../customization/customization.facade.ts | 11 ++++- .../customization/customization.selectors.ts | 15 +++++++ .../customization/customization.state.ts | 16 ++++++-- .../src/app/state/customization/types.ts | 2 +- .../user-preference.component.ts | 22 +++++----- .../usermanagement-user.component.html | 2 +- .../usermanagement-user.component.ts | 10 +++-- .../usermanagement.component.html | 4 +- .../usermanagement.component.ts | 8 ++-- src/Ombi/ClientApp/yarn.lock | 12 ++++++ 21 files changed, 133 insertions(+), 83 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/state/customization/customization-initializer.ts diff --git a/src/Ombi/ClientApp/package.json b/src/Ombi/ClientApp/package.json index d864e64b0..dd5c756b2 100644 --- a/src/Ombi/ClientApp/package.json +++ b/src/Ombi/ClientApp/package.json @@ -31,6 +31,7 @@ "@ngu/carousel": "^1.4.9-beta-2", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", + "@ngxs/devtools-plugin": "^3.7.2", "@ngxs/store": "^3.7.2", "@types/jquery": "^3.3.29", "@yellowspot/ng-truncate": "^1.4.0", @@ -42,6 +43,7 @@ "core-js": "^2.5.4", "eventemitter2": "^5.0.1", "fullcalendar": "^4.0.0-alpha.4", + "immer": "^9.0.6", "jquery": "3.3.1", "lodash": "^4.17.20", "moment": "^2.23.0", diff --git a/src/Ombi/ClientApp/src/app/app.component.ts b/src/Ombi/ClientApp/src/app/app.component.ts index 8410dfd84..cbfcf0af0 100644 --- a/src/Ombi/ClientApp/src/app/app.component.ts +++ b/src/Ombi/ClientApp/src/app/app.component.ts @@ -85,8 +85,6 @@ export class AppComponent implements OnInit { } public ngOnInit() { - // window["loading_screen"].finish(); - this.customizationFacade.loadCustomziationSettings(); this.customizationFacade.settings$().subscribe(x => { this.customizationSettings = x; if (this.customizationSettings && this.customizationSettings.applicationName) { diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts index 5a733aa62..8ec4a3b16 100644 --- a/src/Ombi/ClientApp/src/app/app.module.ts +++ b/src/Ombi/ClientApp/src/app/app.module.ts @@ -13,6 +13,7 @@ import { AuthService } from "./auth/auth.service"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { BrowserModule } from "@angular/platform-browser"; import { ButtonModule } from "primeng/button"; +import { CUSTOMIZATION_INITIALIZER } from "./state/customization/customization-initializer"; import { ConfirmDialogModule } from "primeng/confirmdialog"; import { CookieComponent } from "./auth/cookie.component"; import { CookieService } from "ng2-cookies"; @@ -48,6 +49,7 @@ import { MyNavComponent } from './my-nav/my-nav.component'; import { NavSearchComponent } from "./my-nav/nav-search.component"; import { NgModule } from "@angular/core"; import { NgxsModule } from '@ngxs/store'; +import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin'; import { NotificationService } from "./services"; import { OverlayModule } from "@angular/cdk/overlay"; import { OverlayPanelModule } from "primeng/overlaypanel"; @@ -64,38 +66,6 @@ import { TranslateHttpLoader } from "@ngx-translate/http-loader"; import { UnauthorizedInterceptor } from "./auth/unauthorized.interceptor"; import { environment } from "../environments/environment"; -// Components - - - - - - - - - - - -// Services - - - - - - - - - - - - - - - - - - - const routes: Routes = [ { path: "*", component: PageNotFoundComponent }, { path: "", redirectTo: "/discover", pathMatch: "full" }, @@ -192,6 +162,10 @@ export function JwtTokenGetter() { NgxsModule.forRoot([CustomizationState], { developmentMode: !environment.production, }), + ...environment.production ? [] : + [ + NgxsReduxDevtoolsPluginModule.forRoot(), + ] ], declarations: [ AppComponent, @@ -236,7 +210,8 @@ export function JwtTokenGetter() { provide: HTTP_INTERCEPTORS, useClass: UnauthorizedInterceptor, multi: true - } + }, + CUSTOMIZATION_INITIALIZER ], bootstrap: [AppComponent], }) diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.ts b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.ts index 4d1d4166c..33f8873f8 100644 --- a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.ts +++ b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.ts @@ -10,6 +10,8 @@ import { DomSanitizer } from "@angular/platform-browser"; import { ImageService } from "../services"; import { fadeInOutAnimation } from "../animations/fadeinout"; +import { CustomizationFacade } from "../state/customization"; +import { ThousandShortPipe } from "../pipes/ThousandShortPipe"; @Component({ templateUrl: "./landingpage.component.html", @@ -29,10 +31,11 @@ export class LandingPageComponent implements OnDestroy, OnInit { constructor(private settingsService: SettingsService, private images: ImageService, private sanitizer: DomSanitizer, private landingPageService: LandingPageService, + private customizationFacade: CustomizationFacade, @Inject(APP_BASE_HREF) href :string) { this.href = href } public ngOnInit() { - this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x); + this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x); this.settingsService.getLandingPage().subscribe(x => this.landingPageSettings = x); this.images.getRandomBackground().subscribe(x => { this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 19%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 79%, transparent 80%), url(" + x.url + ")"); diff --git a/src/Ombi/ClientApp/src/app/login/login.component.ts b/src/Ombi/ClientApp/src/app/login/login.component.ts index aeeb5c5e7..592758c9f 100644 --- a/src/Ombi/ClientApp/src/app/login/login.component.ts +++ b/src/Ombi/ClientApp/src/app/login/login.component.ts @@ -16,6 +16,7 @@ import { ImageService } from "../services"; import { fadeInOutAnimation } from "../animations/fadeinout"; import { StorageService } from "../shared/storage/storage-service"; import { MatSnackBar } from "@angular/material/snack-bar"; +import { CustomizationFacade } from "../state/customization"; @Component({ templateUrl: "./login.component.html", @@ -60,6 +61,7 @@ export class LoginComponent implements OnDestroy, OnInit { private status: StatusService, private fb: FormBuilder, private settingsService: SettingsService, + private customziationFacade: CustomizationFacade, private images: ImageService, private sanitizer: DomSanitizer, private route: ActivatedRoute, @@ -99,13 +101,13 @@ export class LoginComponent implements OnDestroy, OnInit { } public ngOnInit() { + + this.customziationFacade.settings$().subscribe(x => this.customizationSettings = x); + this.settingsService .getAuthentication() .subscribe((x) => (this.authenticationSettings = x)); this.settingsService.getClientId().subscribe((x) => (this.clientId = x)); - this.settingsService - .getCustomization() - .subscribe((x) => (this.customizationSettings = x)); this.images.getRandomBackground().subscribe((x) => { this.background = this.sanitizer.bypassSecurityTrustStyle( "url(" + x.url + ")" diff --git a/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts b/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts index 104d77c68..cb030b386 100644 --- a/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts +++ b/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts @@ -6,6 +6,7 @@ import { fadeInOutAnimation } from "../animations/fadeinout"; import { ICustomizationSettings } from "../interfaces"; import { IdentityService, ImageService, NotificationService, SettingsService } from "../services"; +import { CustomizationFacade } from "../state/customization"; @Component({ templateUrl: "./resetpassword.component.html", @@ -23,7 +24,7 @@ export class ResetPasswordComponent implements OnInit { constructor(private identityService: IdentityService, private notify: NotificationService, private fb: FormBuilder, private settingsService: SettingsService, @Inject(APP_BASE_HREF) href:string, - private images: ImageService, private sanitizer: DomSanitizer) { + private images: ImageService, private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade) { this.href = href; this.form = this.fb.group({ email: ["", [Validators.required]], @@ -38,7 +39,7 @@ export class ResetPasswordComponent implements OnInit { if (base.length > 1) { this.baseUrl = base; } - this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x); + this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x); this.settingsService.getEmailSettingsEnabled().subscribe(x => this.emailSettingsEnabled = x); } diff --git a/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts b/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts index c4778a4bd..695a79abb 100644 --- a/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts +++ b/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts @@ -1,15 +1,15 @@ -import { PlatformLocation } from "@angular/common"; +import { ActivatedRoute, Params } from "@angular/router"; import { Component, OnInit } from "@angular/core"; import { FormBuilder, FormGroup, Validators } from "@angular/forms"; -import { DomSanitizer } from "@angular/platform-browser"; -import { Router } from "@angular/router"; -import { ActivatedRoute, Params } from "@angular/router"; +import { IdentityService, ImageService } from "../services"; +import { CustomizationFacade } from "../state/customization"; +import { DomSanitizer } from "@angular/platform-browser"; import { ICustomizationSettings } from "../interfaces"; import { IResetPasswordToken } from "../interfaces"; -import { IdentityService, ImageService } from "../services"; import { NotificationService } from "../services"; -import { SettingsService } from "../services"; +import { PlatformLocation } from "@angular/common"; +import { Router } from "@angular/router"; @Component({ templateUrl: "./tokenresetpassword.component.html", @@ -23,8 +23,9 @@ export class TokenResetPasswordComponent implements OnInit { public baseUrl: string; constructor(private identityService: IdentityService, private router: Router, private route: ActivatedRoute, private notify: NotificationService, - private fb: FormBuilder, private settingsService: SettingsService, private location: PlatformLocation, - private images: ImageService, private sanitizer: DomSanitizer) { + private fb: FormBuilder, private location: PlatformLocation, private images: ImageService, + private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade, + ) { this.route.queryParams .subscribe((params: Params) => { @@ -45,7 +46,7 @@ export class TokenResetPasswordComponent implements OnInit { if (base.length > 1) { this.baseUrl = base; } - this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x); + this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x); } public onSubmit(form: FormGroup) { diff --git a/src/Ombi/ClientApp/src/app/services/settings.service.ts b/src/Ombi/ClientApp/src/app/services/settings.service.ts index 88a578be3..3f4409d0c 100644 --- a/src/Ombi/ClientApp/src/app/services/settings.service.ts +++ b/src/Ombi/ClientApp/src/app/services/settings.service.ts @@ -1,4 +1,4 @@ -import { PlatformLocation, APP_BASE_HREF } from "@angular/common"; +import { APP_BASE_HREF } from "@angular/common"; import { HttpClient } from "@angular/common/http"; import { Injectable, Inject } from "@angular/core"; import { Observable } from "rxjs"; diff --git a/src/Ombi/ClientApp/src/app/settings/customization/customization.component.ts b/src/Ombi/ClientApp/src/app/settings/customization/customization.component.ts index 4e2b22129..8daba404f 100644 --- a/src/Ombi/ClientApp/src/app/settings/customization/customization.component.ts +++ b/src/Ombi/ClientApp/src/app/settings/customization/customization.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from "@angular/core"; +import { CustomizationFacade } from "../../state/customization"; import { ICustomizationSettings } from "../../interfaces"; import { NotificationService } from "../../services"; import { SettingsService } from "../../services"; @@ -13,13 +14,14 @@ export class CustomizationComponent implements OnInit { public settings: ICustomizationSettings; public advanced: boolean; - constructor(private settingsService: SettingsService, private notificationService: NotificationService) { } + constructor(private settingsService: SettingsService, + private notificationService: NotificationService, + private customizationFacade: CustomizationFacade) { } public ngOnInit() { - this.settingsService.getCustomization().subscribe(x => { - this.settings = x; + this.customizationFacade.settings$().subscribe(x => { + this.settings = { ...x }; }); - } public save() { @@ -32,7 +34,7 @@ export class CustomizationComponent implements OnInit { } } - this.settingsService.saveCustomization(this.settings).subscribe(x => { + this.customizationFacade.saveSettings(this.settings).subscribe(x => { if (x) { this.notificationService.success("Successfully saved Ombi settings"); } else { diff --git a/src/Ombi/ClientApp/src/app/state/customization/customization-initializer.ts b/src/Ombi/ClientApp/src/app/state/customization/customization-initializer.ts new file mode 100644 index 000000000..ad5404c0d --- /dev/null +++ b/src/Ombi/ClientApp/src/app/state/customization/customization-initializer.ts @@ -0,0 +1,10 @@ +import { APP_INITIALIZER } from "@angular/core"; +import { CustomizationFacade } from "."; +import { Observable } from "rxjs"; + +export const CUSTOMIZATION_INITIALIZER = { + provide: APP_INITIALIZER, + useFactory: (customizationFacade: CustomizationFacade) => (): Observable => customizationFacade.loadCustomziationSettings(), + multi: true, + deps: [CustomizationFacade], +}; \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/state/customization/customization.actions.ts b/src/Ombi/ClientApp/src/app/state/customization/customization.actions.ts index eb90980e4..bb9855084 100644 --- a/src/Ombi/ClientApp/src/app/state/customization/customization.actions.ts +++ b/src/Ombi/ClientApp/src/app/state/customization/customization.actions.ts @@ -1,5 +1,11 @@ +import { ICustomizationSettings } from "../../interfaces"; - export class LoadSettings { +export class LoadSettings { public static readonly type = '[Customization] LoadSettings'; } + export class UpdateSettings { + public static readonly type = '[Customization] UpdateSettings'; + + constructor(public settings: ICustomizationSettings) { } + } diff --git a/src/Ombi/ClientApp/src/app/state/customization/customization.facade.ts b/src/Ombi/ClientApp/src/app/state/customization/customization.facade.ts index d6d3d9dba..cd98d26fa 100644 --- a/src/Ombi/ClientApp/src/app/state/customization/customization.facade.ts +++ b/src/Ombi/ClientApp/src/app/state/customization/customization.facade.ts @@ -1,7 +1,8 @@ +import { LoadSettings, UpdateSettings } from "./customization.actions"; + import { CustomizationSelectors } from "./customization.selectors"; import { ICustomizationSettings } from "../../interfaces"; import { Injectable } from "@angular/core"; -import { LoadSettings } from "./customization.actions"; import { Observable } from "rxjs"; import { Store } from "@ngxs/store"; @@ -15,4 +16,12 @@ export class CustomizationFacade { public settings$ = (): Observable => this.store.select(CustomizationSelectors.customizationSettings); public loadCustomziationSettings = (): Observable => this.store.dispatch(new LoadSettings()); + + public logo = (): string => this.store.selectSnapshot(CustomizationSelectors.logo); + + public appName = (): string => this.store.selectSnapshot(CustomizationSelectors.applicationName); + + public appUrl = (): string => this.store.selectSnapshot(CustomizationSelectors.applicationUrl); + + public saveSettings = (settings: ICustomizationSettings): Observable => this.store.dispatch(new UpdateSettings(settings)); } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/state/customization/customization.selectors.ts b/src/Ombi/ClientApp/src/app/state/customization/customization.selectors.ts index 07f4ab24c..ad70069f2 100644 --- a/src/Ombi/ClientApp/src/app/state/customization/customization.selectors.ts +++ b/src/Ombi/ClientApp/src/app/state/customization/customization.selectors.ts @@ -8,4 +8,19 @@ export class CustomizationSelectors { public static customizationSettings(settings: ICustomizationSettings): ICustomizationSettings { return settings; } + + @Selector([CustomizationSelectors.customizationSettings]) + public static logo({logo}: ICustomizationSettings): string { + return logo; + } + + @Selector([CustomizationSelectors.customizationSettings]) + public static applicationName({applicationName}: ICustomizationSettings): string { + return applicationName; + } + + @Selector([CustomizationSelectors.customizationSettings]) + public static applicationUrl({applicationUrl}: ICustomizationSettings): string { + return applicationUrl; + } } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/state/customization/customization.state.ts b/src/Ombi/ClientApp/src/app/state/customization/customization.state.ts index 4007fa4c7..57b3f5908 100644 --- a/src/Ombi/ClientApp/src/app/state/customization/customization.state.ts +++ b/src/Ombi/ClientApp/src/app/state/customization/customization.state.ts @@ -1,11 +1,12 @@ import { Action, State, StateContext } from "@ngxs/store"; +import { LoadSettings, UpdateSettings } from "./customization.actions"; import { CUSTOMIZATION_STATE_TOKEN } from "./types"; import { ICustomizationSettings } from "../../interfaces"; import { Injectable } from "@angular/core"; -import { LoadSettings } from "./customization.actions"; import { Observable } from "rxjs"; import { SettingsService } from "../../services"; +import { produce } from 'immer'; import { tap } from "rxjs/operators"; @State({ @@ -16,9 +17,18 @@ export class CustomizationState { constructor(private settingsService: SettingsService) { } @Action(LoadSettings) - public load({setState}: StateContext): Observable { + public load({ setState }: StateContext): Observable { return this.settingsService.getCustomization().pipe( - tap(settings => setState(settings)) + tap(settings => + setState(settings) + ) + ); + } + + @Action(UpdateSettings) + public update({ setState }: StateContext, { settings }: UpdateSettings): Observable { + return this.settingsService.saveCustomization(settings).pipe( + tap(() => setState(settings)) ); } } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/state/customization/types.ts b/src/Ombi/ClientApp/src/app/state/customization/types.ts index 1aa108a4e..98eada49a 100644 --- a/src/Ombi/ClientApp/src/app/state/customization/types.ts +++ b/src/Ombi/ClientApp/src/app/state/customization/types.ts @@ -1,4 +1,4 @@ import { ICustomizationSettings } from "../../interfaces"; import { StateToken } from "@ngxs/store"; -export const CUSTOMIZATION_STATE_TOKEN = new StateToken('customization'); \ No newline at end of file +export const CUSTOMIZATION_STATE_TOKEN = new StateToken('customizationSettings'); \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts b/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts index c9d3d2eb1..afa2496cf 100644 --- a/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts +++ b/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts @@ -1,12 +1,13 @@ import { Component, Inject, OnInit } from "@angular/core"; import { AuthService } from "../../../auth/auth.service"; import { TranslateService } from "@ngx-translate/core"; -import { AvailableLanguages, ILanguage } from "./user-preference.constants"; -import { IdentityService, NotificationService, SettingsService, ValidationService } from "../../../services"; -import { ICustomizationSettings, IUser, UserType } from "../../../interfaces"; +import { AvailableLanguages } from "./user-preference.constants"; +import { IdentityService, NotificationService, ValidationService } from "../../../services"; +import { IUser, UserType } from "../../../interfaces"; import { Md5 } from "ts-md5"; import { FormBuilder, FormGroup, Validators } from "@angular/forms"; import { APP_BASE_HREF } from "@angular/common"; +import { CustomizationFacade } from "../../../state/customization"; @Component({ templateUrl: "./user-preference.component.html", @@ -22,21 +23,22 @@ export class UserPreferenceComponent implements OnInit { public qrCodeEnabled: boolean; public countries: string[]; public selectedCountry: string; - public customizationSettings: ICustomizationSettings; public UserType = UserType; public baseUrl: string; public passwordForm: FormGroup; private user: IUser; + private applicationUrl: string = this.customizationFacade.appUrl(); + private logo: string = this.customizationFacade.logo(); constructor(private authService: AuthService, private readonly translate: TranslateService, private readonly notification: NotificationService, private readonly identityService: IdentityService, - private readonly settingsService: SettingsService, private readonly fb: FormBuilder, private readonly validationService: ValidationService, + private readonly customizationFacade: CustomizationFacade, @Inject(APP_BASE_HREF) public internalBaseUrl: string) { } public async ngOnInit() { @@ -47,14 +49,13 @@ export class UserPreferenceComponent implements OnInit { if (user.name) { this.username = user.name; } - this.customizationSettings = await this.settingsService.getCustomization().toPromise(); this.selectedLang = this.translate.currentLang; const accessToken = await this.identityService.getAccessToken().toPromise(); - this.qrCode = `${this.customizationSettings.applicationUrl}|${accessToken}`; + this.qrCode = `${this.applicationUrl}|${accessToken}`; - if(!this.customizationSettings.applicationUrl) { + if(!this.applicationUrl) { this.qrCodeEnabled = false; } else { this.qrCodeEnabled = true; @@ -64,7 +65,6 @@ export class UserPreferenceComponent implements OnInit { this.selectedCountry = this.user.streamingCountry; this.setProfileImageUrl(this.user); this.identityService.getSupportedStreamingCountries().subscribe(x => this.countries = x); - this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x); this.passwordForm = this.fb.group({ password: [null], @@ -112,8 +112,8 @@ export class UserPreferenceComponent implements OnInit { } private getFallbackProfileImageUrl() { - return this.customizationSettings?.logo - ? this.customizationSettings.logo + return this.logo + ? this.logo : "https://raw.githubusercontent.com/Ombi-app/Ombi/gh-pages/img/android-chrome-512x512.png"; } diff --git a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html index a4b79d21d..67152f7d9 100644 --- a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html +++ b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html @@ -182,7 +182,7 @@ - + diff --git a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.ts b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.ts index eac863282..9b9e8bdfd 100644 --- a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.ts +++ b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.ts @@ -4,6 +4,7 @@ import { ICheckbox, ICustomizationSettings, INotificationAgent, INotificationPre import { IdentityService, MessageService, RadarrService, SettingsService, SonarrService } from "../services"; import { Clipboard } from '@angular/cdk/clipboard'; +import { CustomizationFacade } from "../state/customization"; import { Location } from "@angular/common"; @Component({ @@ -30,7 +31,7 @@ export class UserManagementUserComponent implements OnInit { public requestLimitTypes: RequestLimitType[]; public RequestLimitType = RequestLimitType; - private customization: ICustomizationSettings; + private appUrl: string = this.customizationFacade.appUrl(); private accessToken: string; constructor(private identityService: IdentityService, @@ -41,7 +42,9 @@ export class UserManagementUserComponent implements OnInit { private sonarrService: SonarrService, private radarrService: RadarrService, private clipboard: Clipboard, - private location: Location) { + private location: Location, + private customizationFacade: CustomizationFacade, + ) { this.route.params.subscribe((params: any) => { if(params.id) { @@ -68,7 +71,6 @@ export class UserManagementUserComponent implements OnInit { this.radarrService.getQualityProfilesFromSettings().subscribe(x => this.radarrQualities = x); this.radarrService.getRootFoldersFromSettings().subscribe(x => this.radarrRootFolders = x); - this.settingsService.getCustomization().subscribe(x => this.customization = x); this.identityService.getUserAccessToken(this.userId).subscribe(x => this.accessToken = x); if(!this.edit) { @@ -191,7 +193,7 @@ export class UserManagementUserComponent implements OnInit { } public async appLink() { - this.clipboard.copy(`ombi://${this.customization.applicationUrl}|${this.accessToken}`); + this.clipboard.copy(`ombi://${this.appUrl}|${this.accessToken}`); this.notificationService.send("Copied!"); } diff --git a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.html b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.html index 67d303d7d..02a790145 100644 --- a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.html +++ b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.html @@ -105,8 +105,8 @@ - - + + diff --git a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.ts b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.ts index d119c8961..2bd2b3d89 100644 --- a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.ts +++ b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.ts @@ -2,6 +2,7 @@ import { ICheckbox, ICustomizationSettings, IEmailNotificationSettings, IUser } from "../interfaces"; import { IdentityService, NotificationService, SettingsService } from "../services"; +import { CustomizationFacade } from "../state/customization"; import { MatSort } from "@angular/material/sort"; import { MatTableDataSource } from "@angular/material/table"; import { SelectionModel } from "@angular/cdk/collections"; @@ -21,7 +22,7 @@ export class UserManagementComponent implements OnInit { public users: IUser[]; public checkAll = false; public emailSettings: IEmailNotificationSettings; - public customizationSettings: ICustomizationSettings; + public applicationUrl: string; public showBulkEdit = false; public availableClaims: ICheckbox[]; public bulkMovieLimit?: number; @@ -35,7 +36,8 @@ export class UserManagementComponent implements OnInit { constructor(private identityService: IdentityService, private settingsService: SettingsService, private notificationService: NotificationService, - private plexSettings: SettingsService) { + private plexSettings: SettingsService, + private customizationFacade: CustomizationFacade) { this.dataSource = new MatTableDataSource(); } @@ -49,7 +51,7 @@ export class UserManagementComponent implements OnInit { this.plexSettings.getPlex().subscribe(x => this.plexEnabled = x.enable); this.identityService.getAllAvailableClaims().subscribe(x => this.availableClaims = x); - this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x); + this.applicationUrl = this.customizationFacade.appUrl(); this.settingsService.getEmailNotificationSettings().subscribe(x => this.emailSettings = x); } diff --git a/src/Ombi/ClientApp/yarn.lock b/src/Ombi/ClientApp/yarn.lock index ef58a9282..cf08f428b 100644 --- a/src/Ombi/ClientApp/yarn.lock +++ b/src/Ombi/ClientApp/yarn.lock @@ -1445,6 +1445,13 @@ dependencies: tslib "^1.9.0" +"@ngxs/devtools-plugin@^3.7.2": + version "3.7.2" + resolved "https://registry.yarnpkg.com/@ngxs/devtools-plugin/-/devtools-plugin-3.7.2.tgz#995424e5faf48df55a1b54b9e1b36ce9c47c1d52" + integrity sha512-kRuOx1GPXHHZZAeQMm1J1msTZxjgiAUY4NR7bzaQPn+UwSY2OgGEsd8driMM5YSTF1hOjcFHinaLCM1vmu8FmQ== + dependencies: + tslib "^1.9.0" + "@ngxs/store@^3.7.2": version "3.7.2" resolved "https://registry.yarnpkg.com/@ngxs/store/-/store-3.7.2.tgz#1088b0669adc382d36ca7ae8438c603e55879b42" @@ -4981,6 +4988,11 @@ immediate@~3.0.5: version "3.0.6" resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b" +immer@^9.0.6: + version "9.0.6" + resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.6.tgz#7a96bf2674d06c8143e327cbf73539388ddf1a73" + integrity sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ== + import-fresh@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"