More Dataset Profile editor changes
This commit is contained in:
parent
8e93a02019
commit
1614945185
|
@ -69,10 +69,29 @@
|
||||||
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
|
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<dataset-profile-table-of-contents class="toc-pane-container" [links]="getTocEntries()" (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)"></dataset-profile-table-of-contents>
|
<dataset-profile-table-of-contents class="toc-pane-container" [links]="getTocEntries()" (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (itemClick)="displayItem($event)"></dataset-profile-table-of-contents>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<!-- <mat-accordion class="col-12" [multi]="true">
|
<div class="row">
|
||||||
|
<app-dataset-profile-editor-section-component *ngIf="profileEditorConfig" class="col-12"
|
||||||
|
[form]="profileEditorConfig.form"
|
||||||
|
[indexPath]="'s' + profileEditorConfig.index"
|
||||||
|
[dataModel]="profileEditorConfig.sectionEditorModel"
|
||||||
|
[viewOnly]="viewOnly">
|
||||||
|
</app-dataset-profile-editor-section-component>
|
||||||
|
|
||||||
|
<app-dataset-profile-editor-composite-field-component class="col-12"
|
||||||
|
*ngIf="profileEditorCompositeConfig"
|
||||||
|
[form]="profileEditorCompositeConfig.form"
|
||||||
|
[indexPath]="profileEditorCompositeConfig.index"
|
||||||
|
[viewOnly]="viewOnly">
|
||||||
|
|
||||||
|
</app-dataset-profile-editor-composite-field-component>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<mat-accordion class="col-12" [multi]="true">
|
||||||
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
|
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title class="toc-page-header">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
|
<mat-panel-title class="toc-page-header">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
|
||||||
|
|
|
@ -29,7 +29,7 @@ import { MatomoService } from '@app/core/services/matomo/matomo-service';
|
||||||
import { Link, LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
|
import { Link, LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
|
||||||
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
|
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
|
||||||
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
|
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
|
||||||
import { ToCEntry } from '../table-of-contents/table-of-contents-entry';
|
import { ToCEntry, ToCEntryType } from '../table-of-contents/table-of-contents-entry';
|
||||||
|
|
||||||
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
|
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
|
||||||
|
|
||||||
|
@ -57,6 +57,27 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
nestedIndex: number = 0;
|
nestedIndex: number = 0;
|
||||||
errorMessages: string[] = [];
|
errorMessages: string[] = [];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
profileEditorConfig:{
|
||||||
|
form: FormGroup,
|
||||||
|
index: string,
|
||||||
|
id: string,
|
||||||
|
sectionEditorModel?:SectionEditorModel
|
||||||
|
};
|
||||||
|
profileEditorCompositeConfig:{
|
||||||
|
form: FormGroup,
|
||||||
|
index: string,
|
||||||
|
id: string
|
||||||
|
};
|
||||||
|
|
||||||
|
isSectionControl: boolean = false;
|
||||||
|
|
||||||
|
// sectionIdPreviewed:string = null;
|
||||||
|
// currentSubForm:FormGroup = null;
|
||||||
|
// currentSectionIndex: number = null;
|
||||||
|
// currentSectionEditorModel: SectionEditorModel = null;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private datasetProfileService: DatasetProfileService,
|
private datasetProfileService: DatasetProfileService,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
|
@ -501,7 +522,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
(this.form.get('pages') as FormArray).controls.forEach((pageElement, i) => {
|
(this.form.get('pages') as FormArray).controls.forEach((pageElement, i) => {
|
||||||
result.push({
|
result.push({
|
||||||
id: pageElement.get('id').value,
|
id: pageElement.get('id').value,
|
||||||
label: pageElement.get('title').value
|
label: pageElement.get('title').value,
|
||||||
|
type: ToCEntryType.Page
|
||||||
} as ToCEntry)
|
} as ToCEntry)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -512,10 +534,121 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
|
|
||||||
pageToAdd.subEntries.push({
|
pageToAdd.subEntries.push({
|
||||||
id: sectionElement.get('id').value,
|
id: sectionElement.get('id').value,
|
||||||
label: sectionElement.get('title').value
|
label: sectionElement.get('title').value,
|
||||||
|
type: ToCEntryType.Section
|
||||||
} as ToCEntry)
|
} as ToCEntry)
|
||||||
});
|
});
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
displayItem(entries: ToCEntry[]):void{
|
||||||
|
|
||||||
|
console.log(this.form);
|
||||||
|
console.log(this.dataModel);
|
||||||
|
|
||||||
|
this.profileEditorConfig = null;
|
||||||
|
|
||||||
|
let entry = entries[0];
|
||||||
|
console.log(entries);
|
||||||
|
|
||||||
|
|
||||||
|
if(entry.subEntries && (entry.subEntries.length>0)){// its a page
|
||||||
|
// this.sectionIdPreviewed = entry.id;
|
||||||
|
const valuesArray = this.form.get('sections').value;
|
||||||
|
|
||||||
|
|
||||||
|
let currentVal = entry.id;
|
||||||
|
|
||||||
|
let indexArray:string[] = valuesArray.map(element=> element.page);
|
||||||
|
|
||||||
|
let index = indexArray.indexOf(currentVal);
|
||||||
|
let subForm = (this.form.get('sections') as FormArray).controls[index] as FormGroup;
|
||||||
|
let currentEditor = this.dataModel.sections.filter(section=> section.page == entry.id)[0];
|
||||||
|
|
||||||
|
|
||||||
|
this.profileEditorConfig = {
|
||||||
|
id: entry.id,
|
||||||
|
form: subForm,
|
||||||
|
index: index.toString(),
|
||||||
|
sectionEditorModel: currentEditor
|
||||||
|
};
|
||||||
|
|
||||||
|
this.isSectionControl = false;
|
||||||
|
// this.currentSubForm = subForm;
|
||||||
|
// this.currentSectionIndex = index;
|
||||||
|
// this.currentSectionEditorModel = currentEditor;
|
||||||
|
|
||||||
|
// this.isCompoSiteFieldEditor = true;
|
||||||
|
|
||||||
|
}else if(entries.length == 2){//its section
|
||||||
|
|
||||||
|
this.isSectionControl = true;
|
||||||
|
|
||||||
|
const valuesArray = this.form.get('sections').value;
|
||||||
|
|
||||||
|
|
||||||
|
let currentVal = entries[1].id // Parent node entry.id;
|
||||||
|
|
||||||
|
let indexArray:string[] = valuesArray.map(element=> element.page);
|
||||||
|
|
||||||
|
let index = indexArray.indexOf(currentVal);
|
||||||
|
|
||||||
|
|
||||||
|
//Section Form
|
||||||
|
const sectionForm = (this.form.get('sections') as FormArray).controls[index] as FormGroup;
|
||||||
|
|
||||||
|
const sectionFormControls = sectionForm.get('fieldSets')['controls'];
|
||||||
|
|
||||||
|
const fieldSetsIds = sectionForm.get('fieldSets').value;//.map(fieldset => fieldset.id);
|
||||||
|
// const fieldsetIndex = fieldSetsIds.indexOf(entries[0].id);
|
||||||
|
|
||||||
|
console.log(fieldSetsIds);
|
||||||
|
|
||||||
|
|
||||||
|
const sectionFormControl = sectionFormControls[0];
|
||||||
|
|
||||||
|
this.profileEditorCompositeConfig= {
|
||||||
|
id :entries[0].id,
|
||||||
|
form :sectionFormControl,
|
||||||
|
index: 's' + index + 'cf'+ 0
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// getSectionIndex(): number{
|
||||||
|
// // if(this.sectionIdPreviewed == null) return;
|
||||||
|
// const valuesArray = this.form.get('sections').value;
|
||||||
|
// let currentVal = this.sectionIdPreviewed;
|
||||||
|
// let indexArray:string[] = valuesArray.map(element=> element.page);
|
||||||
|
// let index = indexArray.indexOf(currentVal);
|
||||||
|
// console.log(index);
|
||||||
|
// return index ? index :-1;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// getCurrentEditorModel(): SectionEditorModel{
|
||||||
|
// let currentEditor = this.dataModel.sections.filter(section=> section.page == this.sectionIdPreviewed)[0];
|
||||||
|
// return currentEditor;
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// subForm(){
|
||||||
|
// const valuesArray = this.form.get('sections').value;
|
||||||
|
// let currentVal = this.sectionIdPreviewed;
|
||||||
|
// let indexArray:string[] = valuesArray.map(element=> element.page);
|
||||||
|
// let index = indexArray.indexOf(currentVal);
|
||||||
|
// let subForm = (this.form.get('sections') as FormArray).controls[index];
|
||||||
|
// console.log(subForm);
|
||||||
|
// return subForm;
|
||||||
|
// }
|
||||||
|
|
||||||
}
|
}
|
|
@ -2,4 +2,11 @@ export interface ToCEntry {
|
||||||
id: string;
|
id: string;
|
||||||
label: string;
|
label: string;
|
||||||
subEntries: ToCEntry[];
|
subEntries: ToCEntry[];
|
||||||
|
type: ToCEntryType;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export enum ToCEntryType{
|
||||||
|
Page =0,
|
||||||
|
Section = 1
|
||||||
}
|
}
|
|
@ -6,9 +6,9 @@
|
||||||
<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active">
|
<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active">
|
||||||
<span *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
|
<span *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
|
||||||
</span> -->
|
</span> -->
|
||||||
<span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-link mt-0">
|
<span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">
|
||||||
<span class="link-name"><span>{{link.label}}</span></span>
|
<span class="link-name" (click)="itemClicked(link)"><span>{{link.label}}</span></span>
|
||||||
<dataset-profile-table-of-contents *ngIf="link.subEntries" [links]="link.subEntries"></dataset-profile-table-of-contents>
|
<dataset-profile-table-of-contents *ngIf="link.subEntries" [links]="link.subEntries" (itemClick)="propagateClickToParent($event, link)"></dataset-profile-table-of-contents>
|
||||||
</span>
|
</span>
|
||||||
<!-- </nav> -->
|
<!-- </nav> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -36,6 +36,10 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
|
||||||
headerSelectors = '.toc-page-header, .toc-section-header, .toc-compositeField-header';
|
headerSelectors = '.toc-page-header, .toc-section-header, .toc-compositeField-header';
|
||||||
@Output() stepFound = new EventEmitter<LinkToScroll>();
|
@Output() stepFound = new EventEmitter<LinkToScroll>();
|
||||||
@Output() currentLinks = new EventEmitter<Link[]>();
|
@Output() currentLinks = new EventEmitter<Link[]>();
|
||||||
|
|
||||||
|
@Output() itemClick = new EventEmitter<ToCEntry[]>();
|
||||||
|
|
||||||
|
|
||||||
subscription: Subscription;
|
subscription: Subscription;
|
||||||
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
|
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
|
||||||
|
|
||||||
|
@ -159,6 +163,18 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
|
||||||
// return +link.id.split("_", 2)[1];
|
// return +link.id.split("_", 2)[1];
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
itemClicked(item: ToCEntry){
|
||||||
|
//leaf node
|
||||||
|
this.itemClick.emit([item]);
|
||||||
|
}
|
||||||
|
|
||||||
|
propagateClickToParent(childIds:ToCEntry[], currentItem: ToCEntry){
|
||||||
|
childIds.push(currentItem);
|
||||||
|
this.itemClick.emit(childIds);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LinkToScroll {
|
export interface LinkToScroll {
|
||||||
|
|
Loading…
Reference in New Issue