MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Dataset profile editor. Validators are added to prevent user from proceeding with empty array of options(radio box and select). Polishing UI.

This commit is contained in:
Kristian Ntavidi 2021-03-04 14:38:46 +02:00
parent 87b79c2049
commit efc882016b
26 changed files with 604 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
View File

@ -58,40 +58,42 @@
<!-- MAIN CONTENT -->
<div class="main-content-page">
<div style="position: relative;" class="col-12">
<!-- TITLE -->
<!-- TITLE -->
<div class="col-12">
<div class="row fielset-header">
<div class="col-auto d-flex">
<!-- <div class="col-auto d-flex">
<div class="align-self-center">
{{numbering}}
</div>
</div>
<!-- <mat-form-field class="col-auto" appearance="none">
</div> -->
<mat-form-field appearance="none" class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
<input matInput type="text" [value]="numbering" disabled>
</mat-form-field> -->
<mat-form-field class="col" appearance="none">
</mat-form-field>
<mat-form-field class="col field-title" appearance="none">
<input matInput type="text" placeholder="Title"
[formControl]="this.form.get('title')">
</mat-form-field>
</div>
</div>
<div style="position: relative;" class="col-8">
<ng-container *ngIf="hasFocus">
<div class="row" *ngIf="showDescription">
<mat-form-field class="col" appearance="legacy">
<mat-form-field class="col p-0" appearance="legacy">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
[formControl]="this.form.get('description')">
</mat-form-field>
</div>
<div class="row" *ngIf="showExtendedDescription">
<mat-form-field class="col" appearance="legacy">
<mat-form-field class="col p-0" appearance="legacy">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
[formControl]="this.form.get('extendedDescription')"/>
</mat-form-field>
</div>
<div class="row" *ngIf="showAdditionalInfo">
<mat-form-field class="col" appearance="legacy">
<mat-form-field class="col p-0" appearance="legacy">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
[formControl]="this.form.get('additionalInformation')"/>
</mat-form-field>
@ -115,6 +117,7 @@
</div>

11
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
View File

@ -73,4 +73,13 @@ $blue-color-light: #5cf7f2;
.fieldset-actions-list{
margin: 0;
cursor: pointer;
}
}
// ::ng-deep .main-content-page .fieldset-header .field-title .mat-form-field-infix{
// border-top: 0px;
// }
.numbering-label .mat-input-element:disabled{
color: #212121;
}

123
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { FieldEditorModel } from '../../../admin/field-editor-model';
import { Guid } from '@common/types/guid';
import { RuleEditorModel } from '../../../admin/rule-editor-model';
@ -31,6 +31,7 @@ import { DatasetIdentifierDataEditorModel } from '../../../admin/field-data/data
import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models';
import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models';
import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
import { OrganizationsDataEditorModel } from '../../../admin/field-data/organizations-data-editor-models';
@Component({
selector: 'app-dataset-profile-editor-composite-field-component',
@ -356,11 +357,17 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
case this.viewTypeEnum.Select:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());
this.form.get('data').setValidators(this._atLeastOneElementListValidator('options'));
this.form.get('data').updateValueAndValidity();
break;
case this.viewTypeEnum.Other:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
fieldForm.get('data').setValidators(this._atLeastOneElementListValidator('autoCompleteSingleDataList'));
break;
case this.viewTypeEnum.InternalDmpEntities:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
@ -409,8 +416,9 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
break;
case this.viewTypeEnum.Organizations:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); //TODO
this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm())
// fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); //TODO
break;
case this.viewTypeEnum.DatasetIdentifier:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
@ -432,51 +440,74 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
}
private customFieldValidator(): ValidatorFn{
return (control):ValidationErrors | null=>{
DatasetProfileFieldViewStyle
switch(control.get('viewStyle').get('renderStyle').value){
// private customFieldValidator(): ValidatorFn{
// return (control):ValidationErrors | null=>{
// DatasetProfileFieldViewStyle
// switch(control.get('viewStyle').get('renderStyle').value){
case DatasetProfileFieldViewStyle.TextArea:
return null;
case DatasetProfileFieldViewStyle.BooleanDecision:
return null;
case DatasetProfileFieldViewStyle.ComboBox:
return null;
case DatasetProfileFieldViewStyle.CheckBox:
return null;
case DatasetProfileFieldViewStyle.FreeText:
return null;
case DatasetProfileFieldViewStyle.RadioBox:
return null;
case DatasetProfileFieldViewStyle.DatePicker:
return null;
case DatasetProfileFieldViewStyle.InternalDmpEntities:
return null;
case DatasetProfileFieldViewStyle.ExternalDatasets:
return null;
case DatasetProfileFieldViewStyle.DataRepositories:
return null;
case DatasetProfileFieldViewStyle.Registries:
return null;
case DatasetProfileFieldViewStyle.Services:
return null;
case DatasetProfileFieldViewStyle.Tags:
return null;
case DatasetProfileFieldViewStyle.Researchers:
return null;
case DatasetProfileFieldViewStyle.Organizations:
return null;
case DatasetProfileFieldViewStyle.DatasetIdentifier:
return null;
case DatasetProfileFieldViewStyle.Currency:
return null;
case DatasetProfileFieldViewStyle.Validation:
return null;
default:
return {inputTypeNotValid: true}
// case DatasetProfileFieldViewStyle.TextArea:
// return null;
// case DatasetProfileFieldViewStyle.BooleanDecision:
// return null;
// case DatasetProfileFieldViewStyle.ComboBox:
// return null;
// case DatasetProfileFieldViewStyle.CheckBox:
// return null;
// case DatasetProfileFieldViewStyle.FreeText:
// return null;
// case DatasetProfileFieldViewStyle.RadioBox:
// return null;
// case DatasetProfileFieldViewStyle.DatePicker:
// return null;
// case DatasetProfileFieldViewStyle.InternalDmpEntities:
// return null;
// case DatasetProfileFieldViewStyle.ExternalDatasets:
// return null;
// case DatasetProfileFieldViewStyle.DataRepositories:
// return null;
// case DatasetProfileFieldViewStyle.Registries:
// return null;
// case DatasetProfileFieldViewStyle.Services:
// return null;
// case DatasetProfileFieldViewStyle.Tags:
// return null;
// case DatasetProfileFieldViewStyle.Researchers:
// return null;
// case DatasetProfileFieldViewStyle.Organizations:
// return null;
// case DatasetProfileFieldViewStyle.DatasetIdentifier:
// return null;
// case DatasetProfileFieldViewStyle.Currency:
// return null;
// case DatasetProfileFieldViewStyle.Validation:
// return null;
// default:
// return {inputTypeNotValid: true}
// }
// }
// }
private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
return (control: AbstractControl): ValidationErrors | null=>{
const fa = control.get(arrayToCheck) as FormArray;
if(fa.length === 0){
return {emptyArray: true};
}
return null;
}
}
calculateLabelWidth(numbering: string){
const width = numbering.split('.').reduce((acc,item)=> item+acc,'').length;
return {'width':width+'em'}
}
}

4
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html
View File

@ -40,7 +40,7 @@
</mat-form-field>
<!-- InternalDmpEntities -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Researchers">
<!-- <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Researchers">
<mat-label>{{placeHolder}}</mat-label>
<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
</mat-form-field>
@ -51,7 +51,7 @@
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Dmps">
<mat-label>{{placeHolder}}</mat-label>
<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
</mat-form-field>
</mat-form-field> -->
<!-- FreeText -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.FreeText">

20
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html
View File

@ -12,9 +12,19 @@
</mat-form-field>
<h6 style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE-TITLE' | translate}}</h6>
<button mat-raised-button type="button" class="col-auto" (click)="addSource()">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-ADD_SOURCE' | translate}}</button>
</div>
<button mat-raised-button
type="button" class="col-auto"
(click)="addSource()"
[ngClass]="{'text-danger':form.get('data').errors?.emptyArray && form.touched}"
>
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-ADD_SOURCE' | translate}}
<mat-icon
*ngIf="form.get('data').errors?.emptyArray && form.get('data').touched"
matTooltip="At least one source must be provided."
>warning_amber</mat-icon>
</button>
</div>
<div *ngFor="let singleForm of multiForm.controls; let i = index" class="row">
<mat-form-field class="col-12">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-TYPE' | translate}}</mat-label>
@ -26,12 +36,12 @@
<mat-form-field class="col-md-12">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}</mat-label>
<input matInput [formControl]="this.singleForm.get('url')">
<input matInput [formControl]="this.singleForm.get('url')" required>
</mat-form-field>
<mat-form-field class="col-md-3">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}</mat-label>
<input matInput
[formControl]="this.singleForm.get('optionsRoot')">
[formControl]="this.singleForm.get('optionsRoot')" required>
</mat-form-field>
<mat-form-field class="col-md-3">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}</mat-label>

6
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss
View File

@ -11,4 +11,10 @@
mat-radio-button{
padding-right: 1em;
}
li.list-inline-item{
.mat-icon{
vertical-align: bottom;
}
}

27
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts
View File

@ -1,6 +1,6 @@

import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
import { AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup, FormGroupDirective, NgForm, ValidationErrors, ValidatorFn } from '@angular/forms';
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
import { ValidationType } from '@app/core/common/enum/validation-type';
import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
@ -422,10 +422,19 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
case this.viewTypeEnum.Select:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
this.form.get('data').setValidators(this._atLeastOneElementListValidator('options'));
this.form.get('data').updateValueAndValidity();
break;
case this.viewTypeEnum.Other:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
this.form.get('data').setValidators(this._atLeastOneElementListValidator('autoCompleteSingleDataList'));
this.form.get('data').updateValueAndValidity();
break;
case this.viewTypeEnum.InternalDmpEntities:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
@ -438,6 +447,10 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
case this.viewTypeEnum.RadioBox:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
this.form.get('data').setValidators(this._atLeastOneElementListValidator('options'));
this.form.get('data').updateValueAndValidity();
break;
case this.viewTypeEnum.TextArea:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
@ -531,4 +544,16 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
this.delete.emit();
}
private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
return (control: AbstractControl): ValidationErrors | null=>{
const fa = control.get(arrayToCheck) as FormArray;
if(fa.length === 0){
return {emptyArray: true};
}
return null;
}
}
}

2
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html
View File

@ -1,7 +1,7 @@
<div class="row" [id]="idprefix+form.get('id').value">
<!-- SECTION INFO -->
<mat-card style="margin-bottom: 2em;" class="col-12" >
<mat-card style="margin-bottom: 2em; padding: 2em;" class="col-12" >
<mat-card-content>
<app-dataset-profile-editor-section-component
[form]="form"

4
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.scss
View File

@ -1,4 +1,6 @@
.dataset-profile-editor {
.field-card {
margin-bottom: 1em;
}
@ -14,7 +16,7 @@
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-top: 1.625rem;
// margin-top: 1.625rem;
margin-bottom: 0.625rem;
}

130
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
View File

