argos/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html

<div class="data-management-plan-editor">
	<div fxLayout="row" fxLayoutAlign="space-between center">
		<mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
		<mat-card-title *ngIf="!isNew">
			<h3>{{formGroup?.get('label')?.value}} </h3>
		</mat-card-title>
		<button *ngIf="!editMode" mat-icon-button (click)="enableForm()">
			<mat-icon class="mat-24">edit</mat-icon>
		</button>
		<button *ngIf="editMode" mat-icon-button (click)="disableForm()">
			<mat-icon class="mat-24">lock</mat-icon>
		</button>
	</div>
	<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
		<mat-card>
			<mat-card-header>
				<div class="fill-space"></div>
				<div *ngIf="!isNew">
					<div>
						<button mat-button type="button" (click)="redirectToDatasets()">
							<mat-icon>arrow_right_alt</mat-icon>{{'DMP-EDITOR.ACTIONS.GO-TO-DATASETS' | translate}}
						</button>
					</div>
					<mat-menu #actionsMenu="matMenu">
						<button mat-menu-item (click)="newVersion(this.dataManagementPlan.id, this.dataManagementPlan.label)">
							<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
						</button>
						<button mat-menu-item (click)="clone(this.dataManagementPlan.id)">
							<mat-icon>filter_none</mat-icon>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}
						</button>
						<button mat-menu-item (click)="viewVersions(this.dataManagementPlan.groupId, this.dataManagementPlan.label)">
							<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
						</button>
						<button mat-menu-item (click)="downloadXml(this.dataManagementPlan.id)">
							<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
						</button>
						<button mat-menu-item (click)="downloadDocx(this.dataManagementPlan.id)">
							<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-DOCX' | translate}}
						</button>
						<button mat-menu-item (click)="downloadPDF(this.dataManagementPlan.id)">
							<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-PDF' | translate}}
						</button>
					</mat-menu>
					<div>
						<button mat-icon-button type="button" [matMenuTriggerFor]="actionsMenu">
							<mat-icon>more_vert</mat-icon>
						</button>
					</div>
				</div>
			</mat-card-header>
			<mat-card-content>
				<div class="row">
					<mat-form-field class="col-md-12">
						<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label"
						 required>
						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
						<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>

					<mat-form-field class="col-md-12">
						<textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}"
						 formControlName="description" required></textarea>
						<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error>
						<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>

					<div class="col-md-6">
						<app-single-auto-complete required='true' [reactiveFormControl]="formGroup.get('project')" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
						 [configuration]="projectAutoCompleteConfiguration">
						</app-single-auto-complete>
					</div>
					<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
					<div class="col-md-6">
						<div class="row">
							<app-multiple-auto-complete required='true' class="col-md-10" [reactiveFormControl]="formGroup.get('profiles')"
							 placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
							</app-multiple-auto-complete>
							<div class="col-md-2">
								<button mat-icon-button type="button" (click)="availableProfiles()">
									<mat-icon>view_list</mat-icon>
								</button>
							</div>
						</div>
					</div>
					<!-- <button mat-button (click)="availableProfiles()">View All</button> -->


					<div class="col-md-6">
						<app-multiple-auto-complete [reactiveFormControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
						 [configuration]="organisationsAutoCompleteConfiguration">
						</app-multiple-auto-complete>
					</div>
					<div class="col-md-6">
						<div class="row">
							<div class="col-md-10">
								<app-multiple-auto-complete [reactiveFormControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
								 [configuration]="researchersAutoCompleteConfiguration">
								</app-multiple-auto-complete>
							</div>
							<div class="col-md-2">
								<button mat-icon-button type="button" (click)="addResearcher()">
									<mat-icon>add_circle</mat-icon>
								</button>
							</div>
						</div>
					</div>

					<h3 mat-subheader class="col-md-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h3>

					<mat-form-field class="col-md-6">
						<input type="text" placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}" [formControl]="textCtrl" matInput
						 [matAutocomplete]="auto">
						<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith">
							<mat-option *ngFor="let option of filteredOptions | async" [value]="option" (click)="selectOption(option)">
								{{ option.label }}
							</mat-option>
						</mat-autocomplete>
					</mat-form-field>
					<app-dynamic-dmp-field-resolver class="col-md-12" *ngIf="dataManagementPlan.definition" [formGroup]="formGroup"
					 [dataManagementPlanProfile]="dataManagementPlan.definition"></app-dynamic-dmp-field-resolver>

					<mat-form-field class="col-md-6">
						<input matInput placeholder="Version" disabled [value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
					</mat-form-field>

					<div class="col-md-12">
						<mat-list *ngIf="associatedUsers?.length" role="list" class="col-md-12">
							<h3 mat-subheader>Associated Users</h3>
							<mat-list-item role="listitem" *ngFor="let user of associatedUsers">
								<mat-icon mat-list-icon>person</mat-icon>
								<div>{{user.name}}</div>
							</mat-list-item>
						</mat-list>
					</div>

					<div class="col-md-12">
						<div class="right-button">
							<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' |
								translate}}</button>
							<button *ngIf="this.formGroup.enabled" mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE'
								| translate}}</button>
							<button *ngIf="dataManagementPlan.lockable && this.formGroup.enabled" type="button" mat-raised-button color="primary"
							 (click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE'
								| translate}}</button>
							<button *ngIf="!isNew && this.formGroup.enabled" mat-raised-button color="primary" type="button" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)">{{'DMP-EDITOR.ACTIONS.DELETE'
								| translate}}</button>
						</div>
					</div>
				</div>
			</mat-card-content>
		</mat-card>
	</form>
	<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
</div>