131 lines
3.5 KiB
TypeScript
131 lines
3.5 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, 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;
|
|
nameErrMsg: string;
|
|
descriptionErrMsg: string;
|
|
name: 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
|
|
}
|
|
}
|
|
|
|
onNameEditing(value: string) {
|
|
const msg: string = this.checkValidName(value);
|
|
if (msg !== null) {
|
|
this.nameErrMsg = msg;
|
|
} else {
|
|
this.nameErrMsg = null;
|
|
this.name = 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.name ? this.name : 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();
|
|
}
|
|
|
|
checkValidName(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;
|
|
}
|
|
}
|