103 lines
5.9 KiB
HTML
103 lines
5.9 KiB
HTML
<form [formGroup]="addApiForm" (ngSubmit)="onSubmit()">
|
|
<h1 mat-dialog-title>Add a new API</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" required (selectionChange)="onChangeProtocol($event)">
|
|
<mat-option *ngFor="let i of protocols" [value]="i">{{i}}</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="addApiForm.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 readonly value="{{data.dsName}}" />
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" floatLabel="always" style="width: 30%;">
|
|
<mat-label>Api ID (prefix)</mat-label>
|
|
<input matInput readonly value="{{apiPrefix}}" />
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" floatLabel="always" style="width: 70%;">
|
|
<mat-label>Api ID (suffix)</mat-label>
|
|
<input matInput formControlName="apiId" required placeholder="example: {{selectedProtocol}}_01" />
|
|
<mat-error *ngIf="addApiForm.get('apiId')?.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" required>
|
|
<mat-option *ngFor="let i of compatibilityLevels" [value]="i">{{i}}</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="addApiForm.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" required>
|
|
<mat-option *ngFor="let i of contentDescTypes" [value]="i">{{i}}</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="addApiForm.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" required />
|
|
<mat-error *ngIf="addApiForm.get('baseurl')?.invalid">This field is <strong>required</strong></mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngFor="let p of selProtParams">
|
|
<mat-label>Protocol: {{selectedProtocol}} - Parameter: {{p.label}}</mat-label>
|
|
<input matInput [formControlName]="paramPrefix + p.name" required />
|
|
<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%;">
|
|
<mat-label>XPath for Metatadata Identifier</mat-label>
|
|
<input matInput formControlName="metadataIdentifierPath" required />
|
|
<mat-error *ngIf="addApiForm.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]="!addApiForm.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>
|
|
</div>
|
|
</form>
|
|
|
|
<!--
|
|
<form-textfield-static label="Datasource" value="dsName"></form-textfield-static>
|
|
<form-textfield-with-prefix label="API Id" prefix="{{prefix}}" value="api.id"></form-textfield-with-prefix>
|
|
<form-select label="Compatibility level" terms="compatibilityLevels" value="api.compliance"></form-select>
|
|
<form-select label="Content description" terms="contentDescTypes" value="api.contentdescription"></form-select>
|
|
<form-select label="Protocol" terms="protocols" value="api.protocol"></form-select>
|
|
<form-textfield label="BaseURL" value="api.baseUrl" regex="^(http|https|ftp|file|sftp|jar|mongodb):\/\/"></form-textfield>
|
|
|
|
<div ng-show="api.protocol" ng-repeat="p in selProtParams">
|
|
<form-textfield label="Parameter: {{p.label}}" value="api.apiParams[p.name]" type="{{p.type}}" optional="{{p.optional}}"></form-textfield>
|
|
</div>
|
|
|
|
{{api}}
|
|
<br />
|
|
|
|
<button type="submit" class="btn btn-sm btn-primary">Add API</button>
|
|
--> |