argos/dmp-frontend/src/app/ui/description/editor/prefill-description/prefill-description.compone...

69 lines
3.8 KiB
HTML

<div class="template-container">
<div mat-dialog-title class="row d-flex p-0 m-0 header">
<span class="col template-title align-self-center">{{'PREFILL-DESCRIPTION-DIALOG.TITLE' | translate}}</span>
<span class="col-auto d-flex ml-auto align-self-center" (click)="closeDialog()"><mat-icon
class="close-icon">close</mat-icon></span>
</div>
<div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
</div>
<div mat-dialog-content *ngIf="prefillForm" [formGroup]="prefillForm" class="definition-content">
<div class="row d-flex align-items-center justify-content-center">
<div class="pb-4 pl-4 pr-4">
{{'PREFILL-DESCRIPTION-DIALOG.HINT' | translate}}
</div>
</div>
<div class="row d-flex align-items-center justify-content-center" [class.pb-4]="prefillSelected">
<button mat-raised-button type="button" class="empty-btn"
(click)="closeDialog()">{{'PREFILL-DESCRIPTION-DIALOG.ACTIONS.MANUALLY' | translate}}</button>
<div class="ml-2 mr-2">{{'PREFILL-DESCRIPTION-DIALOG.OR' | translate}}</div>
<button mat-raised-button type="button" class="prefill-btn"
(click)="prefillSelected = true">{{'PREFILL-DESCRIPTION-DIALOG.ACTIONS.PREFILL' | translate}}</button>
</div>
<div *ngIf="prefillSelected" class="row">
<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
<h4 class="col-auto heading">{{'PREFILL-DESCRIPTION-DIALOG.DESCRIPTION-TEMPLATE' | translate}}</h4>
</div>
<mat-form-field class="col-md-12">
<mat-select placeholder="{{'PREFILL-DESCRIPTION-DIALOG.DESCRIPTION-TEMPLATE'| translate}}" [required]="true" [compareWith]="compareWith" [formControl]="prefillForm.get('descriptionTemplateId')">
<mat-option *ngFor="let descriptionTemplate of availableDescriptionTemplates" [value]="descriptionTemplate.id">
<div>
<span>{{descriptionTemplate.label}}, </span>
<span>{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE-VERSION'| translate}} {{descriptionTemplate.version}}</span>
</div>
</mat-option>
</mat-select>
<mat-error *ngIf="prefillForm.get('descriptionTemplateId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
<h4 class="col-auto heading">{{'PREFILL-DESCRIPTION-DIALOG.PREFILLING-SOURCE' | translate}}</h4>
</div>
<mat-form-field class="col-md-12">
<app-single-auto-complete [required]="true" [formControl]="prefillForm.get('prefillingSourceId')"
placeholder="{{'PREFILL-DESCRIPTION-DIALOG.PREFILLING-SOURCE' | translate}}"
[configuration]="prefillingSourceService.singleAutocompleteConfiguration" (optionSelected)="changePreffillingSource($event)">
</app-single-auto-complete>
<mat-error *ngIf="prefillForm.get('prefillingSourceId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div *ngIf="prefillForm.get('prefillingSourceId').value != null" class="row">
<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
<h4 class="col-auto heading">{{'PREFILL-DESCRIPTION-DIALOG.SEARCH-HEADER' | translate}}</h4>
</div>
<mat-form-field class="col-md-12">
<app-single-auto-complete [required]="true" [formControl]="prefillForm.get('data')"
placeholder="{{'PREFILL-DESCRIPTION-DIALOG.SEARCH' | translate}}"
[configuration]="prefillAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
</div>
</div>
<div *ngIf="prefillSelected">
<div class="col-auto d-flex pb-4 pt-2">
<button mat-raised-button type="button" class="prefill-btn ml-auto" [disabled]="prefillForm.invalid"
(click)="next()">{{'PREFILL-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
</div>
</div>
</div>