Merge branch 'AdminTemplateRedesign' into WizardDescriptionRefactor

WizardDescriptionRefactor
Kristian Ntavidi 3 years ago
commit 6e70071a16

@ -53,6 +53,7 @@ import {DragulaModule} from 'ng2-dragula';
//matrial
import {MatBadgeModule} from '@angular/material/badge';
import { DatasetProfileEditorSectionFieldSetComponent } from './editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component';
import { FinalPreviewComponent } from './editor/components/final-preview/final-preview.component';
@NgModule({
imports: [
@ -106,12 +107,12 @@ import { DatasetProfileEditorSectionFieldSetComponent } from './editor/component
DatasetProfileEditorValidatorFieldComponent,
DatasetProfileTableOfContents,
DatasetProfileTableOfContentsInternalSection,
DatasetProfileEditorSectionFieldSetComponent
DatasetProfileEditorSectionFieldSetComponent,
FinalPreviewComponent
],
entryComponents: [
DialogConfirmationUploadDatasetProfiles
],
providers:[VisibilityRulesService]
]
})
export class DatasetProfileModule { }

@ -209,7 +209,11 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
multiplicity: {max:formValue.multiplicity.max, min : formValue.multiplicity.min},
multiplicityItems:null,
fields: fields.map(editorField=>{
return new DatasetDescriptionFieldEditorModel().fromModel(editorField);
const model = new DatasetDescriptionFieldEditorModel().fromModel(editorField);
if(model.viewStyle.renderStyle === this.viewStyleEnum.CheckBox){
model.value = model.value?"true":"false";//patch
}
return model;
})
}

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

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

@ -0,0 +1,3 @@
<app-dataset-description [form]="formGroup" [visibilityRules]="visibilityRules" *ngIf="formGroup">
</app-dataset-description>

@ -0,0 +1,28 @@
import { Component, Input, OnInit} from '@angular/core';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
@Component({
selector: 'app-final-preview-component',
templateUrl: './final-preview.component.html',
styleUrls: ['./final-preview.component.scss'],
providers:[VisibilityRulesService]
})
export class FinalPreviewComponent implements OnInit {
@Input() formGroup = null;
@Input() visibilityRules:Rule[] = [];
constructor(private visibilityRulesService: VisibilityRulesService){
}
ngOnInit(): void {
this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, this.formGroup);
}
}

@ -395,9 +395,16 @@
<!-- {{'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate}} -->
<!-- <button (click)="generatePreviewForm()">foo</button> -->
<ng-container *ngIf="formGroup">
<app-final-preview-component [formGroup]="formGroup" [visibilityRules]="visibilityRules">
</app-final-preview-component>
<!--
<app-dataset-description [form]="formGroup" [visibilityRules]="visibilityRules" *ngIf="formGroup">
</app-dataset-description>
</app-dataset-description> -->
</ng-container>
</mat-step>

@ -53,7 +53,8 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
selector: 'app-dataset-profile-editor-component',
templateUrl: './dataset-profile-editor.component.html',
styleUrls: ['./dataset-profile-editor.component.scss'],
animations:[...STEPPER_ANIMATIONS]
animations:[...STEPPER_ANIMATIONS],
providers:[VisibilityRulesService]
})
export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
@ -879,54 +880,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){
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {

@ -253,14 +253,14 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
this.form.get('value').valueChanges
.pipe(takeUntil(this._destroyed))
.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) {
item.forEach(element => {
this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, element);
});
// 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 => {
// this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, element);
// });
} else {
// } else {
this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, item);
}
// }
});
}

@ -1,5 +1,6 @@
import { ApplicationRef, Injectable, NgZone } from '@angular/core';
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 { Rule } from '../../../../core/model/dataset-profile-definition/rule';
import { VisibilityRule } from './models/visibility-rule';
@ -38,6 +39,22 @@ export class VisibilityRulesService {
}
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++) {
if (value != null && (this.parseValue(value) !== this.parseValue(visibilityRule.sourceVisibilityRules[i].sourceControlValue))) {
this.elementVisibilityMap.set(visibilityRule.targetControlId, false);
@ -123,7 +140,13 @@ export class VisibilityRulesService {
}
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) {

Loading…
Cancel
Save