final description template preview changes

This commit is contained in:
amentis 2024-04-01 12:10:29 +03:00
parent 621ddd0aee
commit f4bf80aeb5
11 changed files with 22 additions and 83 deletions

View File

@ -98,7 +98,7 @@
<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;"> <div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;">
<div *ngIf="previewFieldSet && showPreview && firstField?.get('data')?.get('fieldType')?.value" class="row" [@fade-in-fast]> <div *ngIf="previewFieldSet && showPreview && firstField?.get('data')?.get('fieldType')?.value" class="row" [@fade-in-fast]>
<div class="col"> <div class="col">
<app-description-form-field-set class="w-100" [propertiesFormGroup]="previewPropertiesFormGroup" [fieldSet]="previewFieldSet"></app-description-form-field-set> <app-description-form-field-set class="w-100" [propertiesFormGroup]="previewPropertiesFormGroup" [fieldSet]="previewFieldSet" [visibilityRulesService]="visibilityRulesService"></app-description-form-field-set>
</div> </div>
</div> </div>
</div> </div>

View File

@ -79,6 +79,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
public enumUtils: EnumUtils, public enumUtils: EnumUtils,
public datasetProfileService: DescriptionTemplateService, public datasetProfileService: DescriptionTemplateService,
private configurationService: ConfigurationService, private configurationService: ConfigurationService,
public visibilityRulesService: VisibilityRulesService
) { ) {
super(); super();
} }
@ -289,6 +290,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
this.previewPropertiesFormGroup = descriptionEditorModel.properties.fieldSets.get(fieldSet.id).buildForm() as UntypedFormGroup; this.previewPropertiesFormGroup = descriptionEditorModel.properties.fieldSets.get(fieldSet.id).buildForm() as UntypedFormGroup;
this.previewFieldSet = fieldSet; this.previewFieldSet = fieldSet;
this.visibilityRulesService.setContext(mockDescription.descriptionTemplate.definition, this.previewPropertiesFormGroup);
// this.previewSubject$.next(section); // this.previewSubject$.next(section);
} }
@ -561,10 +563,6 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
break; break;
} }
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DMPS: {
//TODO: refactor
break;
}
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DMPS: case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DMPS:
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS: { case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS: {
const data: DescriptionTemplateLabelAndMultiplicityData = { const data: DescriptionTemplateLabelAndMultiplicityData = {

View File

@ -27,10 +27,10 @@
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<!-- ComboBox --> <!-- SELECT -->
<mat-form-field class="col-md-12" *ngIf="fieldType === descriptionTemplateFieldTypeEnum.SELECT"> <mat-form-field class="col-md-12" *ngIf="fieldType === descriptionTemplateFieldTypeEnum.SELECT">
<mat-label>{{placeHolder}}</mat-label> <mat-label>{{placeHolder}}</mat-label>
<mat-select [formControl]="form" [placeholder]="placeHolder"> <mat-select multiple [formControl]="form" [placeholder]="placeHolder">
<mat-option [value]="null">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | translate }}</mat-option> <mat-option [value]="null">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | translate }}</mat-option>
<mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option> <mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option>
</mat-select> </mat-select>

View File

