argos/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html

<div class="container-fluid">
	<div class="row" [formGroup]="formGroup">
		<div class="col-9 pt-4 pb-4 pl-4">
			<div class="row pt-2">
				<mat-form-field class="col-8">
					<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label"
						formControlName="label" required>
					<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
						{{formGroup.get('label').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('label').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
				</mat-form-field>
			</div>
			<div class="row pt-2">
				<mat-form-field class="col-8">
					<!-- <textarea matInput class="description-area" -->
					<textarea rows="1" matInput class="description-area"
						placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
					</textarea>
					<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
						{{formGroup.get('description').getError('backendError').message}}
					</mat-error>
					<mat-error *ngIf="formGroup.get('description').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error> -->
				</mat-form-field>
			</div>
			<div class="row pt-2">
				<mat-form-field class="col-8">
					<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
						placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}"
						[configuration]="profilesAutoCompleteConfiguration">
					</app-multiple-auto-complete>
					<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
						{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled"
						(click)="availableProfiles()">
						<mat-icon class="icon-btn">view_list</mat-icon>
					</button>
				</mat-form-field>
				<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
			</div>
			<div class="row pt-1">
				<mat-form-field class="col-8">
					<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
						placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
						[configuration]="organisationsAutoCompleteConfiguration">
					</app-multiple-auto-complete>
					<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
						{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
												translate}}</mat-error>
					<mat-hint>{{'DMP-EDITOR.FIELDS.ORGANISATIONS-HINT' | translate}}</mat-hint>
				</mat-form-field>
			</div>
			<div class="row pt-3">
				<mat-form-field class="col-8">
					<app-multiple-auto-complete [formControl]="formGroup.get('researchers')"
						placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
						[configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete>
					<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
						{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
					<mat-error *ngIf="formGroup.get('researchers').hasError('required')">
						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					<button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button"
						(click)="addResearcher()">
						<mat-icon class="icon-btn">add_circle</mat-icon>
					</button>
				</mat-form-field>
				<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
			</div>
			<div class="row pt-2">
				<mat-form-field class="col-8">
					<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')"
						placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}"
						[configuration]="dmpProfileAutoCompleteConfiguration">
					</app-single-auto-complete>
				</mat-form-field>
			</div>
			<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" [formGroup]="formGroup"
				[dmpProfileDefinition]="selectedDmpProfileDefinition"
				[dmpProfileId]="selectedDmpProfileId">
			</app-dynamic-dmp-field-resolver>
		</div>

		<!-- Versioning Container-->
		<div class="col-2">
			<div class='row version-menu'>
				<mat-form-field class="col-auto">
					<input matInput placeholder="Version" disabled
						[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
				</mat-form-field>
				<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12" [formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
				<div class="col-auto mb-2">
					{{ 'DATASET-EDITOR.VERSION-DIALOG.ABOUT' | translate }}
				</div>
				<!-- Versioning Actions -->
				<!-- <div class="col-auto d-flex align-content-center mb-1" style="cursor: pointer;">
							<mat-icon>edit</mat-icon>
							<span>Click here to edit</span>
						</div>
						<div class="col-auto d-flex align-content-center mb-3" style="cursor: pointer;">
							<mat-icon>history</mat-icon>
							Click here to view previous versions
						</div> -->
			</div>
		</div>
	</div>
</div>