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

Dataset Profile Editor. UI fixes. Stepper buttons animations. Alignments. RadioBox, Other, Select have emptyList Vaditator(custom). Numbering fix in table of contents when drag and drop.

This commit is contained in:
Kristian Ntavidi 2021-03-08 11:24:30 +02:00
parent 938e3b9554
commit 51228df7d5
25 changed files with 371 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/app.component.ts
View File

@ -174,8 +174,10 @@ export class AppComponent implements OnInit, AfterViewInit {
ngOnDestroy() { ngOnDestroy() {
this.statusChangeSubscription.unsubscribe(); this.statusChangeSubscription.unsubscribe();
if(this.sideNavSubscription){
this.sideNavSubscription.unsubscribe(); this.sideNavSubscription.unsubscribe();
} }
}
login() { login() {
//redirect to login page //redirect to login page

47
dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts Normal file
View File

@ -0,0 +1,47 @@
import { animate, keyframes, state, style, transition, trigger } from "@angular/animations";
export const STEPPER_ANIMATIONS = [
trigger('previous_btn',[
transition(':enter',[
style({'transform': 'translateX(100%)', 'z-index':'9999', 'opacity':0.4}),
animate('600ms ease-out', style({
'transform': 'translateX(0)',
'opacity':1
}))
]),
transition(':leave',[
style({
'transform': 'translateX(0)',
'opacity':'1',
'z-index':'9999'
}),
animate('800ms ease-out', keyframes([
style({'transform': 'translateX(120%)', offset:0.8}),
style({'opacity': '0.2', offset:0.96})
]))
])
]),
trigger('next_btn', [
transition(':leave',[
style({opacity:1, position:'absolute', 'z-index':'9999'}),
animate('700ms ease-out', keyframes( [
style({ transform:'translateX(-100%)', offset:0.6}),
style({ opacity:'0.2', offset:0.87})
]))
]),
transition(':enter',[
style({opacity:0.3, 'z-index':'9999', transform:'translateX(-100%)'}),
animate('600ms ease-out', style({ opacity:'1', transform:'translateX(0)' }))
])
]),
trigger('finalize_btn',[
transition(':enter',[
style({opacity:0.3}),
animate('400ms ease-in', style({opacity:1}))
]),
transition(':leave',[
style({opacity:1, position:'absolute'}),
animate('600ms ease-in', style({opacity:0.3}))
])
])
];

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

@ -69,8 +69,9 @@
<mat-form-field appearance="none" class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)"> <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 field-title" appearance="none"> <!-- [appearance]="titleControl.focused? 'legacy':'none'" floatLabel="never" -->
<input matInput type="text" placeholder="Title" <mat-form-field class="col field-title" [appearance]="'none'">
<input matInput type="text" placeholder="Title" #titleControl="matInput"
[formControl]="this.form.get('title')"> [formControl]="this.form.get('title')">
</mat-form-field> </mat-form-field>
</div> </div>

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

@ -11,18 +11,29 @@
[formControl]="form.get('data').get('label')"> [formControl]="form.get('data').get('label')">
</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 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE-TITLE' | translate}}</h6>
<div class="col-12 d-flex align-items-center" style="margin-bottom: 1em;">
<button mat-raised-button <button mat-raised-button
type="button" class="col-auto" type="button"
(click)="addSource()" (click)="addSource()"
[ngClass]="{'text-danger':form.get('data').errors?.emptyArray && form.touched}" style="margin-right: 2em;"
> >
<!-- [ngClass]="{'text-danger':form.get('data').errors?.emptyArray && form.touched}" -->
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-ADD_SOURCE' | translate}} {{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-ADD_SOURCE' | translate}}
</button>
<!-- *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched" -->
<div class="d-flex" *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
<mat-icon <mat-icon
*ngIf="form.get('data').errors?.emptyArray && form.get('data').touched" class="text-danger"
matTooltip="At least one source must be provided." matTooltip="At least one source must be provided."
>warning_amber</mat-icon> >warning_amber</mat-icon>
</button> <small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-OTHER-SOURCES-REQUIRED'| translate}}</small>
</div>
</div>
</div> </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">

