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

import { Component, OnDestroy, OnInit } from '@angular/core';
import { EntriesService } from '../../../services/entries.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
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';

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

  id: number;
  entry: any;
  entryTypes: string[] = ['LINK', 'DISCUSSION', 'QUESTION', 'INTERN'];
  entryType: string = this.entryTypes[0];
  notfound: boolean = false;
  working: boolean = false;
  success: boolean = false;
  form: FormGroup;
  settings: any;

  settingsSubscription: Subscription;

  constructor(private entriesService: EntriesService,
    private tagsService: TagsService,
    private settingsService: SettingsService,
    private formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
    private snackBar: MatSnackBar) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      entryType: ['', Validators.required],
      url: ['', Validators.required],
      title: ['', Validators.required],
      text: ['', Validators.nullValidator],
    });

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

    this.form.get('entryType').setValue(this.entryType);

    this.form.get('entryType').valueChanges.subscribe({
      next: (value) => {
        this.entryType = value;
        switch (value) {
          case 'LINK':
            this.form.get('url').setValidators([Validators.required]);
            this.form.get('text').setValidators([Validators.nullValidator]);
            break;
          default:
            this.form.get('url').setValidators([Validators.nullValidator]);
            this.form.get('text').setValidators([Validators.required]);
            break;
        }
      }
    });


    this.form.get('url').valueChanges.pipe(
      debounceTime(800),
      distinctUntilChanged()).subscribe({
        next: (value) => {
          if (value && !this.form.get('title').value) {
            this.entriesService.titleHelper(value).subscribe({
              next: (title: string) => {
                this.form.get('title').setValue(title);
              }
            })
          }
        }
      })

    this.id = this.route.snapshot.paramMap.get('id') && +this.route.snapshot.paramMap.get('id');
    this.refresh();
  }

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

  refresh() {
    if (this.id) {
      this.form.get('entryType').disable();
      this.entriesService.getEntry(this.id).subscribe({
        next: (data) => {
          this.entry = data;
          this.entryType = this.entry.entryType;
          this.form.get("entryType").setValue(this.entry.entryType);
          this.form.get("url").setValue(this.entry.url);
          this.form.get("title").setValue(this.entry.title);
          this.form.get("text").setValue(this.entry.text);
          if (!this.entry.metadata.edit) {
            this.form.get("url").disable();
            this.form.get("title").disable();
            this.form.get("text").disable();
          }
        },
        error: (error) => {
          if (error.status == 404) {
            this.notfound = true;
          }
        }
      })
    } else {
      this.entry = {};
      this.entry.entryType = this.entryType;
      this.entry.tags = [];
    }
  }

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

  onTitleFocus(event): void {

  }

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

    this.working = true;

    this.entry.url = this.form.get("url").value;
    this.entry.entryType = this.entryType;
    this.entry.title = this.form.get("title").value;
    this.entry.text = this.form.get("text").value;

    this.entriesService.create(this.entry).subscribe({
      next: (data) => {
        this.router.navigateByUrl('/');
      },
      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]);
          }
        }
      }
    })

  }

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

    this.working = true;
    if (this.entry.metadata.edit) {
      this.entry.url = this.form.get("url").value;
      this.entry.title = this.form.get("title").value;
      this.entry.text = this.form.get("text").value;

      this.entriesService.update(this.entry).subscribe({
        next: (data) => {
          this.entry = data;
          this.working = false;
          this.success = true;
        },
        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]);
            }
          }
        }
      })
    } else {
      this.tagsService.setTags(this.entry.id, this.entry.tags).subscribe({
        next: (data) => {
          this.entry = data;
          this.working = false;
          this.success = true;
        }, 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]);
            }
          }
        }
      })
    }

  }

}