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

<div class="main-content">
	<div class="container-fluid">
		<div *ngIf="dmp" class="card col-12">
			<div class="card-header card-header-plain d-flex">
				<div class="card-desc d-flex flex-column justify-content-center">
					<h4 class="card-title">{{ dmp.label }}</h4>
				</div>
				<div class="d-flex ml-auto p-2">
					<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon"
						(click)="$event.stopImmediatePropagation();">
						<mat-icon class="more-horiz">more_horiz</mat-icon>
					</button>
					<mat-menu #actionsMenu="matMenu">
						<button mat-menu-item *ngIf="!isPublic" (click)="newVersion(dmp.id, dmp.label)">
							<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
						</button>
						<button mat-menu-item *ngIf="!isPublic" (click)="viewVersions(dmp.groupId, dmp.label)">
							<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
						</button>
						<button mat-menu-item (click)="clone(dmp.id)" class="menu-item">
							<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
						</button>
						<button mat-menu-item (click)="delete()" class="menu-item">
							<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
						</button>
						<button mat-menu-item (click)="advancedClicked()" class="menu-item">
							<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.ADV-EXP' | translate }}
						</button>
					</mat-menu>
					<button mat-raised-button color="primary" (click)="downloadPDF(dmp.id)"
						class="lightblue-btn ml-2 text-uppercase">
						<mat-icon>save_alt</mat-icon> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
					</button>
				</div>
			</div>
			<div class="row d-flex flex-column">
				<mat-tab-group class="col-12 mt-3">
					<mat-tab>
						<ng-template mat-tab-label class="tab-label">
							<i class="material-icons-outlined mr-2">view_agenda</i>
							{{ 'SIDE-BAR.GENERAL' | translate }}
						</ng-template>
						<!-- <div class="row"> -->
						<app-general-tab [formGroup]="formGroup"></app-general-tab>
						<!-- </div> -->
						<!-- <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup"></form> -->
					</mat-tab>
					<mat-tab>
						<ng-template mat-tab-label>
							<mat-icon class="mr-2">work_outline</mat-icon>
							{{ 'DMP-LISTING.COLUMNS.PROJECT' | translate }}
						</ng-template>
					</mat-tab>
					<mat-tab>
						<ng-template mat-tab-label>
							<mat-icon class="mr-2">library_books</mat-icon>
							{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
						</ng-template>
					</mat-tab>
					<mat-tab>
						<ng-template mat-tab-label>
							<mat-icon class="mr-2">person</mat-icon>
							{{ 'DMP-LISTING.COLUMNS.PEOPLE' | translate }}
						</ng-template>
					</mat-tab>
					<mat-tab>
						<ng-template mat-tab-label>
							<mat-icon class="mr-2">settings</mat-icon>
							{{ 'DMP-LISTING.ACTIONS.SETTINGS' | translate }}
						</ng-template>
					</mat-tab>
				</mat-tab-group>

				<div class="col-12 d-flex justify-content-end pt-2 pb-4">
					<div>
						<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button"
							class="lightblue-btn text-uppercase mr-2">
							{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
						</button>
					</div>
					<!-- <div class="col"></div> -->
					<!-- <div class="col-auto" *ngIf="!isNew && this.formGroup.enabled">
										<button mat-raised-button color="primary" type="button" (click)="delete()">
											{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}
										</button>
									</div> -->
					<div *ngIf="this.formGroup.enabled">
						<button mat-raised-button color="primary" type="submit"
							class="lightblue-btn text-uppercase mr-2">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
						</button>
					</div>
					<div *ngIf="dmp.lockable && this.formGroup.enabled">
						<button type="button" mat-raised-button color="primary" class="lightblue-btn text-uppercase"
							(click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- <div class="main-content">
	<div class="container-fluid">
		<div class="dmp-editor">
			<div>
				<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>
			</div>
			<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
				<mat-card>
					<mat-card-header>
						<div class="col-12 row">
							<div class="col"></div>
							<div *ngIf="!isNew" class="col-auto">
								<div class="row actions-row">
									<div class="col-auto" *ngIf="!editMode && formGroup.get('status').value !== 1">
										<button mat-icon-button (click)="enableForm()">
											<mat-icon class="mat-24">edit</mat-icon>
										</button>
									</div>
									<div class="col-auto" *ngIf="editMode && formGroup.get('status').value !== 1">
										<button mat-icon-button (click)="disableForm()">
											<mat-icon class="mat-24">lock</mat-icon>
										</button>
									</div>
									<div class="col-auto">
										<button mat-button type="button" *ngIf="!isPublic" (click)="redirectToDatasets()">
											<mat-icon>arrow_right_alt</mat-icon>
											<span>{{'DMP-EDITOR.ACTIONS.GO-TO-DATASETS' | translate}}</span>
										</button>
									</div>
									<mat-menu #actionsMenu="matMenu">
										<button mat-menu-item *ngIf="!isPublic" (click)="newVersion(dmp.id, dmp.label)">
											<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
										</button>
										<button mat-menu-item *ngIf="!isPublic" (click)="clone(dmp.id)">
											<mat-icon>filter_none</mat-icon>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}
										</button>
										<button mat-menu-item *ngIf="!isPublic" (click)="viewVersions(dmp.groupId, dmp.label)">
											<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
										</button>
										<button mat-menu-item (click)="downloadXml(dmp.id)">
											<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
										</button>
										<button mat-menu-item (click)="downloadDocx(dmp.id)">
											<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-DOCX' | translate}}
										</button>
										<button mat-menu-item (click)="downloadPDF(dmp.id)">
											<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-PDF' | translate}}
										</button>
									</mat-menu>
									<button mat-icon-button class="col-auto" type="button" [matMenuTriggerFor]="actionsMenu">
										<mat-icon>more_vert</mat-icon>
									</button>
								</div>
							</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')">
									{{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>
							<mat-form-field class="col-md-12">
								<textarea 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>
							<mat-form-field class="col-md-6">
								<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
									placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
									[configuration]="projectAutoCompleteConfiguration">
								</app-single-auto-complete>
								<mat-error *ngIf="formGroup.get('project').hasError('backendError')">
									{{formGroup.get('project').getError('backendError').message}}</mat-error>
								<mat-error *ngIf="formGroup.get('project').hasError('required')">
									{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
							</mat-form-field> -->
<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
<!-- <mat-form-field class="col-md-6">
								<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
									placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | 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 mat-icon-button type="button" [disabled]="formGroup.get('profiles').disabled"
									(click)="availableProfiles()">
									<mat-icon>view_list</mat-icon>
								</button>
							</mat-form-field> -->
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->


<!-- <mat-form-field class="col-md-6">
								<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-form-field>
							<mat-form-field class="col-md-6">
								<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 mat-icon-button [disabled]="formGroup.get('researchers').disabled"
									type="button" (click)="addResearcher()">
									<mat-icon>add_circle</mat-icon>
								</button>
							</mat-form-field> -->

<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
<!-- <mat-form-field class="col-md-6">
								<app-single-auto-complete [required]='false' [formControl]="formGroup.get('profile')"
									placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}"
									[configuration]="dmpProfileAutoCompleteConfiguration">
								</app-single-auto-complete>
							</mat-form-field>

							<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> -->

<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12"
								[formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
<!-- <app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" class="col-md-12"
								[formGroup]="formGroup" [dmpProfileDefinition]="selectedDmpProfileDefinition">
							</app-dynamic-dmp-field-resolver>


							<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="row">
									<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel(dmp.id)"
											type="button">{{'DMP-EDITOR.ACTIONS.CANCEL'
											| translate}}</button></div>
									<div class="col"></div>
									<div class="col-auto" *ngIf="!isNew && this.formGroup.enabled"><button mat-raised-button
											color="primary" type="button"
											(click)="delete()">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button></div>
									<div class="col-auto" *ngIf="this.formGroup.enabled"><button mat-raised-button
											color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE'
											| translate}}</button></div>
									<div class="col-auto" *ngIf="dmp.lockable && this.formGroup.enabled"><button type="button"
											mat-raised-button color="primary"
											(click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}</button>
									</div>
								</div>
							</div>
						</div>
					</mat-card-content>
				</mat-card>
			</form> -->
<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
<!-- </div>
	</div>
</div> -->