Dataset Profile Editor. Patch visibility rules for select multiList, Validator and DatasetIdentifier

This commit is contained in:
Kristian Ntavidi 2021-04-05 11:37:00 +03:00
parent dc39cf9fdd
commit 9cab64b65e
5 changed files with 114 additions and 139 deletions

View File

@ -251,11 +251,11 @@
<!-- PREVIEW --> <!-- PREVIEW -->
<ng-container *ngIf="false"> <!-- <ng-container *ngIf="false">
<div class="row"> <div class="row">
<div class="col-12" *ngIf="expandView && previewForm"> <div class="col-12" *ngIf="expandView && previewForm">
<span style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span> <span style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
</div> </div> -->
<!-- <div class="col-12"> <!-- <div class="col-12">
<mat-radio-group [(ngModel)]="showPreview"> <mat-radio-group [(ngModel)]="showPreview">
<mat-radio-button [value]="true">Yes</mat-radio-button> <mat-radio-button [value]="true">Yes</mat-radio-button>
@ -263,7 +263,7 @@
</mat-radio-group> </mat-radio-group>
</div> --> </div> -->
<!--
<div class="col-12" *ngIf="showPreview"> <div class="col-12" *ngIf="showPreview">
<ng-container *ngIf="viewType === viewTypeEnum.Other else regularField"> <ng-container *ngIf="viewType === viewTypeEnum.Other else regularField">
<app-form-field [form]="previewForm" *ngIf="previewForm" [autocompleteOptions]="form.get('data').get('autoCompleteSingleDataList').getRawValue()"> <app-form-field [form]="previewForm" *ngIf="previewForm" [autocompleteOptions]="form.get('data').get('autoCompleteSingleDataList').getRawValue()">
@ -283,7 +283,7 @@
</em> </em>
</div> </div>
</div> </div>
</ng-container> </ng-container> -->
<!-- {{form.touched|json}} --> <!-- {{form.touched|json}} -->
<!-- {{form.value |json}} --> <!-- {{form.value |json}} -->

View File

