Usersettings

client/src/app/modules/settings/settings.component.ts

@@ -0,0 +1,103 @@
+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';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [MatProgressBarModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatSlideToggleModule],
+  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);
+
+  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),
+  })
+
+  open() {
+    this.isOpen = true;
+    this.loadSettings();
+  }
+
+  closeSidebar() {
+    this.isOpen = false;
+  }
+
+  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() {
+    
+  }
+
+  loadSettings() {
+    this.isLoading = true;
+    this.api.getSettings().subscribe({
+      next: (r: any) => {
+        this.userSettings.patchValue(r)
+        this.isLoading = false;
+      }
+    })
+  }
+
+  save() {
+    this.isLoading = true;
+    this.api.updateSettings(this.userSettings.value).subscribe({
+      next: () => {
+        this.toast.success('Gespeichert')
+        this.isLoading = false;
+      }
+    });
+  }
+
+  saveUser() {
+    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')
+      }
+    })
+  }
+}