9
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html
View File

@ -1,7 +1,12 @@
<div class="row" *ngIf="form.get('data')"> <div class="row" *ngIf="form.get('data')">
<div class="col-12">
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE' <h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
| translate}}</h5> | translate}}</h5>
<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED'| translate}}</small>
</ng-container>
</div>
<!-- <mat-form-field class="col-12"> <!-- <mat-form-field class="col-12">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-PLACEHOLDER' | translate}}</mat-label> <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-PLACEHOLDER' | translate}}</mat-label>

1
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss
View File

@ -1,3 +1,4 @@
.full-width { .full-width {
width: 100%; width: 100%;
} }

9
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html
View File

@ -1,7 +1,14 @@
<div class="row" *ngIf="form.get('data')"> <div class="row" *ngIf="form.get('data')">
<div class="col-12">
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-TITLE' <h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-TITLE'
| translate}}</h5> | translate}}</h5>
<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' |translate}}</small>
</ng-container>
</div>
<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiList')"> <mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiList')">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-WORDLIST' | translate}} {{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-WORDLIST' | translate}}
</mat-checkbox> </mat-checkbox>

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

@ -25,7 +25,6 @@ li.list-inline-item{
.mat-slide-toggle-content{ .mat-slide-toggle-content{
font-size: 0.8em; font-size: 0.8em;
color: #212121; color: #212121;
transform: translateY(3px);
} }
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color:#129D99 ; background-color:#129D99 ;

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

@ -36,6 +36,7 @@ import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profil
import { Guid } from '@common/types/guid'; import { Guid } from '@common/types/guid';
import { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material'; import { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material';
import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model'; import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model';
import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
@Component({ @Component({
selector: 'app-dataset-profile-editor-field-component', selector: 'app-dataset-profile-editor-field-component',
@ -55,6 +56,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
viewTypeEnum = ViewStyleType; viewTypeEnum = ViewStyleType;
private subject$:Subject<DatasetDescriptionFieldEditorModel> = new Subject<DatasetDescriptionFieldEditorModel>(); private subject$:Subject<DatasetDescriptionFieldEditorModel> = new Subject<DatasetDescriptionFieldEditorModel>();
private myCustomValidators = new EditorCustomValidators();
@Input() expandView: boolean = true; @Input() expandView: boolean = true;
@ -423,7 +425,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
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').setValidators(this.myCustomValidators._atLeastOneElementListValidator('options'));
this.form.get('data').updateValueAndValidity(); this.form.get('data').updateValueAndValidity();
break; break;
@ -431,7 +433,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
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').setValidators(this.myCustomValidators._atLeastOneElementListValidator('autoCompleteSingleDataList'));
this.form.get('data').updateValueAndValidity(); this.form.get('data').updateValueAndValidity();
@ -448,7 +450,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
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').setValidators(this.myCustomValidators._atLeastOneElementListValidator('options'));
this.form.get('data').updateValueAndValidity(); this.form.get('data').updateValueAndValidity();
break; break;
@ -545,15 +547,15 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
} }
private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{ // private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
return (control: AbstractControl): ValidationErrors | null=>{ // return (control: AbstractControl): ValidationErrors | null=>{
const fa = control.get(arrayToCheck) as FormArray; // const fa = control.get(arrayToCheck) as FormArray;
if(fa.length === 0){ // if(fa.length === 0){
return {emptyArray: true}; // return {emptyArray: true};
} // }
return null; // return null;
} // }
} // }
} }

19
dmp-frontend/src/app/ui/admin/dataset-profile/editor/custom-validators/editor-custom-validators.ts Normal file
View File

@ -0,0 +1,19 @@
import { Inject, Injectable } from "@angular/core";
import { AbstractControl, FormArray, ValidationErrors, ValidatorFn } from "@angular/forms";
export class EditorCustomValidators{
public _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
return (control: AbstractControl): ValidationErrors | null=>{
const fa = control.get(arrayToCheck) as FormArray;
if(fa.length === 0){
return {emptyArray: true};
}
return null;
}
}
}

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

@ -2,6 +2,16 @@
<div class="main-content"> <div class="main-content">
<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'> <div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
<!-- Total steps: {{stepper.steps.length}} -->
<div class="row" style="padding: 2em; margin-bottom: 1em; background: #F5F5F5 0% 0% no-repeat padding-box;" >
<div class="col-12" style="margin-bottom: 2em;">
<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3> <h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
<h3 *ngIf="isNew && isClone"> <h3 *ngIf="isNew && isClone">
<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span> <span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
@ -18,14 +28,11 @@
<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{ <button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{
'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button> 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div> </div>
</div>
<!-- Total steps: {{stepper.steps.length}} -->
<!-- Steps Navigation --> <!-- Steps Navigation -->
<div class="row" style="padding: 2em;" *ngIf="steps"> <div class="col-12 d-flex" *ngIf="steps">
<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 h-100"> <div class="row h-100">
@ -46,12 +53,13 @@
</div> </div>
<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 [@previous_btn] mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
<!-- <mat-icon>navigate_before</mat-icon> --> <!-- <mat-icon>navigate_before</mat-icon> -->
{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}} {{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
</button> </button>
<button mat-button class="navigate-btn ml-2" <button mat-button class="navigate-btn ml-3"
(click)="stepper.next();validateStep(stepper.selected);" [@next_btn]
(click)="validateStep(stepper.selected);stepper.next();"
*ngIf="stepper.selectedIndex != (steps.length-1)" *ngIf="stepper.selectedIndex != (steps.length-1)"
[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex)}"> [ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex)}">
@ -80,7 +88,7 @@
<!-- <button mat-button class="finalize-btn ml-2" <!-- <button mat-button class="finalize-btn ml-2"
(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' | (click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
translate}}</button> --> translate}}</button> -->
<button mat-button class="finalize-btn ml-2" <button [@finalize_btn] mat-button class="finalize-btn ml-3"
[disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' | [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
translate}}</button> translate}}</button>
@ -101,11 +109,15 @@
</ng-container> </ng-container>
</div>
</div> </div>
</div> </div>
<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onMatStepperSelectionChange($event)">
<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onMatStepperSelectionChange($event)" style="padding-left: 8px; padding-right: 15px;">
<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate" [stepControl]="basicInfo"> <mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate" [stepControl]="basicInfo">
<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}} <!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
@ -428,12 +440,14 @@
</div> </div>
</ng-container> </ng-container>
<!--
<!-- <div class="row"> <div class="row">
<button (click)="printForm()"> <button (click)="printForm()">
console form console form
</button> </button>
</div> --> </div> -->
<!-- {{form.value | json}} -->
<!-- <div class="row"> <!-- <div class="row">
<button (click)="printMyErrors()"> <button (click)="printMyErrors()">

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

