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:
parent
87b79c2049
commit
efc882016b
|
@ -58,40 +58,42 @@
|
||||||
|
|
||||||
<!-- MAIN CONTENT -->
|
<!-- MAIN CONTENT -->
|
||||||
<div class="main-content-page">
|
<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="row fielset-header">
|
||||||
<div class="col-auto d-flex">
|
<!-- <div class="col-auto d-flex">
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
{{numbering}}
|
{{numbering}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- <mat-form-field class="col-auto" appearance="none">
|
<mat-form-field appearance="none" class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
|
||||||
<input matInput type="text" [value]="numbering" disabled>
|
<input matInput type="text" [value]="numbering" disabled>
|
||||||
</mat-form-field> -->
|
</mat-form-field>
|
||||||
<mat-form-field class="col" appearance="none">
|
<mat-form-field class="col field-title" appearance="none">
|
||||||
<input matInput type="text" placeholder="Title"
|
<input matInput type="text" placeholder="Title"
|
||||||
[formControl]="this.form.get('title')">
|
[formControl]="this.form.get('title')">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="position: relative;" class="col-8">
|
||||||
|
|
||||||
|
|
||||||
<ng-container *ngIf="hasFocus">
|
<ng-container *ngIf="hasFocus">
|
||||||
|
|
||||||
<div class="row" *ngIf="showDescription">
|
<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}}"
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
|
||||||
[formControl]="this.form.get('description')">
|
[formControl]="this.form.get('description')">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" *ngIf="showExtendedDescription">
|
<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}}"
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
|
||||||
[formControl]="this.form.get('extendedDescription')"/>
|
[formControl]="this.form.get('extendedDescription')"/>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" *ngIf="showAdditionalInfo">
|
<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}}"
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
|
||||||
[formControl]="this.form.get('additionalInformation')"/>
|
[formControl]="this.form.get('additionalInformation')"/>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
@ -115,6 +117,7 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -74,3 +74,12 @@ $blue-color-light: #5cf7f2;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
cursor: pointer;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component, Input, OnChanges, OnInit } from '@angular/core';
|
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 { FieldEditorModel } from '../../../admin/field-editor-model';
|
||||||
import { Guid } from '@common/types/guid';
|
import { Guid } from '@common/types/guid';
|
||||||
import { RuleEditorModel } from '../../../admin/rule-editor-model';
|
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 { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models';
|
||||||
import { ValidationDataEditorModel } from '../../../admin/field-data/validation-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 { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
|
||||||
|
import { OrganizationsDataEditorModel } from '../../../admin/field-data/organizations-data-editor-models';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-profile-editor-composite-field-component',
|
selector: 'app-dataset-profile-editor-composite-field-component',
|
||||||
|
@ -356,11 +357,17 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
||||||
case this.viewTypeEnum.Select:
|
case this.viewTypeEnum.Select:
|
||||||
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
||||||
fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());
|
fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());
|
||||||
|
|
||||||
|
this.form.get('data').setValidators(this._atLeastOneElementListValidator('options'));
|
||||||
|
this.form.get('data').updateValueAndValidity();
|
||||||
break;
|
break;
|
||||||
case this.viewTypeEnum.Other:
|
case this.viewTypeEnum.Other:
|
||||||
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
||||||
fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
|
fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
|
||||||
|
|
||||||
|
fieldForm.get('data').setValidators(this._atLeastOneElementListValidator('autoCompleteSingleDataList'));
|
||||||
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case this.viewTypeEnum.InternalDmpEntities:
|
case this.viewTypeEnum.InternalDmpEntities:
|
||||||
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
|
||||||
|
@ -409,8 +416,9 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
||||||
break;
|
break;
|
||||||
case this.viewTypeEnum.Organizations:
|
case this.viewTypeEnum.Organizations:
|
||||||
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
|
||||||
// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
|
this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
|
||||||
fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); //TODO
|
// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm())
|
||||||
|
// fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); //TODO
|
||||||
break;
|
break;
|
||||||
case this.viewTypeEnum.DatasetIdentifier:
|
case this.viewTypeEnum.DatasetIdentifier:
|
||||||
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
|
||||||
|
@ -432,51 +440,74 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private customFieldValidator(): ValidatorFn{
|
// private customFieldValidator(): ValidatorFn{
|
||||||
return (control):ValidationErrors | null=>{
|
// return (control):ValidationErrors | null=>{
|
||||||
DatasetProfileFieldViewStyle
|
// DatasetProfileFieldViewStyle
|
||||||
switch(control.get('viewStyle').get('renderStyle').value){
|
// switch(control.get('viewStyle').get('renderStyle').value){
|
||||||
|
|
||||||
case DatasetProfileFieldViewStyle.TextArea:
|
// case DatasetProfileFieldViewStyle.TextArea:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.BooleanDecision:
|
// case DatasetProfileFieldViewStyle.BooleanDecision:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.ComboBox:
|
// case DatasetProfileFieldViewStyle.ComboBox:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.CheckBox:
|
// case DatasetProfileFieldViewStyle.CheckBox:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.FreeText:
|
// case DatasetProfileFieldViewStyle.FreeText:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.RadioBox:
|
// case DatasetProfileFieldViewStyle.RadioBox:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.DatePicker:
|
// case DatasetProfileFieldViewStyle.DatePicker:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.InternalDmpEntities:
|
// case DatasetProfileFieldViewStyle.InternalDmpEntities:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.ExternalDatasets:
|
// case DatasetProfileFieldViewStyle.ExternalDatasets:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.DataRepositories:
|
// case DatasetProfileFieldViewStyle.DataRepositories:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.Registries:
|
// case DatasetProfileFieldViewStyle.Registries:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.Services:
|
// case DatasetProfileFieldViewStyle.Services:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.Tags:
|
// case DatasetProfileFieldViewStyle.Tags:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.Researchers:
|
// case DatasetProfileFieldViewStyle.Researchers:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.Organizations:
|
// case DatasetProfileFieldViewStyle.Organizations:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.DatasetIdentifier:
|
// case DatasetProfileFieldViewStyle.DatasetIdentifier:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.Currency:
|
// case DatasetProfileFieldViewStyle.Currency:
|
||||||
return null;
|
// return null;
|
||||||
case DatasetProfileFieldViewStyle.Validation:
|
// case DatasetProfileFieldViewStyle.Validation:
|
||||||
return null;
|
// return null;
|
||||||
default:
|
// default:
|
||||||
return {inputTypeNotValid: true}
|
// 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'}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<!-- InternalDmpEntities -->
|
<!-- 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>
|
<mat-label>{{placeHolder}}</mat-label>
|
||||||
<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
|
<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Dmps">
|
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.InternalDmpEntities && internalDmpEntitiesType === internalDmpEntitiesTypeEnum.Dmps">
|
||||||
<mat-label>{{placeHolder}}</mat-label>
|
<mat-label>{{placeHolder}}</mat-label>
|
||||||
<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
|
<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required">
|
||||||
</mat-form-field>
|
</mat-form-field> -->
|
||||||
|
|
||||||
<!-- FreeText -->
|
<!-- FreeText -->
|
||||||
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.FreeText">
|
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.FreeText">
|
||||||
|
|
|
@ -12,8 +12,18 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<h6 style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE-TITLE' | translate}}</h6>
|
<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>
|
<button mat-raised-button
|
||||||
</div>
|
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">
|
<div *ngFor="let singleForm of multiForm.controls; let i = index" class="row">
|
||||||
<mat-form-field class="col-12">
|
<mat-form-field class="col-12">
|
||||||
|
@ -26,12 +36,12 @@
|
||||||
|
|
||||||
<mat-form-field class="col-md-12">
|
<mat-form-field class="col-md-12">
|
||||||
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}</mat-label>
|
<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>
|
||||||
<mat-form-field class="col-md-3">
|
<mat-form-field class="col-md-3">
|
||||||
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}</mat-label>
|
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}</mat-label>
|
||||||
<input matInput
|
<input matInput
|
||||||
[formControl]="this.singleForm.get('optionsRoot')">
|
[formControl]="this.singleForm.get('optionsRoot')" required>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field class="col-md-3">
|
<mat-form-field class="col-md-3">
|
||||||
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}</mat-label>
|
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}</mat-label>
|
||||||
|
|
|
@ -12,3 +12,9 @@
|
||||||
mat-radio-button{
|
mat-radio-button{
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li.list-inline-item{
|
||||||
|
.mat-icon{
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
|
|
||||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
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 { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
|
||||||
import { ValidationType } from '@app/core/common/enum/validation-type';
|
import { ValidationType } from '@app/core/common/enum/validation-type';
|
||||||
import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
|
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:
|
case this.viewTypeEnum.Select:
|
||||||
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
||||||
this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
|
this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
|
||||||
|
|
||||||
|
this.form.get('data').setValidators(this._atLeastOneElementListValidator('options'));
|
||||||
|
this.form.get('data').updateValueAndValidity();
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case this.viewTypeEnum.Other:
|
case this.viewTypeEnum.Other:
|
||||||
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
||||||
this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
|
this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
|
||||||
|
|
||||||
|
this.form.get('data').setValidators(this._atLeastOneElementListValidator('autoCompleteSingleDataList'));
|
||||||
|
this.form.get('data').updateValueAndValidity();
|
||||||
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case this.viewTypeEnum.InternalDmpEntities:
|
case this.viewTypeEnum.InternalDmpEntities:
|
||||||
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
|
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
|
||||||
|
@ -438,6 +447,10 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
|
||||||
case this.viewTypeEnum.RadioBox:
|
case this.viewTypeEnum.RadioBox:
|
||||||
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
|
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
|
||||||
this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
|
this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
|
||||||
|
|
||||||
|
this.form.get('data').setValidators(this._atLeastOneElementListValidator('options'));
|
||||||
|
this.form.get('data').updateValueAndValidity();
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case this.viewTypeEnum.TextArea:
|
case this.viewTypeEnum.TextArea:
|
||||||
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
|
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
|
||||||
|
@ -531,4 +544,16 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
|
||||||
this.delete.emit();
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="row" [id]="idprefix+form.get('id').value">
|
<div class="row" [id]="idprefix+form.get('id').value">
|
||||||
|
|
||||||
<!-- SECTION INFO -->
|
<!-- 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>
|
<mat-card-content>
|
||||||
<app-dataset-profile-editor-section-component
|
<app-dataset-profile-editor-section-component
|
||||||
[form]="form"
|
[form]="form"
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
.dataset-profile-editor {
|
.dataset-profile-editor {
|
||||||
|
|
||||||
|
|
||||||
.field-card {
|
.field-card {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
@ -14,7 +16,7 @@
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
color: #212121;
|
color: #212121;
|
||||||
opacity: 0.81;
|
opacity: 0.81;
|
||||||
margin-top: 1.625rem;
|
// margin-top: 1.625rem;
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -28,9 +28,17 @@
|
||||||
|
|
||||||
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
|
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
|
||||||
<div id="progress" [ngStyle]="progressStyle"></div>
|
<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">
|
<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}}
|
{{step.label}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -39,10 +47,15 @@
|
||||||
|
|
||||||
<div class="col d-flex justify-content-end">
|
<div class="col d-flex justify-content-end">
|
||||||
<button mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
|
<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>
|
||||||
<button mat-button class="navigate-btn ml-2" (click)="stepper.next();validateStep(stepper.selected);" *ngIf="stepper.selectedIndex != (steps.length-1)">
|
<button mat-button class="navigate-btn ml-2"
|
||||||
{{'DMP-EDITOR.STEPPER.NEXT' | translate}}<mat-icon>navigate_next</mat-icon>
|
(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>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
@ -147,7 +160,7 @@
|
||||||
<div class="col-3">
|
<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"
|
<dataset-profile-table-of-contents class="toc-pane-container col"
|
||||||
[links]="toCEntries"
|
[links]="toCEntries"
|
||||||
(stepFound)="onStepFound($event)"
|
(stepFound)="onStepFound($event)"
|
||||||
|
@ -165,7 +178,7 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- DISPLAYER -->
|
<!-- DISPLAYER -->
|
||||||
<div class="col ml-4">
|
<div class="col ml-3">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
|
@ -173,8 +186,8 @@
|
||||||
<div class="row" *ngIf="selectedTocEntry">
|
<div class="row" *ngIf="selectedTocEntry">
|
||||||
|
|
||||||
<!-- PAGE INFO -->
|
<!-- PAGE INFO -->
|
||||||
<div class="col-12 content-displayer p-2" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
|
<div class="col-12 content-displayer" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
|
||||||
<form [formGroup]="selectedTocEntry.form">
|
<form [formGroup]="selectedTocEntry.form" class="page-infos">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- PAGE NAME -->
|
<!-- PAGE NAME -->
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
@ -219,19 +232,24 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-displayer row justify-content-center" *ngIf="!numOfPages" style="min-height: 30em;">
|
<div class="content-displayer row justify-content-center" *ngIf="!numOfPages" style="min-height: 30em;">
|
||||||
<div class="col-auto align-self-center text-center">
|
<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}}
|
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.NOTHING-HERE-HINT'| translate}}
|
||||||
<br>
|
</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}}
|
{{'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})">
|
<strong style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.Page,parent: null})">
|
||||||
<em>
|
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}}
|
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}}
|
||||||
</em>
|
|
||||||
<mat-icon color="accent">add</mat-icon>
|
|
||||||
</strong>
|
</strong>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -240,32 +258,70 @@
|
||||||
<div class="col-auto"
|
<div class="col-auto"
|
||||||
*ngIf="((selectedTocEntry?.type == tocEntryEnumValues.Section)||(selectedTocEntry?.type == tocEntryEnumValues.FieldSet) )&&(selectedTocEntry?.subEntriesType != tocEntryEnumValues.Section) && !viewOnly">
|
*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;">
|
<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>
|
||||||
|
|
||||||
<ng-container *ngIf="!viewOnly">
|
|
||||||
|
<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">
|
||||||
<h3 matSubheader>{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</h3>
|
<h3 matSubheader>{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</h3>
|
||||||
|
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
|
||||||
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
|
<div class="action-list-item">
|
||||||
<mat-icon matListIcon>folder</mat-icon>
|
<mat-icon class="action-list-icon">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>
|
<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>
|
||||||
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.Section ">
|
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.Section" class="mli">
|
||||||
<mat-icon matListIcon>folder</mat-icon>
|
<div class="action-list-item">
|
||||||
<span matLine style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: selectedTocEntry})" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
|
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
|
||||||
<mat-icon matListIcon>file_copy</mat-icon>
|
<div class="action-list-item">
|
||||||
<span matLine style="cursor: pointer;" (click)="cloneFieldSet(selectedTocEntry.form)">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
|
<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>
|
||||||
|
|
||||||
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
|
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet" class="mli">
|
||||||
<mat-icon matListIcon>delete</mat-icon>
|
<div class="action-list-item">
|
||||||
<span matLine style="cursor: pointer;" (click)="onRemoveEntry(selectedTocEntry)">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
|
<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>
|
</mat-list-item>
|
||||||
</ng-container>
|
</ng-container> -->
|
||||||
</mat-list>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
color: #212121;
|
color: #212121;
|
||||||
opacity: 0.81;
|
opacity: 0.81;
|
||||||
margin-top: 1.625rem;
|
// margin-top: 1.625rem;
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -71,11 +71,11 @@
|
||||||
transition-timing-function: ease-out;
|
transition-timing-function: ease-out;
|
||||||
transition-delay: 50ms;
|
transition-delay: 50ms;
|
||||||
box-shadow: 0px 1px 2px #bfbfbf;
|
box-shadow: 0px 1px 2px #bfbfbf;
|
||||||
background-color: #f7dd72;
|
background-color: #F7DD72;
|
||||||
}
|
}
|
||||||
#progress-container{
|
#progress-container{
|
||||||
box-shadow: 0px 1px 2px #bfbfbf;
|
box-shadow: 1px 1px 6px #00000029;;
|
||||||
border-radius: .3em;
|
// border-radius: .3em;
|
||||||
}
|
}
|
||||||
// .import-btn {
|
// .import-btn {
|
||||||
// background: #ffffff 0% 0% no-repeat padding-box;
|
// background: #ffffff 0% 0% no-repeat padding-box;
|
||||||
|
@ -87,68 +87,103 @@
|
||||||
// color: #000;
|
// color: #000;
|
||||||
// border: 1px solid #000;
|
// border: 1px solid #000;
|
||||||
// }
|
// }
|
||||||
.navigate-btn {
|
.navigate-btn {
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
background-color: #f7dd72;
|
background-color: #f7dd72;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
padding-right: 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 : #129D99;
|
||||||
$blue-color-light: #5cf7f2;
|
$blue-color-light: #5cf7f2;
|
||||||
|
|
||||||
.actions-list{
|
|
||||||
border: 1px solid $blue-color;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding-top: 1rem;
|
// #DEDEDE
|
||||||
padding-bottom: 1rem;
|
|
||||||
|
|
||||||
|
|
||||||
|
.stepper-title-label{
|
||||||
|
cursor: pointer;
|
||||||
|
transition-property: color, opacity;
|
||||||
|
transition-duration: 200ms;
|
||||||
|
transition-delay: 50ms;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-title-label-locked{
|
||||||
|
color: #DEDEDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#style-6::-webkit-scrollbar-track
|
.action-list-item{
|
||||||
{
|
display: flex;
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
align-items: center;
|
||||||
background-color: #F5F5F5;
|
cursor: pointer;
|
||||||
}
|
|
||||||
|
|
||||||
#style-6::-webkit-scrollbar
|
|
||||||
{
|
|
||||||
width: 6px;
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#style-6::-webkit-scrollbar-thumb
|
.action-list-icon{
|
||||||
{
|
font-size: 1.2em;
|
||||||
background-color: rgb(162, 163, 163);
|
padding-right: 1em;
|
||||||
background-image: -webkit-linear-gradient(45deg,
|
height: auto;
|
||||||
rgba(255, 255, 255, .2) 25%,
|
}
|
||||||
transparent 25%,
|
.action-list-text{
|
||||||
transparent 50%,
|
font-size: 0.9em;;
|
||||||
rgba(255, 255, 255, .2) 50%,
|
}
|
||||||
rgba(255, 255, 255, .2) 75%,
|
}
|
||||||
transparent 75%,
|
.action-list-label{
|
||||||
transparent)
|
color: #212121;
|
||||||
|
font-size: small;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.list-unstyled{
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// .mli{
|
||||||
#style-2::-webkit-scrollbar-track
|
// height: auto;
|
||||||
{
|
// }
|
||||||
-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;
|
|
||||||
}
|
|
|
@ -703,12 +703,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
//define entry type
|
//define entry type
|
||||||
switch (tce.childType) {
|
switch (tce.childType) {
|
||||||
case ToCEntryType.Page:
|
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();
|
const pageForm = page.buildForm();
|
||||||
// this.dataModel.pages.push(page);
|
// this.dataModel.pages.push(page);
|
||||||
|
|
||||||
const pagesArray = (this.form.get('pages') as FormArray);
|
|
||||||
pagesArray.push(pageForm);
|
pagesArray.push(pageForm);
|
||||||
|
|
||||||
this.refreshToCEntries();
|
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){
|
validateStep(step: CdkStep){
|
||||||
|
@ -1604,11 +1635,35 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
});
|
});
|
||||||
|
|
||||||
}else{
|
}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)) ;
|
invalidControls.push(...this._getErrors(control)) ;
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case 'fa':
|
case 'fa':
|
||||||
// const fa = (aControl as FormArray);
|
// const fa = (aControl as FormArray);
|
||||||
|
|
|
@ -5,8 +5,9 @@
|
||||||
|
|
||||||
<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">
|
<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">
|
||||||
<div class="col link-info"
|
<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)" >
|
<!-- <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}}
|
{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
|
||||||
</span> -->
|
</span> -->
|
||||||
|
@ -21,7 +22,7 @@
|
||||||
|
|
||||||
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
|
[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')}"
|
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
|
||||||
>
|
>
|
||||||
<!-- {{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} -->
|
<!-- {{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)"
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- When item is not selected then show only the pages (first level) -->
|
<!-- When item is not selected then show only the pages (first level) -->
|
||||||
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
|
<!-- <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"
|
<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)"
|
[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id || dragHoveringOver ||isDragging)"
|
||||||
class="cdk-link-list"
|
class="cdk-link-list"
|
||||||
[id]="parentLink.id"
|
[id]="parentLink.id"
|
||||||
|
@ -90,7 +92,7 @@
|
||||||
</ng-container> -->
|
</ng-container> -->
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
<!-- <button cdkDragHandle>drab</button> -->
|
<!-- <button cdkDragHandle>drab</button> -->
|
||||||
<div class="ml-3">
|
<div [ngClass]="{'ml-3': link.type != tocEntryType.Page }">
|
||||||
<app-dataset-profile-table-of-contents-internal-section
|
<app-dataset-profile-table-of-contents-internal-section
|
||||||
[links]="link.subEntries"
|
[links]="link.subEntries"
|
||||||
(itemClick)="itemClicked($event)"
|
(itemClick)="itemClicked($event)"
|
||||||
|
@ -120,7 +122,14 @@
|
||||||
<!-- <mat-icon>add</mat-icon> -->
|
<!-- <mat-icon>add</mat-icon> -->
|
||||||
<ng-container [ngSwitch]="link.type">
|
<ng-container [ngSwitch]="link.type">
|
||||||
<ng-container *ngSwitchCase="tocEntryType.Section">
|
<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>
|
||||||
<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
|
<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
|
||||||
Section
|
Section
|
||||||
|
@ -156,7 +165,14 @@
|
||||||
<!-- Give option to generate section -->
|
<!-- Give option to generate section -->
|
||||||
<button class="mat-button" style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
|
<button class="mat-button" style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
|
||||||
<!-- <mat-icon>add</mat-icon> -->
|
<!-- <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>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
@ -193,10 +209,21 @@
|
||||||
<!-- </ng-container> -->
|
<!-- </ng-container> -->
|
||||||
|
|
||||||
<!-- Only for the page -->
|
<!-- Only for the page -->
|
||||||
<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly">
|
<!-- style="margin-left: -0.5em;" -->
|
||||||
<button class="mat-button ml-3 mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
|
<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> -->
|
<!-- <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>
|
||||||
<!-- <button (click)="showDroplists()">show droplist</button>
|
<!-- <button (click)="showDroplists()">show droplist</button>
|
||||||
<button (click)="showStructs()">structs</button> -->
|
<button (click)="showStructs()">structs</button> -->
|
||||||
|
|
|
@ -71,10 +71,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.active{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-item-actions{
|
.table-item-actions{
|
||||||
// display: none;
|
// display: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -104,12 +100,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// .border-left-active{
|
.border-left-active{
|
||||||
// border-left: 1px solid #000;
|
border-left: 1px solid #000;
|
||||||
// }
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.side-bolder{
|
||||||
|
border-left: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.cdk-link-list {
|
.cdk-link-list {
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
// background: white;
|
// background: white;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -172,3 +174,19 @@ $yellow: #f7dd72;
|
||||||
min-width: 2em;
|
min-width: 2em;
|
||||||
text-align: center;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -2,7 +2,9 @@
|
||||||
<!-- <div class="docs-toc-heading">Contents</div> -->
|
<!-- <div class="docs-toc-heading">Contents</div> -->
|
||||||
<!-- <nav> -->
|
<!-- <nav> -->
|
||||||
<!-- <a [href]="_rootUrl + '#' + link.id" -->
|
<!-- <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 *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 *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
|
||||||
</span> -->
|
</span> -->
|
||||||
|
@ -19,6 +21,7 @@
|
||||||
[isDragging]="isDragging"
|
[isDragging]="isDragging"
|
||||||
[draggingItemId]="draggingItemId"
|
[draggingItemId]="draggingItemId"
|
||||||
[parentRootId]="ROOT_ID"
|
[parentRootId]="ROOT_ID"
|
||||||
|
style="padding-right: 1em;"
|
||||||
></app-dataset-profile-table-of-contents-internal-section>
|
></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">
|
<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">
|
||||||
|
|
|
@ -5,7 +5,9 @@
|
||||||
// border-left: solid 4px #0c7489;
|
// border-left: solid 4px #0c7489;
|
||||||
|
|
||||||
.scroll-container {
|
.scroll-container {
|
||||||
overflow-y: auto;
|
// overflow-y: auto;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: scroll;
|
||||||
// calc(100vh - 250px)
|
// calc(100vh - 250px)
|
||||||
// height: 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 {
|
.docs-toc-heading {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -68,3 +82,54 @@ span {
|
||||||
.docs-level-h5 {
|
.docs-level-h5 {
|
||||||
margin-left: 24px;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -50,6 +50,18 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
|
||||||
@Output() dataNeedsRefresh = new EventEmitter<void>();
|
@Output() dataNeedsRefresh = new EventEmitter<void>();
|
||||||
|
|
||||||
@Input() itemSelected: ToCEntry;
|
@Input() itemSelected: ToCEntry;
|
||||||
|
|
||||||
|
// @Input() set itemSelected(entry:ToCEntry){
|
||||||
|
// this._itemSelected = entry;
|
||||||
|
// };
|
||||||
|
// get itemSelected():ToCEntry{
|
||||||
|
// return this._itemSelected;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// private _itemSelected:ToCEntry;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Input() viewOnly: boolean;
|
@Input() viewOnly: boolean;
|
||||||
|
|
||||||
subscription: Subscription;
|
subscription: Subscription;
|
||||||
|
@ -73,6 +85,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if(this.dragulaService.find('TABLEDRAG')){
|
if(this.dragulaService.find('TABLEDRAG')){
|
||||||
this.dragulaService.destroy('TABLEDRAG');
|
this.dragulaService.destroy('TABLEDRAG');
|
||||||
}
|
}
|
||||||
|
|
|
@ -226,9 +226,24 @@
|
||||||
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Researchers" class="col-12">
|
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Researchers" class="col-12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<mat-form-field class="col-md-12">
|
<mat-form-field class="col-md-12">
|
||||||
|
<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
|
||||||
|
[configuration]="researchersAutoCompleteConfiguration">
|
||||||
|
</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')"
|
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
|
||||||
[configuration]="researchersAutoCompleteConfiguration">
|
[configuration]="researchersAutoCompleteConfiguration">
|
||||||
</app-multiple-auto-complete>
|
</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-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
@ -237,9 +252,24 @@
|
||||||
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Organizations" class="col-12">
|
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Organizations" class="col-12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<mat-form-field class="col-md-12">
|
<mat-form-field class="col-md-12">
|
||||||
|
<!-- <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')"
|
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
|
||||||
[configuration]="organisationsAutoCompleteConfiguration">
|
[configuration]="organisationsAutoCompleteConfiguration">
|
||||||
</app-multiple-auto-complete>
|
</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-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -297,9 +297,12 @@
|
||||||
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CREATE-FIRST-PAGE": "Create the first Section",
|
"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.",
|
"NOTHING-HERE-HINT": "Nothing here yet.",
|
||||||
"START-CREATING-PAGE-START": "Start by ",
|
"START-CREATING-PAGE-START": "Start by ",
|
||||||
"START-CREATING-PAGE-END": "creating the first Section."
|
"START-CREATING-PAGE-END": "creating the first section."
|
||||||
},
|
},
|
||||||
"PAGE": "Section"
|
"PAGE": "Section"
|
||||||
},
|
},
|
||||||
|
|
|
@ -297,9 +297,12 @@
|
||||||
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CREATE-FIRST-PAGE": "Create the first Section",
|
"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.",
|
"NOTHING-HERE-HINT": "Nothing here yet.",
|
||||||
"START-CREATING-PAGE-START": "Start by ",
|
"START-CREATING-PAGE-START": "Start by ",
|
||||||
"START-CREATING-PAGE-END": "creating the first Section."
|
"START-CREATING-PAGE-END": "creating the first section."
|
||||||
},
|
},
|
||||||
"PAGE": "Section"
|
"PAGE": "Section"
|
||||||
},
|
},
|
||||||
|
@ -473,7 +476,7 @@
|
||||||
"ADD-PAGE": "Add Page +",
|
"ADD-PAGE": "Add Page +",
|
||||||
"ADD-SECTION": "Add Section +",
|
"ADD-SECTION": "Add Section +",
|
||||||
"VALIDATE": "Validate",
|
"VALIDATE": "Validate",
|
||||||
"PREVIEW-AND-FINALIZE": "Preview and finalize",
|
"PREVIEW-AND-FINALIZE": "Preview & Finalize",
|
||||||
"FIELD": {
|
"FIELD": {
|
||||||
"MAKE-IT-REQUIRED": "Make input required",
|
"MAKE-IT-REQUIRED": "Make input required",
|
||||||
"ADD-VISIBILITY-RULE": "Add visibility rule",
|
"ADD-VISIBILITY-RULE": "Add visibility rule",
|
||||||
|
|
|
@ -297,9 +297,12 @@
|
||||||
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CREATE-FIRST-PAGE": "Create the first Section",
|
"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.",
|
"NOTHING-HERE-HINT": "Nothing here yet.",
|
||||||
"START-CREATING-PAGE-START": "Start by ",
|
"START-CREATING-PAGE-START": "Start by ",
|
||||||
"START-CREATING-PAGE-END": "creating the first Section."
|
"START-CREATING-PAGE-END": "creating the first section."
|
||||||
},
|
},
|
||||||
"PAGE": "Section"
|
"PAGE": "Section"
|
||||||
},
|
},
|
||||||
|
|
|
@ -297,9 +297,12 @@
|
||||||
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CREATE-FIRST-PAGE": "Create the first Section",
|
"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.",
|
"NOTHING-HERE-HINT": "Nothing here yet.",
|
||||||
"START-CREATING-PAGE-START": "Start by ",
|
"START-CREATING-PAGE-START": "Start by ",
|
||||||
"START-CREATING-PAGE-END": "creating the first Section."
|
"START-CREATING-PAGE-END": "creating the first section."
|
||||||
},
|
},
|
||||||
"PAGE": "Section"
|
"PAGE": "Section"
|
||||||
},
|
},
|
||||||
|
|
|
@ -297,9 +297,12 @@
|
||||||
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CREATE-FIRST-PAGE": "Create the first Section",
|
"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.",
|
"NOTHING-HERE-HINT": "Nothing here yet.",
|
||||||
"START-CREATING-PAGE-START": "Start by ",
|
"START-CREATING-PAGE-START": "Start by ",
|
||||||
"START-CREATING-PAGE-END": "creating the first Section."
|
"START-CREATING-PAGE-END": "creating the first section."
|
||||||
},
|
},
|
||||||
"PAGE": "Section"
|
"PAGE": "Section"
|
||||||
},
|
},
|
||||||
|
|
|
@ -297,9 +297,12 @@
|
||||||
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CREATE-FIRST-PAGE": "Create the first Section",
|
"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.",
|
"NOTHING-HERE-HINT": "Nothing here yet.",
|
||||||
"START-CREATING-PAGE-START": "Start by ",
|
"START-CREATING-PAGE-START": "Start by ",
|
||||||
"START-CREATING-PAGE-END": "creating the first Section."
|
"START-CREATING-PAGE-END": "creating the first section."
|
||||||
},
|
},
|
||||||
"PAGE": "Section"
|
"PAGE": "Section"
|
||||||
},
|
},
|
||||||
|
|
|
@ -297,9 +297,12 @@
|
||||||
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CREATE-FIRST-PAGE": "Create the first Section",
|
"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.",
|
"NOTHING-HERE-HINT": "Nothing here yet.",
|
||||||
"START-CREATING-PAGE-START": "Start by ",
|
"START-CREATING-PAGE-START": "Start by ",
|
||||||
"START-CREATING-PAGE-END": "creating the first Section."
|
"START-CREATING-PAGE-END": "creating the first section."
|
||||||
},
|
},
|
||||||
"PAGE": "Section"
|
"PAGE": "Section"
|
||||||
},
|
},
|
||||||
|
|
|
@ -297,9 +297,12 @@
|
||||||
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
"PAGE-DESCRIPTION-HINT": "Write a brief desciption of what the section is about.",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CREATE-FIRST-PAGE": "Create the first Section",
|
"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.",
|
"NOTHING-HERE-HINT": "Nothing here yet.",
|
||||||
"START-CREATING-PAGE-START": "Start by ",
|
"START-CREATING-PAGE-START": "Start by ",
|
||||||
"START-CREATING-PAGE-END": "creating the first Section."
|
"START-CREATING-PAGE-END": "creating the first section."
|
||||||
},
|
},
|
||||||
"PAGE": "Section"
|
"PAGE": "Section"
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue