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">
			<div class="card-header card-header-plain d-flex">
				<div *ngIf="!isNew" class="card-desc d-flex flex-column justify-content-center">
					<h4 class="card-title">{{ formGroup.get('label').value }}</h4>
				</div>
				<div *ngIf="isNew" class="card-desc new-dmp d-flex flex-column justify-content-center">
					<h4 class="card-title">{{ 'DMP-EDITOR.TITLE.NEW' | translate }}</h4>
				</div>
				<div class="d-flex ml-auto p-2" *ngIf="!isNew">
					<button *ngIf="!isFinalized" 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>
			<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
				<div class="d-flex flex-column">
					<mat-tab-group [(selectedIndex)]="selectedTab" class="mt-3">
						<mat-tab>
							<ng-template mat-tab-label>
								<i class="material-icons-outlined mr-2">view_agenda</i>
								{{ 'SIDE-BAR.GENERAL' | translate }}
							</ng-template>
							<app-general-tab [formGroup]="formGroup"></app-general-tab>
						</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>
							<app-project-tab [formGroup]="formGroup.get('project')" [isNew]="isNew" [isFinalized]="isFinalized"></app-project-tab>
						</mat-tab>
						<mat-tab *ngIf="!isNew">
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">library_books</mat-icon>
								{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
							</ng-template>
							<app-datasets-tab [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized"></app-datasets-tab>
						</mat-tab>
						<mat-tab *ngIf="!isNew">
							<ng-template mat-tab-label>
								<mat-icon class="mr-2">person</mat-icon>
								{{ 'DMP-LISTING.COLUMNS.PEOPLE' | translate }}
							</ng-template>
							<app-people-tab [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized"></app-people-tab>
						</mat-tab>
						<mat-tab *ngIf="isNew">
							<ng-template mat-tab-label></ng-template>
						</mat-tab>
						<mat-tab *ngIf="isNew">
							<ng-template mat-tab-label></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 *ngIf="!isFinalized" class="d-flex justify-content-end pt-2 pb-4 pl-2 pr-2">
						<div *ngIf="!isNew">
							<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button"
								class="text-uppercase mr-2">
								{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
							</button>
						</div>
						<div *ngIf="isNew">
							<button mat-raised-button color="primary" (click)="cancel()" type="button"
								class="text-uppercase mr-2">
								{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
							</button>
						</div>
						<div *ngIf="formGroup.enabled">
							<button *ngIf="!isNew" mat-raised-button type="submit" [disabled]="!formGroup.valid" class="text-uppercase dark-theme mr-2" color="primary">
								{{'DMP-EDITOR.ACTIONS.SAVE-CHANGES' | translate}}
							</button>
							<button *ngIf="isNew" mat-raised-button type="button" (click)="addDataset()" [disabled]="!formGroup.valid" class="text-uppercase dark-theme mr-2" color="primary">
								{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
							</button>
						</div>
						<div *ngIf="formGroup.enabled && !isNew">
							<button type="button" mat-raised-button color="primary" [disabled]="!formGroup.valid" class="text-uppercase mr-2"
								(click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}
							</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>