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

131 lines
6.1 KiB
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 && !lockStatus" 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 && isUserOwner" (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 *ngIf="!isPublic" (click)="clone(dmp.id)" class="menu-item">
<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
</button>
<button mat-menu-item *ngIf="!isPublic && isUserOwner" (click)="delete()" class="menu-item">
<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
</button>
</mat-menu>
<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn export-btn ml-2">
{{ '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(dmp.id)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDocx(dmp.id)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXml(dmp.id)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadJson(dmp.id)">
<i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button>
</mat-menu>
</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" [isUserOwner]="isUserOwner"></app-general-tab>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-2">work_outline</mat-icon>
{{ 'DMP-LISTING.COLUMNS.GRANT' | translate }}
</ng-template>
<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner"></app-grant-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 || lockStatus"></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 || lockStatus"></app-people-tab>
</mat-tab>
<mat-tab *ngIf="isNew" disabled>
<ng-template mat-tab-label></ng-template>
</mat-tab>
<mat-tab *ngIf="isNew" disabled>
<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>
<span *ngIf="lockStatus">
<mat-icon color="accent" class="align-self-center mr-1">info_outlined</mat-icon>
<div class="align-self-center mr-3">{{'DMP-EDITOR.ACTIONS.LOCK' | translate}}</div>
</span>
<div *ngIf="!isFinalized" class="d-flex justify-content-end pt-2 pb-4 pl-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 && !lockStatus">
<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 && !lockStatus">
<button *ngIf="!isNew" mat-raised-button type="submit" 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()" class="text-uppercase dark-theme mr-2" color="primary">
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
<div *ngIf="formGroup.enabled && !isNew && !lockStatus">
<button type="button" mat-raised-button color="primary" class="text-uppercase mr-2" (click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>