description template ui changes
This commit is contained in:
parent
9d4e814d1c
commit
98d6636855
|
@ -65,8 +65,8 @@
|
||||||
<!-- FIELDS -->
|
<!-- FIELDS -->
|
||||||
<div #inputs transition-group class="col-12" *ngIf="hasFocus" [@fade-in]>
|
<div #inputs transition-group class="col-12" *ngIf="hasFocus" [@fade-in]>
|
||||||
<div *ngFor="let field of fieldsArray.controls; let i=index;" class="row bg-white field-input mt-3" (click)="setTargetField(field)" transition-group-item>
|
<div *ngFor="let field of fieldsArray.controls; let i=index;" class="row bg-white field-input mt-3" (click)="setTargetField(field)" transition-group-item>
|
||||||
<app-description-template-editor-field-component class="col-12" [form]="field" [showOrdinal]="false" [indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly" [expandView]="hasFocus" [canBeDeleted]="fieldsArray.length !=1"
|
<app-description-template-editor-field-component class="col-12" [form]="field" [showOrdinal]="false" [viewOnly]="viewOnly" [expandView]="hasFocus" [canBeDeleted]="fieldsArray.length !=1"
|
||||||
[validationErrorModel]="validationErrorModel" [rootPath]="rootPath + 'fields[' + i + '].'" (delete)="deleteField(i)">
|
[validationErrorModel]="validationErrorModel" [validationRootPath]="validationRootPath + '.fields[' + i + '].'" (delete)="deleteField(i)">
|
||||||
<div class="arrows mt-2">
|
<div class="arrows mt-2">
|
||||||
<ul class="list-unstyled list-inline d-flex align-items-center">
|
<ul class="list-unstyled list-inline d-flex align-items-center">
|
||||||
<li *ngIf="canGoUp(i)" class="text-muted">
|
<li *ngIf="canGoUp(i)" class="text-muted">
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
|
||||||
import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
|
import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
|
||||||
import { MatCheckboxChange } from '@angular/material/checkbox';
|
import { MatCheckboxChange } from '@angular/material/checkbox';
|
||||||
import { MatDialog } from '@angular/material/dialog';
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
@ -39,7 +39,6 @@ import { ValidationErrorModel } from '@common/forms/validation/error-model/valid
|
||||||
export class DescriptionTemplateEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges {
|
export class DescriptionTemplateEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges {
|
||||||
|
|
||||||
@Input() form: UntypedFormGroup;
|
@Input() form: UntypedFormGroup;
|
||||||
@Input() indexPath: string;
|
|
||||||
@Input() viewOnly: boolean;
|
@Input() viewOnly: boolean;
|
||||||
|
|
||||||
@Input() datasetProfileId?: string;
|
@Input() datasetProfileId?: string;
|
||||||
|
@ -48,7 +47,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
|
||||||
@Input() hasFocus: boolean = false;
|
@Input() hasFocus: boolean = false;
|
||||||
@ViewChild("inputs") inputs: TransitionGroupComponent;
|
@ViewChild("inputs") inputs: TransitionGroupComponent;
|
||||||
@Input() validationErrorModel: ValidationErrorModel;
|
@Input() validationErrorModel: ValidationErrorModel;
|
||||||
@Input() rootPath: string;
|
@Input() validationRootPath: string;
|
||||||
|
|
||||||
showPreview: boolean = true;
|
showPreview: boolean = true;
|
||||||
previewDirty: boolean = false;
|
previewDirty: boolean = false;
|
||||||
|
@ -65,6 +64,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
|
||||||
|
|
||||||
private myCustomValidators: EditorCustomValidators = new EditorCustomValidators();
|
private myCustomValidators: EditorCustomValidators = new EditorCustomValidators();
|
||||||
|
|
||||||
|
|
||||||
isMultiplicityEnabled = false;
|
isMultiplicityEnabled = false;
|
||||||
constructor(
|
constructor(
|
||||||
private dialog: MatDialog,
|
private dialog: MatDialog,
|
||||||
|
@ -321,22 +321,22 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addNewField() {
|
// addNewField() {
|
||||||
const field: DescriptionTemplateFieldEditorModel = new DescriptionTemplateFieldEditorModel();
|
// const field: DescriptionTemplateFieldEditorModel = new DescriptionTemplateFieldEditorModel();
|
||||||
field.id = Guid.create().toString();
|
// field.id = Guid.create().toString();
|
||||||
|
|
||||||
field.ordinal = (this.form.get('fields') as UntypedFormArray).length;
|
// field.ordinal = (this.form.get('fields') as UntypedFormArray).length;
|
||||||
|
|
||||||
const fieldForm = field.buildForm();
|
// const fieldForm = field.buildForm();
|
||||||
// fieldForm.setValidators(this.customFieldValidator());
|
// // fieldForm.setValidators(this.customFieldValidator());
|
||||||
|
|
||||||
// fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required);
|
// // fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required);
|
||||||
|
|
||||||
(<UntypedFormArray>this.form.get('fields')).push(fieldForm);
|
// (<UntypedFormArray>this.form.get('fields')).push(fieldForm);
|
||||||
|
|
||||||
this.setTargetField(fieldForm);
|
// this.setTargetField(fieldForm);
|
||||||
fieldForm.updateValueAndValidity();
|
// fieldForm.updateValueAndValidity();
|
||||||
}
|
// }
|
||||||
|
|
||||||
DeleteField(index) {
|
DeleteField(index) {
|
||||||
|
|
||||||
|
@ -573,7 +573,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
(<UntypedFormArray>this.form.get('fields')).push(new DescriptionTemplateFieldEditorModel(this.validationErrorModel).fromModel(field).buildForm({rootPath: this.rootPath + 'fields[' + this.fieldsArray.length + '].'}));
|
(<UntypedFormArray>this.form.get('fields')).push(new DescriptionTemplateFieldEditorModel(this.validationErrorModel).fromModel(field).buildForm({rootPath: this.validationRootPath + '.fields[' + this.fieldsArray.length + ']'}));
|
||||||
this.inputs.init();
|
this.inputs.init();
|
||||||
// fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity();
|
// fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity();
|
||||||
// fieldForm.get('data').updateValueAndValidity();
|
// fieldForm.get('data').updateValueAndValidity();
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
{{validationRootPath}}
|
||||||
<ng-container *ngIf="expandView">
|
<ng-container *ngIf="expandView">
|
||||||
|
|
||||||
<!-- ACTIONS PER FIELD -->
|
<!-- ACTIONS PER FIELD -->
|
||||||
|
@ -201,18 +202,18 @@
|
||||||
<ng-container *ngIf="form.get('visibilityRules')?.value.length">
|
<ng-container *ngIf="form.get('visibilityRules')?.value.length">
|
||||||
<h4 class="col-12" style="font-weight: bold">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
|
<h4 class="col-12" style="font-weight: bold">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
|
||||||
</h4>
|
</h4>
|
||||||
<app-description-template-editor-visibility-rule-component class="col-12" [form]="form.get('visibilityRules')" [validationErrorModel]="validationErrorModel" [rootPath]="rootPath" [fieldTypeForCheck]="form.get('data').get('fieldType').value" [formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [viewOnly]="viewOnly"></app-description-template-editor-visibility-rule-component>
|
<app-description-template-editor-visibility-rule-component class="col-12" [form]="form.get('visibilityRules')" [validationErrorModel]="validationErrorModel" [rootPath]="validationRootPath" [fieldTypeForCheck]="form.get('data').get('fieldType').value" [formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [viewOnly]="viewOnly"></app-description-template-editor-visibility-rule-component>
|
||||||
<!-- <div class="col-12" *ngIf="!viewOnly">
|
<!-- <div class="col-12" *ngIf="!viewOnly">
|
||||||
<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('data').get('fieldType').value">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
|
<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('data').get('fieldType').value">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
|
||||||
</div> -->
|
</div> -->
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" [ngSwitch]="form.get('data')?.get('fieldType')?.value " *ngIf="expandView">
|
<div class="row" [ngSwitch]="form.get('data')?.get('fieldType')?.value" >
|
||||||
|
|
||||||
<app-description-template-editor-external-select-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.EXTERNAL_SELECT" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="rootPath"></app-description-template-editor-external-select-field-component>
|
<app-description-template-editor-external-select-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.EXTERNAL_SELECT" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="validationRootPath"></app-description-template-editor-external-select-field-component>
|
||||||
<app-description-template-editor-select-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="rootPath"></app-description-template-editor-select-field-component>
|
<app-description-template-editor-select-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="validationRootPath"></app-description-template-editor-select-field-component>
|
||||||
<app-description-template-editor-radio-box-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.RADIO_BOX" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="rootPath"></app-description-template-editor-radio-box-field-component>
|
<app-description-template-editor-radio-box-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.RADIO_BOX" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="validationRootPath"></app-description-template-editor-radio-box-field-component>
|
||||||
<app-description-template-editor-upload-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.UPLOAD" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="rootPath"></app-description-template-editor-upload-field-component>
|
<app-description-template-editor-upload-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.UPLOAD" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="validationRootPath"></app-description-template-editor-upload-field-component>
|
||||||
|
|
||||||
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
|
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
|
||||||
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.CHECK_BOX" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
|
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.CHECK_BOX" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
|
||||||
|
|
|
@ -35,8 +35,6 @@ import { ValidationErrorModel } from '@common/forms/validation/error-model/valid
|
||||||
export class DescriptionTemplateEditorFieldComponent extends BaseComponent implements OnInit, ErrorStateMatcher {
|
export class DescriptionTemplateEditorFieldComponent extends BaseComponent implements OnInit, ErrorStateMatcher {
|
||||||
@Input() viewOnly: boolean;
|
@Input() viewOnly: boolean;
|
||||||
@Input() form: UntypedFormGroup;
|
@Input() form: UntypedFormGroup;
|
||||||
@Input() showOrdinal = true;
|
|
||||||
@Input() indexPath: string;
|
|
||||||
validationTypeEnum = ValidationType;
|
validationTypeEnum = ValidationType;
|
||||||
// isFieldMultiplicityEnabled = false;
|
// isFieldMultiplicityEnabled = false;
|
||||||
|
|
||||||
|
@ -48,7 +46,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
|
||||||
|
|
||||||
@Output() delete = new EventEmitter<void>();
|
@Output() delete = new EventEmitter<void>();
|
||||||
@Input() validationErrorModel: ValidationErrorModel;
|
@Input() validationErrorModel: ValidationErrorModel;
|
||||||
@Input() rootPath: string;
|
@Input() validationRootPath: string;
|
||||||
|
|
||||||
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
|
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||||
|
|
||||||
|
@ -96,7 +94,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
|
||||||
addNewRule() {
|
addNewRule() {
|
||||||
const rule: DescriptionTemplateRuleEditorModel = new DescriptionTemplateRuleEditorModel(this.validationErrorModel);
|
const rule: DescriptionTemplateRuleEditorModel = new DescriptionTemplateRuleEditorModel(this.validationErrorModel);
|
||||||
const ruleArray = this.form.get('visibilityRules') as UntypedFormArray;
|
const ruleArray = this.form.get('visibilityRules') as UntypedFormArray;
|
||||||
(<UntypedFormArray>this.form.get('visibilityRules')).push(rule.buildForm({rootPath: this.rootPath + 'visibilityRules[' + ruleArray.length +'].'}));
|
(<UntypedFormArray>this.form.get('visibilityRules')).push(rule.buildForm({rootPath: this.validationRootPath + 'visibilityRules[' + ruleArray.length +'].'}));
|
||||||
}
|
}
|
||||||
|
|
||||||
get canApplyVisibility(): boolean {
|
get canApplyVisibility(): boolean {
|
||||||
|
@ -219,7 +217,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
|
||||||
}
|
}
|
||||||
|
|
||||||
const form = (new DescriptionTemplateFieldEditorModel(this.validationErrorModel)).fromModel(field)
|
const form = (new DescriptionTemplateFieldEditorModel(this.validationErrorModel)).fromModel(field)
|
||||||
.buildForm({rootPath: this.rootPath});
|
.buildForm({rootPath: this.validationRootPath});
|
||||||
|
|
||||||
|
|
||||||
const fields = this.form.parent as UntypedFormArray;
|
const fields = this.form.parent as UntypedFormArray;
|
||||||
|
|
|
@ -1,14 +0,0 @@
|
||||||
<mat-card *ngFor="let pageControl of form['controls']; let i=index;" class="page-card">
|
|
||||||
<mat-card-title class="page-card-title">{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.PAGE-PREFIX' | translate}} {{i + 1}}</mat-card-title>
|
|
||||||
<div class="row">
|
|
||||||
<mat-form-field class="col">
|
|
||||||
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.PAGE-INPUT-TITLE' | translate}}"
|
|
||||||
[formControl]="pageControl.get('title')" required>
|
|
||||||
<mat-error *ngIf="pageControl.get('title').hasError('backendError')">{{pageControl.get('title').getError('backendError').message}}</mat-error>
|
|
||||||
<mat-error *ngIf="pageControl.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
<button mat-icon-button type="button" class="col-auto" (click)="removePage(i)" [disabled]="viewOnly">
|
|
||||||
<mat-icon>delete</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</mat-card>
|
|
|
@ -1,7 +0,0 @@
|
||||||
.page-card {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
|
|
||||||
.page-card-title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,17 +0,0 @@
|
||||||
import { Component, Input } from '@angular/core';
|
|
||||||
import { UntypedFormArray } from '@angular/forms';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-dataset-profile-editor-page-component',
|
|
||||||
templateUrl: './dataset-profile-editor-page.component.html',
|
|
||||||
styleUrls: ['./dataset-profile-editor-page.component.scss']
|
|
||||||
})
|
|
||||||
export class DatasetProfileEditorPageComponent {
|
|
||||||
|
|
||||||
@Input() form: UntypedFormArray;
|
|
||||||
@Input() viewOnly: boolean;
|
|
||||||
|
|
||||||
removePage(index) {
|
|
||||||
(<UntypedFormArray>this.form).removeAt(index);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -65,7 +65,7 @@
|
||||||
[hasFocus]="fieldset.get('id').value === selectedFieldSetId"
|
[hasFocus]="fieldset.get('id').value === selectedFieldSetId"
|
||||||
[datasetProfileId]="datasetProfileId"
|
[datasetProfileId]="datasetProfileId"
|
||||||
[validationErrorModel]="validationErrorModel"
|
[validationErrorModel]="validationErrorModel"
|
||||||
[rootPath]="rootPath + 'fieldSets[' + i + '].'">
|
[validationRootPath]="validationRootPath + '.fieldSets[' + i + ']'">
|
||||||
</app-description-template-editor-composite-field-component>
|
</app-description-template-editor-composite-field-component>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
|
@ -29,7 +29,7 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
|
||||||
@Output() addNewFieldSet = new EventEmitter<UntypedFormGroup>();
|
@Output() addNewFieldSet = new EventEmitter<UntypedFormGroup>();
|
||||||
@Output() cloneFieldSet = new EventEmitter<UntypedFormGroup>();
|
@Output() cloneFieldSet = new EventEmitter<UntypedFormGroup>();
|
||||||
@Input() validationErrorModel: ValidationErrorModel;
|
@Input() validationErrorModel: ValidationErrorModel;
|
||||||
@Input() rootPath: string;
|
@Input() validationRootPath: string;
|
||||||
|
|
||||||
|
|
||||||
idprefix = "id";
|
idprefix = "id";
|
||||||
|
@ -125,7 +125,6 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
|
||||||
// return parent;
|
// return parent;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
private initialize() {
|
private initialize() {
|
||||||
if (this.tocentry.type === ToCEntryType.Section) {
|
if (this.tocentry.type === ToCEntryType.Section) {
|
||||||
this.form = this.tocentry.form;
|
this.form = this.tocentry.form;
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
import { Component, Input, OnInit } from '@angular/core';
|
||||||
import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
|
import { UntypedFormGroup } from '@angular/forms';
|
||||||
import { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
import { Guid } from '@common/types/guid';
|
|
||||||
import { DescriptionTemplateFieldEditorModel, DescriptionTemplateFieldSetEditorModel, DescriptionTemplateSectionEditorModel } from '../../description-template-editor.model';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-description-template-editor-section-component',
|
selector: 'app-description-template-editor-section-component',
|
||||||
|
@ -13,63 +11,10 @@ import { DescriptionTemplateFieldEditorModel, DescriptionTemplateFieldSetEditorM
|
||||||
export class DescriptionTemplateEditorSectionComponent extends BaseComponent implements OnInit {
|
export class DescriptionTemplateEditorSectionComponent extends BaseComponent implements OnInit {
|
||||||
|
|
||||||
@Input() form: UntypedFormGroup;
|
@Input() form: UntypedFormGroup;
|
||||||
@Input() indexPath: string;
|
|
||||||
@Input() viewOnly: boolean;
|
|
||||||
@Output() fieldsetAdded = new EventEmitter<String>(); //returns the id of the fieldset added
|
|
||||||
|
|
||||||
constructor() { super(); }
|
constructor() { super(); }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addField() {
|
|
||||||
const fieldSet: DescriptionTemplateFieldSetEditorModel = new DescriptionTemplateFieldSetEditorModel();
|
|
||||||
fieldSet.ordinal = (this.form.get('fieldSets') as UntypedFormArray).length;
|
|
||||||
|
|
||||||
const field: DescriptionTemplateFieldEditorModel = new DescriptionTemplateFieldEditorModel();
|
|
||||||
field.id = Guid.create().toString();
|
|
||||||
field.ordinal = 0;//first field in fields
|
|
||||||
fieldSet.fields.push(field);
|
|
||||||
fieldSet.id = Guid.create().toString();
|
|
||||||
|
|
||||||
const fieldsetsArray = this.form.get('fieldSets') as UntypedFormArray;
|
|
||||||
fieldsetsArray.push(fieldSet.buildForm());
|
|
||||||
|
|
||||||
const fieldSetForm = fieldsetsArray.at(fieldsetsArray.length - 1);
|
|
||||||
//emit id inserted
|
|
||||||
if (fieldSetForm) {
|
|
||||||
const id: string = fieldSetForm.get('id').value;
|
|
||||||
this.fieldsetAdded.emit(id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
addSectioninSection() {
|
|
||||||
const section: DescriptionTemplateSectionEditorModel = new DescriptionTemplateSectionEditorModel();
|
|
||||||
//this.dataModel.sections.push(section);
|
|
||||||
(<UntypedFormArray>this.form.get('sections')).push(section.buildForm());
|
|
||||||
}
|
|
||||||
|
|
||||||
DeleteSectionInSection(index) {
|
|
||||||
//this.dataModel.sections.splice(index, 1);
|
|
||||||
(<UntypedFormArray>this.form.get('sections')).removeAt(index);
|
|
||||||
}
|
|
||||||
|
|
||||||
deleteFieldSet(index) {
|
|
||||||
//this.dataModel.fieldSets.splice(index, 1);
|
|
||||||
(<UntypedFormArray>this.form.get('fieldSets')).removeAt(index);
|
|
||||||
}
|
|
||||||
|
|
||||||
keepPageSelectionValid(pagesJson: Array<any>) {
|
|
||||||
const selectedPage = this.form.get('page').value as String;
|
|
||||||
// const pages: Array<PageEditorModel> = JsonSerializer.fromJSONArray(pagesJson, Page);
|
|
||||||
if (pagesJson.find(elem => elem.id === selectedPage) === undefined) {
|
|
||||||
this.form.get('page').reset();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getFieldTile(formGroup: UntypedFormGroup, index: number) {
|
|
||||||
if (formGroup.get('title') && formGroup.get('title').value && formGroup.get('title').value.length > 0) { return formGroup.get('title').value; }
|
|
||||||
return "Field " + (index + 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -178,7 +178,15 @@
|
||||||
|
|
||||||
|
|
||||||
<div class="row sticky-top table-container" style="top : 7em;">
|
<div class="row sticky-top table-container" style="top : 7em;">
|
||||||
<description-template-table-of-contents class="toc-pane-container col" style="margin-bottom: 2em;" [links]="toCEntries" (itemClick)="displayItem($event)" (createEntry)="addNewEntry($event)" (removeEntry)="onRemoveEntry($event)" [itemSelected]="selectedTocEntry" [viewOnly]="formGroup.disabled" (dataNeedsRefresh)="onDataNeedsRefresh($event)" [colorizeInvalid]="colorizeInvalid">
|
<description-template-table-of-contents class="toc-pane-container col" style="margin-bottom: 2em;"
|
||||||
|
[links]="toCEntries"
|
||||||
|
(itemClick)="displayItem($event)"
|
||||||
|
(createEntry)="addNewEntry($event)"
|
||||||
|
(removeEntry)="onRemoveEntry($event)"
|
||||||
|
[itemSelected]="selectedTocEntry"
|
||||||
|
[viewOnly]="formGroup.disabled"
|
||||||
|
(dataNeedsRefresh)="onDataNeedsRefresh($event)"
|
||||||
|
[colorizeInvalid]="colorizeInvalid">
|
||||||
</description-template-table-of-contents>
|
</description-template-table-of-contents>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -213,8 +221,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12" *ngIf="(selectedTocEntry.type === tocEntryEnumValues.Section) || (selectedTocEntry.type === tocEntryEnumValues.FieldSet)">
|
<div class="col-12" *ngIf="(selectedTocEntry.type === tocEntryEnumValues.Section) || (selectedTocEntry.type === tocEntryEnumValues.FieldSet)">
|
||||||
<app-description-template-editor-section-fieldset-component [tocentry]="selectedTocEntry" [viewOnly]="viewOnly" [datasetProfileId]="datasetProfileId" [validationErrorModel]="editorModel.validationErrorModel" [rootPath]="rootPath"
|
<app-description-template-editor-section-fieldset-component
|
||||||
(addNewFieldSet)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {formGroup: $event}})" (removeFieldSet)="onRemoveEntry(_findTocEntryById($event, toCEntries))" (cloneFieldSet)="cloneFieldSet($event)" (selectedEntryId)="displayItem(_findTocEntryById($event, toCEntries))" (dataNeedsRefresh)="onDataNeedsRefresh()">
|
[tocentry]="selectedTocEntry"
|
||||||
|
[viewOnly]="viewOnly"
|
||||||
|
[datasetProfileId]="datasetProfileId"
|
||||||
|
[validationErrorModel]="editorModel.validationErrorModel"
|
||||||
|
[validationRootPath]="selectedTocEntry.validationRootPath"
|
||||||
|
(addNewFieldSet)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {formGroup: $event}})" (removeFieldSet)="onRemoveEntry(_findTocEntryById($event, toCEntries))" (cloneFieldSet)="cloneFieldSet($event)" (selectedEntryId)="displayItem(_findTocEntryById($event, toCEntries))" (dataNeedsRefresh)="onDataNeedsRefresh()"
|
||||||
|
>
|
||||||
|
|
||||||
</app-description-template-editor-section-fieldset-component>
|
</app-description-template-editor-section-fieldset-component>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -441,7 +441,8 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
|
||||||
form: pageElement,
|
form: pageElement,
|
||||||
numbering: (i + 1).toString(),
|
numbering: (i + 1).toString(),
|
||||||
subEntriesType: ToCEntryType.Section,
|
subEntriesType: ToCEntryType.Section,
|
||||||
subEntries: []
|
subEntries: [],
|
||||||
|
validationRootPath: 'definition.pages[' + i + ']'
|
||||||
} as ToCEntry;
|
} as ToCEntry;
|
||||||
|
|
||||||
const subEntries = [];
|
const subEntries = [];
|
||||||
|
@ -452,10 +453,11 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
|
||||||
label: sectionElement.get('title').value,
|
label: sectionElement.get('title').value,
|
||||||
type: ToCEntryType.Section,
|
type: ToCEntryType.Section,
|
||||||
form: sectionElement,
|
form: sectionElement,
|
||||||
numbering: page.numbering + '.' + (subEntries.length + 1)
|
numbering: page.numbering + '.' + (subEntries.length + 1),
|
||||||
|
validationRootPath: page.validationRootPath + '.sections[' + i + ']'
|
||||||
} as ToCEntry;
|
} as ToCEntry;
|
||||||
const sectionItems = this.populateSections(sectionElement.get('sections') as UntypedFormArray, item.numbering);
|
const sectionItems = this.populateSections(sectionElement.get('sections') as UntypedFormArray, item.numbering, item.validationRootPath);
|
||||||
const fieldSetItems = this.populateFieldSets(sectionElement.get('fieldSets') as UntypedFormArray, item.numbering);
|
const fieldSetItems = this.populateFieldSets(sectionElement.get('fieldSets') as UntypedFormArray, item.numbering, item.validationRootPath);
|
||||||
|
|
||||||
if (sectionItems != null) {
|
if (sectionItems != null) {
|
||||||
item.subEntries = sectionItems;
|
item.subEntries = sectionItems;
|
||||||
|
@ -483,7 +485,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
private populateSections(sections: UntypedFormArray, existingNumbering: string): ToCEntry[] {
|
private populateSections(sections: UntypedFormArray, existingNumbering: string, validationRootPath: string): ToCEntry[] {
|
||||||
if (sections == null || sections.controls == null || sections.controls.length == 0) { return null; }
|
if (sections == null || sections.controls == null || sections.controls.length == 0) { return null; }
|
||||||
|
|
||||||
const result: ToCEntry[] = [];
|
const result: ToCEntry[] = [];
|
||||||
|
@ -494,10 +496,11 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
|
||||||
label: sectionElement.get('title').value,
|
label: sectionElement.get('title').value,
|
||||||
type: ToCEntryType.Section,
|
type: ToCEntryType.Section,
|
||||||
form: sectionElement,
|
form: sectionElement,
|
||||||
numbering: existingNumbering + '.' + (i + 1)
|
numbering: existingNumbering + '.' + (i + 1),
|
||||||
|
validationRootPath: validationRootPath + '.sections[' + i + ']'
|
||||||
} as ToCEntry;
|
} as ToCEntry;
|
||||||
const sectionItems = this.populateSections(sectionElement.get('sections') as UntypedFormArray, item.numbering);
|
const sectionItems = this.populateSections(sectionElement.get('sections') as UntypedFormArray, item.numbering, item.validationRootPath);
|
||||||
const fieldSetItems = this.populateFieldSets(sectionElement.get('fieldSets') as UntypedFormArray, item.numbering);
|
const fieldSetItems = this.populateFieldSets(sectionElement.get('fieldSets') as UntypedFormArray, item.numbering, item.validationRootPath);
|
||||||
if (sectionItems != null) {
|
if (sectionItems != null) {
|
||||||
item.subEntries = sectionItems;
|
item.subEntries = sectionItems;
|
||||||
item.subEntriesType = ToCEntryType.Section;
|
item.subEntriesType = ToCEntryType.Section;
|
||||||
|
@ -516,7 +519,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
private populateFieldSets(fieldSets: UntypedFormArray, existingNumbering: string): ToCEntry[] {
|
private populateFieldSets(fieldSets: UntypedFormArray, existingNumbering: string, validationRootPath: string): ToCEntry[] {
|
||||||
if (fieldSets == null || fieldSets.controls == null || fieldSets.controls.length == 0) { return null; }
|
if (fieldSets == null || fieldSets.controls == null || fieldSets.controls.length == 0) { return null; }
|
||||||
|
|
||||||
const result: ToCEntry[] = [];
|
const result: ToCEntry[] = [];
|
||||||
|
@ -528,7 +531,8 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
|
||||||
type: ToCEntryType.FieldSet,
|
type: ToCEntryType.FieldSet,
|
||||||
//subEntries: this.populateSections((fieldSetElement.get('fieldSets') as FormArray), existingNumbering + '.' + i),
|
//subEntries: this.populateSections((fieldSetElement.get('fieldSets') as FormArray), existingNumbering + '.' + i),
|
||||||
form: fieldSetElement,
|
form: fieldSetElement,
|
||||||
numbering: existingNumbering + '.' + (i + 1)
|
numbering: existingNumbering + '.' + (i + 1),
|
||||||
|
validationRootPath: validationRootPath
|
||||||
} as ToCEntry)
|
} as ToCEntry)
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -582,6 +586,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
|
||||||
page.id = Guid.create().toString();
|
page.id = Guid.create().toString();
|
||||||
if (isNaN(pages.length)) { page.ordinal = 0; } else { page.ordinal = pages.length; }
|
if (isNaN(pages.length)) { page.ordinal = 0; } else { page.ordinal = pages.length; }
|
||||||
const pageForm = page.buildForm({ rootPath: 'definition.pages[' + pages.length + '].' });
|
const pageForm = page.buildForm({ rootPath: 'definition.pages[' + pages.length + '].' });
|
||||||
|
console.log('definition.pages[' + pages.length + '].');
|
||||||
// this.dataModel.pages.push(page);
|
// this.dataModel.pages.push(page);
|
||||||
|
|
||||||
pages.push(pageForm);
|
pages.push(pageForm);
|
||||||
|
|
|
@ -8,6 +8,8 @@ export interface ToCEntry {
|
||||||
type: ToCEntryType;
|
type: ToCEntryType;
|
||||||
form: AbstractControl;
|
form: AbstractControl;
|
||||||
numbering: string;
|
numbering: string;
|
||||||
|
|
||||||
|
validationRootPath: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -292,8 +292,8 @@ export class DescriptionPropertyDefinitionFieldSetItemEditorModel implements Des
|
||||||
}
|
}
|
||||||
|
|
||||||
const formGroup = this.formBuilder.group({});
|
const formGroup = this.formBuilder.group({});
|
||||||
formGroup.addControl('comment', new FormControl({ value: 'this.comment', disabled: disabled }, context.getValidation('comment').validators));
|
formGroup.addControl('comment', new FormControl({ value: this.comment, disabled: disabled }, context.getValidation('comment').validators));
|
||||||
formGroup.addControl('ordinal', new FormControl({ value: 5, disabled: disabled }, context.getValidation('ordinal').validators));
|
formGroup.addControl('ordinal', new FormControl({ value: this.ordinal, disabled: disabled }, context.getValidation('ordinal').validators));
|
||||||
|
|
||||||
|
|
||||||
const fieldsFormGroup = this.formBuilder.group({});
|
const fieldsFormGroup = this.formBuilder.group({});
|
||||||
|
|
Loading…
Reference in New Issue