D-Net
/
dnet-applications
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

typed params in new api form

This commit is contained in:
Michele Artini 2023-02-03 11:45:21 +01:00
parent 90d7b7626f
commit 78ffdd538a
3 changed files with 75 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
frontends/dnet-is-application/src/app/dsm/dsm-add-api.dialog.html
View File

@ -4,7 +4,7 @@
<div mat-dialog-content> <div mat-dialog-content>
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;"> <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
<mat-label>Protocol</mat-label> <mat-label>Protocol</mat-label>
<mat-select matInput formControlName="protocol" required (selectionChange)="onChangeProtocol($event)"> <mat-select matInput formControlName="protocol" (selectionChange)="onChangeProtocol($event)">
<mat-option *ngFor="let i of protocols" [value]="i">{{i}}</mat-option> <mat-option *ngFor="let i of protocols" [value]="i">{{i}}</mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="addApiForm.get('protocol')?.invalid">This field is <strong>required</strong></mat-error> <mat-error *ngIf="addApiForm.get('protocol')?.invalid">This field is <strong>required</strong></mat-error>
@ -12,7 +12,7 @@
<mat-card style="margin-top: 10px;" *ngIf="selectedProtocol"> <mat-card style="margin-top: 10px;" *ngIf="selectedProtocol">
<mat-card-header> <mat-card-header>
<mat-card-title>API Description</mat-card-title> <mat-card-title>API Description</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content style="padding-top: 1em;"> <mat-card-content style="padding-top: 1em;">
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;"> <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
@ -27,49 +27,86 @@
<mat-form-field appearance="fill" floatLabel="always" style="width: 70%;"> <mat-form-field appearance="fill" floatLabel="always" style="width: 70%;">
<mat-label>Api ID (suffix)</mat-label> <mat-label>Api ID (suffix)</mat-label>
<input matInput formControlName="apiId" required placeholder="example: {{selectedProtocol}}_01" /> <input matInput formControlName="apiIdSuffix" placeholder="example: {{selectedProtocol}}_01" />
<mat-error *ngIf="addApiForm.get('apiId')?.invalid">This field is <strong>required</strong></mat-error> <mat-error *ngIf="addApiForm.get('apiIdSuffix')?.invalid">This field is
<strong>required</strong></mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill" floatLabel="always" style="width: 50%;"> <mat-form-field appearance="fill" floatLabel="always" style="width: 50%;">
<mat-label>Compatibility level</mat-label> <mat-label>Compatibility level</mat-label>
<mat-select matInput formControlName="compatibility" required> <mat-select matInput formControlName="compatibility">
<mat-option *ngFor="let i of compatibilityLevels" [value]="i">{{i}}</mat-option> <mat-option *ngFor="let i of compatibilityLevels" [value]="i">{{i}}</mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="addApiForm.get('compatibility')?.invalid">This field is <strong>required</strong></mat-error> <mat-error *ngIf="addApiForm.get('compatibility')?.invalid">This field is
<strong>required</strong></mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill" floatLabel="always" style="width: 50%;"> <mat-form-field appearance="fill" floatLabel="always" style="width: 50%;">
<mat-label>Content description</mat-label> <mat-label>Content description</mat-label>
<mat-select matInput formControlName="contentdescription" required> <mat-select matInput formControlName="contentdescription">
<mat-option *ngFor="let i of contentDescTypes" [value]="i">{{i}}</mat-option> <mat-option *ngFor="let i of contentDescTypes" [value]="i">{{i}}</mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="addApiForm.get('contentdescription')?.invalid">This field is <strong>required</strong></mat-error> <mat-error *ngIf="addApiForm.get('contentdescription')?.invalid">This field is
<strong>required</strong></mat-error>
</mat-form-field> </mat-form-field>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card style="margin-top: 10px;" *ngIf="selectedProtocol"> <mat-card style="margin-top: 10px;" *ngIf="selectedProtocol">
<mat-card-header> <mat-card-header>
<mat-card-title>Configuration Parameters</mat-card-title> <mat-card-title>Configuration Parameters</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content style="padding-top: 1em;"> <mat-card-content style="padding-top: 1em;">
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;"> <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
<mat-label>Base URL</mat-label> <mat-label>Base URL</mat-label>
<input matInput formControlName="baseurl" required /> <input matInput formControlName="baseurl" />
<mat-error *ngIf="addApiForm.get('baseurl')?.invalid">This field is <strong>required</strong></mat-error> <mat-error *ngIf="addApiForm.get('baseurl')?.invalid">This field is
<strong>required</strong></mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngFor="let p of selProtParams"> <ng-container *ngFor="let p of selProtParams">
<mat-label>Protocol: {{selectedProtocol}} - Parameter: {{p.label}}</mat-label> <ng-container *ngIf="!p.hasSelFunction">
<input matInput [formControlName]="paramPrefix + p.name" required /> <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;"
<mat-error *ngIf="addApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error> *ngIf="p.type != 'BOOLEAN'">
</mat-form-field> <mat-label>
<b>{{selectedProtocol}}</b> - {{p.label}}
<b *ngIf="p.type == 'LIST'">(Comma separeted values)</b>
<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-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>
<mat-select matInput [formControlName]="paramPrefix + p.name">
<mat-option></mat-option>
<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-form-field>
</ng-container>
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngIf="p.hasSelFunction">
<mat-label><b>{{selectedProtocol}}</b> - {{p.label}} <b *ngIf="p.type == 'LIST'">(multiple choice)</b></mat-label>
<mat-select matInput [formControlName]="paramPrefix + p.name" [multiple]="p.type == 'LIST'">
<mat-option *ngIf="p.type != 'LIST'"></mat-option>
<mat-option value="0">0 - TODO</mat-option>
<mat-option value="1">1 - TODO</mat-option>
<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-form-field>
</ng-container>
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;"> <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
<mat-label>XPath for Metatadata Identifier</mat-label> <mat-label>XPath for Metatadata Identifier</mat-label>
<input matInput formControlName="metadataIdentifierPath" required /> <input matInput formControlName="metadataIdentifierPath" />
<mat-error *ngIf="addApiForm.get('metadataIdentifierPath')?.invalid">This field is <strong>required</strong></mat-error> <mat-error *ngIf="addApiForm.get('metadataIdentifierPath')?.invalid">This field is
<strong>required</strong></mat-error>
</mat-form-field> </mat-form-field>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@ -79,9 +116,9 @@
<button mat-stroked-button color="primary" type="submit" [disabled]="!addApiForm.valid">Submit</button> <button mat-stroked-button color="primary" type="submit" [disabled]="!addApiForm.valid">Submit</button>
<button mat-stroked-button color="primary" mat-dialog-close>Close</button> <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
<mat-error *ngIf="addApiForm.errors?.['serverError']"> <mat-error *ngIf="addApiForm.errors?.['serverError']">
{{ addApiForm.errors?.['serverError'] }} {{ addApiForm.errors?.['serverError'] }}
</mat-error> </mat-error>
</div> </div>
</form> </form>
<!-- <!--

