Backend: Fix a bug with compareTo of a field throwing an error because ordinal is not exists. FrontEnd: Initialize visibility rules for multiple fields coming from service according to their parents.

This commit is contained in:
Konstantinos Triantafyllou 2022-06-23 15:38:48 +03:00
parent 18e98938d5
commit 304a6cfdb3
5 changed files with 167 additions and 161 deletions

View File

@ -238,7 +238,14 @@ public class Field implements Comparable, PropertiesModelBuilder, ViewStyleDefin
@Override @Override
public int compareTo(Object o) { public int compareTo(Object o) {
return this.ordinal.compareTo(((Field) o).getOrdinal()); Field comparedField = (Field) o;
if(this.ordinal != null) {
return this.ordinal.compareTo(comparedField.getOrdinal());
} else if (comparedField.getOrdinal() != null) {
return comparedField.getOrdinal().compareTo(this.ordinal);
} else {
return 0;
}
} }
@Override @Override

View File

@ -20,8 +20,8 @@
</div> </div>
<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)" <div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
class="col-12 mt-1 ml-0 mr-0 addOneFieldButton"> class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
<span class="pointer d-inline-flex align-items-center"> <span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)" >
<button mat-icon-button color="primary" (click)="addMultipleField(i)" [disabled]="compositeFieldFormGroup.disabled"> <button mat-icon-button color="primary" [disabled]="compositeFieldFormGroup.disabled">
<mat-icon>add_circle</mat-icon> <mat-icon>add_circle</mat-icon>
</button> </button>
<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span> <span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>

View File

@ -32,8 +32,8 @@
</div> </div>
<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)" <div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
class="col-12 mt-1 ml-0 mr-0 addOneFieldButton"> class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
<span class="pointer d-inline-flex align-items-center"> <span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)">
<button mat-icon-button color="primary" (click)="addMultipleField(i)" [disabled]="compositeFieldFormGroup.disabled"> <button mat-icon-button color="primary" [disabled]="compositeFieldFormGroup.disabled">
<mat-icon>add_circle</mat-icon> <mat-icon>add_circle</mat-icon>
</button> </button>
<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span> <span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>
@ -105,8 +105,8 @@
</div> </div>
<div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)" <div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)"
class="col-12 mt-1 ml-0 mr-0 addOneFieldButton"> class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
<span class="pointer d-inline-flex align-items-center"> <span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)">
<button mat-icon-button color="primary" (click)="addMultipleField(i)" [disabled]="fieldsetEntry.form.disabled"> <button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
<mat-icon>add_circle</mat-icon> <mat-icon>add_circle</mat-icon>
</button> </button>
<span class="mt-1" *ngIf="fieldsetEntry.form.get('multiplicity').value.placeholder">{{fieldsetEntry.form.get('multiplicity').value.placeholder}}</span> <span class="mt-1" *ngIf="fieldsetEntry.form.get('multiplicity').value.placeholder">{{fieldsetEntry.form.get('multiplicity').value.placeholder}}</span>

View File

