Moves fields language, visibility, publication data, contact from license tab to main

This commit is contained in:
apapachristou 2020-09-25 15:55:06 +03:00
parent dfd7096196
commit 410583a5f2
6 changed files with 136 additions and 104 deletions

View File

@ -33,9 +33,9 @@
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options">
<ol class="stepper-list">
<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (8)</li>
<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (5)</li>
<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (1)</li>
<li (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
<!-- <li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}"> -->

View File

@ -3,30 +3,10 @@
{{'DMP-EDITOR.LICENSE-INFO.INTRO' | translate}}
</div>
<div class="col-12 card">
<!-- Title Field -->
<!-- License 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>
<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">
<div class="col-12">
<div class="heading">4.2 {{'DMP-EDITOR.FIELDS.LICENSE' | translate}}</div>
<div class="heading">4.1 {{'DMP-EDITOR.FIELDS.LICENSE' | translate}}</div>
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
<div class="description-form">
<mat-form-field>
@ -40,63 +20,6 @@
</div>
</div>
</div>
<!-- Researchers field-->
<div class="row">
<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="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">
<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">
<div class="col-12">
<div class="heading">4.6 {{'DMP-EDITOR.FIELDS.COST' | translate}}</div>

View File

@ -15,10 +15,7 @@ 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',
@ -34,11 +31,6 @@ export class LicenseInfoComponent extends BaseComponent implements OnInit {
@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 = {

View File

@ -31,15 +31,55 @@
</div>
</div>
</div>
<!-- Language field -->
<div class="row">
<div class="col-12">
<div class="heading">1.3 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
<div class="language-form">
<mat-form-field>
<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>
<!-- Visibility field-->
<div class="row">
<div class="col-12">
<div class="heading">1.4 {{'DMP-EDITOR.FIELDS.VISIBILITY' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
<div class="visibility-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>
<!-- Researchers field-->
<div class="row">
<div class="col-12">
<div class="heading">1.3 {{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}</div>
<div class="heading">1.5 {{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}</div>
<div class="hint">
<!-- <div class="pb-1">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
</div>
<div class="author-form">
<div class="researchers-form">
<mat-form-field>
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
@ -51,15 +91,17 @@
<mat-icon class="icon-btn">add_circle</mat-icon>
</button> -->
</mat-form-field>
<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 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>
</div>
<!-- Organizations Field -->
<div class="row">
<div class="col-12">
<div class="heading">1.4 {{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}</div>
<div class="heading">1.6 {{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}</div>
<div class="hint">
<div class="pb-1">{{'DMP-EDITOR.FIELDS.ORGANISATIONS-HINT' | translate}}</div>
<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
@ -75,12 +117,50 @@
<mat-icon class="icon-btn">add_circle</mat-icon>
</button> -->
</mat-form-field>
<div *ngIf="showOrganizationCreator()" class="pb-4">
<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>
</div>
<!-- Publication Field -->
<div class="row" *ngIf="formGroup.get('extraProperties').get('visible').value">
<div class="col-12">
<div class="heading">1.7 {{'DMP-EDITOR.FIELDS.PUBLICATION' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
<div class="publication-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>
<!-- Contact Field -->
<div class="row">
<div class="col-12">
<div class="heading">1.8 {{'DMP-EDITOR.FIELDS.CONTACT' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
<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>
</div>
</div>

View File

@ -34,7 +34,13 @@
}
.title-form,
.description-form {
.contact-form,
.description-form,
.publication-form,
.organisations-form,
.researchers-form,
.language-form,
.visibility-form {
text-align: left;
font-weight: 400;
font-size: 16px;
@ -78,35 +84,43 @@
::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 .contact-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}
::ng-deep publication-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;
}
::ng-deep .contact-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}
::ng-deep .publication-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}

View File

@ -18,6 +18,13 @@ import { DataTableRequest } from '@app/core/model/data-table/data-table-request'
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { DmpService } from '@app/core/services/dmp/dmp.service';
import { LanguageInfo } from '@app/core/model/language-info';
import { LanguageInfoService } from '@app/core/services/culture/language-info-service';
interface Visible {
value: boolean;
name: string;
}
@Component({
selector: 'main-info',
@ -34,6 +41,10 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
public formControl = new FormControl();
visibles: Visible[] = [
{ value: true, name: 'DMP-EDITOR.VISIBILITY.PUBLIC' },
{ value: false, name: 'DMP-EDITOR.VISIBILITY.RESTRICTED' }
]
organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterOrganisations.bind(this),
@ -63,7 +74,8 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
private configurationService: ConfigurationService,
private externalSourcesService: ExternalSourcesService,
private dmpService: DmpService,
private dialog: MatDialog
private dialog: MatDialog,
private languageInfoService: LanguageInfoService
) {
super();
}
@ -172,4 +184,15 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
// else { return item['label']; }
return item['label'] ? item['label'] : null;
}
getLanguageInfos(): LanguageInfo[] {
return this.languageInfoService.getLanguageInfoValues();
}
getAssociates(): any[] {
let associates: any[] = [];
//associates = (this.formGroup.get('researchers').value as any[]);
associates = associates.concat(this.formGroup.get('associatedUsers').value);
return associates;
}
}