@ -161,10 +161,6 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
break; break;
} }
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DMPS: {
//TODO: refactor
break;
}
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DMPS: case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DMPS:
case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS:{ case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS:{
const data: DescriptionTemplateLabelAndMultiplicityData = { const data: DescriptionTemplateLabelAndMultiplicityData = {

View File

@ -1 +1 @@
<app-description-form *ngIf="formGroup" [propertiesFormGroup]="previewPropertiesFormGroup" [descriptionTemplate]="descriptionTemplate" [visibilityRulesService]="visibilityRulesService"></app-description-form> <app-description-form *ngIf="previewPropertiesFormGroup" [propertiesFormGroup]="previewPropertiesFormGroup" [descriptionTemplate]="descriptionTemplate" [visibilityRulesService]="visibilityRulesService"></app-description-form>

View File

@ -21,13 +21,20 @@ export class FinalPreviewComponent implements OnInit {
@Input() descriptionTemplatePersist: DescriptionTemplatePersist; @Input() descriptionTemplatePersist: DescriptionTemplatePersist;
descriptionTemplate: DescriptionTemplate; descriptionTemplate: DescriptionTemplate;
previewPropertiesFormGroup previewPropertiesFormGroup: UntypedFormGroup;
@Input() formGroup = null;
constructor(public visibilityRulesService: VisibilityRulesService) { constructor(public visibilityRulesService: VisibilityRulesService) {
} }
ngOnInit(): void {
this.generatePreviewForm();
}
ngOnChanges(changes: SimpleChanges) {
if(changes['descriptionTemplatePersist']) this.generatePreviewForm();
}
private generatePreviewForm() { private generatePreviewForm() {
this.descriptionTemplate = this.buildDescriptionTemplate(this.descriptionTemplatePersist); this.descriptionTemplate = this.buildDescriptionTemplate(this.descriptionTemplatePersist);
@ -132,12 +139,4 @@ export class FinalPreviewComponent implements OnInit {
return convertedField; return convertedField;
} }
ngOnInit(): void {
this.generatePreviewForm();
}
// ngOnChanges(changes: SimpleChanges) {
// if(changes['descriptionTemplatePersist']) this.generatePreviewForm();
// }
} }

View File

@ -3,6 +3,7 @@
<app-description-template-editor-default-value-component *ngIf="isTextType(fieldTypeForCheck)" class="col align-self-center" [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('textValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component> <app-description-template-editor-default-value-component *ngIf="isTextType(fieldTypeForCheck)" class="col align-self-center" [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('textValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
<app-description-template-editor-default-value-component *ngIf="isDateType(fieldTypeForCheck)" class="col align-self-center" [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('dateValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component> <app-description-template-editor-default-value-component *ngIf="isDateType(fieldTypeForCheck)" class="col align-self-center" [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('dateValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
<app-description-template-editor-default-value-component *ngIf="isTextListType(fieldTypeForCheck)" class="col align-self-center" [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('textListValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
<!-- SELECTION --> <!-- SELECTION -->
<mat-form-field class="col align-self-center"> <mat-form-field class="col align-self-center">

View File

@ -43,12 +43,12 @@ export class DescriptionTemplateEditorRuleComponent implements OnInit {
return type == DescriptionTemplateFieldType.FREE_TEXT || type == DescriptionTemplateFieldType.CHECK_BOX || return type == DescriptionTemplateFieldType.FREE_TEXT || type == DescriptionTemplateFieldType.CHECK_BOX ||
type == DescriptionTemplateFieldType.TEXT_AREA || type == DescriptionTemplateFieldType.RICH_TEXT_AREA || type == DescriptionTemplateFieldType.TEXT_AREA || type == DescriptionTemplateFieldType.RICH_TEXT_AREA ||
type == DescriptionTemplateFieldType.BOOLEAN_DECISION || type == DescriptionTemplateFieldType.RADIO_BOX || type == DescriptionTemplateFieldType.BOOLEAN_DECISION || type == DescriptionTemplateFieldType.RADIO_BOX ||
type == DescriptionTemplateFieldType.CURRENCY || type == DescriptionTemplateFieldType.SELECT; type == DescriptionTemplateFieldType.CURRENCY;
} }
isTextListType(type: DescriptionTemplateFieldType){ isTextListType(type: DescriptionTemplateFieldType){
return type == DescriptionTemplateFieldType.TAGS || type == DescriptionTemplateFieldType.INTERNAL_ENTRIES_DMPS || return type == DescriptionTemplateFieldType.TAGS || type == DescriptionTemplateFieldType.INTERNAL_ENTRIES_DMPS ||
type == DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS; type == DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS || type == DescriptionTemplateFieldType.SELECT;
} }
isDateType(type: DescriptionTemplateFieldType){ isDateType(type: DescriptionTemplateFieldType){

View File

@ -268,7 +268,7 @@
<div class="col-9"> <div class="col-9">
<div class="col"> <div class="col">
<div class="col-12"> <div class="col-12">
<app-final-preview-component [formGroup]="formGroup" [visibilityRules]="visibilityRules" [descriptionTemplatePersist]="formGroup.getRawValue()"> <app-final-preview-component [descriptionTemplatePersist]="finalPreviewDescriptionTemplatePersist">
</app-final-preview-component> </app-final-preview-component>
</div> </div>

View File

@ -78,6 +78,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
//Preview //Preview
previewFieldSet: DescriptionTemplate = null; previewFieldSet: DescriptionTemplate = null;
previewPropertiesFormGroup: UntypedFormGroup = null; previewPropertiesFormGroup: UntypedFormGroup = null;
finalPreviewDescriptionTemplatePersist: DescriptionTemplatePersist;
protected get canDelete(): boolean { protected get canDelete(): boolean {
return !this.isDeleted && !this.isNew && this.hasPermission(this.authService.permissionEnum.DeleteDescriptionTemplate); return !this.isDeleted && !this.isNew && this.hasPermission(this.authService.permissionEnum.DeleteDescriptionTemplate);
@ -391,63 +392,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
// //
// //
generatePreviewForm() { generatePreviewForm() {
// const formValue: DescriptionTemplatePersist = this.formGroup.getRawValue(); this.finalPreviewDescriptionTemplatePersist = this.formGroup.getRawValue();
// const fields: DescriptionTemplateField[] = formValue.fields.map(editorField => {
// return {
// id: editorField.id,
// ordinal: editorField.ordinal,
// numbering: '',
// schematics: editorField.schematics,
// defaultValue: editorField.defaultValue,
// visibilityRules: editorField.visibilityRules,
// validations: editorField.validations,
// includeInExport: editorField.includeInExport,
// data: editorField.data
// }
// });
// const fieldSet: DescriptionTemplateFieldSet = {
// id: formValue.id,
// ordinal: formValue.ordinal,
// numbering: '',
// title: formValue.title,
// description: formValue.description,
// extendedDescription: formValue.extendedDescription,
// additionalInformation: formValue.additionalInformation,
// multiplicity: {
// max: formValue.multiplicity.max, min: formValue.multiplicity.min,
// placeholder: formValue.multiplicity.placeholder, tableView: formValue.multiplicity.tableView
// },
// hasCommentField: formValue.hasCommentField,
// fields: fields
// }
// const mockDescription: Description = {
// descriptionTemplate: {
// definition: {
// pages: [
// {
// sections: [{
// fieldSets: [fieldSet]
// }]
// }
// ]
// }
// }
// }
// const descriptionEditorModel = new DescriptionEditorModel().fromModel(mockDescription, mockDescription.descriptionTemplate);
// this.previewPropertiesFormGroup = descriptionEditorModel.properties.fieldSets.get(fieldSet.id).buildForm() as UntypedFormGroup;
// this.previewFieldSet = fieldSet;
// let data = this.form.getRawValue();
// this.datasetProfileService.preview(data).subscribe(x => {
// this.datasetWizardModel = new DatasetWizardEditorModel().fromModel({
// datasetProfileDefinition: x
// });
// this.updateVisibilityRules();
// this.formGroup = <FormGroup>this.datasetWizardModel.buildForm().get('datasetProfileDefinition');
// });
} }
// //

View File

@ -3,7 +3,7 @@
<mat-expansion-panel class="row expansion-panel toc-section-header" [id]="path" [(expanded)]="panelExpanded"> <mat-expansion-panel class="row expansion-panel toc-section-header" [id]="path" [(expanded)]="panelExpanded">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<h6 class='panel-title' *ngIf="section?.sections?.length > 0">{{path}}.section {{section.title}}</h6> <h6 class='panel-title' *ngIf="section?.sections?.length >= 0">{{path}}.section {{section.title}}</h6>
<h6 class='panel-title' *ngIf="section?.fieldSets?.length > 0">{{path}} {{section.title}}</h6> <h6 class='panel-title' *ngIf="section?.fieldSets?.length > 0">{{path}} {{section.title}}</h6>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>