Add License info step for the DMP Editor
This commit is contained in:
parent
13ac3634d6
commit
9f8b4bb9f7
|
|
@ -42,6 +42,7 @@ import { DatasetInfoComponent } from './editor/dataset-info/dataset-info.compone
|
|||
import { DatasetEditorDetailsModule } from './editor/dataset-editor-details/dataset-editor-details.module';
|
||||
import { DatasetEditorDetailsComponent } from './editor/dataset-editor-details/dataset-editor-details.component';
|
||||
import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/dataset-description-form.module';
|
||||
import { LicenseInfoComponent } from './editor/license-info/license-info.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -88,7 +89,8 @@ import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/d
|
|||
StartNewDmpDialogComponent,
|
||||
MainInfoComponent,
|
||||
FundingInfoComponent,
|
||||
DatasetInfoComponent
|
||||
DatasetInfoComponent,
|
||||
LicenseInfoComponent
|
||||
],
|
||||
entryComponents: [
|
||||
DmpInvitationDialogComponent,
|
||||
|
|
|
|||
|
|
@ -81,6 +81,8 @@
|
|||
|
||||
<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
|
||||
|
||||
<li *ngIf="!isNewDataset" (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
|
||||
|
||||
<li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
|
||||
<div class="d-flex flex-direction-row">
|
||||
<div class="label">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
|
||||
|
|
@ -126,6 +128,8 @@
|
|||
<dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
|
||||
<dataset-info *ngIf="isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
|
||||
|
||||
<license-info [hidden]="this.step !== 3" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
|
||||
|
||||
<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
|
||||
<dataset-editor-details [formGroup]="dataset" [isNewDataset]="isNewDataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
|||
|
||||
selectedTab = 0;
|
||||
step: number = 0;
|
||||
stepsBeforeDatasets: number = 3;
|
||||
maxStep: number = 3;
|
||||
stepsBeforeDatasets: number = 4;
|
||||
maxStep: number = 4;
|
||||
|
||||
constructor(
|
||||
private dmpProfileService: DmpProfileService,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
<div class="main-info" [formGroup]="formGroup">
|
||||
<div class="col-12 intro">
|
||||
{{'DMP-EDITOR.LICENSE-INFO.INTRO' | translate}}
|
||||
</div>
|
||||
<div class="col-12 card">
|
||||
<!-- Title Field -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="heading">4.1 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div>
|
||||
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
|
||||
<div class="title-form">
|
||||
<mat-form-field *ngIf="!isNewDataset">
|
||||
<mat-select [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}">
|
||||
<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>
|
||||
</div>
|
||||
<!-- Description field -->
|
||||
<div class="row" *ngIf="!isNewDataset">
|
||||
<div class="col-12">
|
||||
<div class="heading">4.2 {{'DMP-EDITOR.FIELDS.LICENSE' | translate}}</div>
|
||||
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
|
||||
<div class="description-form">
|
||||
<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>
|
||||
</div>
|
||||
<!-- Researchers field-->
|
||||
<div class="row" *ngIf="!isNewDataset">
|
||||
<div class="col-12">
|
||||
<div class="heading">4.3 {{'DMP-EDITOR.FIELDS.VISIBILITY' | translate}}</div>
|
||||
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
|
||||
<div class="author-form">
|
||||
<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>
|
||||
</div>
|
||||
<!-- Organizations Field -->
|
||||
<div class="row" *ngIf="!isNewDataset && formGroup.get('extraProperties').get('visible').value">
|
||||
<div class="col-12">
|
||||
<div class="heading">4.4 {{'DMP-EDITOR.FIELDS.PUBLICATION' | translate}}</div>
|
||||
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
|
||||
<div class="organizations-form">
|
||||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="picker" [formControl]="formGroup.get('extraProperties').get('publicDate')" placeholder="{{'DMP-EDITOR.FIELDS.PUBLICATION' | translate}}">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
<mat-error *ngIf="formGroup.get('extraProperties').get('publicDate').hasError('backendError')">
|
||||
{{formGroup.get('extraProperties').get('publicDate').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('extraProperties').get('publicDate').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" *ngIf="!isNewDataset">
|
||||
<div class="col-12">
|
||||
<div class="heading">4.5 {{'DMP-EDITOR.FIELDS.CONTACT' | translate}}</div>
|
||||
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
|
||||
<div class="organizations-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>
|
||||
<div class="row" *ngIf="!isNewDataset">
|
||||
<div class="col-12">
|
||||
<div class="heading">4.6 {{'DMP-EDITOR.FIELDS.COST' | translate}}</div>
|
||||
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
|
||||
<div class="organizations-form">
|
||||
<app-cost-listing [form] = "formGroup.get('extraProperties').get('costs')"></app-cost-listing>
|
||||
<button class="input-btn cost-add" matSuffix class="input-btn" type="button" (click)="addCost($event)">
|
||||
<mat-icon class="icon-btn">add_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
.main-info {
|
||||
// position: relative;
|
||||
// left: 362px;
|
||||
// width: calc(100% - 366px);
|
||||
|
||||
.intro {
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: #212121;
|
||||
opacity: 1;
|
||||
margin: 3rem 0rem 3rem 0rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0px;
|
||||
color: #212121;
|
||||
opacity: 0.81;
|
||||
margin-top: 1.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0px;
|
||||
color: #212121;
|
||||
opacity: 0.81;
|
||||
margin-bottom: 2.125rem;
|
||||
}
|
||||
|
||||
.title-form,
|
||||
.description-form {
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.15px;
|
||||
color: #7d7d7d;
|
||||
opacity: 1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// textarea::placeholder {
|
||||
// font-style: oblique;
|
||||
// }
|
||||
|
||||
.input-btn {
|
||||
border: none;
|
||||
color: #aaaaaa;
|
||||
background-color: #ffffff00;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-btn :hover {
|
||||
color: #00b29f !important;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-outline {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-outline {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-outline {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-outline {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
font-size: 1rem;
|
||||
padding: 0.6em 0 1em 0 !important;
|
||||
}
|
||||
|
||||
::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
font-size: 1rem;
|
||||
padding: 0.6em 0 1em 0 !important;
|
||||
}
|
||||
|
||||
::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
font-size: 1rem;
|
||||
padding: 0.6em 0 1em 0 !important;
|
||||
}
|
||||
|
||||
::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
font-size: 1rem;
|
||||
padding: 0.6em 0 1em 0 !important;
|
||||
}
|
||||
|
||||
.cost-placeholder {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cost-add {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { OnInit, Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { FormGroup, FormControl, FormArray } from '@angular/forms';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
|
||||
import { isNullOrUndefined } from 'util';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
|
||||
import { LanguageInfo } from '@app/core/model/language-info';
|
||||
import { LanguageInfoService } from '@app/core/services/culture/language-info-service';
|
||||
import { RequestItem } from '@app/core/query/request-item';
|
||||
import { LicenseCriteria } from '@app/core/query/license/license-criteria';
|
||||
import { AddCostComponent } from '../cost-editor/add-cost/add-cost.component';
|
||||
import { CostEditorModel } from '../cost-editor/add-cost/add-cost.model';
|
||||
|
||||
interface Visible {
|
||||
value: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'license-info',
|
||||
templateUrl: './license-info.component.html',
|
||||
styleUrls: ['./license-info.component.scss']
|
||||
})
|
||||
export class LicenseInfoComponent extends BaseComponent implements OnInit {
|
||||
|
||||
@Input() formGroup: FormGroup = null;
|
||||
// @Input() datasetFormGroup: FormGroup;
|
||||
@Input() isNewVersion: boolean;
|
||||
@Input() isNewDataset: boolean;
|
||||
@Input() isUserOwner: boolean;
|
||||
@Input() isClone: boolean;
|
||||
@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
visibles: Visible[] = [
|
||||
{ value: true, name: 'DMP-EDITOR.VISIBILITY.PUBLIC' },
|
||||
{ value: false, name: 'DMP-EDITOR.VISIBILITY.RESTRICTED' }
|
||||
]
|
||||
|
||||
public formControl = new FormControl();
|
||||
|
||||
licenseAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
|
||||
filterFn: this.licenseSearch.bind(this),
|
||||
initialItems: (excludedItems: any[]) => this.licenseSearch('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
|
||||
displayFn: (item) => item['name'],
|
||||
titleFn: (item) => item['name']
|
||||
};
|
||||
|
||||
constructor(
|
||||
private externalSourcesService: ExternalSourcesService,
|
||||
private dialog: MatDialog,
|
||||
private languageInfoService: LanguageInfoService
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// if (this.formGroup.get('definition')) { this.selectedDmpProfileDefinition = this.formGroup.get('definition').value; }
|
||||
// this.registerFormEventsForDmpProfile();
|
||||
|
||||
if (this.isNewVersion) {
|
||||
this.formGroup.get('label').disable();
|
||||
}
|
||||
|
||||
if (!this.isUserOwner && !this.isClone) {
|
||||
this.formGroup.disable();
|
||||
}
|
||||
if (isNullOrUndefined(this.formGroup.get('extraProperties').get('publicDate').value)) {
|
||||
this.formGroup.get('extraProperties').get('publicDate').patchValue(new Date());
|
||||
}
|
||||
|
||||
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(x => {
|
||||
this.onFormChanged.emit();
|
||||
});
|
||||
}
|
||||
|
||||
getLanguageInfos(): LanguageInfo[] {
|
||||
return this.languageInfoService.getLanguageInfoValues();
|
||||
}
|
||||
|
||||
licenseSearch(query: string): Observable<ExternalSourceItemModel[]> {
|
||||
const request = new RequestItem<LicenseCriteria>();
|
||||
request.criteria = new LicenseCriteria();
|
||||
request.criteria.like = query;
|
||||
request.criteria.type = '';
|
||||
return this.externalSourcesService.searchLicense(request);
|
||||
}
|
||||
|
||||
getAssociates(): any[] {
|
||||
let associates: any[] = [];
|
||||
//associates = (this.formGroup.get('researchers').value as any[]);
|
||||
associates = associates.concat(this.formGroup.get('associatedUsers').value);
|
||||
return associates;
|
||||
}
|
||||
|
||||
addCost(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
const dialogRef = this.dialog.open(AddCostComponent, {
|
||||
data: this.formGroup.get('extraProperties').get('costs')
|
||||
});
|
||||
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
|
||||
if (result) {
|
||||
const costsArray = this.formGroup.get('extraProperties').get('costs').value || [];
|
||||
costsArray.push(result);
|
||||
let costeditModel: CostEditorModel = new CostEditorModel();
|
||||
costeditModel = costeditModel.fromModel(result);
|
||||
(<FormArray>this.formGroup.get('extraProperties').get('costs')).push(costeditModel.buildForm(null, true));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -794,6 +794,7 @@
|
|||
"VISIBILITY": "Visibility",
|
||||
"PUBLICATION": "Publication Date",
|
||||
"CONTACT": "Contact",
|
||||
"COST": "Costs",
|
||||
"DATASETS": "Datasets"
|
||||
},
|
||||
"ACTIONS": {
|
||||
|
|
@ -837,6 +838,7 @@
|
|||
"FUNDING-INFO": "Funding info",
|
||||
"DATASET-SELECTION": "Dataset selection",
|
||||
"DATASET-INFO": "Dataset info",
|
||||
"LICENSE-INFO": "License info",
|
||||
"DATASET": "Dataset",
|
||||
"PREVIOUS": "Previous",
|
||||
"NEXT": "Next"
|
||||
|
|
@ -855,6 +857,11 @@
|
|||
"SECOND-INTRO": "Datasets are documented following pre-defined templates which set the content of dataset descriptions. In Argos, a DMP can contain as many dataset descriptions as the datasets it documents.",
|
||||
"FIND": "Couldn't find a suitable one?"
|
||||
},
|
||||
"LICENSE-INFO": {
|
||||
"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
|
||||
"HINT": "A brief description of what license the DMP is using, it’s type and when it will open.",
|
||||
"TYPING": "Type more letters of the name so its more possible to find the correct one."
|
||||
},
|
||||
"CHANGES": "unsaved changes",
|
||||
"CLONE-DIALOG": {
|
||||
"CLONE": "Clone",
|
||||
|
|
|
|||
Loading…
Reference in New Issue