bstlboard-front/src/app/pages/view/edit/edit.page.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { TagsService } from 'src/app/services/tags.service';
import { SettingsService } from 'src/app/services/settings.service';
import { Subscription } from 'rxjs';
import { ViewService } from 'src/app/services/view.service';
import { I18nService } from 'src/app/services/i18n.service';
import { ConfirmDialog } from 'src/app/ui/confirm/confirm.component';
import { MatDialog } from '@angular/material/dialog';

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

  name: string;
  view: any;
  entryTypes: string[] = [undefined, 'LINK', 'DISCUSSION', 'QUESTION', 'INTERN'];
  entryType: string = this.entryTypes[0];
  sortings: string[] = ['NEW', 'TOP', 'HOT', 'LAST'];
  sorting: string = this.sortings[0];
  notfound: boolean = false;
  working: boolean = false;
  form: FormGroup;
  settings: any;

  settingsSubscription: Subscription;

  constructor(private viewService: ViewService,
    private tagsService: TagsService,
    private settingsService: SettingsService,
    private formBuilder: FormBuilder,
    private router: Router,
    private i18n: I18nService,
    private route: ActivatedRoute,
    private snackBar: MatSnackBar,
    public dialog: MatDialog) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      entryType: ['', Validators.nullValidator],
      sorting: ['', Validators.required],
      index: ['', Validators.required],
    });

    this.settingsSubscription = this.settingsService.settings.subscribe({
      next: (settings) => {
        this.settings = settings;
      }
    });

    this.route.params.subscribe({
      next: (params) => {
        if (params.name) {
          this.form.get('name').setValue(params.name);

          this.form.get('entryType').setValue(this.entryType);
          this.form.get('entryType').valueChanges.subscribe({
            next: (value) => {
              this.entryType = value;
            }
          });
          this.form.get('sorting').setValue(this.sorting);
          this.form.get('sorting').valueChanges.subscribe({
            next: (value) => {
              this.sorting = value;
            }
          });
          this.form.get('index').valueChanges.subscribe({
            next: (value) => {
              this.view.index = value;
            }
          });

          this.name = params.name;
          this.refresh();
        }
      }
    })

    this.refresh();
  }

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

  refresh() {
    if (this.name) {
      this.viewService.getView(this.name, undefined).subscribe({
        next: (data) => {
          this.view = data;
          this.entryType = this.view.entryType;
          this.sorting = this.view.sorting;
          this.form.get("name").setValue(this.view.name);
          this.form.get("entryType").setValue(this.view.entryType);
          this.form.get("sorting").setValue(this.view.sorting);
          this.form.get("index").setValue(this.view.index);
        },
        error: (error) => {
          if (error.status == 404) {
            this.notfound = true;
          }
        }
      })
    } else {
      this.view = {};
      this.view.entryType = this.entryType;
      this.view.sorting = this.sorting;
      this.view.tags = [];
      this.view.excludedTags = [];
      this.view.index = 99;
      this.form.get("entryType").setValue(this.view.entryType);
      this.form.get("sorting").setValue(this.view.sorting);
      this.form.get("index").setValue(this.view.index);
    }
  }

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


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

    this.working = true;

    this.view.name = this.form.get("name").value;
    this.view.entryType = this.entryType;
    this.view.sorting = this.sorting;
    this.view.index = this.form.get("index").value;

    this.viewService.createOrUpdate(this.view).subscribe({
      next: (data) => {
        this.view = data;
        this.working = false;
        this.snackBar.open(this.i18n.get('views.success', []), this.i18n.get("close", []), {
          duration: 3000
        });
        this.router.navigateByUrl('/v/' + this.view.name);
        this.viewService.getViews();
      },
      error: (error) => {
        this.working = false;
        if (error.status == 403) {
          this.snackBar.open("Error");
        }
        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]);
          }
        }
      }
    })
  }

  deleteView() {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'views.confirmDelete',
        'args': [this.view.name]
      }
    })

    dialogRef.afterClosed().subscribe({
      next: (result) => {
        if (result) {
          this.working = true;
          this.viewService.deleteView(this.view.name).subscribe({
            next: () => {
              this.working = false;
              this.router.navigateByUrl('/');
              this.viewService.getViews();
            }
          })
        }
      }
    });
  }
}