@ -28,9 +28,17 @@
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
<div id="progress" [ngStyle]="progressStyle"></div>
<div class="row p-1">
<div class="row h-100">
<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
<span (click)="stepper.selectedIndex=idx" style="cursor: pointer">
<span (click)="stepper.selectedIndex=idx"
class="stepper-title-label"
[ngClass]="{'stepper-title-label-locked': !isStepUnlocked(idx),'stepper-title-label-completed':idx < stepper.selectedIndex} ">
<ng-container *ngIf="isStepCompleted(idx) else numberLabel">
<mat-icon style="font-size:0.7em; height: 0px;">done</mat-icon>
</ng-container>
<ng-template #numberLabel>
{{idx+1}}
</ng-template>
{{step.label}}
</span>
</div>
@ -39,10 +47,15 @@
<div class="col d-flex justify-content-end">
<button mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
<mat-icon>navigate_before</mat-icon> {{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
<!-- <mat-icon>navigate_before</mat-icon> -->
{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
</button>
<button mat-button class="navigate-btn ml-2" (click)="stepper.next();validateStep(stepper.selected);" *ngIf="stepper.selectedIndex != (steps.length-1)">
{{'DMP-EDITOR.STEPPER.NEXT' | translate}}<mat-icon>navigate_next</mat-icon>
<button mat-button class="navigate-btn ml-2"
(click)="stepper.next();validateStep(stepper.selected);"
*ngIf="stepper.selectedIndex != (steps.length-1)"
[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex)}">
<mat-icon style="font-size: 1.66em;">navigate_next</mat-icon>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}
</button>
@ -147,7 +160,7 @@
<div class="col-3">
<div class="row sticky-top" id="style-2" style="top : 2em; max-height: 60vh; overflow-y: scroll;">
<div class="row sticky-top" style="top : 2em;">
<dataset-profile-table-of-contents class="toc-pane-container col"
[links]="toCEntries"
(stepFound)="onStepFound($event)"
@ -165,7 +178,7 @@
<!-- DISPLAYER -->
<div class="col ml-4">
<div class="col ml-3">
<div class="row">
@ -173,8 +186,8 @@
<div class="row" *ngIf="selectedTocEntry">
<!-- PAGE INFO -->
<div class="col-12 content-displayer p-2" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
<form [formGroup]="selectedTocEntry.form">
<div class="col-12 content-displayer" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
<form [formGroup]="selectedTocEntry.form" class="page-infos">
<div class="row">
<!-- PAGE NAME -->
<div class="col">
@ -219,17 +232,22 @@
</div>
<div class="content-displayer row justify-content-center" *ngIf="!numOfPages" style="min-height: 30em;">
<div class="col-auto align-self-center text-center">
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.NOTHING-HERE-HINT'| translate}}
<br>
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-START'| translate}}
<strong style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.Page,parent: null})">
<em>
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}}
</em>
<mat-icon color="accent">add</mat-icon>
</strong>
<div class="col-auto align-self-center">
<div class="row w-100 justify-content-center">
<div class="col-auto">
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.NOTHING-HERE-HINT'| translate}}
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto d-flex aling-contents-center">
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-START'| translate}}
<mat-icon color="accent" style="font-size: 1.5em; text-align: center; width: 1.5em;">add</mat-icon>
<strong style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.Page,parent: null})">
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}}
</strong>
</div>
</div>
</div>
</div>
@ -240,32 +258,70 @@
<div class="col-auto"
*ngIf="((selectedTocEntry?.type == tocEntryEnumValues.Section)||(selectedTocEntry?.type == tocEntryEnumValues.FieldSet) )&&(selectedTocEntry?.subEntriesType != tocEntryEnumValues.Section) && !viewOnly">
<div class="row" class="actions-list bg-white sticky-top" style="top: 2em;">
<mat-list role="list">
<nav *ngIf="!viewOnly">
<label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
<ul class="list-unstyled">
<li *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
<div class="action-list-item" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {form: selectedTocEntry.form.parent.parent}})">
<mat-icon class="action-list-icon">folder</mat-icon>
<span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
</div>
</li>
<li *ngIf="selectedTocEntry.type === tocEntryEnumValues.Section" class="mli">
<div class="action-list-item" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: selectedTocEntry})">
<mat-icon class="action-list-icon">folder</mat-icon>
<span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
</div>
</li>
<li *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
<div class="action-list-item" (click)="cloneFieldSet(selectedTocEntry.form)">
<mat-icon class="action-list-icon">file_copy</mat-icon>
<span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
</div>
</li>
<li *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
<div class="action-list-item" (click)="onRemoveEntry(selectedTocEntry)">
<mat-icon class="action-list-icon">delete</mat-icon>
<span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
</div>
</li>
</ul>
</nav>
<ng-container *ngIf="!viewOnly">
<!-- <ng-container *ngIf="!viewOnly">
<h3 matSubheader>{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</h3>
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
<mat-icon matListIcon>folder</mat-icon>
<span matLine style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {form: selectedTocEntry.form.parent.parent}})" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
<div class="action-list-item">
<mat-icon class="action-list-icon">folder</mat-icon>
<span class="action-list-text" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {form: selectedTocEntry.form.parent.parent}})" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
</div>
</mat-list-item>
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.Section ">
<mat-icon matListIcon>folder</mat-icon>
<span matLine style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: selectedTocEntry})" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.Section" class="mli">
<div class="action-list-item">
<mat-icon class="action-list-icon">folder</mat-icon>
<span class="action-list-text" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: selectedTocEntry})" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
</div>
</mat-list-item>
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
<mat-icon matListIcon>file_copy</mat-icon>
<span matLine style="cursor: pointer;" (click)="cloneFieldSet(selectedTocEntry.form)">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
<div class="action-list-item">
<mat-icon class="action-list-icon">file_copy</mat-icon>
<span class="action-list-text" (click)="cloneFieldSet(selectedTocEntry.form)">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
</div>
</mat-list-item>
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
<mat-icon matListIcon>delete</mat-icon>
<span matLine style="cursor: pointer;" (click)="onRemoveEntry(selectedTocEntry)">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
<div class="action-list-item">
<mat-icon class="action-list-icon">delete</mat-icon>
<span class="action-list-text" (click)="onRemoveEntry(selectedTocEntry)">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
</div>
</mat-list-item>
</ng-container>
</mat-list>
</ng-container> -->
</div>
</div>
</div>

