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

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

@ -174,7 +174,9 @@ export class AppComponent implements OnInit, AfterViewInit {
ngOnDestroy() {
this.statusChangeSubscription.unsubscribe();
this.sideNavSubscription.unsubscribe();
if(this.sideNavSubscription){
this.sideNavSubscription.unsubscribe();
}
}
login() {

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

23
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')">
</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
type="button" class="col-auto"
type="button"
(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}}
<mat-icon
*ngIf="form.get('data').errors?.emptyArray && form.get('data').touched"
</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
class="text-danger"
matTooltip="At least one source must be provided."
>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 *ngFor="let singleForm of multiForm.controls; let i = index" class="row">

11
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')">
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
| translate}}</h5>
<div class="col-12">
<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
| 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-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 {
width: 100%;
}

11
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="col-12">
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-TITLE'
| translate}}</h5>
<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-TITLE'
| 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')">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-WORDLIST' | translate}}
</mat-checkbox>

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

@ -23,9 +23,8 @@ li.list-inline-item{
:host ::ng-deep .field-toggler
{
.mat-slide-toggle-content{
font-size: 0.8em;
color: #212121;
transform: translateY(3px);
font-size: 0.8em;
color: #212121;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
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 { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material';
import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model';
import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
@Component({
selector: 'app-dataset-profile-editor-field-component',
@ -55,6 +56,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
viewTypeEnum = ViewStyleType;
private subject$:Subject<DatasetDescriptionFieldEditorModel> = new Subject<DatasetDescriptionFieldEditorModel>();
private myCustomValidators = new EditorCustomValidators();
@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.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();
break;
@ -431,7 +433,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
this.form.get('data').setValidators(this._atLeastOneElementListValidator('autoCompleteSingleDataList'));
this.form.get('data').setValidators(this.myCustomValidators._atLeastOneElementListValidator('autoCompleteSingleDataList'));
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.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();
break;
@ -545,15 +547,15 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
}
private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
return (control: AbstractControl): ValidationErrors | null=>{
// private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
// return (control: AbstractControl): ValidationErrors | null=>{
const fa = control.get(arrayToCheck) as FormArray;
// const fa = control.get(arrayToCheck) as FormArray;
if(fa.length === 0){
return {emptyArray: true};
}
return null;
}
}
// if(fa.length === 0){
// return {emptyArray: true};
// }
// 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;
}
}
}

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

@ -2,110 +2,122 @@
<div class="main-content">
<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
<h3 *ngIf="isNew && isClone">
<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
{{form.get('label').value}}
</h3>
<h3 *ngIf="isNew && isNewVersion">
<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
{{form.get('label').value}}
</h3>
<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{
'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div>
<!-- Total steps: {{stepper.steps.length}} -->
<!-- Steps Navigation -->
<div class="row" style="padding: 2em;" *ngIf="steps">
<div class="row" style="padding: 2em; margin-bottom: 1em; background: #F5F5F5 0% 0% no-repeat padding-box;" >
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
<div id="progress" [ngStyle]="progressStyle"></div>
<div class="row h-100">
<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
<span (click)="stepper.selectedIndex=idx"
class="stepper-title-label"
[ngClass]="{'stepper-title-label-locked': !isStepUnlocked(idx),'stepper-title-label-completed':idx < stepper.selectedIndex} ">
<ng-container *ngIf="isStepCompleted(idx) else numberLabel">
<mat-icon style="font-size:0.7em; height: 0px;">done</mat-icon>
</ng-container>
<ng-template #numberLabel>
{{idx+1}}
</ng-template>
{{step.label}}
</span>
</div>
<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">
<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
{{form.get('label').value}}
</h3>
<h3 *ngIf="isNew && isNewVersion">
<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
{{form.get('label').value}}
</h3>
<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{
'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div>
</div>
<div class="col d-flex justify-content-end">
<button mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
<!-- <mat-icon>navigate_before</mat-icon> -->
{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
</button>
<button mat-button class="navigate-btn ml-2"
(click)="stepper.next();validateStep(stepper.selected);"
*ngIf="stepper.selectedIndex != (steps.length-1)"
[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex)}">
<mat-icon style="font-size: 1.66em;">navigate_next</mat-icon>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}
</button>
<ng-container *ngIf="steps.length-1 === stepper.selectedIndex">
<!-- <ng-container *ngIf="stepper.selectedIndex === (steps.length-1)"> -->
<ng-container *ngIf="!viewOnly">
<!-- <button mat-button class="navigate-btn ml-2"
(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
translate}}</button> -->
<!-- <button mat-button class="finalize-btn ml-2"
(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
translate}}</button> -->
</ng-container>
<!-- //TODO -->
<ng-container *ngIf="true">
<!-- <button mat-button class="navigate-btn ml-2"
(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
translate}}</button> -->
<!-- <button mat-button class="finalize-btn ml-2"
(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
translate}}</button> -->
<button mat-button class="finalize-btn ml-2"
[disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
translate}}</button>
</ng-container>
<!-- SAVE BUTTON WHEN FINALIZED-->
<ng-container *ngIf="false">
<ng-container *ngIf="showUpdateButton()">
<!-- Steps Navigation -->
<div class="col-12 d-flex" *ngIf="steps">
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
<div id="progress" [ngStyle]="progressStyle"></div>
<div class="row h-100">
<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
<span (click)="stepper.selectedIndex=idx"
class="stepper-title-label"
[ngClass]="{'stepper-title-label-locked': !isStepUnlocked(idx),'stepper-title-label-completed':idx < stepper.selectedIndex} ">
<ng-container *ngIf="isStepCompleted(idx) else numberLabel">
<mat-icon style="font-size:0.7em; height: 0px;">done</mat-icon>
</ng-container>
<ng-template #numberLabel>
{{idx+1}}
</ng-template>
{{step.label}}
</span>
</div>
</div>
</div>
<div class="col d-flex justify-content-end">
<button [@previous_btn] mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
<!-- <mat-icon>navigate_before</mat-icon> -->
{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
</button>
<button mat-button class="navigate-btn ml-3"
[@next_btn]
(click)="validateStep(stepper.selected);stepper.next();"
*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>
<ng-container *ngIf="steps.length-1 === stepper.selectedIndex">
<!-- <ng-container *ngIf="stepper.selectedIndex === (steps.length-1)"> -->
<ng-container *ngIf="!viewOnly">
<!-- <button mat-button class="navigate-btn ml-2"
(click)='checkFormValidation()'
[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
<button mat-button class="navigate-btn ml-2"
(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
translate}}</button> -->
<!-- <button mat-button class="finalize-btn ml-2"
(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
translate}}</button> -->
</ng-container>
<!-- //TODO -->
<ng-container *ngIf="true">
<!-- <button mat-button class="navigate-btn ml-2"
(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
translate}}</button> -->
<!-- <button mat-button class="finalize-btn ml-2"
(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
translate}}</button> -->
<button [@finalize_btn] mat-button class="finalize-btn ml-3"
[disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
translate}}</button>
</ng-container>
<!-- SAVE BUTTON WHEN FINALIZED-->
<ng-container *ngIf="false">
<ng-container *ngIf="showUpdateButton()">
<!-- <button mat-button class="navigate-btn ml-2"
(click)='checkFormValidation()'
[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
<button mat-button class="navigate-btn ml-2"
(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
translate}}</button>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</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">
<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
@ -381,7 +393,7 @@
</mat-step>
</mat-horizontal-stepper>
<ng-container *ngIf="true">
@ -428,12 +440,14 @@
</div>
</ng-container>
<!-- <div class="row">
<!--
<div class="row">
<button (click)="printForm()">
console form
</button>
</div> -->
<!-- {{form.value | json}} -->
<!-- <div class="row">
<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
:host ::ng-deep .mat-horizontal-content-container {
overflow: visible;
// padding: 0px;
}
:host ::ng-deep .mat-form-field-outline{
background-color: #ffffff4f;
@ -90,6 +91,7 @@
.navigate-btn {
border-radius: 30px;
background-color: #f7dd72;
border: 1px solid transparent;
padding-left: 2em;
padding-right: 2em;
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 { invalid } from '@angular/compiler/src/render3/view/util';
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');
@Component({
selector: 'app-dataset-profile-editor-component',
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 {
@ -68,6 +72,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
errorMessages: string[] = [];
tocEntryEnumValues = ToCEntryType;
customEditorValidators = new EditorCustomValidators();
// sectionIdPreviewed:string = null;
// currentSubForm:FormGroup = null;
// currentSectionIndex: number = null;
@ -180,6 +187,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} else {
this.dataModel = new DatasetProfileEditorModel();
this.form = this.dataModel.buildForm();
this.form.setValidators([this.customEditorValidators._atLeastOneElementListValidator('pages'), this.customEditorValidators._atLeastOneElementListValidator('sections')])
if (this.dataModel.status === DatasetProfileEnum.FINALIZED) {
this.form.disable();
this.viewOnly = true;
@ -199,6 +207,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
prepareForm() {
this.visibilityRulesService.buildVisibilityRules([],this.form);
this.form.setValidators([this.customEditorValidators._atLeastOneElementListValidator('pages'), this.customEditorValidators._atLeastOneElementListValidator('pages')]);
this.form.valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(change => {
@ -540,7 +549,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
if(this.selectedTocEntry){
this.selectedTocEntry = this._findTocEntryById(this.selectedTocEntry.id, this.toCEntries);
}
this.updateOrdinals(this.toCEntries);
// this.updateOrdinals(this.toCEntries);
// this._updateNumbering(this.toCEntries);
return this.toCEntries;
}
@ -573,6 +583,18 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// if(!aValue || !bValue) return 0;
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[];
@ -623,7 +645,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
pageToAdd.subEntries.push(item);
});
this._sortToCentries(result);
this._sortToCentries(result);//ordeby ordinal
this._updateNumbering(result, '');//update nubering if needed
return result;
}
@ -798,52 +821,52 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
}
private customFieldValidator(): ValidatorFn{
return (control):ValidationErrors | null=>{
DatasetProfileFieldViewStyle
switch(control.get('viewStyle').get('renderStyle').value){
// private customFieldValidator(): ValidatorFn{
// return (control):ValidationErrors | null=>{
// DatasetProfileFieldViewStyle
// switch(control.get('viewStyle').get('renderStyle').value){
case DatasetProfileFieldViewStyle.TextArea:
return null;
case DatasetProfileFieldViewStyle.BooleanDecision:
return null;
case DatasetProfileFieldViewStyle.ComboBox:
return null;
case DatasetProfileFieldViewStyle.CheckBox:
return null;
case DatasetProfileFieldViewStyle.FreeText:
return null;
case DatasetProfileFieldViewStyle.RadioBox:
return null;
case DatasetProfileFieldViewStyle.DatePicker:
return null;
case DatasetProfileFieldViewStyle.InternalDmpEntities:
return null;
case DatasetProfileFieldViewStyle.ExternalDatasets:
return null;
case DatasetProfileFieldViewStyle.DataRepositories:
return null;
case DatasetProfileFieldViewStyle.Registries:
return null;
case DatasetProfileFieldViewStyle.Services:
return null;
case DatasetProfileFieldViewStyle.Tags:
return null;
case DatasetProfileFieldViewStyle.Researchers:
return null;
case DatasetProfileFieldViewStyle.Organizations:
return null;
case DatasetProfileFieldViewStyle.DatasetIdentifier:
return null;
case DatasetProfileFieldViewStyle.Currency:
return null;
case DatasetProfileFieldViewStyle.Validation:
return null;
default:
return {inputTypeNotValid: true};
}
}
}
// case DatasetProfileFieldViewStyle.TextArea:
// return null;
// case DatasetProfileFieldViewStyle.BooleanDecision:
// return null;
// case DatasetProfileFieldViewStyle.ComboBox:
// return null;
// case DatasetProfileFieldViewStyle.CheckBox:
// return null;
// case DatasetProfileFieldViewStyle.FreeText:
// return null;
// case DatasetProfileFieldViewStyle.RadioBox:
// return null;
// case DatasetProfileFieldViewStyle.DatePicker:
// return null;
// case DatasetProfileFieldViewStyle.InternalDmpEntities:
// return null;
// case DatasetProfileFieldViewStyle.ExternalDatasets:
// return null;
// case DatasetProfileFieldViewStyle.DataRepositories:
// return null;
// case DatasetProfileFieldViewStyle.Registries:
// return null;
// case DatasetProfileFieldViewStyle.Services:
// return null;
// case DatasetProfileFieldViewStyle.Tags:
// return null;
// case DatasetProfileFieldViewStyle.Researchers:
// return null;
// case DatasetProfileFieldViewStyle.Organizations:
// return null;
// case DatasetProfileFieldViewStyle.DatasetIdentifier:
// return null;
// case DatasetProfileFieldViewStyle.Currency:
// return null;
// case DatasetProfileFieldViewStyle.Validation:
// return null;
// default:
// return {inputTypeNotValid: true};
// }
// }
// }
onRemoveEntry(tce: ToCEntry){
@ -1121,7 +1144,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
printForm(){
console.log(this.form.value);
// console.log(this.form.value);
console.log(this.form);
}
get barPercentage(){
@ -1338,12 +1362,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
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
}else{
this.previewForm = null;
}
this.form.markAsUntouched();
}
@ -1430,7 +1454,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
validateStep(step: CdkStep){
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);
const result = this._getErrors(this.form);
const result = this._getErrors(form);
// console.log('result', result);
@ -1478,7 +1502,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
if(result){
this.form.markAllAsTouched();
form.markAllAsTouched();
const errmess:string[] = [];
let indexes:number[] = [];
@ -1528,13 +1552,13 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// console.log(result);
if(this.stepper.selectedIndex != 0){
if(!(this.form.get('pages') as FormArray).length){
errmess.push(
'There has to be at least one section in the template.'
);
}
}
// if(this.stepper.selectedIndex != 0){
// if(!(this.form.get('pages') as FormArray).length){
// errmess.push(
// 'There has to be at least one section in the template.'
// );
// }
// }
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>
</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-option [value]="null">{{'DATASET-PROFILE-STATUS.NONE' | translate}}</mat-option>
<mat-option [value]="0">{{'DATASET-PROFILE-STATUS.DRAFT' | translate}}</mat-option>
@ -14,7 +14,7 @@
</div>
<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"
[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
<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;
}
// ::ng-deep .status-form .mat-form-field-wrapper {
// background-color: white !important;
// padding-bottom: 0 !important;
// }
:host ::ng-deep .status-form-field .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
// ::ng-deep .search-form .mat-form-field-wrapper {
// background-color: white !important;
// padding-bottom: 0 !important;
// }
:host ::ng-deep .search-form-field .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
// padding: 0.3rem 0rem 0.6rem 0rem !important;
// }
:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
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)=>{
console.log('drag fired');
this.isDragging = true;
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-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": {
"NONE": "Keine",
"BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data",
"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": {
"NONE": "None",
"BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data",
"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": {
"NONE": "Ninguno",
"BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data",
"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": {
"NONE": "Κανένα",
"BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data",
"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": {
"NONE": "Nenhum",
"BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data",
"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": {
"NONE": "Žiadny",
"BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data",
"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": {
"NONE": "Nijedan",
"BOOLEAN-DECISION": {

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

@ -437,6 +437,11 @@
"FIELD-VALIDATOR-TITLE": "Validator Data",
"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": {
"NONE": "Hiç",
"BOOLEAN-DECISION": {

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

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