member_webapp/@overflow/probe/component/probe-general.component.ts

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
import { Store, select } from '@ngrx/store';
import { Observable, of, Subscription } from 'rxjs';
import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
import { AuthSelector } from '@overflow/shared/auth/store';
import { DomainMember } from '@overflow/commons-typescript/model/domain';
import { ProbeHostService } from '../service/probe-host.service';
import { ProbeService } from '../service/probe.service';

@Component({
  selector: 'of-probe-general',
  templateUrl: './probe-general.component.html',
})
export class ProbeGeneralComponent implements OnInit {

  @Input() probeID: number;
  @Input() probe: Probe;
  @Output() modified = new EventEmitter<Probe>();

  error$: Observable<any>;
  pending$: Observable<boolean>;

  editMode = false;
  displayNameErrMsg: string;
  descriptionErrMsg: string;
  displayName: string;
  description: string;

  constructor(
    private probeService: ProbeService,
  ) {
  }

  ngOnInit() {
    if (undefined === this.probe && undefined === this.probeID) {
      // Create
    } else if (undefined !== this.probe && undefined === this.probeID) {
      // use probe
    } else if (undefined === this.probe && undefined !== this.probeID) {
      // get probe
      this.probeService.read(this.probeID)
        .pipe(
          tap(() => {
            this.pending$ = of(true);
          }),
          map((probe: Probe) => {
            this.probe = probe;
          }),
          catchError(error => {
            this.error$ = of(error);
            return of();
          }),
          tap(() => {
            this.pending$ = of(false);
          }),
          take(1),
      ).subscribe();
    } else {
      // error
    }
  }

  onDisplayNameEditing(value: string) {
    const msg: string = this.checkValidDisplayName(value);
    if (msg !== null) {
      this.displayNameErrMsg = msg;
    } else {
      this.displayNameErrMsg = null;
      this.displayName = value.trim();
    }
  }

  onDescriptionEditing(value: string) {
    const msg: string = this.checkValidDescription(value);
    if (msg !== null) {
      this.descriptionErrMsg = msg;
    } else {
      this.descriptionErrMsg = null;
      this.description = value.trim();
    }
  }

  onEditSave() {
    this.probe.name = this.displayName ? this.displayName : this.probe.name;
    this.probe.description = this.description ? this.description : this.probe.description;

    this.probeService.modify(this.probe)
      .pipe(
        tap(() => {
          this.pending$ = of(true);
        }),
        map((probe: Probe) => {
          this.editMode = false;
          this.probe = probe;
          this.modified.emit(probe);
        }),
        catchError(error => {
          this.error$ = of(error);
          return of();
        }),
        tap(() => {
          this.pending$ = of(false);
        }),
        take(1),
    ).subscribe();
  }

  checkValidDisplayName(value: string): string | null {
    if (value.length <= 2 || value.length > 20) {
      return 'displayname length : 3 ~ 20';
    }
    const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
    if (value.match(regex)) {
      return 'Cannot use special characters.';
    }
    return null;
  }

  checkValidDescription(value: string): string | null {
    if (value.length > 50) {
      return 'description length : 0 ~ 50';
    }
    const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
    if (value.match(regex)) {
      return 'Cannot use special characters.';
    }
    return null;
  }
}