137
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
View File

@ -35,7 +35,7 @@
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-top: 1.625rem;
// margin-top: 1.625rem;
margin-bottom: 0.625rem;
}
@ -71,11 +71,11 @@
transition-timing-function: ease-out;
transition-delay: 50ms;
box-shadow: 0px 1px 2px #bfbfbf;
background-color: #f7dd72;
background-color: #F7DD72;
}
#progress-container{
box-shadow: 0px 1px 2px #bfbfbf;
border-radius: .3em;
box-shadow: 1px 1px 6px #00000029;;
// border-radius: .3em;
}
// .import-btn {
// background: #ffffff 0% 0% no-repeat padding-box;
@ -87,68 +87,103 @@
// color: #000;
// border: 1px solid #000;
// }
.navigate-btn {
.navigate-btn {
border-radius: 30px;
background-color: #f7dd72;
padding-left: 2em;
padding-right: 2em;
}
box-shadow: 0px 3px 6px #1E202029;
transition-property: background-color, color;
transition-duration: 200ms;
transition-delay: 50ms;
transition-timing-function: ease-in-out;
}
.navigate-btn-disabled{
background-color: #CBCBCB;
color: #FFF;
}
$blue-color : #129D99;
$blue-color-light: #5cf7f2;
.actions-list{
border: 1px solid $blue-color;
border-radius: 3px;
padding-top: 1rem;
padding-bottom: 1rem;
}
#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
// #DEDEDE
.stepper-title-label{
cursor: pointer;
transition-property: color, opacity;
transition-duration: 200ms;
transition-delay: 50ms;
transition-timing-function: ease-in-out;
color: #212121;
}
#style-6::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
.stepper-title-label-locked{
color: #DEDEDE;
}
#style-6::-webkit-scrollbar-thumb
{
background-color: rgb(162, 163, 163);
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
.stepper-title-label-completed{
opacity: 0.5;
}
.page-infos{
padding: 2em;
}
.mat-subheader{
padding: 0px;
}
//for the acitons list toolbar
// .mat-list-item.mat-list-item-with-avatar{
// padding-left: 0em;
// }
.actions-list{
// border: 1px solid $blue-color;
box-shadow: 0px 3px 12px #129D9999;
border-radius: 4px;
// padding-top: 1rem;
padding: 1em 0.9em;
min-width: 166px;
.mat-list-item-content{
padding: 0px;
}
.action-list-item{
display: flex;
align-items: center;
cursor: pointer;
.action-list-icon{
font-size: 1.2em;
padding-right: 1em;
height: auto;
}
.action-list-text{
font-size: 0.9em;;
}
}
.action-list-label{
color: #212121;
font-size: small;
opacity: 0.6;
}
.list-unstyled{
margin-bottom: 0.2rem;
}
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 4px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rgb(158, 158, 158)// #FFF;//$blue-color-light;// rgb(162, 163, 163);// #D62929;
}
// .mli{
// height: auto;
// }

61
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
View File

@ -703,12 +703,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
//define entry type
switch (tce.childType) {
case ToCEntryType.Page:
const pagesArray = (this.form.get('pages') as FormArray);
const page: PageEditorModel = new PageEditorModel(this.dataModel.pages.length);
const page: PageEditorModel = new PageEditorModel(pagesArray.length);
const pageForm = page.buildForm();
// this.dataModel.pages.push(page);
const pagesArray = (this.form.get('pages') as FormArray);
pagesArray.push(pageForm);
this.refreshToCEntries();
@ -1388,6 +1388,37 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
}
isStepCompleted(stepIndex: number){
let stepCompleted = false;
this.steps.forEach((step,index)=>{
if(stepIndex === index){
if(step.stepControl){
stepCompleted = step.stepControl.valid;
}
}
});
return stepCompleted;
}
isStepUnlocked(stepIndex: number): boolean{
if(stepIndex === 0) return true;
//if previous step is valid then unlock
let stepUnlocked: boolean = false;
this.steps.forEach((step,index)=>{
if(index+1 == stepIndex){//previous step
if(step.stepControl.valid){
stepUnlocked = true;
}
}
});
return stepUnlocked;
}
validateStep(step: CdkStep){
@ -1604,11 +1635,35 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
});
}else{
// if(aControl.errors){
// invalidControls.push({
// id: aControl.get('id')? aControl.get('id').value: null,
// errors:aControl.errors,
// key: aControl.get('title')? aControl.get('title').value: 'unspecified',
// invalidSubControls:[]//TODO TO CHECK
// });
// }
if(control.errors){
// invalidControls.push({
// id: aControl.get('id')? aControl.get('id').value: null,
// errors:aControl.errors,
// key: aControl.get('title')? aControl.get('title').value: 'unspecified',
// invalidSubControls:[]//TODO TO CHECK
// });
invalidControls.push({
errors:control.errors,
id: control.get('id')? control.get('id').value: null,
invalidSubControls: [],
key: key
});
}
invalidControls.push(...this._getErrors(control)) ;
}
});
break;
case 'fa':
// const fa = (aControl as FormArray);

