diff options
Diffstat (limited to 'client/src/app/shared/shared-user-settings/user-interface-settings.component.ts')
-rw-r--r-- | client/src/app/shared/shared-user-settings/user-interface-settings.component.ts | 86 |
1 files changed, 86 insertions, 0 deletions
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 new file mode 100644 index 000000000..875ffa3f1 --- /dev/null +++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts | |||
@@ -0,0 +1,86 @@ | |||
1 | import { Subject, Subscription } from 'rxjs' | ||
2 | import { Component, Input, OnDestroy, OnInit } from '@angular/core' | ||
3 | import { AuthService, Notifier, ServerService, UserService } from '@app/core' | ||
4 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | ||
5 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
6 | import { ServerConfig, User, UserUpdateMe } from '@shared/models' | ||
7 | |||
8 | @Component({ | ||
9 | selector: 'my-user-interface-settings', | ||
10 | templateUrl: './user-interface-settings.component.html', | ||
11 | styleUrls: [ './user-interface-settings.component.scss' ] | ||
12 | }) | ||
13 | export class UserInterfaceSettingsComponent extends FormReactive implements OnInit, OnDestroy { | ||
14 | @Input() user: User = null | ||
15 | @Input() reactiveUpdate = false | ||
16 | @Input() notifyOnUpdate = true | ||
17 | @Input() userInformationLoaded: Subject<any> | ||
18 | |||
19 | formValuesWatcher: Subscription | ||
20 | |||
21 | private serverConfig: ServerConfig | ||
22 | |||
23 | constructor ( | ||
24 | protected formValidatorService: FormValidatorService, | ||
25 | private authService: AuthService, | ||
26 | private notifier: Notifier, | ||
27 | private userService: UserService, | ||
28 | private serverService: ServerService, | ||
29 | private i18n: I18n | ||
30 | ) { | ||
31 | super() | ||
32 | } | ||
33 | |||
34 | get availableThemes () { | ||
35 | return this.serverConfig.theme.registered | ||
36 | .map(t => t.name) | ||
37 | } | ||
38 | |||
39 | ngOnInit () { | ||
40 | this.serverConfig = this.serverService.getTmpConfig() | ||
41 | this.serverService.getConfig() | ||
42 | .subscribe(config => this.serverConfig = config) | ||
43 | |||
44 | this.buildForm({ | ||
45 | theme: null | ||
46 | }) | ||
47 | |||
48 | this.userInformationLoaded | ||
49 | .subscribe(() => { | ||
50 | this.form.patchValue({ | ||
51 | theme: this.user.theme | ||
52 | }) | ||
53 | |||
54 | if (this.reactiveUpdate) { | ||
55 | this.formValuesWatcher = this.form.valueChanges.subscribe(val => this.updateInterfaceSettings()) | ||
56 | } | ||
57 | }) | ||
58 | } | ||
59 | |||
60 | ngOnDestroy () { | ||
61 | this.formValuesWatcher?.unsubscribe() | ||
62 | } | ||
63 | |||
64 | updateInterfaceSettings () { | ||
65 | const theme = this.form.value['theme'] | ||
66 | |||
67 | const details: UserUpdateMe = { | ||
68 | theme | ||
69 | } | ||
70 | |||
71 | if (this.authService.isLoggedIn()) { | ||
72 | this.userService.updateMyProfile(details).subscribe( | ||
73 | () => { | ||
74 | this.authService.refreshUserInformation() | ||
75 | |||
76 | if (this.notifyOnUpdate) this.notifier.success(this.i18n('Interface settings updated.')) | ||
77 | }, | ||
78 | |||
79 | err => this.notifier.error(err.message) | ||
80 | ) | ||
81 | } else { | ||
82 | this.userService.updateMyAnonymousProfile(details) | ||
83 | if (this.notifyOnUpdate) this.notifier.success(this.i18n('Interface settings updated.')) | ||
84 | } | ||
85 | } | ||
86 | } | ||