@ -52,6 +52,7 @@
//TO CHECK //TO CHECK
:host ::ng-deep .mat-horizontal-content-container { :host ::ng-deep .mat-horizontal-content-container {
overflow: visible; overflow: visible;
// padding: 0px;
} }
:host ::ng-deep .mat-form-field-outline{ :host ::ng-deep .mat-form-field-outline{
background-color: #ffffff4f; background-color: #ffffff4f;
@ -90,6 +91,7 @@
.navigate-btn { .navigate-btn {
border-radius: 30px; border-radius: 30px;
background-color: #f7dd72; background-color: #f7dd72;
border: 1px solid transparent;
padding-left: 2em; padding-left: 2em;
padding-right: 2em; padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029; box-shadow: 0px 3px 6px #1E202029;

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

@ -41,12 +41,16 @@ import { Rule } from '@app/core/model/dataset-profile-definition/rule';
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 { invalid } from '@angular/compiler/src/render3/view/util'; import { invalid } from '@angular/compiler/src/render3/view/util';
import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice'; import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
import { EditorCustomValidators } from './custom-validators/editor-custom-validators';
import { CustomErrorValidator } from '@common/forms/validation/custom-validator';
import { STEPPER_ANIMATIONS } from './animations/animations';
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json'); const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
@Component({ @Component({
selector: 'app-dataset-profile-editor-component', selector: 'app-dataset-profile-editor-component',
templateUrl: './dataset-profile-editor.component.html', templateUrl: './dataset-profile-editor.component.html',
styleUrls: ['./dataset-profile-editor.component.scss'] styleUrls: ['./dataset-profile-editor.component.scss'],
animations:[...STEPPER_ANIMATIONS]
}) })
export class DatasetProfileEditorComponent extends BaseComponent implements OnInit { export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
@ -68,6 +72,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
errorMessages: string[] = []; errorMessages: string[] = [];
tocEntryEnumValues = ToCEntryType; tocEntryEnumValues = ToCEntryType;
customEditorValidators = new EditorCustomValidators();
// sectionIdPreviewed:string = null; // sectionIdPreviewed:string = null;
// currentSubForm:FormGroup = null; // currentSubForm:FormGroup = null;
// currentSectionIndex: number = null; // currentSectionIndex: number = null;
@ -180,6 +187,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} else { } else {
this.dataModel = new DatasetProfileEditorModel(); this.dataModel = new DatasetProfileEditorModel();
this.form = this.dataModel.buildForm(); this.form = this.dataModel.buildForm();
this.form.setValidators([this.customEditorValidators._atLeastOneElementListValidator('pages'), this.customEditorValidators._atLeastOneElementListValidator('sections')])
if (this.dataModel.status === DatasetProfileEnum.FINALIZED) { if (this.dataModel.status === DatasetProfileEnum.FINALIZED) {
this.form.disable(); this.form.disable();
this.viewOnly = true; this.viewOnly = true;
@ -199,6 +207,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
prepareForm() { prepareForm() {
this.visibilityRulesService.buildVisibilityRules([],this.form); this.visibilityRulesService.buildVisibilityRules([],this.form);
this.form.setValidators([this.customEditorValidators._atLeastOneElementListValidator('pages'), this.customEditorValidators._atLeastOneElementListValidator('pages')]);
this.form.valueChanges this.form.valueChanges
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(change => { .subscribe(change => {
@ -540,7 +549,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
if(this.selectedTocEntry){ if(this.selectedTocEntry){
this.selectedTocEntry = this._findTocEntryById(this.selectedTocEntry.id, this.toCEntries); this.selectedTocEntry = this._findTocEntryById(this.selectedTocEntry.id, this.toCEntries);
} }
this.updateOrdinals(this.toCEntries); // this.updateOrdinals(this.toCEntries);
// this._updateNumbering(this.toCEntries);
return this.toCEntries; return this.toCEntries;
} }
@ -573,6 +583,18 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// if(!aValue || !bValue) return 0; // if(!aValue || !bValue) return 0;
return aValue - bValue; return aValue - bValue;
} }
private _updateNumbering(entries:ToCEntry[], parentNumbering:string){
if(!entries || !entries.length) return;
let prefix ='';
if(parentNumbering.length){
prefix = parentNumbering + '.';
}
entries.forEach((entry,index)=>{
const numbering = prefix + (index+1);
entry.numbering = numbering;
this._updateNumbering(entry.subEntries, numbering);
})
}
toCEntries:ToCEntry[]; toCEntries:ToCEntry[];
@ -623,7 +645,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
pageToAdd.subEntries.push(item); pageToAdd.subEntries.push(item);
}); });
this._sortToCentries(result); this._sortToCentries(result);//ordeby ordinal
this._updateNumbering(result, '');//update nubering if needed
return result; return result;
} }
@ -798,52 +821,52 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} }
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};
} // }
} // }
} // }
onRemoveEntry(tce: ToCEntry){ onRemoveEntry(tce: ToCEntry){
@ -1121,7 +1144,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
printForm(){ printForm(){
console.log(this.form.value); // console.log(this.form.value);
console.log(this.form);
} }
get barPercentage(){ get barPercentage(){
@ -1338,12 +1362,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
onMatStepperSelectionChange(event: StepperSelectionEvent){ onMatStepperSelectionChange(event: StepperSelectionEvent){
if(event.selectedIndex === 2){//preview selected if(event.selectedIndex === (this.steps.length -1)){//preview selected
this.generatePreviewForm();//TODO LAZY LOADING IN THE TEMPLATE this.generatePreviewForm();//TODO LAZY LOADING IN THE TEMPLATE
}else{ }else{
this.previewForm = null; this.previewForm = null;
} }
this.form.markAsUntouched();
} }
@ -1430,7 +1454,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
validateStep(step: CdkStep){ validateStep(step: CdkStep){
if(step.hasError){ if(step.hasError){
this.printMyErrors(); this.printMyErrors(this.form);
} }
} }
@ -1468,9 +1492,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} }
printMyErrors(){ printMyErrors(form: AbstractControl){
// this._printToCentriesErrrors(this.toCEntries); // this._printToCentriesErrrors(this.toCEntries);
const result = this._getErrors(this.form); const result = this._getErrors(form);
// console.log('result', result); // console.log('result', result);
@ -1478,7 +1502,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
if(result){ if(result){
this.form.markAllAsTouched(); form.markAllAsTouched();
const errmess:string[] = []; const errmess:string[] = [];
let indexes:number[] = []; let indexes:number[] = [];
@ -1528,13 +1552,13 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// console.log(result); // console.log(result);
if(this.stepper.selectedIndex != 0){ // if(this.stepper.selectedIndex != 0){
if(!(this.form.get('pages') as FormArray).length){ // if(!(this.form.get('pages') as FormArray).length){
errmess.push( // errmess.push(
'There has to be at least one section in the template.' // 'There has to be at least one section in the template.'
); // );
} // }
} // }
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, { const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {

4
dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html
View File

@ -4,7 +4,7 @@
<span>{{'CRITERIA.USERS.SHOW' | translate}}:</span> <span>{{'CRITERIA.USERS.SHOW' | translate}}:</span>
</div> </div>
<mat-form-field class="status-form"> <mat-form-field class="status-form-field">
<mat-select [(ngModel)]="criteria.status" (ngModelChange)="controlModified()" placeholder=" {{'CRITERIA.DATASET-PROFILE.STATUS' | translate}}"> <mat-select [(ngModel)]="criteria.status" (ngModelChange)="controlModified()" placeholder=" {{'CRITERIA.DATASET-PROFILE.STATUS' | translate}}">
<mat-option [value]="null">{{'DATASET-PROFILE-STATUS.NONE' | translate}}</mat-option> <mat-option [value]="null">{{'DATASET-PROFILE-STATUS.NONE' | translate}}</mat-option>
<mat-option [value]="0">{{'DATASET-PROFILE-STATUS.DRAFT' | translate}}</mat-option> <mat-option [value]="0">{{'DATASET-PROFILE-STATUS.DRAFT' | translate}}</mat-option>
@ -14,7 +14,7 @@
</div> </div>
<div class="col-auto ml-lg-auto"> <div class="col-auto ml-lg-auto">
<mat-form-field class="status-form"> <mat-form-field class="search-form-field">
<input matInput placeholder=" {{'CRITERIA.DATASET-PROFILE.LIKE'| translate}}" name="datasetProfileLike" <input matInput placeholder=" {{'CRITERIA.DATASET-PROFILE.LIKE'| translate}}" name="datasetProfileLike"
[(ngModel)]="criteria.like" (ngModelChange)="controlModified()"> [(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
<mat-icon matPrefix>search</mat-icon> <mat-icon matPrefix>search</mat-icon>

22
dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss
View File

@ -2,16 +2,16 @@
display: inline-block !important; display: inline-block !important;
} }
// ::ng-deep .status-form .mat-form-field-wrapper { :host ::ng-deep .status-form-field .mat-form-field-wrapper {
// background-color: white !important; background-color: white !important;
// padding-bottom: 0 !important; padding-bottom: 0 !important;
// } }
// ::ng-deep .search-form .mat-form-field-wrapper { :host ::ng-deep .search-form-field .mat-form-field-wrapper {
// background-color: white !important; background-color: white !important;
// padding-bottom: 0 !important; padding-bottom: 0 !important;
// } }
// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { :host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
// padding: 0.3rem 0rem 0.6rem 0rem !important; padding: 0.3rem 0rem 0.6rem 0rem !important;
// } }

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

@ -431,6 +431,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
drake.on('drag',(el,source)=>{ drake.on('drag',(el,source)=>{
console.log('drag fired');
this.isDragging = true; this.isDragging = true;
this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, ''); this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, '');
}); });

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data", "FIELD-VALIDATOR-TITLE": "Validator Data",
"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder" "FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
}, },
"ERROR-MESSAGES":{
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
},
"DEFAULT-VALUES": { "DEFAULT-VALUES": {
"NONE": "Keine", "NONE": "Keine",
"BOOLEAN-DECISION": { "BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data", "FIELD-VALIDATOR-TITLE": "Validator Data",
"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder" "FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
}, },
"ERROR-MESSAGES":{
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
},
"DEFAULT-VALUES": { "DEFAULT-VALUES": {
"NONE": "None", "NONE": "None",
"BOOLEAN-DECISION": { "BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data", "FIELD-VALIDATOR-TITLE": "Validator Data",
"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder" "FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
}, },
"ERROR-MESSAGES":{
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
},
"DEFAULT-VALUES": { "DEFAULT-VALUES": {
"NONE": "Ninguno", "NONE": "Ninguno",
"BOOLEAN-DECISION": { "BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data", "FIELD-VALIDATOR-TITLE": "Validator Data",
"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder" "FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
}, },
"ERROR-MESSAGES":{
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
},
"DEFAULT-VALUES": { "DEFAULT-VALUES": {
"NONE": "Κανένα", "NONE": "Κανένα",
"BOOLEAN-DECISION": { "BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data", "FIELD-VALIDATOR-TITLE": "Validator Data",
"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder" "FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
}, },
"ERROR-MESSAGES":{
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
},
"DEFAULT-VALUES": { "DEFAULT-VALUES": {
"NONE": "Nenhum", "NONE": "Nenhum",
"BOOLEAN-DECISION": { "BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data", "FIELD-VALIDATOR-TITLE": "Validator Data",
"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder" "FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
}, },
"ERROR-MESSAGES":{
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
},
"DEFAULT-VALUES": { "DEFAULT-VALUES": {
"NONE": "Žiadny", "NONE": "Žiadny",
"BOOLEAN-DECISION": { "BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data", "FIELD-VALIDATOR-TITLE": "Validator Data",
"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder" "FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
}, },
"ERROR-MESSAGES":{
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
},
"DEFAULT-VALUES": { "DEFAULT-VALUES": {
"NONE": "Nijedan", "NONE": "Nijedan",
"BOOLEAN-DECISION": { "BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data", "FIELD-VALIDATOR-TITLE": "Validator Data",
"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder" "FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
}, },
"ERROR-MESSAGES":{
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
},
"DEFAULT-VALUES": { "DEFAULT-VALUES": {
"NONE": "Hiç", "NONE": "Hiç",
"BOOLEAN-DECISION": { "BOOLEAN-DECISION": {

5
dmp-frontend/src/styles.scss
View File

@ -247,3 +247,8 @@
.text-primary-blue{ .text-primary-blue{
color: #129D99; color: #129D99;
} }
.translateY-3{
transform:translateY(3px);
}