@ -58,9 +58,8 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
viewType: ViewStyleType; viewType: ViewStyleType;
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;
@ -85,9 +84,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
ngOnInit() { ngOnInit() {
this.subject$.pipe(takeUntil(this._destroyed)).pipe(debounceTime(600)).subscribe(model=>{ // this.subject$.pipe(takeUntil(this._destroyed)).pipe(debounceTime(600)).subscribe(model=>{
this.previewForm = model.buildForm(); // this.previewForm = model.buildForm();
}); // });
@ -168,7 +167,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
} }
this.showPreview = true; // this.showPreview = true;
@ -297,88 +296,88 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
private _formChangesSubscription:Subscription; private _formChangesSubscription:Subscription;
private _showPreview: boolean = false;; private _showPreview: boolean = false;;
get showPreview(): boolean{ // get showPreview(): boolean{
return this._showPreview; // return this._showPreview;
} // }
set showPreview(value:boolean){ // set showPreview(value:boolean){
if(value == false){//hide preview // if(value == false){//hide preview
//close subsciption // //close subsciption
if(this._formChangesSubscription){ // if(this._formChangesSubscription){
this._formChangesSubscription.unsubscribe(); // this._formChangesSubscription.unsubscribe();
this._formChangesSubscription = null; // this._formChangesSubscription = null;
} // }
} // }
if(value == true){ // if(value == true){
//value is already true // //value is already true
if(this._showPreview){ // if(this._showPreview){
if(this._formChangesSubscription){ // if(this._formChangesSubscription){
this._formChangesSubscription.unsubscribe(); // this._formChangesSubscription.unsubscribe();
this._formChangesSubscription = null; // this._formChangesSubscription = null;
} // }
} // }
//initialize // //initialize
if(this.form.get('viewStyle').get('renderStyle').value){ // if(this.form.get('viewStyle').get('renderStyle').value){
this._generatePreviewForm(); // this._generatePreviewForm();
} // }
this._formChangesSubscription = this.form.valueChanges.subscribe(()=>{ // this._formChangesSubscription = this.form.valueChanges.subscribe(()=>{
this._generatePreviewForm(); // this._generatePreviewForm();
}); // });
} // }
this._showPreview = value; // this._showPreview = value;
} // }
previewForm: FormGroup; // previewForm: FormGroup;
private _generatePreviewForm(){ // private _generatePreviewForm(){
if(!this.form.get('data')){ // if(!this.form.get('data')){
return; // return;
} // }
this.previewForm = null; // this.previewForm = null;
const fieldEditorModel = new DatasetDescriptionFieldEditorModel(); // const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
fieldEditorModel.viewStyle= { // fieldEditorModel.viewStyle= {
renderStyle: this.form.get('viewStyle').get('renderStyle').value, // renderStyle: this.form.get('viewStyle').get('renderStyle').value,
cssClass: null // cssClass: null
}; // };
fieldEditorModel.data = (this.form.get('data') as FormGroup).getRawValue(); // fieldEditorModel.data = (this.form.get('data') as FormGroup).getRawValue();
fieldEditorModel.value = this.form.get('defaultValue').get('value').value; // fieldEditorModel.value = this.form.get('defaultValue').get('value').value;
fieldEditorModel.validationRequired = (this.form.get('validations').value as Array<ValidationType>).includes(ValidationType.Required); // fieldEditorModel.validationRequired = (this.form.get('validations').value as Array<ValidationType>).includes(ValidationType.Required);
if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.CheckBox){ // if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.CheckBox){
fieldEditorModel.value = this.form.get('defaultValue').get('value').value === 'true'; // fieldEditorModel.value = this.form.get('defaultValue').get('value').value === 'true';
} // }
// if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.Researchers){ // // if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.Researchers){
// fieldEditorModel.data = new ResearchersAutoCompleteFieldDataEditorModel().buildForm().getRawValue(); // // fieldEditorModel.data = new ResearchersAutoCompleteFieldDataEditorModel().buildForm().getRawValue();
// } // // }
if(fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.Validation || (fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.DatasetIdentifier) // if(fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.Validation || (fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.DatasetIdentifier)
|| (fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.Tags) // || (fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.Tags)
){ // ){
fieldEditorModel.value = null; // fieldEditorModel.value = null;
} // }
// const myTicket = Guid.create().toString(); // // const myTicket = Guid.create().toString();
// this.validTicket = myTicket; // // this.validTicket = myTicket;
// setTimeout(() => { //TODO // // setTimeout(() => { //TODO
// //user hasnt make any new change to inputs /show preview // // //user hasnt make any new change to inputs /show preview
// if(myTicket === this.validTicket){ // // if(myTicket === this.validTicket){
// this.previewForm = fieldEditorModel.buildForm(); // // this.previewForm = fieldEditorModel.buildForm();
// } // // }
// }, 600); // // }, 600);
this.subject$.next(fieldEditorModel); // this.subject$.next(fieldEditorModel);
// setTimeout(() => { // // setTimeout(() => {
// this.previewForm = fieldEditorModel.buildForm(); // // this.previewForm = fieldEditorModel.buildForm();
// }); // // });
}; // };
get canApplyVisibility():boolean{ get canApplyVisibility():boolean{
@ -429,12 +428,13 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
const x = this.viewType; const x = this.viewType;
this.showPreview = false; // this.showPreview = false;
const field: Field = this.form.getRawValue(); const field: Field = this.form.getRawValue();
field.defaultValue = {type:null, value: null}; // field.defaultValue = {type:null, value: null};
field.defaultValue = undefined;
if(!this.canApplyVisibility){ if(!this.canApplyVisibility){
field.visible.rules = []; field.visible.rules = [];
} }
@ -792,9 +792,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
} }
setTimeout(() => { //TODO // setTimeout(() => { //TODO
this.showPreview = true; // this.showPreview = true;
}); // });
} }

View File

