argos/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html

<div class="main-content">
	<div class="container-fluid">
		<div class="card dataset-wizard">
			<div class="row card-header card-header-plain d-flex">
				<div class="col-12 card-desc d-flex flex-column justify-content-center">
					<div class="row">
						<div class="col d-flex align-items-center flex-wrap-nowrap">
							<h4 *ngIf="!isNew" class="card-title">{{datasetWizardModel?.label}}
								<span *ngIf="this.formGroup && this.formGroup.dirty"> -
									{{ 'GENERAL.STATUSES.EDIT' | translate }}</span>
							</h4>
							<div *ngIf="isNew" class="card-desc new-dataset d-flex flex-column justify-content-center">
								<h4 class="card-title">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h4>
							</div>

							<div *ngIf="datasetWizardModel && !isNew" class="ml-auto">
								<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="more-icon" *ngIf="!publicMode" (click)="$event.stopImmediatePropagation();">
									<mat-icon class="more-horiz">more_horiz</mat-icon>
								</button>
								<mat-menu #actionsMenu="matMenu">
									<button mat-menu-item (click)="openDmpSearchDialogue()" class="menu-item">
										<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
									</button>
									<button mat-menu-item *ngIf="!viewOnly && !isCopy" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)" class="menu-item">
										<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
									</button>
									<button mat-menu-item *ngIf="needsUpdate()" class="menu-item" (click)="openUpdateDatasetProfileDialogue();">{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}</button>
								</mat-menu>
							</div>
						</div>
						<div class="col-auto d-flex flex-wrap p-2" *ngIf="datasetWizardModel && !isNew">
							<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn ml-2 export-btn">
								{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
							</button>
							<mat-menu #exportMenu="matMenu" xPosition="before">
								<button mat-menu-item (click)="downloadPDF()">
									<i class="fa fa-file-pdf-o pr-2"></i>
									<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
								</button>
								<button mat-menu-item (click)="downloadDOCX()">
									<i class="fa fa-file-word-o pr-2"></i>
									<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
								</button>
								<button mat-menu-item (click)="downloadXML()">
									<i class="fa fa-file-code-o pr-2"></i>
									<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
								</button>
							</mat-menu>
						</div>
					</div>
				</div>
			</div>
			<form *ngIf="formGroup">
				<div class="d-flex flex-column">
					<mat-tab-group class="mt-3">
						<mat-tab>
							<ng-template mat-tab-label class="tab-label">
								<i class="material-icons-outlined mr-2">view_agenda</i>
								{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.DATASET-DETAILS' | translate}}
							</ng-template>
							<form *ngIf="formGroup" [formGroup]="formGroup" class="p-3">
								<mat-form-field class="col-md-6">
									<app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
									</app-single-auto-complete>
								</mat-form-field>
								<mat-form-field class="col-md-6">
									<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile">
										<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
											{{profile.label}}
										</mat-option>
									</mat-select>
									<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">
										{{formGroup.get('profile').getError('backendError').message}}</mat-error>
								</mat-form-field>
								<app-dataset-editor-component [formGroup]="formGroup"></app-dataset-editor-component>
							</form>
						</mat-tab>
						<mat-tab>
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">work_outline</mat-icon>
								{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.EXTERNAL-REFERENCES' | translate}}
							</ng-template>
							<form *ngIf="formGroup" [formGroup]="formGroup" class="p-3">
								<app-dataset-external-references-editor-component [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
							</form>
						</mat-tab>
						<mat-tab [disabled]="isNew && (formGroup.get('profile').disabled || !(formGroup.get('profile').valid))">
							<ng-template mat-tab-label>
								<div class="d-flex">
									<mat-icon class="mr-2">library_books</mat-icon>
									{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.DESCRIPTION' | translate}}
								</div>
							</ng-template>
							<div class="col">
								<div class="row toc-pane-container" #boundary>
									<div class="col-md-8 h-100 ">
										<app-dataset-description-form class="w-100 h-100" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll">
										</app-dataset-description-form>
									</div>
									<div #spacer></div>
									<div class="col-md-4">
										<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
									</div>
								</div>
							</div>
						</mat-tab>
					</mat-tab-group>

					<div class="actions">
						<mat-icon *ngIf="hasNotReversableStatus() || lockStatus" color="accent" class="align-self-center mr-1">info_outlined</mat-icon>
						<div *ngIf="hasNotReversableStatus()" class="align-self-center mr-3">{{'DATASET-WIZARD.ACTIONS.INFO' | translate}}</div>
						<div *ngIf="lockStatus" class="align-self-center mr-3">{{'DATASET-WIZARD.ACTIONS.LOCK' | translate}}</div>
						<button mat-raised-button (click)="cancel()" type="button" class="cancelButton" color="primary">
							{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
						</button>
						<button *ngIf="(datasetWizardModel.status == 0 || isNew) && !lockStatus" mat-raised-button class="saveButton" color="primary" (click)="save();" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
						<button *ngIf="(datasetWizardModel.status == 0 || isNew) && !lockStatus" mat-raised-button class="finalizeButton" color="primary" (click)="saveFinalize();" type="button">{{ 'DATASET-WIZARD.ACTIONS.FINALIZE' | translate }}</button>
						<div class="fill-space"></div>
						<button *ngIf="hasReversableStatus() && !lockStatus" mat-raised-button class="reverseButton" color="primary" (click)="reverse()" type="button">{{ 'DATASET-WIZARD.ACTIONS.REVERSE' | translate }}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>