partial implementation of edit api
This commit is contained in:
parent
7310b66f34
commit
28b4145d89
|
|
@ -31,7 +31,7 @@ import { ResourcesComponent, ResContentDialog, ResCreateNewDialog, ResMetadataDi
|
|||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { ContextsComponent, ContextViewerComponent } from './contexts/contexts.component';
|
||||
import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component';
|
||||
import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiDialog, DsmBrowseDialog, DsmAddWorkflowDialog } from './dsm/dsm.component';
|
||||
import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmEditApiDialog, DsmBrowseDialog, DsmAddWorkflowDialog } from './dsm/dsm.component';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { SpinnerHttpInterceptor } from './common/spinner.service';
|
||||
|
|
@ -71,7 +71,7 @@ import { MatNativeDateModule } from '@angular/material/core';
|
|||
DsmSearchComponent,
|
||||
DsmResultsComponent,
|
||||
DsmApiComponent,
|
||||
DsmAddApiDialog,
|
||||
DsmEditApiDialog,
|
||||
DsmBrowseDialog,
|
||||
DsmAddWorkflowDialog,
|
||||
MdstoresComponent,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@
|
|||
<mat-icon fontIcon="history"></mat-icon>
|
||||
history
|
||||
</button>
|
||||
<button mat-stroked-button (click)="newEditApiDialog()">
|
||||
<mat-icon fontIcon="edit"></mat-icon>
|
||||
edit api
|
||||
</button>
|
||||
<button mat-stroked-button color="warn" (click)="deleteApi()" [disabled]="!api.removable || api.active">
|
||||
<mat-icon fontIcon="delete"></mat-icon>
|
||||
delete api
|
||||
|
|
@ -104,18 +108,13 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<th align="left" width="20%">Protocol</th>
|
||||
<td width="80%">
|
||||
{{api.protocol}}
|
||||
<a (click)="newEditApiDialog()" style="float: right;">edit</a>
|
||||
</td>
|
||||
<td width="80%">{{api.protocol}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th align="left" width="20%">Compliance</th>
|
||||
<td width="80%">
|
||||
<span *ngIf="api.compatibilityOverrided">{{api.compatibilityOverride}}</span>
|
||||
<span *ngIf="!api.compatibilityOverrided">{{api.compatibility}}</span>
|
||||
|
||||
<span style="float: right;">OVERRIDE (TODO)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="api.lastColletionMdid">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<form [formGroup]="addApiForm" (ngSubmit)="onSubmit()">
|
||||
<h1 mat-dialog-title>Add a new API</h1>
|
||||
<form [formGroup]="editApiForm" (ngSubmit)="onSubmit()">
|
||||
<h1 mat-dialog-title *ngIf="insertMode">Add a new API</h1>
|
||||
<h1 mat-dialog-title *ngIf="!insertMode">Edit API: {{data.api.id}}</h1>
|
||||
|
||||
<div mat-dialog-content>
|
||||
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
|
||||
<mat-label>Protocol</mat-label>
|
||||
<mat-select matInput formControlName="protocol" (selectionChange)="onChangeProtocol($event)">
|
||||
<mat-select matInput formControlName="protocol" (selectionChange)="onChangeProtocol($event)" *ngIf="insertMode">
|
||||
<mat-option *ngFor="let i of dsmConfService.getProtocols()" [value]="i">{{i}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="addApiForm.get('protocol')?.invalid">This field is <strong>required</strong></mat-error>
|
||||
<input matInput formControlName="protocol" *ngIf="!insertMode" />
|
||||
<mat-error *ngIf="editApiForm.get('protocol')?.invalid">This field is <strong>required</strong></mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-card style="margin-top: 10px;" *ngIf="selectedProtocol">
|
||||
|
|
@ -20,15 +22,20 @@
|
|||
<input matInput disabled="disabled" value="{{data.dsName}}" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill" floatLabel="always" style="width: 30%;">
|
||||
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngIf="!insertMode">
|
||||
<mat-label>Api ID</mat-label>
|
||||
<input matInput disabled="disabled" value="{{data.api.id}}" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill" floatLabel="always" style="width: 30%;" *ngIf="insertMode">
|
||||
<mat-label>Api ID (prefix)</mat-label>
|
||||
<input matInput disabled="disabled" value="{{apiPrefix}}" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill" floatLabel="always" style="width: 70%;">
|
||||
<mat-form-field appearance="fill" floatLabel="always" style="width: 70%;" *ngIf="insertMode">
|
||||
<mat-label>Api ID (suffix)</mat-label>
|
||||
<input matInput formControlName="apiIdSuffix" placeholder="example: {{selectedProtocol}}_01" />
|
||||
<mat-error *ngIf="addApiForm.get('apiIdSuffix')?.invalid">This field is
|
||||
<mat-error *ngIf="editApiForm.get('apiIdSuffix')?.invalid">This field is
|
||||
<strong>required</strong></mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
|
@ -37,7 +44,7 @@
|
|||
<mat-select matInput formControlName="compatibility">
|
||||
<mat-option *ngFor="let i of dsmConfService.getCompatibilityLevels()" [value]="i">{{i}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="addApiForm.get('compatibility')?.invalid">This field is
|
||||
<mat-error *ngIf="editApiForm.get('compatibility')?.invalid">This field is
|
||||
<strong>required</strong></mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
|
@ -46,7 +53,7 @@
|
|||
<mat-select matInput formControlName="contentdescription">
|
||||
<mat-option *ngFor="let i of dsmConfService.getContentDescTypes()" [value]="i">{{i}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="addApiForm.get('contentdescription')?.invalid">This field is
|
||||
<mat-error *ngIf="editApiForm.get('contentdescription')?.invalid">This field is
|
||||
<strong>required</strong></mat-error>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
|
|
@ -60,9 +67,9 @@
|
|||
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
|
||||
<mat-label>Base URL</mat-label>
|
||||
<input matInput formControlName="baseurl" />
|
||||
<mat-error *ngIf="addApiForm.get('baseurl')?.invalid">
|
||||
<mat-error *ngIf="editApiForm.get('baseurl')?.invalid">
|
||||
Invalid URL
|
||||
<span *ngIf="addApiForm.get('baseurl')?.hasError('required')">: This field is
|
||||
<span *ngIf="editApiForm.get('baseurl')?.hasError('required')">: This field is
|
||||
<strong>required</strong></span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
|
@ -76,7 +83,7 @@
|
|||
<b *ngIf="p.type == 'INT'">(Numeric)</b>
|
||||
</mat-label>
|
||||
<input matInput [formControlName]="paramPrefix + p.name" />
|
||||
<mat-error *ngIf="addApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error>
|
||||
<mat-error *ngIf="editApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngIf="p.type == 'BOOLEAN'">
|
||||
<mat-label><b>{{selectedProtocol}}</b> - {{p.label}} <b>(true/false)</b></mat-label>
|
||||
|
|
@ -85,7 +92,7 @@
|
|||
<mat-option value="true">true</mat-option>
|
||||
<mat-option value="false">false</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="addApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error>
|
||||
<mat-error *ngIf="editApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
|
||||
|
|
@ -99,7 +106,7 @@
|
|||
<mat-option value="2">2 - TODO</mat-option>
|
||||
<mat-option value="3">3 - TODO</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="addApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error>
|
||||
<mat-error *ngIf="editApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
|
||||
|
|
@ -107,7 +114,7 @@
|
|||
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
|
||||
<mat-label>XPath for Metatadata Identifier</mat-label>
|
||||
<input matInput formControlName="metadataIdentifierPath" />
|
||||
<mat-error *ngIf="addApiForm.get('metadataIdentifierPath')?.invalid">This field is
|
||||
<mat-error *ngIf="editApiForm.get('metadataIdentifierPath')?.invalid">This field is
|
||||
<strong>required</strong></mat-error>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
|
|
@ -115,10 +122,10 @@
|
|||
</div>
|
||||
|
||||
<div mat-dialog-actions>
|
||||
<button mat-stroked-button color="primary" type="submit" [disabled]="!addApiForm.valid">Submit</button>
|
||||
<button mat-stroked-button color="primary" type="submit" [disabled]="!editApiForm.valid">Submit</button>
|
||||
<button mat-stroked-button color="primary" mat-dialog-close>Close</button>
|
||||
<mat-error *ngIf="addApiForm.errors?.['serverError']">
|
||||
{{ addApiForm.errors?.['serverError'] }}
|
||||
<mat-error *ngIf="editApiForm.errors?.['serverError']">
|
||||
{{ editApiForm.errors?.['serverError'] }}
|
||||
</mat-error>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -105,7 +105,7 @@ export class DsmResultsComponent implements OnInit {
|
|||
}
|
||||
|
||||
openAddApiDialog(dsId: string, dsName: string) {
|
||||
const dialogRef = this.dialog.open(DsmAddApiDialog, {
|
||||
const dialogRef = this.dialog.open(DsmEditApiDialog, {
|
||||
data: { dsId: dsId, dsName: dsName },
|
||||
width: '80%'
|
||||
});
|
||||
|
|
@ -225,7 +225,14 @@ export class DsmApiComponent implements OnInit {
|
|||
}
|
||||
|
||||
newEditApiDialog() {
|
||||
alert('TODO EDIT WF DIALOG');
|
||||
const dialogRef = this.dialog.open(DsmEditApiDialog, {
|
||||
data: { dsId: this.ds.id, dsName: this.ds.officialname, api: this.api },
|
||||
width: '80%'
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
if (result) this.reload();
|
||||
});
|
||||
}
|
||||
|
||||
newEditWfConfDialog(conf: WfConf) {
|
||||
|
|
@ -277,51 +284,71 @@ export class DsmBrowseDialog implements OnInit {
|
|||
|
||||
|
||||
@Component({
|
||||
selector: 'dsm-add-api-dialog',
|
||||
templateUrl: './dsm-add-api.dialog.html',
|
||||
selector: 'dsm-edit-api-dialog',
|
||||
templateUrl: './dsm-edit-api.dialog.html',
|
||||
styleUrls: []
|
||||
})
|
||||
export class DsmAddApiDialog implements OnInit {
|
||||
export class DsmEditApiDialog implements OnInit {
|
||||
selectedProtocol: string = '';
|
||||
apiPrefix: string = '';
|
||||
paramPrefix: string = '__PARAM_';
|
||||
selProtParams: ProtocolParam[] = [];
|
||||
insertMode: boolean = true;
|
||||
|
||||
addApiForm: FormGroup = new FormGroup({
|
||||
apiIdSuffix: new FormControl('', [Validators.required]),
|
||||
compatibility: new FormControl('', [Validators.required]),
|
||||
contentdescription: new FormControl('', [Validators.required]),
|
||||
protocol: new FormControl('', [Validators.required]),
|
||||
baseurl: new FormControl('', [Validators.required, Validators.pattern('^(http|https|ftp|file|sftp|jar|mongodb):\/\/')]),
|
||||
metadataIdentifierPath: new FormControl('', [Validators.required])
|
||||
});
|
||||
editApiForm: FormGroup = new FormGroup({});
|
||||
|
||||
constructor(public dsmConfService: DsmConfService, public dialogRef: MatDialogRef<DsmAddApiDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public client: DsmClient) {
|
||||
constructor(public dsmConfService: DsmConfService, public dialogRef: MatDialogRef<DsmEditApiDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public client: DsmClient) {
|
||||
this.apiPrefix = 'api_________::' + data.dsId + '::';
|
||||
|
||||
if (data.api && data.api.id) {
|
||||
this.insertMode = false;
|
||||
}
|
||||
|
||||
this.editApiForm.addControl('apiIdSuffix', new FormControl('', [Validators.required]));
|
||||
|
||||
if (this.insertMode) {
|
||||
this.editApiForm.addControl('compatibility', new FormControl('', [Validators.required]));
|
||||
this.editApiForm.addControl('contentdescription', new FormControl('', [Validators.required]));
|
||||
this.editApiForm.addControl('protocol', new FormControl('', [Validators.required]));
|
||||
this.editApiForm.addControl('baseurl', new FormControl('', [Validators.required, Validators.pattern('^(http|https|ftp|file|sftp|jar|mongodb):\/\/')]));
|
||||
this.editApiForm.addControl('metadataIdentifierPath', new FormControl('', [Validators.required]));
|
||||
} else {
|
||||
this.editApiForm.addControl('compatibility', new FormControl(this.data.api.compatibility, [Validators.required]));
|
||||
this.editApiForm.addControl('contentdescription', new FormControl({ value: this.data.api.contentdescription, disabled: true }, [Validators.required]));
|
||||
this.editApiForm.addControl('protocol', new FormControl({ value: this.data.api.protocol, disabled: true }, [Validators.required]));
|
||||
this.editApiForm.addControl('baseurl', new FormControl(this.data.api.baseurl, [Validators.required, Validators.pattern('^(http|https|ftp|file|sftp|jar|mongodb):\/\/')]));
|
||||
this.editApiForm.addControl('metadataIdentifierPath', new FormControl(this.data.api.metadataIdentifierPath, [Validators.required]));
|
||||
this.configureSelectedProtocol(this.data.api.protocol);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (!this.dsmConfService.isReady()) {
|
||||
this.client.dsmConf((data: DsmConf) => this.dsmConfService.updateConf(data));
|
||||
this.client.dsmConf((conf: DsmConf) => this.dsmConfService.updateConf(conf));
|
||||
}
|
||||
}
|
||||
|
||||
onChangeProtocol(e: MatSelectChange): void {
|
||||
this.selectedProtocol = e.value;
|
||||
this.configureSelectedProtocol(e.value);
|
||||
}
|
||||
|
||||
Object.keys(this.addApiForm.controls).forEach(k => {
|
||||
configureSelectedProtocol(protocol: string) {
|
||||
this.selectedProtocol = protocol;
|
||||
|
||||
Object.keys(this.editApiForm.controls).forEach(k => {
|
||||
if (k.startsWith(this.paramPrefix)) {
|
||||
this.addApiForm.removeControl(k);
|
||||
this.editApiForm.removeControl(k);
|
||||
}
|
||||
});
|
||||
|
||||
if (this.dsmConfService.getProtocolsMap()[e.value]) {
|
||||
this.selProtParams = this.dsmConfService.getProtocolsMap()[e.value];
|
||||
if (this.dsmConfService.getProtocolsMap()[this.selectedProtocol]) {
|
||||
this.selProtParams = this.dsmConfService.getProtocolsMap()[this.selectedProtocol];
|
||||
this.selProtParams.forEach(p => {
|
||||
let validations: ValidatorFn[] = [];
|
||||
if (!p.optional) { validations.push(Validators.required); }
|
||||
if (p.type == 'INT') { validations.push(Validators.pattern('^[0-9]*$')); }
|
||||
this.addApiForm.addControl(this.paramPrefix + p.name, new FormControl('', validations));
|
||||
this.editApiForm.addControl(this.paramPrefix + p.name, new FormControl('', validations));
|
||||
});
|
||||
} else {
|
||||
this.selProtParams = [];
|
||||
|
|
@ -329,31 +356,36 @@ export class DsmAddApiDialog implements OnInit {
|
|||
}
|
||||
|
||||
onSubmit(): void {
|
||||
let api: ApiInsert = {
|
||||
id: this.apiPrefix + this.addApiForm.get('apiIdSuffix')?.value,
|
||||
protocol: this.selectedProtocol,
|
||||
datasource: this.data.dsId,
|
||||
contentdescription: this.addApiForm.get('contentdescription')?.value,
|
||||
removable: true,
|
||||
compatibility: this.addApiForm.get('compatibility')?.value,
|
||||
metadataIdentifierPath: this.addApiForm.get('metadataIdentifierPath')?.value,
|
||||
baseurl: this.addApiForm.get('baseurl')?.value,
|
||||
apiParams: []
|
||||
};
|
||||
if (this.insertMode) {
|
||||
let api: ApiInsert = {
|
||||
id: this.apiPrefix + this.editApiForm.get('apiIdSuffix')?.value,
|
||||
protocol: this.selectedProtocol,
|
||||
datasource: this.data.dsId,
|
||||
contentdescription: this.editApiForm.get('contentdescription')?.value,
|
||||
removable: true,
|
||||
compatibility: this.editApiForm.get('compatibility')?.value,
|
||||
metadataIdentifierPath: this.editApiForm.get('metadataIdentifierPath')?.value,
|
||||
baseurl: this.editApiForm.get('baseurl')?.value,
|
||||
apiParams: []
|
||||
};
|
||||
|
||||
Object.keys(this.addApiForm.controls).forEach(k => {
|
||||
if (k.startsWith(this.paramPrefix)) {
|
||||
let val = this.addApiForm.get(k)?.value;
|
||||
if (val) {
|
||||
api.apiParams.push({
|
||||
param: k.substring(this.paramPrefix.length),
|
||||
value: (Array.isArray(val)) ? val.join() : val
|
||||
});
|
||||
Object.keys(this.editApiForm.controls).forEach(k => {
|
||||
if (k.startsWith(this.paramPrefix)) {
|
||||
let val = this.editApiForm.get(k)?.value;
|
||||
if (val) {
|
||||
api.apiParams.push({
|
||||
param: k.substring(this.paramPrefix.length),
|
||||
value: (Array.isArray(val)) ? val.join() : val
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(api);
|
||||
//this.service.dsmAddApi(api, (data: void) => this.dialogRef.close(1), this.metadataForm);
|
||||
});
|
||||
console.log(api);
|
||||
alert("TODO INSERT");
|
||||
//this.service.dsmAddApi(api, (data: void) => this.dialogRef.close(1), this.metadataForm);
|
||||
} else {
|
||||
alert("TODO UPDATE");
|
||||
}
|
||||
}
|
||||
|
||||
onNoClick(): void {
|
||||
|
|
|
|||
Loading…
Reference in New Issue