Files
keyvault/client/src/app/modules/settings/settings.component.ts
2026-03-05 10:13:41 +01:00

114 lines
3.4 KiB
TypeScript

import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { AuthService } from '../../core/auth/auth.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { ApiService } from '../../shared/api.service';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import { HotToastService } from '@ngxpert/hot-toast';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import { MatSelectModule } from '@angular/material/select';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'app-settings',
imports: [MatProgressBarModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatSlideToggleModule, MatSelectModule, MatDialogModule, MatIconModule],
templateUrl: './settings.component.html',
styleUrl: './settings.component.scss'
})
export class SettingsComponent {
@Input() isOpen = false;
@Output() close = new EventEmitter<void>();
private authService: AuthService = inject(AuthService);
private api: ApiService = inject(ApiService);
private toast: HotToastService = inject(HotToastService);
private dialogRef = inject(MatDialogRef<SettingsComponent>);
public isLoading = false;
userData = new FormGroup({
firstName: new FormControl(this.firstName, Validators.required),
lastName: new FormControl(this.lastName, Validators.required),
userName: new FormControl(this.username, [Validators.required, Validators.email])
});
userSettings = new FormGroup({
id: new FormControl(),
sendSystemAccessMails: new FormControl(false),
sendSystemUpdateMails: new FormControl(false),
sendUserDisabledMails: new FormControl(false),
uiScale: new FormControl('s')
})
open() {
this.isOpen = true;
this.loadSettings();
}
closeSidebar() {
if (this.isDirty()) {
this.toast.warning('Ungespeicherte Änderungen wurden verworfen.');
}
this.dialogRef.close()
}
get $userData() {
return this.userData.controls;
}
get username(): string {
return this.authService.user.username;
}
get firstName(): string {
return this.authService.user.firstName;
}
get lastName(): string {
return this.authService.user.lastName;
}
ngOnInit() {
}
async loadSettings() {
this.isLoading = true;
const settings = await this.api.userSettings;
this.userSettings.patchValue(settings);
this.isLoading = false;
}
async save() {
this.isLoading = true;
const res = await this.api.updateSettings(this.userSettings.value);
this.isLoading = false;
if (res) {
this.userSettings.markAsPristine();
}
}
saveUser() {
this.isDirty();
const user = this.authService.user;
user.firstName = this.$userData.firstName.value!;
user.lastName = this.$userData.lastName.value!;
user.username = this.$userData.userName.value!;
this.api.saveUser(user).subscribe({
next: () => {
this.toast.success('Gespeichert');
this.userSettings.markAsPristine()
}
})
}
isDirty(): boolean {
return this.userData.dirty || this.userSettings.dirty;
}
}