153 lines
8.5 KiB
HTML
153 lines
8.5 KiB
HTML
<div class="data-management-plan-editor">
|
|
|
|
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
|
|
|
|
|
<mat-card>
|
|
|
|
<mat-card-header>
|
|
<mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
|
|
<mat-card-title *ngIf="!isNew">
|
|
<h3>{{formGroup.get('label').value}} </h3>
|
|
</mat-card-title>
|
|
<div class="fill-space"></div>
|
|
<div *ngIf="!isNew" flexLayout="row">
|
|
<div fxFlex>
|
|
<button mat-button type="button" (click)="redirectToProject()">
|
|
<mat-icon>arrow_right_alt</mat-icon>{{'DMP-EDITOR.ACTIONS.GO-TO-PROJECT' | translate}}</button>
|
|
</div>
|
|
<div fxFlex>
|
|
<button mat-button type="button" (click)="redirectToDatasets()">
|
|
<mat-icon>arrow_right_alt</mat-icon>{{'DMP-EDITOR.ACTIONS.GO-TO-DATASETS' | translate}}</button>
|
|
</div>
|
|
<mat-menu #actionsMenu="matMenu">
|
|
|
|
<button mat-menu-item (click)="newVersion(this.dataManagementPlan.id, this.dataManagementPlan.label)">
|
|
<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}</button>
|
|
<button mat-menu-item (click)="clone(this.dataManagementPlan.id)">
|
|
<mat-icon>filter_none</mat-icon>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}</button>
|
|
</mat-menu>
|
|
<div fxFlex>
|
|
<button fxFlex mat-icon-button type="button" [matMenuTriggerFor]="actionsMenu">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<mat-form-field class="full-width">
|
|
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
|
|
<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="full-width">
|
|
<textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"
|
|
required></textarea>
|
|
<mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
|
|
<auto-complete class="mat-form-field-full-width" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
|
|
[configuration]="projectAutoCompleteConfiguration" titleKey="label" [control]="formGroup.get('project')" [required]="true">
|
|
</auto-complete>
|
|
|
|
<app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project>
|
|
|
|
<td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
|
|
(inputChange)="filterProfiles($event)" requireMatch required>
|
|
<ng-template td-chip let-chip="chip">
|
|
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.label.substring(0, 1).toUpperCase()}}</div>
|
|
{{chip.label}}
|
|
</ng-template>
|
|
<ng-template td-autocomplete-option let-option="option">
|
|
<div layout="row" layout-align="start center">
|
|
{{option.label}}
|
|
</div>
|
|
</ng-template>
|
|
<mat-progress-bar [style.height.px]="2" *ngIf="filteredProfilesAsync" mode="indeterminate"></mat-progress-bar>
|
|
<span *ngIf="formGroup.get('profiles').touched || !formGroup.get('profiles').pristine">
|
|
<mat-error style="font-size:10.5px" *ngIf="formGroup.get('profiles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</span>
|
|
</td-chips>
|
|
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
|
|
<a style="float:right" href="#" (click)="availableProfiles()">View All</a>
|
|
|
|
<!-- <auto-complete-chip class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration"
|
|
titleKey="name" [control]="formGroup.get('organisations')" [required]="true">
|
|
</auto-complete-chip> -->
|
|
|
|
<td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
|
|
(inputChange)="filterOrganisations($event)" requireMatch>
|
|
<ng-template td-chip let-chip="chip">
|
|
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
|
|
{{chip.name}}
|
|
</ng-template>
|
|
<ng-template td-autocomplete-option let-option="option">
|
|
<div layout="row" layout-align="start center">
|
|
{{option.name}}
|
|
</div>
|
|
</ng-template>
|
|
<mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
|
|
</td-chips>
|
|
|
|
<div layout="row" layout-align="start center">
|
|
<td-chips style="margin-bottom:25px; display:inline-block; width:90%" color="accent" [items]="filteredResearchers" formControlName="researchers"
|
|
placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" (inputChange)="filterResearchers($event)" requireMatch>
|
|
<ng-template td-chip let-chip="chip">
|
|
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
|
|
{{chip.name}}
|
|
</ng-template>
|
|
<ng-template td-autocomplete-option let-option="option">
|
|
<div layout="row" layout-align="start center">
|
|
{{option.name}}
|
|
</div>
|
|
</ng-template>
|
|
<mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
|
|
</td-chips>
|
|
|
|
<button style="display:inline-block;" mat-icon-button type="button" (click)="addResearcher()">
|
|
<mat-icon aria-label="Example icon-button with a heart icon">add_circle</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<h3 mat-subheader>{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h3>
|
|
|
|
<mat-form-field class="full-width">
|
|
<input type="text" placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}" [formControl]="textCtrl" matInput [matAutocomplete]="auto">
|
|
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith">
|
|
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" (click)="selectOption(option)">
|
|
{{ option.label }}
|
|
</mat-option>
|
|
</mat-autocomplete>
|
|
</mat-form-field>
|
|
<app-dynamic-dmp-field-resolver class="full-width" *ngIf="dataManagementPlan.definition" [formGroup]="formGroup" [dataManagementPlanProfile]="dataManagementPlan.definition"></app-dynamic-dmp-field-resolver>
|
|
|
|
<mat-form-field class="full-width">
|
|
<input matInput placeholder="Version" disabled [value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
|
|
</mat-form-field>
|
|
|
|
|
|
<mat-list *ngIf="associatedUsers?.length" role="list">
|
|
<h3 mat-subheader>Associated Users</h3>
|
|
<mat-list-item role="listitem" *ngFor="let user of associatedUsers">
|
|
<mat-icon mat-list-icon>person</mat-icon>
|
|
<div>{{user.name}}</div>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
|
|
|
|
<div layout="row" class="full-width text-right" align="end">
|
|
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
|
<!-- <button *ngIf="!isNew" mat-raised-button color="primary" (click)="invite()" type="button">{{'DMP-EDITOR.ACTIONS.INVITE' | translate}}</button> -->
|
|
<button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
|
|
<button *ngIf="!isNew" mat-raised-button color="primary" type="button" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button>
|
|
</div>
|
|
|
|
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</form>
|
|
<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
|
|
</div>
|