49
dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html
View File

@ -5,8 +5,9 @@
<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">
<div class="col link-info"
[ngStyle]="{'padding-top': (!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id)? '0em': '.6em'}"
>
<!-- [ngStyle]="{'padding-top': (!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id)? '0em': '.6em'}" -->
<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" >
{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
</span> -->
@ -21,7 +22,7 @@
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
> -->
<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)"
<span class="table-label-element" [ngClass]="{'table-label-element-active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)"
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
>
<!-- {{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} -->
@ -39,17 +40,18 @@
<span style="cursor: pointer;" (click)="deleteEntry(parentLink)"
*ngIf="!viewOnly && (itemSelected?.id == parentLink?.id)"
[hidden]="!(!viewOnly && (itemSelected?.id == parentLink?.id))"
>
<mat-icon>delete</mat-icon>
<mat-icon style="font-size: 1.4em;">delete</mat-icon>
</span>
</div>
</div>
<!-- When item is not selected then show only the pages (first level) -->
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
<!-- [ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'pl-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }" -->
<div dragula="TABLEDRAG" class="ml-2"
[ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'pl-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }"
[ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'ml-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }"
[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id || dragHoveringOver ||isDragging)"
class="cdk-link-list"
[id]="parentLink.id"
@ -90,7 +92,7 @@
</ng-container> -->
<!-- </div> -->
<!-- <button cdkDragHandle>drab</button> -->
<div class="ml-3">
<div [ngClass]="{'ml-3': link.type != tocEntryType.Page }">
<app-dataset-profile-table-of-contents-internal-section
[links]="link.subEntries"
(itemClick)="itemClicked($event)"
@ -120,7 +122,14 @@
<!-- <mat-icon>add</mat-icon> -->
<ng-container [ngSwitch]="link.type">
<ng-container *ngSwitchCase="tocEntryType.Section">
Subsection +
<div class="d-flex" style="align-items: center;" >
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<!-- Create new subsection -->
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
</div>
<!-- Subsection + -->
</ng-container>
<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
Section
@ -156,7 +165,14 @@
<!-- Give option to generate section -->
<button class="mat-button" style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
<!-- <mat-icon>add</mat-icon> -->
Subsection +
<!-- Subsection + -->
<div class="d-flex" style="align-items: center;" >
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<!-- Create new subsection -->
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
</div>
</button>
@ -193,10 +209,21 @@
<!-- </ng-container> -->
<!-- Only for the page -->
<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly">
<button class="mat-button ml-3 mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
<!-- style="margin-left: -0.5em;" -->
<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly" >
<button class="mat-button mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
<!-- <mat-icon>add</mat-icon> -->
Section +
<div class="d-flex" style="align-items: center;" >
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<ng-container *ngIf="!links?.length else createsection">
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-FIRST-SECTION'| translate}}
<!-- Create the first section -->
</ng-container>
<ng-template #createsection>
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SECTION'| translate}}
<!-- Create new section -->
</ng-template>
</div>
</button>
<!-- <button (click)="showDroplists()">show droplist</button>
<button (click)="showStructs()">structs</button> -->

34
dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss
View File

@ -71,10 +71,6 @@
}
.active{
font-weight: bold;
}
.table-item-actions{
// display: none;
display: inline-block;
@ -104,12 +100,18 @@
}
// .border-left-active{
// border-left: 1px solid #000;
// }
.border-left-active{
border-left: 1px solid #000;
}
.side-bolder{
border-left: 1px solid red;
}
.cdk-link-list {
display: block;
// background: white;
overflow: hidden;
@ -171,4 +173,20 @@ $yellow: #f7dd72;
font-weight: bold;
min-width: 2em;
text-align: center;
}
}
.table-label-element{
cursor: pointer;
// font-weight: normal;
// transition-property: font-weight;
// transition-duration: 160ms;
// transition-delay: 50ms;
// transition-timing-function: ease-in-out;
}
.table-label-element-active{
font-weight: bold;
// color: red;
}

5
dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html
View File

@ -2,7 +2,9 @@
<!-- <div class="docs-toc-heading">Contents</div> -->
<!-- <nav> -->
<!-- <a [href]="_rootUrl + '#' + link.id" -->
<div class="scroll-container">
<h3>{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</h3>
<div class="scroll-container" id="style-2">
<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active">
<span *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
</span> -->
@ -19,6 +21,7 @@
[isDragging]="isDragging"
[draggingItemId]="draggingItemId"
[parentRootId]="ROOT_ID"
style="padding-right: 1em;"
></app-dataset-profile-table-of-contents-internal-section>
<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">

67
dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.scss
View File

@ -5,7 +5,9 @@
// border-left: solid 4px #0c7489;
.scroll-container {
overflow-y: auto;
// overflow-y: auto;
max-height: 60vh;
overflow-y: scroll;
// calc(100vh - 250px)
// height: calc(100vh - 250px);
}
@ -27,6 +29,18 @@
}
}
.scroll-container {
// overflow-y: auto;
max-height: 60vh;
overflow-y: scroll;
padding-left: .2em;
padding-right: 1em;
// padding-right: 0em 1em;
// calc(100vh - 250px)
// height: calc(100vh - 250px);
}
.docs-toc-heading {
margin: 0;
padding: 0;
@ -68,3 +82,54 @@ span {
.docs-level-h5 {
margin-left: 24px;
}
#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb
{
background-color: rgb(162, 163, 163);
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 4px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rgb(158, 158, 158);// #FFF;//$blue-color-light;// rgb(162, 163, 163);// #D62929;
}

15
dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
View File

@ -50,6 +50,18 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
@Output() dataNeedsRefresh = new EventEmitter<void>();
@Input() itemSelected: ToCEntry;
// @Input() set itemSelected(entry:ToCEntry){
// this._itemSelected = entry;
// };
// get itemSelected():ToCEntry{
// return this._itemSelected;
// }
// private _itemSelected:ToCEntry;
@Input() viewOnly: boolean;
subscription: Subscription;
@ -72,7 +84,8 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
) {
super();
if(this.dragulaService.find('TABLEDRAG')){
this.dragulaService.destroy('TABLEDRAG');
}

36
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
View File

@ -226,9 +226,24 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Researchers" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
</app-multiple-auto-complete> -->
<ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="researchersAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</ng-container>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
@ -237,9 +252,24 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Organizations" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> -->
<ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="organisationsAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</ng-container>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>

5
dmp-frontend/src/assets/i18n/de.json
View File

@ -297,9 +297,12 @@
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
"ACTIONS": {
"CREATE-FIRST-PAGE": "Create the first Section",
"CREATE-NEW-SUBSECTION": "Create new subsection",
"CREATE-NEW-SECTION": "Create new section",
"CREATE-FIRST-SECTION":"Create the first section",
"NOTHING-HERE-HINT": "Nothing here yet.",
"START-CREATING-PAGE-START": "Start by ",
"START-CREATING-PAGE-END": "creating the first Section."
"START-CREATING-PAGE-END": "creating the first section."
},
"PAGE": "Section"
},

7
dmp-frontend/src/assets/i18n/en.json
View File

@ -297,9 +297,12 @@
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
"ACTIONS": {
"CREATE-FIRST-PAGE": "Create the first Section",
"CREATE-NEW-SUBSECTION": "Create new subsection",
"CREATE-NEW-SECTION": "Create new section",
"CREATE-FIRST-SECTION":"Create the first section",
"NOTHING-HERE-HINT": "Nothing here yet.",
"START-CREATING-PAGE-START": "Start by ",
"START-CREATING-PAGE-END": "creating the first Section."
"START-CREATING-PAGE-END": "creating the first section."
},
"PAGE": "Section"
},
@ -473,7 +476,7 @@
"ADD-PAGE": "Add Page +",
"ADD-SECTION": "Add Section +",
"VALIDATE": "Validate",
"PREVIEW-AND-FINALIZE": "Preview and finalize",
"PREVIEW-AND-FINALIZE": "Preview & Finalize",
"FIELD": {
"MAKE-IT-REQUIRED": "Make input required",
"ADD-VISIBILITY-RULE": "Add visibility rule",

5
dmp-frontend/src/assets/i18n/es.json
View File

@ -297,9 +297,12 @@
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
"ACTIONS": {
"CREATE-FIRST-PAGE": "Create the first Section",
"CREATE-NEW-SUBSECTION": "Create new subsection",
"CREATE-NEW-SECTION": "Create new section",
"CREATE-FIRST-SECTION":"Create the first section",
"NOTHING-HERE-HINT": "Nothing here yet.",
"START-CREATING-PAGE-START": "Start by ",
"START-CREATING-PAGE-END": "creating the first Section."
"START-CREATING-PAGE-END": "creating the first section."
},
"PAGE": "Section"
},

5
dmp-frontend/src/assets/i18n/gr.json
View File

@ -297,9 +297,12 @@
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
"ACTIONS": {
"CREATE-FIRST-PAGE": "Create the first Section",
"CREATE-NEW-SUBSECTION": "Create new subsection",
"CREATE-NEW-SECTION": "Create new section",
"CREATE-FIRST-SECTION":"Create the first section",
"NOTHING-HERE-HINT": "Nothing here yet.",
"START-CREATING-PAGE-START": "Start by ",
"START-CREATING-PAGE-END": "creating the first Section."
"START-CREATING-PAGE-END": "creating the first section."
},
"PAGE": "Section"
},

