Dataset profile editor. Ui fixes. mat-stepper header fix and preview fixes.
This commit is contained in:
parent
a8074f6239
commit
96ebf7c0d0
|
@ -46,7 +46,7 @@ import { ParseStatus } from './listing/pipe/parse-status.pipe';
|
|||
import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents';
|
||||
import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
|
||||
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
|
||||
|
||||
import {DragDropModule} from '@angular/cdk/drag-drop';
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonUiModule,
|
||||
|
@ -57,7 +57,8 @@ import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/vi
|
|||
NgxDropzoneModule,
|
||||
FormProgressIndicationModule,
|
||||
DatasetModule,
|
||||
AngularStickyThingsModule
|
||||
AngularStickyThingsModule,
|
||||
DragDropModule
|
||||
],
|
||||
declarations: [
|
||||
DatasetProfileListingComponent,
|
||||
|
|
|
@ -119,7 +119,7 @@
|
|||
|
||||
<div class="">
|
||||
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
|
||||
<div class="row field-container" style="position: relative;" (click)="setTargetField(field)"
|
||||
<div class="row field-container bg-white" style="position: relative;" (click)="setTargetField(field)"
|
||||
[ngClass]="{'field-container-active': field.get('id').value === targetField?.get('id').value}">
|
||||
<div class="field-id-container">
|
||||
{{form.get('fields').get(''+i).get('id').value}}
|
||||
|
@ -238,10 +238,10 @@
|
|||
<app-form-composite-field [form]="previewForm" *ngIf="previewForm">
|
||||
|
||||
</app-form-composite-field> -->
|
||||
|
||||
<!--
|
||||
Current FORM: {{this.form.value |json}}
|
||||
<br>
|
||||
Target: {{this.targetField?.value |json}}
|
||||
Target: {{this.targetField?.value |json}} -->
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -146,11 +146,22 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
|||
addNewField() {
|
||||
const field: FieldEditorModel = new FieldEditorModel();
|
||||
field.id=Guid.create().toString();
|
||||
|
||||
field.ordinal = (this.form.get('fields') as FormArray).length;
|
||||
|
||||
(<FormArray>this.form.get('fields')).push(field.buildForm());
|
||||
}
|
||||
|
||||
DeleteField(index) {
|
||||
(<FormArray>this.form.get('fields')).removeAt(index);
|
||||
|
||||
const fieldsForm = <FormArray>this.form.get('fields');
|
||||
fieldsForm.removeAt(index);
|
||||
|
||||
// calculate ordinals
|
||||
fieldsForm.controls.forEach((field, idx)=>{
|
||||
field.get('ordinal').setValue(idx);
|
||||
field.updateValueAndValidity();
|
||||
})
|
||||
}
|
||||
|
||||
getFieldTile(formGroup: FormGroup, index: number) {
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
<div class="row" *ngFor="let ruleFormGroup of form['controls'] let i=index;" [formGroup]="ruleFormGroup">
|
||||
<span class="col-auto">{{i + 1}}</span>
|
||||
<span class="col-auto align-self-center">{{i + 1}}</span>
|
||||
|
||||
<span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}</span>
|
||||
<!-- <span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}</span> -->
|
||||
<!-- Value -->
|
||||
<app-component-profile-editor-default-value-component class="col" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
|
||||
<!-- <app-component-profile-editor-default-value-component class="col" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
|
||||
[formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RULES-VALUE' | translate}}"
|
||||
required="true"></app-component-profile-editor-default-value-component> -->
|
||||
|
||||
|
||||
<app-component-profile-editor-default-value-component class="col align-self-center" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
|
||||
[formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}"
|
||||
required="true"></app-component-profile-editor-default-value-component>
|
||||
|
||||
<span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</span>
|
||||
<!-- <span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</span> -->
|
||||
|
||||
<!-- Field Or Section ID -->
|
||||
<!-- <mat-form-field class="col-auto">
|
||||
|
@ -18,8 +23,8 @@
|
|||
-->
|
||||
|
||||
<!-- SELECTION -->
|
||||
<mat-form-field class="col-auto">
|
||||
<mat-label>Pick one</mat-label>
|
||||
<mat-form-field class="col align-self-center">
|
||||
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</mat-label>
|
||||
<mat-select formControlName="target" required>
|
||||
<!-- SHOW SECTIONS -->
|
||||
<mat-optgroup label="Sections">
|
||||
|
@ -65,7 +70,7 @@
|
|||
<mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="col-auto"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
|
||||
<div class="col-auto align-self-center"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -30,7 +30,7 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
|
|||
|
||||
ngOnInit(): void {
|
||||
this.options = this.getOptions();
|
||||
|
||||
// TODO TO SEE IF THE COMPONENT IS NOT DESTROYED AND THE FORM UPDATES
|
||||
|
||||
this.sectionOptions = [];
|
||||
this.fieldOptions = [];
|
||||
|
|
|
@ -23,17 +23,22 @@ export class DatasetProfileEditorSectionComponent extends BaseComponent implemen
|
|||
constructor() { super(); }
|
||||
|
||||
ngOnInit() {
|
||||
this.form.root.get('pages').valueChanges
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(x =>
|
||||
this.keepPageSelectionValid(x)
|
||||
);
|
||||
|
||||
//TODO
|
||||
// this.form.root.get('pages').valueChanges
|
||||
// .pipe(takeUntil(this._destroyed))
|
||||
// .subscribe(x =>
|
||||
// this.keepPageSelectionValid(x)
|
||||
// );
|
||||
}
|
||||
|
||||
addField() {
|
||||
const fieldSet: FieldSetEditorModel = new FieldSetEditorModel();
|
||||
fieldSet.ordinal = (this.form.get('fieldSets') as FormArray).length;
|
||||
|
||||
const field: FieldEditorModel = new FieldEditorModel();
|
||||
field.id = Guid.create().toString();
|
||||
field.ordinal = 0;//first field in fields
|
||||
fieldSet.fields.push(field);
|
||||
// if (this.dataModel.fieldSets) {
|
||||
fieldSet.id = Guid.create().toString();
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
|
||||
<div id="progress" [ngStyle]="progressStyle"></div>
|
||||
<div class="row p-1">
|
||||
<div class="col text-center" *ngFor="let step of steps; index as idx">
|
||||
<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
|
||||
<span (click)="stepper.selectedIndex=idx" style="cursor: pointer">
|
||||
{{step.label}}
|
||||
</span>
|
||||
|
@ -259,7 +259,7 @@
|
|||
|
||||
|
||||
|
||||
<ng-container *ngIf="false">
|
||||
<ng-container *ngIf="true">
|
||||
|
||||
<div class="d-flex">
|
||||
<!-- SAVE BUTTON -->
|
||||
|
@ -299,11 +299,11 @@
|
|||
|
||||
</ng-container>
|
||||
|
||||
<div class="row">
|
||||
<!-- <div class="row">
|
||||
<button (click)="printForm()">
|
||||
console form
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="row">
|
||||
<button (click)="foo()">foo</button>
|
||||
</div> -->
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
.stepper{
|
||||
background-color: transparent;
|
||||
min-height: 500px;
|
||||
}
|
||||
.content-displayer{
|
||||
background-color: #fff;
|
||||
|
|
|
@ -178,13 +178,14 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
// this.addSection();
|
||||
// this.addPage();
|
||||
this.visibilityRulesService.buildVisibilityRules([],this.form);
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.steps = this.stepper.steps;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
prepareForm() {
|
||||
this.visibilityRulesService.buildVisibilityRules([],this.form);
|
||||
|
@ -201,6 +202,15 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
// });
|
||||
});
|
||||
this.form.updateValueAndValidity();
|
||||
setTimeout(() => {
|
||||
this.steps = this.stepper.steps;
|
||||
});
|
||||
|
||||
//SHOW THE FIRST PAGE
|
||||
const tocentries = this.getTocEntries();
|
||||
if(tocentries && tocentries.length){
|
||||
this.selectedTocEntry = tocentries[0];
|
||||
}
|
||||
|
||||
//this.getPreview();
|
||||
|
||||
|
@ -674,6 +684,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
section.id = Guid.create().toString();
|
||||
let sectionsArray:FormArray;
|
||||
|
||||
//TODO CHECK FOR FORM.ROOT ERROR
|
||||
if (parent.type === ToCEntryType.Page) {
|
||||
//FIRST LEVEL SECTION
|
||||
|
||||
|
@ -709,8 +720,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
//create one field form fieldset
|
||||
const field: FieldEditorModel = new FieldEditorModel(); //to ask
|
||||
field.id = Guid.create().toString();
|
||||
field.ordinal = fieldSet.fields.length;
|
||||
field.ordinal = 0;//first filed in the fields list
|
||||
fieldSet.fields.push(field);
|
||||
// field.ordinal = fieldSet.fields.length-1;
|
||||
|
||||
//give fieldset id and ordinal
|
||||
fieldSet.id = Guid.create().toString();
|
||||
|
@ -1016,7 +1028,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
|
||||
|
||||
//first level is always pages
|
||||
model.pages = toCentries.map(entry=>{
|
||||
model.pages = toCentries.map((entry,idx)=>{
|
||||
if( !(entry.type == ToCEntryType.Page)){
|
||||
return null;
|
||||
}
|
||||
|
@ -1034,17 +1046,17 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
sectionModel.description = section.form.get('description').value;
|
||||
sectionModel.page = entry.form.get('ordinal').value;
|
||||
sectionModel.title = section.label;
|
||||
sectionModel.numbering = section.numbering;
|
||||
sectionModel.numbering = (idx+1).toString();
|
||||
|
||||
|
||||
if(section.subEntriesType == ToCEntryType.Section){
|
||||
sectionModel.sections = this._buildSectionsRecursively(section.subEntries);
|
||||
sectionModel.sections = this._buildSectionsRecursively(section.subEntries, sectionModel.numbering);
|
||||
}else{
|
||||
sectionModel.compositeFields = this._buildFormFields(section.subEntries)
|
||||
sectionModel.compositeFields = this._buildFormFields(section.subEntries, sectionModel.numbering)
|
||||
}
|
||||
|
||||
return sectionModel;
|
||||
})
|
||||
});
|
||||
};
|
||||
return pageModel;
|
||||
|
||||
|
@ -1080,7 +1092,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
}
|
||||
|
||||
visibilityRules:Rule[];
|
||||
private _buildSectionsRecursively( tocentries: ToCEntry[]): DatasetDescriptionSectionEditorModel[]{
|
||||
private _buildSectionsRecursively( tocentries: ToCEntry[], parentNumbering:string): DatasetDescriptionSectionEditorModel[]{
|
||||
|
||||
|
||||
if(!tocentries) return null;
|
||||
|
@ -1088,7 +1100,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
|
||||
const result: Array<DatasetDescriptionSectionEditorModel> = [];
|
||||
|
||||
tocentries.forEach(tocentry=>{
|
||||
tocentries.forEach((tocentry, idx)=>{
|
||||
|
||||
const sectionModel = new DatasetDescriptionSectionEditorModel();
|
||||
sectionModel.id = tocentry.id;
|
||||
|
@ -1096,13 +1108,14 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
sectionModel.description = tocentry.form.get('description').value;
|
||||
// sectionModel.page = entry.form.get('ordinal').value;
|
||||
sectionModel.title = tocentry.label;
|
||||
sectionModel.numbering = tocentry.numbering;
|
||||
// sectionModel.numbering = tocentry.numbering;
|
||||
sectionModel.numbering = parentNumbering+"."+(idx+1);;
|
||||
|
||||
if(tocentry.subEntriesType == ToCEntryType.Section){
|
||||
sectionModel.sections = this._buildSectionsRecursively(tocentry.subEntries);
|
||||
sectionModel.sections = this._buildSectionsRecursively(tocentry.subEntries, sectionModel.numbering);
|
||||
|
||||
}else{
|
||||
sectionModel.compositeFields = this._buildFormFields(tocentry.subEntries);
|
||||
sectionModel.compositeFields = this._buildFormFields(tocentry.subEntries, sectionModel.numbering);
|
||||
}
|
||||
|
||||
result.push(sectionModel);
|
||||
|
@ -1111,12 +1124,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
return result;
|
||||
}
|
||||
|
||||
private _buildFormFields(tocentries: ToCEntry[]):DatasetDescriptionCompositeFieldEditorModel[]{
|
||||
private _buildFormFields(tocentries: ToCEntry[], parentNumbering: string):DatasetDescriptionCompositeFieldEditorModel[]{
|
||||
if(!tocentries) return null;
|
||||
|
||||
const fieldsets:DatasetDescriptionCompositeFieldEditorModel[] = [];
|
||||
|
||||
tocentries.forEach(fs=>{
|
||||
tocentries.forEach((fs, idx)=>{
|
||||
|
||||
const fieldset = new DatasetDescriptionCompositeFieldEditorModel();
|
||||
|
||||
|
@ -1126,7 +1139,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
fieldset.multiplicity = fs.form.get('multiplicity').value;
|
||||
fieldset.additionalInformation = fs.form.get('additionalInformation').value;
|
||||
fieldset.ordinal = fs.form.get('ordinal').value;
|
||||
fieldset.numbering = fs.numbering;
|
||||
// fieldset.numbering = fs.numbering;
|
||||
fieldset.numbering = parentNumbering+"."+(idx+1);
|
||||
fieldset.hasCommentField = fs.form.get('hasCommentField').value;
|
||||
fieldset.title = fs.label;
|
||||
// fieldset.fields = (fs.form.get('fields') as FormArray).getRawValue();
|
||||
|
@ -1139,6 +1153,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
fieldModel.viewStyle = (field.get('viewStyle') as FormGroup).getRawValue();
|
||||
// fieldModel.defaultValue = (field.get('defaultValue') as FormGroup).getRawValue();
|
||||
fieldModel.value = (field.get('defaultValue') as FormGroup).get('value').value;
|
||||
fieldModel.defaultValue = fieldModel.value;
|
||||
fieldModel.page = field.get('page').value;
|
||||
fieldModel.validations = field.get('validations').value;
|
||||
|
||||
|
|
|
@ -16,7 +16,9 @@
|
|||
|
||||
<!-- When item is not selected then show only the pages (first level) -->
|
||||
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
|
||||
<div *ngFor="let link of links" class="docs-link mt-0" [ngClass]="{'border-left':itemSelected?.id == parentLink?.id}">
|
||||
<div cdkDropList>
|
||||
<ng-container *ngFor="let link of links">
|
||||
<div class="docs-link mt-0" [ngClass]="{'border-left':itemSelected?.id == parentLink?.id}">
|
||||
<!-- <div class="link-name"> -->
|
||||
|
||||
<!-- <div class="table-item row">
|
||||
|
@ -44,7 +46,7 @@
|
|||
</div>
|
||||
</ng-container> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <button cdkDragHandle>drab</button> -->
|
||||
<div class="ml-2">
|
||||
<app-dataset-profile-table-of-contents-internal-section
|
||||
[links]="link.subEntries"
|
||||
|
@ -58,6 +60,9 @@
|
|||
</div>
|
||||
</div><!-- END OF LOOP-->
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
<!-- BUILD SUBENTRIES IF THEY DONT EXIST -- CURRENT ITEM DOES HAVE CHILDREN -->
|
||||
<div *ngIf="(!links && parentLink.type!= tocEntryType.FieldSet) && !viewOnly &&parentLink?.id == itemSelected?.id" class="docs-link mt-0">
|
||||
<div class="ml-2">
|
||||
|
|
|
@ -11,7 +11,8 @@
|
|||
(createFooEntry)="createNewEntry($event)"
|
||||
[parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links }"
|
||||
[itemSelected]="itemSelected"
|
||||
[viewOnly]="viewOnly"></app-dataset-profile-table-of-contents-internal-section>
|
||||
[viewOnly]="viewOnly"
|
||||
></app-dataset-profile-table-of-contents-internal-section>
|
||||
|
||||
<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">
|
||||
<span class="link-name" (click)="itemClicked(link)"><span>{{link.label}}</span></span>
|
||||
|
@ -19,4 +20,23 @@
|
|||
</span> -->
|
||||
<!-- </nav> -->
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
<div class="bg-warning">
|
||||
<ul cdkDropList >
|
||||
<li cdkDrag>Item2</li>
|
||||
<li cdkDrag>
|
||||
<ul cdkDropList>
|
||||
<li cdkDrag> subitem1</li>
|
||||
<li cdkDrag> subitem2</li>
|
||||
<li cdkDrag> subitem3</li>
|
||||
<li cdkDrag> subitem4</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li cdkDrag>Item4</li>
|
||||
<li cdkDrag>Item5</li>
|
||||
</ul>
|
||||
|
||||
</div> -->
|
||||
</div>
|
Loading…
Reference in New Issue