|
|
|
|
@ -78,50 +78,66 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-auto dmp-stepper" *ngIf="this.step != 0">
|
|
|
|
|
<div class="stepper-title">{{'DMP-EDITOR.TITLE' | translate}}</div>
|
|
|
|
|
<div class="stepper-options">
|
|
|
|
|
<ol class="stepper-list" start="1">
|
|
|
|
|
<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
|
|
|
|
|
<!-- <div *ngIf="selectedBlueprint?.definition"> -->
|
|
|
|
|
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
|
|
|
|
<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }">{{section.label}}</li>
|
|
|
|
|
<ol class="descriptionsInSection">
|
|
|
|
|
<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
|
|
|
|
|
<div class="d-flex flex-direction-row">
|
|
|
|
|
<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
|
|
|
|
|
<mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDescription(description.id)">close</mat-icon>
|
|
|
|
|
<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALIZED' | translate}}">check</mat-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
|
<ul *ngIf="item.id && section.hasTemplates && canEditSection(section.id) && !formGroup.disabled" class="add-description-option">
|
|
|
|
|
<li>
|
|
|
|
|
<a class="add-description-action" [ngClass]="{'drag-handle-disabled': !canAddDescription(section)}" [routerLink]="canAddDescription(section) ? ['/descriptions/edit/' + item.id + '/' + section.id] : null">
|
|
|
|
|
<mat-icon [matTooltipDisabled]="canAddDescription(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES-MAX-MULTIPLICITY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
|
|
|
|
|
<div class="col-12 col-md-3 pr-md-0" *ngIf="this.step != 0">
|
|
|
|
|
<div class="row stepper-title">
|
|
|
|
|
<div class="col-12 pl-0">
|
|
|
|
|
<span>{{'DMP-EDITOR.TITLE' | translate}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row stepper-options">
|
|
|
|
|
<!-- try col-12 too -->
|
|
|
|
|
<div class="col-auto">
|
|
|
|
|
<ol class="stepper-list" start="1">
|
|
|
|
|
<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
|
|
|
|
|
<!-- <div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index"> -->
|
|
|
|
|
<ng-container *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
|
|
|
|
<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }">{{section.label}}</li>
|
|
|
|
|
<ol class="descriptionsInSection">
|
|
|
|
|
<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
|
|
|
|
|
<div class="d-flex flex-direction-row">
|
|
|
|
|
<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
|
|
|
|
|
<div (click)="$event.stopPropagation(); removeDescription(description.id)"><mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}">close</mat-icon></div>
|
|
|
|
|
<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALIZED' | translate}}">check</mat-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
|
<ul *ngIf="item.id && section.hasTemplates && canEditSection(section.id) && !formGroup.disabled" class="add-description-option">
|
|
|
|
|
<li>
|
|
|
|
|
<a class="add-description-action" [ngClass]="{'drag-handle-disabled': !canAddDescription(section)}" [routerLink]="canAddDescription(section) ? ['/descriptions/edit/' + item.id + '/' + section.id] : null">
|
|
|
|
|
<mat-icon [matTooltipDisabled]="canAddDescription(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES-MAX-MULTIPLICITY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</div>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- TODO -->
|
|
|
|
|
<div class="row justify-content-around" *ngIf="this.step !== 0">
|
|
|
|
|
<div class="col-auto mb-1">
|
|
|
|
|
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
|
|
|
|
|
<span class="material-icons">chevron_left</span>
|
|
|
|
|
<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stepper-actions" *ngIf="this.step !== 0">
|
|
|
|
|
<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
|
|
|
|
|
<span class="material-icons">chevron_left</span>
|
|
|
|
|
<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="this.step < this.maxSteps" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
|
|
|
|
|
<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
|
|
|
|
|
<span class="material-icons">chevron_right</span>
|
|
|
|
|
<div class="col-auto mb-1">
|
|
|
|
|
<div *ngIf="this.step < this.maxSteps" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
|
|
|
|
|
<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
|
|
|
|
|
<span class="material-icons">chevron_right</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-auto pr-0" *ngIf="this.step !== 0">
|
|
|
|
|
<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
|
|
|
|
|
<!-- TODO -->
|
|
|
|
|
<div class="row" *ngIf="this.step !== 0">
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-auto form" id="editor-form" *ngIf="this.step !== 0">
|
|
|
|
|
<div class="col-12 col-md form" id="editor-form" *ngIf="this.step !== 0">
|
|
|
|
|
<div *ngIf="selectedBlueprint?.definition">
|
|
|
|
|
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
|
|
|
|
<div class="section-info" [hidden]="this.step !== (i + 1)">
|
|
|
|
|
|
Sofia Papacharalampous