123 lines
3.4 KiB
TypeScript
123 lines
3.4 KiB
TypeScript
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 } 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-detail',
|
|
templateUrl: './probe-detail.component.html',
|
|
})
|
|
export class ProbeDetailComponent implements OnInit {
|
|
|
|
@Input() probeHostID;
|
|
pending$: Observable<boolean>;
|
|
probeHost: ProbeHost;
|
|
error$: Observable<any>;
|
|
|
|
@Output() discovery = new EventEmitter<number>();
|
|
|
|
editMode = false;
|
|
displayNameErrMsg: string;
|
|
descriptionErrMsg: string;
|
|
displayName: string;
|
|
description: string;
|
|
|
|
constructor(
|
|
private store: Store<any>,
|
|
private probeHostService: ProbeHostService,
|
|
private probeService: ProbeService,
|
|
) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.probeHostService.read(this.probeHostID)
|
|
.pipe(
|
|
tap(() => {
|
|
this.pending$ = of(true);
|
|
}),
|
|
map((probeHost: ProbeHost) => {
|
|
this.probeHost = probeHost;
|
|
}),
|
|
catchError(error => {
|
|
this.error$ = of(error);
|
|
return of();
|
|
}),
|
|
tap(() => {
|
|
this.pending$ = of(false);
|
|
}),
|
|
).take(1).subscribe();
|
|
}
|
|
|
|
|
|
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.probeHost.probe.displayName = this.displayName ? this.displayName : this.probeHost.probe.displayName;
|
|
this.probeHost.probe.description = this.description ? this.description : this.probeHost.probe.description;
|
|
|
|
this.probeService.modify(this.probeHost.probe)
|
|
.pipe(
|
|
tap(() => {
|
|
this.pending$ = of(true);
|
|
}),
|
|
map((probe: Probe) => {
|
|
this.editMode = false;
|
|
this.probeHost.probe = 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;
|
|
}
|
|
}
|
|
|