argos/dmp-frontend/src/app/ui/description/editor/prefill-description/prefill-description.component.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>