135 lines
6.4 KiB
HTML
135 lines
6.4 KiB
HTML
<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)" *ngIf="insertMode">
|
|
<mat-option *ngFor="let i of dsmConfService.getProtocols()" [value]="i">{{i}}</mat-option>
|
|
</mat-select>
|
|
<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">
|
|
<mat-card-header>
|
|
<mat-card-title>API Description</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content style="padding-top: 1em;">
|
|
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
|
|
<mat-label>Datasource (ID: {{data.dsId}})</mat-label>
|
|
<input matInput disabled="disabled" value="{{data.dsName}}" />
|
|
</mat-form-field>
|
|
|
|
<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%;" *ngIf="insertMode">
|
|
<mat-label>Api ID (suffix)</mat-label>
|
|
<input matInput formControlName="apiIdSuffix" placeholder="example: {{selectedProtocol}}_01" />
|
|
<mat-error *ngIf="editApiForm.get('apiIdSuffix')?.invalid">This field is
|
|
<strong>required</strong></mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" floatLabel="always" style="width: 50%;">
|
|
<mat-label>Compatibility level</mat-label>
|
|
<mat-select matInput formControlName="compatibility">
|
|
<mat-option *ngFor="let i of dsmConfService.getCompatibilityLevels()" [value]="i">{{i}}</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="editApiForm.get('compatibility')?.invalid">This field is
|
|
<strong>required</strong></mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" floatLabel="always" style="width: 50%;">
|
|
<mat-label>Content description</mat-label>
|
|
<mat-select matInput formControlName="contentdescription">
|
|
<mat-option *ngFor="let i of dsmConfService.getContentDescTypes()" [value]="i">{{i}}</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="editApiForm.get('contentdescription')?.invalid">This field is
|
|
<strong>required</strong></mat-error>
|
|
</mat-form-field>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|
|
<mat-card style="margin-top: 10px;" *ngIf="selectedProtocol">
|
|
<mat-card-header>
|
|
<mat-card-title>Configuration Parameters</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content style="padding-top: 1em;">
|
|
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
|
|
<mat-label>Base URL</mat-label>
|
|
<input matInput formControlName="baseurl" />
|
|
<mat-error *ngIf="editApiForm.get('baseurl')?.invalid">
|
|
Invalid URL
|
|
<span *ngIf="editApiForm.get('baseurl')?.errors?.['pattern']?.['requiredPattern']">
|
|
- Required Pattern: {{editApiForm.get('baseurl')?.errors?.['pattern']?.['requiredPattern']}}
|
|
</span>
|
|
<span *ngIf="editApiForm.get('baseurl')?.hasError('required')">: This field is
|
|
<strong>required</strong></span>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<ng-container *ngFor="let p of selProtParams">
|
|
<ng-container *ngIf="!p.hasSelFunction">
|
|
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngIf="p.type != 'BOOLEAN'">
|
|
<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="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>
|
|
<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="editApiForm.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="editApiForm.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-label>XPath for Metatadata Identifier</mat-label>
|
|
<input matInput formControlName="metadataIdentifierPath" />
|
|
<mat-error *ngIf="editApiForm.get('metadataIdentifierPath')?.invalid">This field is
|
|
<strong>required</strong></mat-error>
|
|
</mat-form-field>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
|
|
<div mat-dialog-actions>
|
|
<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="editApiForm.errors?.['serverError']">
|
|
{{ editApiForm.errors?.['serverError'] }}
|
|
</mat-error>
|
|
</div>
|
|
</form>
|