26
frontends/dnet-is-application/src/app/dsm/dsm.component.ts
View File

@ -8,7 +8,7 @@ import { MatSort } from '@angular/material/sort';
import { combineLatest } from 'rxjs'; import { combineLatest } from 'rxjs';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { PageEvent } from '@angular/material/paginator'; import { PageEvent } from '@angular/material/paginator';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select'; import { MatSelectChange } from '@angular/material/select';
@Component({ @Component({
@ -174,14 +174,13 @@ export class DsmAddApiDialog {
protocolsMap:any = {}; protocolsMap:any = {};
selProtParams:ProtocolParam[] = []; selProtParams:ProtocolParam[] = [];
apiIdControl = new FormControl('', [Validators.required]);
addApiForm:FormGroup = new FormGroup({ addApiForm:FormGroup = new FormGroup({
apiId: this.apiIdControl, apiIdSuffix: new FormControl('', [Validators.required]),
compatibility : new FormControl(''), compatibility : new FormControl('', [Validators.required]),
contentdescription : new FormControl(''), contentdescription : new FormControl('', [Validators.required]),
protocol : new FormControl(''), protocol : new FormControl('', [Validators.required]),
baseurl : new FormControl(''), baseurl : new FormControl('', [Validators.required]),
metadataIdentifierPath : new FormControl('') metadataIdentifierPath : new FormControl('', [Validators.required])
}); });
constructor(public dialogRef: MatDialogRef<DsmAddApiDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) { constructor(public dialogRef: MatDialogRef<DsmAddApiDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
@ -207,7 +206,12 @@ export class DsmAddApiDialog {
if (this.protocolsMap[e.value]) { if (this.protocolsMap[e.value]) {
this.selProtParams = this.protocolsMap[e.value]; this.selProtParams = this.protocolsMap[e.value];
this.selProtParams.forEach(p => this.addApiForm.addControl(this.paramPrefix + p.name, new FormControl(''))); 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));
});
} else { } else {
this.selProtParams = []; this.selProtParams = [];
} }
@ -215,7 +219,7 @@ export class DsmAddApiDialog {
onSubmit():void { onSubmit():void {
let api:ApiInsert = { let api:ApiInsert = {
id: this.apiPrefix + this.apiIdControl.value, id: this.apiPrefix + this.addApiForm.get('apiIdSuffix')?.value,
protocol: this.selectedProtocol, protocol: this.selectedProtocol,
datasource: this.data.dsId, datasource: this.data.dsId,
contentdescription: this.addApiForm.get('contentdescription')?.value, contentdescription: this.addApiForm.get('contentdescription')?.value,
@ -232,7 +236,7 @@ export class DsmAddApiDialog {
if (val) { if (val) {
api.apiParams.push({ api.apiParams.push({
param: k.substring(this.paramPrefix.length), param: k.substring(this.paramPrefix.length),
value: val value: (Array.isArray(val)) ? val.join() : val
}); });
} }
} }

2
frontends/dnet-is-application/src/app/protocols/protocols.component.html
View File

@ -39,7 +39,7 @@
<!-- Row shown when there is no matching data. --> <!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow> <tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="5">No parameters</td> <td class="mat-cell" colspan="5" style="padding: 0 16px;">No parameters</td>
</tr> </tr>
</table> </table>
</div> </div>