5
dmp-frontend/src/assets/i18n/pt.json
View File

@ -297,9 +297,12 @@
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
"ACTIONS": {
"CREATE-FIRST-PAGE": "Create the first Section",
"CREATE-NEW-SUBSECTION": "Create new subsection",
"CREATE-NEW-SECTION": "Create new section",
"CREATE-FIRST-SECTION":"Create the first section",
"NOTHING-HERE-HINT": "Nothing here yet.",
"START-CREATING-PAGE-START": "Start by ",
"START-CREATING-PAGE-END": "creating the first Section."
"START-CREATING-PAGE-END": "creating the first section."
},
"PAGE": "Section"
},

5
dmp-frontend/src/assets/i18n/sk.json
View File

@ -297,9 +297,12 @@
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
"ACTIONS": {
"CREATE-FIRST-PAGE": "Create the first Section",
"CREATE-NEW-SUBSECTION": "Create new subsection",
"CREATE-NEW-SECTION": "Create new section",
"CREATE-FIRST-SECTION":"Create the first section",
"NOTHING-HERE-HINT": "Nothing here yet.",
"START-CREATING-PAGE-START": "Start by ",
"START-CREATING-PAGE-END": "creating the first Section."
"START-CREATING-PAGE-END": "creating the first section."
},
"PAGE": "Section"
},

