bstlboard-front/src/app/pages/settings/settings.page.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { UserService } from '../../services/user.service';
import { SettingsService } from 'src/app/services/settings.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'page-settings',
  templateUrl: './settings.page.html',
  styleUrls: ['./settings.page.scss']
})
export class PageSettings implements OnInit, OnDestroy {

  auth: any;
  user: any;
  working: boolean = false;
  success: boolean = false;
  form: FormGroup;
  settings: any;
  settingsSubscription: Subscription;

  constructor(
    private userService: UserService,
    private settingsService: SettingsService,
    private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      username: [{ disabled: true }, Validators.nullValidator],
      email: ['', Validators.nullValidator],
      about: ['', Validators.nullValidator],
      gravity: ['', Validators.nullValidator],
      entryDelay: ['', Validators.nullValidator],
      commentDelay: ['', Validators.nullValidator],
      pageSize: ['', Validators.nullValidator],
    });

    this.form.get('username').disable();

    this.userService.get().subscribe({
      next: (user) => {
        this.user = user;
        if (!this.user.settings) {
          this.user.settings = {};
        }
        this.form.get('username').setValue(this.user.username);
        this.form.get('email').setValue(this.user.email);
        this.form.get('about').setValue(this.user.about);

        this.settingsSubscription = this.settingsService.settings.subscribe({
          next: (settings) => {
            this.settings = settings;
            this.form.get('gravity').setValue(this.user.settings.gravity || this.settings.defaultGravity);
            this.form.get('entryDelay').setValue(this.user.settings.entryDelay || this.settings.defaultEntryDelay);
            this.form.get('commentDelay').setValue(this.user.settings.commentDelay || this.settings.defaultCommentDelay);
            this.form.get('pageSize').setValue(this.user.settings.pageSize || this.settings.defaultPageSize);
          }
        });
      }
    })
  }

  ngOnDestroy(): void {
    this.settingsSubscription.unsubscribe();
  }

  hasError(controlName: string): boolean {
    return this.form.controls[controlName].errors != null;
  }

  resetGravity(): void {
    this.user.settings.gravity = null;
    this.form.get('gravity').setValue(this.settings.defaultGravity);
  }

  resetEntryDelay(): void {
    this.user.settings.entryDelay = null;
    this.form.get('entryDelay').setValue(this.settings.defaultEntryDelay);
  }

  resetCommentDelay(): void {
    this.user.settings.commentDelay = null;
    this.form.get('commentDelay').setValue(this.settings.defaultCommentDelay);
  }

  resetPageSize(): void {
    this.user.settings.pageSize = null;
    this.form.get('pageSize').setValue(this.settings.defaultPageSize);
  }

  save(): void {
    if (this.working) {
      return;
    }

    this.working = true;
    this.success = false;

    this.user.about = this.form.get('about').value;
    this.user.email = this.form.get('email').value;

    if (!this.user.settings) {
      this.user.settings = {};
    }

    if (this.form.get('gravity').value != this.settings.defaultGravity && !this.user.settings.gravity) {
      this.user.settings.gravity = this.form.get('gravity').value;
    } else if (this.user.settings.gravity) {
      this.user.settings.gravity = this.form.get('gravity').value;
    }

    if (this.form.get('entryDelay').value != this.settings.defaultEntryDelay && !this.user.settings.entryDelay) {
      this.user.settings.entryDelay = this.form.get('entryDelay').value;
    } else if (this.user.settings.entryDelay) {
      this.user.settings.entryDelay = this.form.get('entryDelay').value;
    }

    if (this.form.get('commentDelay').value != this.settings.defaultCommentDelay && !this.user.settings.commentDelay) {
      this.user.settings.commentDelay = this.form.get('commentDelay').value;
    } else if (this.user.settings.commentDelay) {
      this.user.settings.commentDelay = this.form.get('commentDelay').value;
    }

    if (this.form.get('pageSize').value != this.settings.defaultPageSize && !this.user.settings.pageSize) {
      this.user.settings.pageSize = this.form.get('pageSize').value;
    } else if (this.user.settings.pageSize) {
      this.user.settings.pageSize = this.form.get('pageSize').value;
    }

    this.userService.update(this.user).subscribe({
      next: (data) => {
        this.user = data;
        if (!this.user.settings) {
          this.user.settings = {};
        }
        this.working = false;
        this.success = true;
        this.settingsService.getSettings();
      },
      error: (error) => {
        this.working = false;
        if (error.status == 422) {
          let errors = {};
          for (let code of error.error) {
            errors[code.field] = errors[code.field] || {};
            errors[code.field][code.code] = true;
          }

          for (let code in errors) {
            this.form.get(code).setErrors(errors[code]);
          }
        }
      }
    })

  }

}