You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
8.1 KiB
HTML
182 lines
8.1 KiB
HTML
<form *ngIf="formGroup" [formGroup]="formGroup" class="dataset-external-references-editor">
|
|
<mat-card class="col-12 external-item-card">
|
|
<div class="row">
|
|
<div class="col-12 row">
|
|
<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}</h4>
|
|
<div class="col"></div>
|
|
<div class="col-auto" *ngIf='!viewOnly'>
|
|
<button class="col-auto" mat-raised-button color="primary" (click)="addDataRepository()">
|
|
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<app-external-item-listing class="col-12" *ngIf="formGroup.get('dataRepositories') && dataRepositoriesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.dataRepositories" placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}" [parentTemplate]='dataRepositoriesTemplate' [formArray]="formGroup.get('dataRepositories')" [autoCompleteConfiguration]="dataRepositoriesAutoCompleteConfiguration" (onItemChange)="dataRepositoriesOnItemChange($event)">
|
|
</app-external-item-listing>
|
|
<ng-template #dataRepositoriesTemplate let-suggestion let-i="index" let-callback="function">
|
|
<div class="col-12 row align-items-center">
|
|
<span class="col">
|
|
{{i+1}}) {{suggestion.get('name').value}}
|
|
</span>
|
|
<div class="col-auto">
|
|
<mat-form-field>
|
|
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-auto" *ngIf='!viewOnly'>
|
|
<button mat-icon-button (click)="callback(i)">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</mat-card>
|
|
<mat-card class="col-12 external-item-card">
|
|
<div class="row">
|
|
<div class="col-12 row">
|
|
<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}</h4>
|
|
<div class="col"></div>
|
|
<div class="col-auto" *ngIf='!viewOnly'><button mat-raised-button color="primary" (click)="addExternalDataset()">
|
|
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<span>{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS-DESCRIPTION' | translate}}</span>
|
|
</div>
|
|
</div>
|
|
<app-external-item-listing class="col-12" *ngIf="formGroup.get('externalDatasets') && externalDatasetsTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.externalDatasets" placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}" [parentTemplate]='externalDatasetsTemplate' [formArray]="formGroup.get('externalDatasets')" [autoCompleteConfiguration]="externalDatasetAutoCompleteConfiguration" (onItemChange)="externalDatasetsOnItemChange($event)">
|
|
</app-external-item-listing>
|
|
|
|
<ng-template #externalDatasetsTemplate let-suggestion let-i="index" let-callback="function">
|
|
<div class="col-12 row align-items-center">
|
|
<div class="col">
|
|
<p>
|
|
{{i+1}}) {{suggestion.get('name').value}}
|
|
</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<mat-form-field>
|
|
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASET-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<mat-form-field>
|
|
<mat-select placeholder="{{'DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-DATASET-TYPE' | translate}}" [formControl]="suggestion.get('type')" required>
|
|
<mat-option [value]="0">{{'TYPES.EXTERNAL-DATASET-TYPE.SOURCE' | translate}}</mat-option>
|
|
<mat-option [value]="1">{{'TYPES.EXTERNAL-DATASET-TYPE.OUTPUT' | translate}}</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="suggestion.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</mat-card>
|
|
|
|
<mat-card class="col-12 external-item-card">
|
|
<div class="row">
|
|
<div class="col-12 row">
|
|
<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}</h4>
|
|
<div class="col"></div>
|
|
<div class="col-auto" *ngIf='!viewOnly'><button mat-raised-button color="primary" (click)="addRegistry()">
|
|
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<app-external-item-listing class="col-12" *ngIf="formGroup.get('registries') && registriesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.registries" placeholder="{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}" [parentTemplate]='registriesTemplate' [formArray]="formGroup.get('registries')" [autoCompleteConfiguration]="registriesAutoCompleteConfiguration" (onItemChange)="registriesOnItemChange($event)">
|
|
</app-external-item-listing>
|
|
|
|
<ng-template #registriesTemplate let-suggestion let-i="index" let-callback="function">
|
|
<div class="col-12 row align-items-center">
|
|
<div class="col">
|
|
<p>
|
|
{{i+1}}) {{suggestion.get('label').value}}
|
|
</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</mat-card>
|
|
|
|
<mat-card class="col-12 external-item-card">
|
|
<div class="row">
|
|
<div class="col-12 row">
|
|
<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}</h4>
|
|
<div class="col"></div>
|
|
<div class="col-auto" *ngIf='!viewOnly'>
|
|
<button mat-raised-button color="primary" (click)="addService()">
|
|
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<app-external-item-listing class="col-12" *ngIf="formGroup.get('services') && servicesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.services" placeholder="{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}" [parentTemplate]='servicesTemplate' [formArray]="formGroup.get('services')" [autoCompleteConfiguration]="servicesAutoCompleteConfiguration" (onItemChange)="servicesOnItemChange($event)">
|
|
</app-external-item-listing>
|
|
|
|
<ng-template #servicesTemplate let-suggestion let-i="index" let-callback="function">
|
|
<div class="col-12 row align-items-center">
|
|
<div class="col">
|
|
<p>
|
|
{{i+1}}) {{suggestion.get('label').value}}
|
|
</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</mat-card>
|
|
|
|
<mat-card class="col-12 external-item-card">
|
|
<div class="row">
|
|
<div class="col-12 row">
|
|
<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}</h4>
|
|
</div>
|
|
</div>
|
|
<!-- <app-external-item-listing *ngIf="formGroup.get('tags') && tagsTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.tags" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}" [parentTemplate]='tagsTemplate' [formArray]="formGroup.get('tags')" [autoCompleteConfiguration]="tagsAutoCompleteConfiguration" (onItemChange)="tagsOnItemChange($event)">
|
|
</app-external-item-listing> -->
|
|
<mat-form-field>
|
|
<mat-chip-list #chipList>
|
|
<mat-chip *ngFor="let tag of formGroup.get('tags').value"
|
|
[removable]="true" (removed)="removeTag(tag)">
|
|
{{tag.name}}
|
|
<mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
|
|
</mat-chip>
|
|
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"
|
|
[matChipInputFor]="chipList"
|
|
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
|
[matChipInputAddOnBlur]="true"
|
|
(matChipInputTokenEnd)="addTag($event)">
|
|
</mat-chip-list>
|
|
</mat-form-field>
|
|
|
|
<ng-template #tagsTemplate let-suggestion let-i="index" let-callback="function">
|
|
<div class="col-12 row align-items-center">
|
|
<div class="col">
|
|
<p>
|
|
{{i+1}}) {{suggestion.get('name').value}}
|
|
</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</mat-card>
|
|
</form>
|