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

<div class="main-content">
	<div class="container-fluid description-editor">
		<form *ngIf="formGroup" [formGroup]="formGroup">
			<!-- Description Header -->
			<div class="fixed-editor-header">
				<div class="card description-editor-header">
					<div class="col-12">
						<div class="row">
							<div class="col info">
								<ng-container *ngIf="!viewOnly else viewOnlyTemplate">
									<div *ngIf="isNew" class="description-title">{{'DESCRIPTION-EDITOR.TITLE-ADD-DESCRIPTION' | translate}}</div>
									<div *ngIf="!isNew" class="description-title">{{'DESCRIPTION-EDITOR.TITLE-EDIT-DESCRIPTION' | translate}}</div>
									<div class="description-subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="description-changes">{{'DESCRIPTION-EDITOR.UNSAVED-CHANGES' | translate}}</span></div>
								</ng-container>
								<ng-template #viewOnlyTemplate>
									<div class="description-title">{{'DESCRIPTION-EDITOR.TITLE-PREVIEW-DESCRIPTION' | translate}}</div>
								</ng-template>
								<div *ngIf="item?.dmp?.id" class="d-flex flex-direction-row dmp-info">
									<div class="col-auto description-to-dmp">{{'DESCRIPTION-EDITOR.TO-DMP' | translate}}</div>
									<div class="dmp-title p-0">:&nbsp;{{ item?.dmp?.label }}</div>
									<div class="col-auto d-flex align-items-center">
										<a [routerLink]="['/overview/' + item.dmp.id]" target="_blank" class="pointer open-in-new-icon">
											<mat-icon class="size-18">open_in_new</mat-icon>
										</a>
									</div>
								</div>
							</div>
							<div class="col-auto">
								<div class="row h-100">

									<div class="col-auto d-flex align-items-center">
										<button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-raised-button class="description-export-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DATASET-EDITOR.ACTIONS.DISABLED-EXPORT' | translate">
											{{ 'DESCRIPTION-EDITOR.ACTIONS.EXPORT' | translate }}
											<mat-icon [disabled]="isDirty()" style="width: 14px;">expand_more</mat-icon>
										</button>
										<mat-menu #exportMenu="matMenu" xPosition="before">
											<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description)' (click)="fileTransformerService.exportDescription(formGroup.get('id').value, fileTransformer.repositoryId, fileTransformer.format)">
												<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
												<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
											</button>
										</mat-menu>
									</div>


									<mat-divider *ngIf="formGroup.get('id').value && (!viewOnly || (!isLocked && !viewOnly) || isLocked || (hasReversableStatus() && !isLocked))" [vertical]="true" class="ml-2 mr-2"></mat-divider>

									<div *ngIf="isDirty() && !viewOnly" class="col-auto d-flex align-items-center pr-0">
										<button [disabled]="saving" type="button" mat-raised-button class="description-discard-btn" (click)="discardChanges()">
											{{'DESCRIPTION-EDITOR.ACTIONS.DISCARD.DISCARD' | translate}}
										</button>
									</div>
									<div class="col-auto d-flex align-items-center">
										<button [disabled]="saving" *ngIf="!isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button">
											<span class="d-flex flex-row row">
												<span (click)="!saving?formSubmit():null" class="col">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate }}</span>
												<mat-divider [vertical]="true"></mat-divider>
												<span *ngIf="!saving" class="align-items-center justify-content-center col d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menu">
													<mat-icon>expand_more</mat-icon>
												</span>
												<span *ngIf="saving" class="align-items-center justify-content-center col d-flex">
													<mat-icon>expand_more</mat-icon>
												</span>
											</span>
										</button>
										<mat-menu #menu="matMenu">
											<button [disabled]="saving" mat-menu-item (click)="saveAndClose()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
											<button [disabled]="saving" mat-menu-item (click)="saveAndContinue()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
										</mat-menu>

										<button [disabled]="saving" *ngIf="!isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
										<button [disabled]="saving" *ngIf="isLocked" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
										<button [disabled]="saving" *ngIf="hasReversableStatus() && !isLocked" mat-raised-button class="description-save-btn mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row editor-content">
				<div class="col-auto description-stepper">
					<div class="stepper-back d-flex flex-direction-row">
						<div class="d-flex align-items-center pr-2 back-to-dmp" (click)="backToDmp()">
							<mat-icon class="back-icon pointer">chevron_left</mat-icon>
							<span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span>
						</div>
						<div class="col-auto dmp-label ml-3">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div>
					</div>
					<div class="stepper-title">{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</div>
					<div class="stepper-options" id="stepper-options">
						<div class="col stepper-list">
							<div (click)="table0fContents.onToCentrySelected()" *ngIf="!descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (2)</div>
							<div (click)="table0fContents.onToCentrySelected()" *ngIf="descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
							<div class="row toc-pane-container" #boundary>
								<div #spacer></div>
								<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
							</div>
						</div>
					</div>
					<div class="stepper-actions">
						<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
							<span class="material-icons">chevron_left</span>
							<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
						</div>

						<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn description-next ml-auto" (click)="nextStep()">
							<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
							<span class="material-icons">chevron_right</span>
						</div>
						<div *ngIf="!formGroup.get('descriptionTemplateId').value" mat-raised-button type="button" class="col-auto stepper-btn description-next next-disabled ml-auto">
							<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
							<span class="material-icons">chevron_right</span>
						</div>
						<button [disabled]="saving" (click)="save(saveAnd.addNew)" *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
							{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-ADD-NEW' | translate }}
						</button>
					</div>
					<div class="col-auto pr-0">
						<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDescriptionEditor]="true"></app-form-progress-indication>
					</div>
				</div>
				<div class="col-auto form" id="description-editor-form">
					<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
					<app-description-form
					*ngIf="formGroup && formGroup.get('properties')"
					[propertiesFormGroup]="formGroup.get('properties')"
					[descriptionId]="formGroup.get('id').value"
					[descriptionTemplate]="item.descriptionTemplate"
					[visibilityRulesService]="visibilityRulesService"
					[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX"
					[hidden]="this.step === 0"
					[linkToScroll]="linkToScroll"
					[validationErrorModel]="editorModel.validationErrorModel"
					(fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-description-form>
				</div>
			</div>
		</form>
	</div>
</div>