5
dmp-frontend/src/assets/i18n/sr.json
View File

@ -297,9 +297,12 @@
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
"ACTIONS": {
"CREATE-FIRST-PAGE": "Create the first Section",
"CREATE-NEW-SUBSECTION": "Create new subsection",
"CREATE-NEW-SECTION": "Create new section",
"CREATE-FIRST-SECTION":"Create the first section",
"NOTHING-HERE-HINT": "Nothing here yet.",
"START-CREATING-PAGE-START": "Start by ",
"START-CREATING-PAGE-END": "creating the first Section."
"START-CREATING-PAGE-END": "creating the first section."
},
"PAGE": "Section"
},

5
dmp-frontend/src/assets/i18n/tr.json
View File

@ -297,9 +297,12 @@
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
"ACTIONS": {
"CREATE-FIRST-PAGE": "Create the first Section",
"CREATE-NEW-SUBSECTION": "Create new subsection",
"CREATE-NEW-SECTION": "Create new section",
"CREATE-FIRST-SECTION":"Create the first section",
"NOTHING-HERE-HINT": "Nothing here yet.",
"START-CREATING-PAGE-START": "Start by ",
"START-CREATING-PAGE-END": "creating the first Section."
"START-CREATING-PAGE-END": "creating the first section."
},
"PAGE": "Section"
},