@ -1,14 +1,24 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import {
import { FormArray, FormGroup } from '@angular/forms'; ChangeDetectionStrategy,
import { Rule } from '@app/core/model/dataset-profile-definition/rule'; ChangeDetectorRef,
import { BaseComponent } from '@common/base/base.component'; Component,
import { takeUntil } from 'rxjs/operators'; EventEmitter,
import { DatasetDescriptionCompositeFieldEditorModel } from '../../dataset-description-form.model'; Input,
import { ToCEntry, ToCEntryType } from '../../dataset-description.component'; OnChanges,
import { FormFocusService } from '../../form-focus/form-focus.service'; OnInit,
import { LinkToScroll } from '../../tableOfContentsMaterial/table-of-contents'; Output,
import { VisibilityRuleSource } from '../../visibility-rules/models/visibility-rule-source'; SimpleChanges
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service'; } from '@angular/core';
import {FormArray, FormGroup} from '@angular/forms';
import {Rule} from '@app/core/model/dataset-profile-definition/rule';
import {BaseComponent} from '@common/base/base.component';
import {takeUntil} from 'rxjs/operators';
import {DatasetDescriptionCompositeFieldEditorModel} from '../../dataset-description-form.model';
import {ToCEntry, ToCEntryType} from '../../dataset-description.component';
import {FormFocusService} from '../../form-focus/form-focus.service';
import {LinkToScroll} from '../../tableOfContentsMaterial/table-of-contents';
import {VisibilityRuleSource} from '../../visibility-rules/models/visibility-rule-source';
import {VisibilityRulesService} from '../../visibility-rules/visibility-rules.service';
@Component({ @Component({
@ -57,6 +67,7 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
if (this.tocentry) {//maybe not needed as well if (this.tocentry) {//maybe not needed as well
this.form = this.tocentry.form as FormGroup; this.form = this.tocentry.form as FormGroup;
} }
this.initMultipleFieldsVisibility();
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
@ -78,26 +89,9 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
// this.visibilityRulesService.triggerVisibilityEvaluation(); // this.visibilityRulesService.triggerVisibilityEvaluation();
// } // }
addMultipleField(fieldsetIndex: number) { setMultipleFieldVisibility(parentCompositeField, compositeField: DatasetDescriptionCompositeFieldEditorModel, idMappings: { old: string, new: string }[]) {
const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as FormGroup).getRawValue();
const multiplicityItemsArray = (<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems')));
const ordinal = multiplicityItemsArray.length ? multiplicityItemsArray.controls.reduce((ordinal, currentControl) => {
const currentOrdinal = currentControl.get('ordinal').value as number;
if (currentOrdinal >= ordinal) {
return currentOrdinal + 1;
}
return ordinal as number;
}, 0) : 0;
const idMappings = [] as { old: string, new: string }[];
const compositeField: DatasetDescriptionCompositeFieldEditorModel = new DatasetDescriptionCompositeFieldEditorModel().cloneForMultiplicity(compositeFieldToBeCloned, ordinal, idMappings);
// ** COMPOSITE FIELD IS SHOWN OR HIDDEN FROM ANOTHER ELEMENT // ** COMPOSITE FIELD IS SHOWN OR HIDDEN FROM ANOTHER ELEMENT
const compositeFieldVisibilityDependencies = this.visibilityRulesService.getVisibilityDependency(compositeFieldToBeCloned); const compositeFieldVisibilityDependencies = this.visibilityRulesService.getVisibilityDependency(parentCompositeField);
if (compositeFieldVisibilityDependencies && compositeFieldVisibilityDependencies.length) { if (compositeFieldVisibilityDependencies && compositeFieldVisibilityDependencies.length) {
compositeFieldVisibilityDependencies.forEach(x => { compositeFieldVisibilityDependencies.forEach(x => {
@ -112,30 +106,21 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
} }
// console.log('idMappings ', idMappings); // console.log('idMappings ', idMappings);
compositeFieldToBeCloned.fields.forEach(element => { parentCompositeField.fields.forEach(element => {
// console.log(this.visibilityRulesService.getVisibilityDependency(element.id)); // console.log(this.visibilityRulesService.getVisibilityDependency(element.id));
const dependency = this.visibilityRulesService.getVisibilityDependency(element.id); const dependency = this.visibilityRulesService.getVisibilityDependency(element.id);
try {
if (dependency && dependency.length) { if (dependency && dependency.length) {
// * INNER VISIBILITY DEPENDENCIES // * INNER VISIBILITY DEPENDENCIES
// * IF INNER INPUT HIDES ANOTHER INNER INPUT // * IF INNER INPUT HIDES ANOTHER INNER INPUT
const innerDependency = parentCompositeField.fields.reduce((innerD, currentElement) => {
const innerDependency = compositeFieldToBeCloned.fields.reduce((innerD, currentElement) => {
const innerDependecies = dependency.filter(d => d.sourceControlId === currentElement.id); const innerDependecies = dependency.filter(d => d.sourceControlId === currentElement.id);
return [...innerD, ...innerDependecies]; return [...innerD, ...innerDependecies];
}, []) as VisibilityRuleSource[]; }, []) as VisibilityRuleSource[];
if (innerDependency.length) { if (innerDependency.length) {
//Build visibility source //Build visibility source
const updatedRules = innerDependency.map(x => { const updatedRules = innerDependency.map(x => {
const newId = idMappings.find(y => y.old === x.sourceControlId); const newId = idMappings.find(y => y.old === x.sourceControlId);
return { ...x, sourceControlId: newId.new }; return {...x, sourceControlId: newId.new};
}); });
// const visRule: VisibilityRule = { // const visRule: VisibilityRule = {
// targetControlId: idMappings.find(x => x.old === element.id).new, // targetControlId: idMappings.find(x => x.old === element.id).new,
@ -173,7 +158,8 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
const outerRules = (this.visibilityRulesService.getVisibilityDependency(target) as VisibilityRuleSource[]).filter(x => x.sourceControlId === element.id); const outerRules = (this.visibilityRulesService.getVisibilityDependency(target) as VisibilityRuleSource[]).filter(x => x.sourceControlId === element.id);
const updatedRules = outerRules.map(x => { const updatedRules = outerRules.map(x => {
return { ...x, sourceControlId: idMappings.find(y => y.old === element.id).new }; console.log(idMappings, element);
return {...x, sourceControlId: idMappings.find(y => y.old === element.id).new};
}); });
// const visRule: VisibilityRule = { // const visRule: VisibilityRule = {
@ -190,24 +176,14 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
type: '' type: ''
} as Rule; } as Rule;
}) })
rules.forEach(rule => { rules.forEach(rule => {
this.visibilityRulesService.addNewRule(rule); this.visibilityRulesService.addNewRule(rule);
}) })
// this.visibilityRulesService.appendVisibilityRule(visRule); // this.visibilityRulesService.appendVisibilityRule(visRule);
}); });
// * IF INNER INPUT IS HIDDEN BY OUTER INPUT // * IF INNER INPUT IS HIDDEN BY OUTER INPUT
if (dependency && dependency.length) { if (dependency && dependency.length) {
const fieldsThatHideInnerElement = dependency.filter(x => !innerIds.includes(x.sourceControlId)); const fieldsThatHideInnerElement = dependency.filter(x => !innerIds.includes(x.sourceControlId));
if (fieldsThatHideInnerElement.length) { if (fieldsThatHideInnerElement.length) {
fieldsThatHideInnerElement.forEach(x => { fieldsThatHideInnerElement.forEach(x => {
const visRule: Rule = { const visRule: Rule = {
@ -221,16 +197,41 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
}); });
} }
} }
// console.log(`for ${element.id} targets are`, outerTargets); // console.log(`for ${element.id} targets are`, outerTargets);
} catch { });
console.log('error');
} }
initMultipleFieldsVisibility() {
(this.form.get('compositeFields') as FormArray).controls.forEach(control => {
let parentCompositeField = (control as FormGroup).getRawValue();
if (parentCompositeField.multiplicityItems && parentCompositeField.multiplicityItems.length > 0) {
parentCompositeField.multiplicityItems.forEach(compositeField => {
let idMappings: { old: string, new: string }[] = [{old: parentCompositeField.id, new: compositeField.id}];
parentCompositeField.fields.forEach((field, index) => {
idMappings.push({ old: field.id, new: compositeField.fields[index].id });
}); });
// console.log(this.visibilityRulesService); this.setMultipleFieldVisibility(parentCompositeField, compositeField, idMappings);
// console.log(this.visibilityRulesService.getVisibilityDependency()); })
}
});
}
addMultipleField(fieldsetIndex: number) {
const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as FormGroup).getRawValue();
const multiplicityItemsArray = (<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems')));
const ordinal = multiplicityItemsArray.length ? multiplicityItemsArray.controls.reduce((ordinal, currentControl) => {
const currentOrdinal = currentControl.get('ordinal').value as number;
if (currentOrdinal >= ordinal) {
return currentOrdinal + 1;
}
return ordinal as number;
}, 0) : 0;
const idMappings = [] as { old: string, new: string }[];
const compositeField: DatasetDescriptionCompositeFieldEditorModel = new DatasetDescriptionCompositeFieldEditorModel().cloneForMultiplicity(compositeFieldToBeCloned, ordinal, idMappings);
this.setMultipleFieldVisibility(compositeFieldToBeCloned, compositeField, idMappings);
multiplicityItemsArray.push(compositeField.buildForm()); multiplicityItemsArray.push(compositeField.buildForm());
} }
@ -264,7 +265,6 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
// } // }
onAskedToScroll(id: string) { onAskedToScroll(id: string) {
this.panelExpanded = true; this.panelExpanded = true;
this.askedToScroll.emit(id); this.askedToScroll.emit(id);

View File

@ -46,7 +46,6 @@ export class VisibilityRulesService {
} }
public updateValueAndVisibility(id: string, value: any) { public updateValueAndVisibility(id: string, value: any) {
console.log('updateValueAndVisibility');
const visibilityRules = this.visibilityRuleContext.rules.filter(item => item.sourceVisibilityRules.filter(source => source.sourceControlId === id).length > 0); const visibilityRules = this.visibilityRuleContext.rules.filter(item => item.sourceVisibilityRules.filter(source => source.sourceControlId === id).length > 0);
if (visibilityRules.length > 0) { if (visibilityRules.length > 0) {
visibilityRules.forEach(item => this.evaluateVisibility(item, value, id)); visibilityRules.forEach(item => this.evaluateVisibility(item, value, id));
@ -347,7 +346,7 @@ export class VisibilityRulesService {
public addNewRule(rule: Rule, currentVisibility = this.DEFAULTVISIBILITY): void { public addNewRule(rule: Rule, currentVisibility = this.DEFAULTVISIBILITY): void {
const targetId = rule.targetField; const targetId = rule.targetField;
const sourceId = rule.sourceField; const sourceId = rule.sourceField;
console.log(rule);
this.visibilityRuleContext.addToVisibilityRulesContext(rule); this.visibilityRuleContext.addToVisibilityRulesContext(rule);