272 lines
17 KiB
HTML
272 lines
17 KiB
HTML
<div class="main-content">
|
|
<div class="container-fluid">
|
|
<div class="form-container">
|
|
<!-- DMP Header -->
|
|
<div [hidden]="false" class="fixed-editor-header">
|
|
<div class="card editor-header">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto info">
|
|
<div class="title">{{'DMP-EDITOR.TITLE.EDIT-DMP' | translate}}</div>
|
|
<!-- <div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div> -->
|
|
</div>
|
|
<div class="ml-auto d-flex flex-row">
|
|
<!-- <mat-divider *ngIf="formGroup.get('id').value && (isDirty() || isNew || (!isNew && formGroup.enabled && !lockStatus) || lockStatus)"
|
|
[vertical]="true" class="ml-2 mr-2">
|
|
</mat-divider> -->
|
|
<div class="col-auto d-flex align-items-center">
|
|
<!-- <button [disabled]="saving" *ngIf="isDirty()" type="button" mat-raised-button class="discard-btn mr-3" (click)="discard()">
|
|
{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
|
|
</button> -->
|
|
<button [disabled]="saving" *ngIf="isNew" mat-raised-button type="button" (click)="save()" class="save-btn">
|
|
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
|
|
</button>
|
|
<!-- <div *ngIf="!isNew && formGroup.enabled && !lockStatus">
|
|
<button [disabled]="saving" *ngIf="!isFinalized" mat-raised-button (click)="formSubmit()" class="save-btn">
|
|
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
|
|
</button>
|
|
</div> -->
|
|
<!-- <button *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-auto dmp-stepper">
|
|
<div class="stepper-title">DMP Blueprint</div>
|
|
<div class="stepper-options">
|
|
<ol class="stepper-list" start="0">
|
|
<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">Select Blueprint</li>
|
|
<div *ngIf="selectedDmpBlueprintDefinition && this.step !== 0">
|
|
<li (click)="changeStep(i + 1)" *ngFor="let section of selectedDmpBlueprintDefinition.sections; let i=index" [ngClass]="{'active': this.step === (i + 1)}">{{section.label}}</li>
|
|
</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 === 0}" (click)="previousStep()">
|
|
<span class="material-icons">chevron_left</span>
|
|
<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
|
|
</div>
|
|
<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
|
|
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
|
|
<span class="material-icons">chevron_right</span>
|
|
</div>
|
|
<!-- <div *ngIf="this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank"> -->
|
|
<button [disabled]="saving" *ngIf="this.step >= this.maxStep && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank">
|
|
<!-- <mat-icon>add</mat-icon> -->
|
|
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}} & {{'DMP-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}}
|
|
</button>
|
|
</div>
|
|
<div class="col-auto pr-0" *ngIf="this.step !== 0">
|
|
<app-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup" [isDmpEditor]="true"></app-form-progress-indication>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto form" id="editor-form">
|
|
<div class="col-12 blueprint-section" [hidden]="this.step !== 0">
|
|
<div class="dmp-blueprint-form">
|
|
<mat-form-field>
|
|
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="Select blueprint" [configuration]="dmpBlueprintAutoCompleteConfiguration">
|
|
</app-single-auto-complete>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5">
|
|
<button mat-button class="action-btn" [disabled]="selectedDmpBlueprintDefinition == null" (click)="selectBlueprint()">Next</button>
|
|
</div>
|
|
<div class="col-7" *ngIf="formGroup.get('profile').value == null || (formGroup.get('profile').value && formGroup.get('profile').value.id !== '86635178-36a6-484f-9057-a934e4eeecd5')">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<p>or continue with</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<button mat-button class="action-btn" style="float: right;" (click)="selectDefaultBlueprint()">Default Blueprint</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="selectedDmpBlueprintDefinition">
|
|
<div *ngFor="let section of selectedDmpBlueprintDefinition.sections; let i=index">
|
|
<div class="section-info" [hidden]="this.step !== (i + 1)">
|
|
<div class="col-12 intro">
|
|
{{section.description}}
|
|
</div>
|
|
<div class="col-12 card">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div *ngFor="let field of section.systemFields; let j=index">
|
|
<div class="heading">{{i + 1}}.{{j + 1}} {{field.label}}<span *ngIf="field.required">*</span></div>
|
|
<div *ngIf="field.description != null && field.description.length > 0" class="hint">{{field.description}}</div>
|
|
<div class="input-form">
|
|
<div *ngIf="field.type == 'TEXT'">
|
|
<mat-form-field>
|
|
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required>
|
|
<!-- <mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
|
{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="field.type == 'HTML_TEXT'">
|
|
<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
|
|
[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'">
|
|
</rich-text-editor-component>
|
|
</div>
|
|
<div *ngIf="field.type == 'RESEARCHERS'">
|
|
<mat-form-field>
|
|
<mat-label>{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}</mat-label>
|
|
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" [configuration]="researchersAutoCompleteConfiguration">
|
|
</app-multiple-auto-complete>
|
|
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
|
|
{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('researchers').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
<!-- <button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher($event)">
|
|
<mat-icon class="icon-btn">add_circle</mat-icon>
|
|
</button> -->
|
|
</mat-form-field>
|
|
<div class="mb-4">
|
|
<span *ngIf="!formGroup.get('researchers').disabled" class="not-found">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
|
|
<span *ngIf="!formGroup.get('researchers').disabled" class="insert-manually" (click)="addResearcher($event)">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="field.type == 'ORGANIZATIONS'">
|
|
<mat-form-field>
|
|
<mat-label>{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}</mat-label>
|
|
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" [configuration]="organisationsAutoCompleteConfiguration">
|
|
</app-multiple-auto-complete>
|
|
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
|
|
{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
<!-- <button *ngIf="showOrganizationCreator()" matSuffix class="input-btn" [disabled]="cantAddOrganizations()" type="button" (click)="addOrganization($event)">
|
|
<mat-icon class="icon-btn">add_circle</mat-icon>
|
|
</button> -->
|
|
</mat-form-field>
|
|
<div *ngIf="showOrganizationCreator()" class="mb-4">
|
|
<span *ngIf="!cantAddOrganizations()" class="not-found">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
|
|
<span *ngIf="!cantAddOrganizations()" class="insert-manually" (click)="addOrganization($event)">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="field.type == 'LANGUAGE'">
|
|
<mat-form-field>
|
|
<mat-select [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}" required>
|
|
<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
|
|
{{ lang.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="formGroup.get('extraProperties').get('language').hasError('backendError')">
|
|
{{formGroup.get('extraProperties').get('language').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('extraProperties').get('language').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="field.type == 'CONTACT'">
|
|
<div class="contact-form">
|
|
<mat-form-field>
|
|
<mat-select [formControl]="formGroup.get('extraProperties').get('contact')" placeholder="{{'DMP-EDITOR.FIELDS.CONTACT' | translate}}">
|
|
<mat-option *ngFor="let vis of getAssociates()" [value]="vis.id">
|
|
{{vis.name | translate}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="formGroup.get('extraProperties').get('contact').hasError('backendError')">
|
|
{{formGroup.get('extraProperties').get('contact').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('extraProperties').get('contact').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="field.type == 'FUNDER'">
|
|
<funding-info [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="false" [isNew]="true" [isUserOwner]="true" [type]="1" (onFormChanged)="formChanged()"></funding-info>
|
|
</div>
|
|
<div *ngIf="field.type == 'GRANT'">
|
|
<funding-info [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="false" [isNew]="true" [isUserOwner]="true" [type]="2" (onFormChanged)="formChanged()"></funding-info>
|
|
</div>
|
|
<div *ngIf="field.type == 'PROJECT'">
|
|
<funding-info [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="false" [isNew]="true" [isUserOwner]="true" [type]="3" (onFormChanged)="formChanged()"></funding-info>
|
|
</div>
|
|
<div *ngIf="field.type == 'LICENSE'">
|
|
<mat-form-field>
|
|
<app-single-auto-complete [formControl]="formGroup.get('extraProperties').get('license')" placeholder="{{'DMP-EDITOR.FIELDS.LICENSE' | translate}}" [configuration]="licenseAutoCompleteConfiguration">
|
|
</app-single-auto-complete>
|
|
<mat-error *ngIf="formGroup.get('extraProperties').get('license').hasError('backendError')">
|
|
{{formGroup.get('extraProperties').get('license').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('extraProperties').get('license').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="field.type == 'ACCESS_RIGHTS'">
|
|
<mat-form-field>
|
|
<mat-select [formControl]="formGroup.get('extraProperties').get('visible')" placeholder="{{'DMP-EDITOR.FIELDS.VISIBILITY' | translate}}">
|
|
<mat-option *ngFor="let vis of visibles" [value]="vis.value">
|
|
{{vis.name | translate}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="formGroup.get('extraProperties').get('visible').hasError('backendError')">
|
|
{{formGroup.get('extraProperties').get('visible').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('extraProperties').get('visible').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="field.type == 'DESCRIPTION_TEMPLATES'">
|
|
<mat-form-field>
|
|
<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
|
|
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)" (optionSelected)="onOptionSelected()">
|
|
</app-multiple-auto-complete>
|
|
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
|
|
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled" (click)="allAvailableProfiles($event)">
|
|
<mat-icon class="icon-btn">view_list</mat-icon>
|
|
</button>
|
|
</mat-form-field>
|
|
<div class="col pl-0 pt-2 pb-3 d-flex">
|
|
<span class="not-found">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.FIELDS.HELP' | translate}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div *ngFor="let extraField of section.extraFields; let k=index">
|
|
<div class="heading">{{i + 1}}.{{k + 1}} {{extraField.label}}<span *ngIf="extraField.required">*</span></div>
|
|
<div *ngIf="extraField.description != null && extraField.description.length > 0" class="hint">{{extraField.description}}</div>
|
|
<div class="input-form">
|
|
<div *ngIf="extraField.type == 'TEXT'">
|
|
<mat-form-field>
|
|
<input matInput placeholder="extraField.placeholder" type="text" name="label" [formControl]="label" [required]="extraField.required">
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="extraField.type == 'RICH_TEXT'">
|
|
<mat-form-field>
|
|
<!-- <rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'label'"
|
|
[placeholder]="extraField.placeholder">
|
|
</rich-text-editor-component> -->
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="extraField.type == 'DATE'">
|
|
<mat-form-field>
|
|
<input matInput placeholder="extraField.placeholder" type="date" name="label" [formControl]="label" [required]="extraField.required">
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="extraField.type == 'NUMBER'">
|
|
<mat-form-field>
|
|
<input matInput placeholder="extraField.placeholder" type="number" name="label" [formControl]="label" [required]="extraField.required">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|