@ -200,7 +200,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} }
// this.addSection(); // this.addSection();
// this.addPage(); // this.addPage();
this.visibilityRulesService.buildVisibilityRules([],this.form); // this.visibilityRulesService.buildVisibilityRules([],this.form);
setTimeout(() => { setTimeout(() => {
this.steps = this.stepper.steps; this.steps = this.stepper.steps;
}); });
@ -227,7 +227,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
prepareForm() { prepareForm() {
this.visibilityRulesService.buildVisibilityRules([],this.form); // this.visibilityRulesService.buildVisibilityRules([],this.form);
// this.form.setValidators([EditorCustomValidators.atLeastOneElementListValidator('pages'),EditorCustomValidators.pagesHaveAtLeastOneSection('pages', 'sections')]); // this.form.setValidators([EditorCustomValidators.atLeastOneElementListValidator('pages'),EditorCustomValidators.pagesHaveAtLeastOneSection('pages', 'sections')]);
// this.form.updateValueAndValidity(); // this.form.updateValueAndValidity();
this.form.valueChanges this.form.valueChanges
@ -879,54 +879,6 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} }
// 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};
// }
// }
// }
onRemoveEntry(tce: ToCEntry){ onRemoveEntry(tce: ToCEntry){
const dialogRef = this.dialog.open(ConfirmationDialogComponent, { const dialogRef = this.dialog.open(ConfirmationDialogComponent, {

View File

@ -253,14 +253,14 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
this.form.get('value').valueChanges this.form.get('value').valueChanges
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(item => { .subscribe(item => {
if (this.form.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.WordList && this.form.get('data').value.multiList) { // if (this.form.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.WordList && this.form.get('data').value.multiList) {
item.forEach(element => { // item.forEach(element => {
this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, element); // this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, element);
}); // });
} else { // } else {
this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, item); this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, item);
} // }
}); });
} }

View File

@ -1,5 +1,6 @@
import { ApplicationRef, Injectable, NgZone } from '@angular/core'; import { ApplicationRef, Injectable, NgZone } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
import { isNumeric } from 'rxjs/internal/util/isNumeric'; import { isNumeric } from 'rxjs/internal/util/isNumeric';
import { Rule } from '../../../../core/model/dataset-profile-definition/rule'; import { Rule } from '../../../../core/model/dataset-profile-definition/rule';
import { VisibilityRule } from './models/visibility-rule'; import { VisibilityRule } from './models/visibility-rule';
@ -38,6 +39,22 @@ export class VisibilityRulesService {
} }
private evaluateVisibility(visibilityRule: VisibilityRule, value: any) { private evaluateVisibility(visibilityRule: VisibilityRule, value: any) {
if (value instanceof Array){
const parsedSourceControlValues = visibilityRule.sourceVisibilityRules.map(e=>this.parseValue(e.sourceControlValue));
const parsedValues = value.map(e=>this.parseValue(e));
const isVisible = parsedValues.map(v=>parsedSourceControlValues.includes(v)).reduce((acc,current)=> acc|| current, false);
if(isVisible){
this.elementVisibilityMap.set(visibilityRule.targetControlId, true);
return;
}
}
for (let i = 0; i < visibilityRule.sourceVisibilityRules.length; i++) { for (let i = 0; i < visibilityRule.sourceVisibilityRules.length; i++) {
if (value != null && (this.parseValue(value) !== this.parseValue(visibilityRule.sourceVisibilityRules[i].sourceControlValue))) { if (value != null && (this.parseValue(value) !== this.parseValue(visibilityRule.sourceVisibilityRules[i].sourceControlValue))) {
this.elementVisibilityMap.set(visibilityRule.targetControlId, false); this.elementVisibilityMap.set(visibilityRule.targetControlId, false);
@ -123,7 +140,13 @@ export class VisibilityRulesService {
} }
private resetFieldFormGroup(formGroup: FormGroup) { private resetFieldFormGroup(formGroup: FormGroup) {
formGroup.get('value').setValue(formGroup.get('defaultValue').value ? this.parseValue(formGroup.get('defaultValue').value.value) : undefined); const renderStyle = formGroup.getRawValue().viewStyle.renderStyle;
if(renderStyle ===DatasetProfileFieldViewStyle.Validation || renderStyle === DatasetProfileFieldViewStyle.DatasetIdentifier){
formGroup.get('value').setValue({identifier:'',type:'' });
}else{
formGroup.get('value').setValue(formGroup.get('defaultValue').value ? this.parseValue(formGroup.get('defaultValue').value.value) : undefined);
}
} }
private resetCompositeFieldFormGroup(formGroup: FormGroup) { private resetCompositeFieldFormGroup(formGroup: FormGroup) {