more dataset profile changes
This commit is contained in:
parent
1614945185
commit
6470a8e6a6
|
|
@ -44,6 +44,7 @@ import { DatasetProfileEditorValidatorFieldComponent } from './editor/components
|
|||
import { NgxDropzoneModule } from 'ngx-dropzone';
|
||||
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';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -92,7 +93,8 @@ import { DatasetProfileTableOfContents } from './table-of-contents/table-of-cont
|
|||
DatasetProfileEditorDatasetIdentifierFieldComponent,
|
||||
DatasetProfileEditorCurrencyFieldComponent,
|
||||
DatasetProfileEditorValidatorFieldComponent,
|
||||
DatasetProfileTableOfContents
|
||||
DatasetProfileTableOfContents,
|
||||
DatasetProfileTableOfContentsInternalSection
|
||||
],
|
||||
entryComponents: [
|
||||
DialogConfirmationUploadDatasetProfiles
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
<mat-radio-button [value]="false">false</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div> -->
|
||||
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
|
||||
|
||||
<!-- <h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
|
||||
translate}}</h4>
|
||||
<div class="col-12">
|
||||
<mat-card class="field-card" *ngFor="let fieldControl of form.get('fieldSets')['controls'] let i=index;">
|
||||
|
|
@ -46,12 +47,13 @@
|
|||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12"><button mat-button class="full-width" (click)="addField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
|
||||
| translate}}</button></div>
|
||||
| translate}}</button></div> -->
|
||||
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.SUB-SECTIONS-TITLE' |
|
||||
translate}}</h4>
|
||||
<div *ngIf="dataModel.sections.length > 0" class="col-12">
|
||||
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
|
||||
<div *ngIf="form.get('sections')['controls'].length > 0" class="col-12">
|
||||
<mat-expansion-panel *ngFor="let sectionFormGroup of form.get('sections')['controls']; let i=index;" #panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</mat-panel-title>
|
||||
<div class="row deleteBtn">
|
||||
|
|
@ -62,7 +64,7 @@
|
|||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
<div id="{{indexPath + 's' + i}}" *ngIf="panel.expanded" class="row">
|
||||
<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)" [dataModel]="section"
|
||||
<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)"
|
||||
[indexPath]="indexPath + 's' + i" [viewOnly]="viewOnly"></app-dataset-profile-editor-section-component>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { takeUntil } from 'rxjs/operators';
|
|||
|
||||
export class DatasetProfileEditorSectionComponent extends BaseComponent implements OnInit {
|
||||
@Input() form: FormGroup;
|
||||
@Input() dataModel: SectionEditorModel;
|
||||
//@Input() dataModel: SectionEditorModel;
|
||||
@Input() indexPath: string;
|
||||
@Input() viewOnly: boolean;
|
||||
|
||||
|
|
@ -34,26 +34,26 @@ export class DatasetProfileEditorSectionComponent extends BaseComponent implemen
|
|||
const field: FieldEditorModel = new FieldEditorModel();
|
||||
field.id = Guid.create().toString();
|
||||
fieldSet.fields.push(field);
|
||||
if (this.dataModel.fieldSets) {
|
||||
// if (this.dataModel.fieldSets) {
|
||||
fieldSet.id = Guid.create().toString();
|
||||
this.dataModel.fieldSets.push(fieldSet);
|
||||
}
|
||||
//this.dataModel.fieldSets.push(fieldSet);
|
||||
//}
|
||||
(<FormArray>this.form.get('fieldSets')).push(fieldSet.buildForm());
|
||||
}
|
||||
|
||||
addSectioninSection() {
|
||||
const section: SectionEditorModel = new SectionEditorModel();
|
||||
this.dataModel.sections.push(section);
|
||||
//this.dataModel.sections.push(section);
|
||||
(<FormArray>this.form.get('sections')).push(section.buildForm());
|
||||
}
|
||||
|
||||
DeleteSectionInSection(index) {
|
||||
this.dataModel.sections.splice(index, 1);
|
||||
//this.dataModel.sections.splice(index, 1);
|
||||
(<FormArray>this.form.get('sections')).removeAt(index);
|
||||
}
|
||||
|
||||
deleteFieldSet(index) {
|
||||
this.dataModel.fieldSets.splice(index, 1);
|
||||
//this.dataModel.fieldSets.splice(index, 1);
|
||||
(<FormArray>this.form.get('fieldSets')).removeAt(index);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -69,28 +69,63 @@
|
|||
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<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>
|
||||
<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 class="col-6">
|
||||
<div class="row">
|
||||
<app-dataset-profile-editor-section-component *ngIf="profileEditorConfig" class="col-12"
|
||||
<div class="row" *ngIf="selectedTocEntry">
|
||||
<div class="col-12" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
|
||||
|
||||
</div>
|
||||
|
||||
<app-dataset-profile-editor-section-component class="col-12"
|
||||
*ngIf="selectedTocEntry.type === tocEntryEnumValues.Section"
|
||||
[form]="selectedTocEntry.form" [indexPath]="'tbd'" [viewOnly]="viewOnly">
|
||||
</app-dataset-profile-editor-section-component>
|
||||
|
||||
<div class="col-12" *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
|
||||
<h4 style="font-weight: bold" class="col-12">
|
||||
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
|
||||
translate}}</h4>
|
||||
<div class="col-12">
|
||||
|
||||
<!-- <mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}
|
||||
</mat-card-title> -->
|
||||
<!-- <button mat-icon-button type="button" class="deleteBtn col-auto"
|
||||
(click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button> -->
|
||||
<app-dataset-profile-editor-composite-field-component class="col-12"
|
||||
[form]="selectedTocEntry.form" [indexPath]="'indexPath' + 'cf' + 'i'"
|
||||
[viewOnly]="viewOnly">
|
||||
</app-dataset-profile-editor-composite-field-component>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12"><button mat-button class="full-width" (click)="addField()"
|
||||
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
|
||||
| translate}}</button></div> -->
|
||||
</div>
|
||||
|
||||
<!-- <app-dataset-profile-editor-section-component *ngIf="this.selectedTocEntry.type === tocEntryEnumValues.Section" 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-section-component> -->
|
||||
|
||||
<app-dataset-profile-editor-composite-field-component class="col-12"
|
||||
<!-- <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>
|
||||
</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-header>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { of as observableOf, Observable } from 'rxjs';
|
||||
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormArray, FormControl, FormGroup } from '@angular/forms';
|
||||
import { Form, FormArray, FormControl, FormGroup } from '@angular/forms';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatHorizontalStepper } from '@angular/material/stepper';
|
||||
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
||||
|
|
@ -30,6 +30,7 @@ import { Link, LinkToScroll } from '@app/ui/misc/dataset-description-form/tableO
|
|||
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
|
||||
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
|
||||
import { ToCEntry, ToCEntryType } from '../table-of-contents/table-of-contents-entry';
|
||||
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
|
||||
|
||||
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
|
||||
|
||||
|
|
@ -56,16 +57,17 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
nestedCount: number[] = [];
|
||||
nestedIndex: number = 0;
|
||||
errorMessages: string[] = [];
|
||||
tocEntryEnumValues = ToCEntryType;
|
||||
|
||||
|
||||
|
||||
profileEditorConfig:{
|
||||
profileEditorConfig: {
|
||||
form: FormGroup,
|
||||
index: string,
|
||||
id: string,
|
||||
sectionEditorModel?:SectionEditorModel
|
||||
sectionEditorModel?: SectionEditorModel
|
||||
};
|
||||
profileEditorCompositeConfig:{
|
||||
profileEditorCompositeConfig: {
|
||||
form: FormGroup,
|
||||
index: string,
|
||||
id: string
|
||||
|
|
@ -89,7 +91,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
private languageInfoService: LanguageInfoService,
|
||||
private httpClient: HttpClient,
|
||||
private matomoService: MatomoService,
|
||||
|
||||
private enumUtils: EnumUtils,
|
||||
private datasetWizardService: DatasetWizardService
|
||||
) {
|
||||
super();
|
||||
|
|
@ -523,7 +525,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
result.push({
|
||||
id: pageElement.get('id').value,
|
||||
label: pageElement.get('title').value,
|
||||
type: ToCEntryType.Page
|
||||
type: ToCEntryType.Page,
|
||||
form: pageElement
|
||||
} as ToCEntry)
|
||||
});
|
||||
|
||||
|
|
@ -532,94 +535,164 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
const pageToAdd = result.filter(x => x.id == currentSectionPageId)[0];
|
||||
if (pageToAdd.subEntries == null) pageToAdd.subEntries = [];
|
||||
|
||||
pageToAdd.subEntries.push({
|
||||
const item = {
|
||||
id: sectionElement.get('id').value,
|
||||
label: sectionElement.get('title').value,
|
||||
type: ToCEntryType.Section
|
||||
} as ToCEntry)
|
||||
type: ToCEntryType.Section,
|
||||
form: sectionElement,
|
||||
numbering: pageToAdd.numbering + '.' + i
|
||||
} as ToCEntry;
|
||||
const sectionItems = this.populateSections(sectionElement.get('sections') as FormArray, item.numbering);
|
||||
const fieldSetItems = this.populateFieldSets(sectionElement.get('fieldSets') as FormArray, item.numbering);
|
||||
if (sectionItems != null) {
|
||||
item.subEntries = sectionItems;
|
||||
}
|
||||
if (fieldSetItems != null) {
|
||||
if (item.subEntries == null) {
|
||||
item.subEntries = fieldSetItems;
|
||||
} else {
|
||||
item.subEntries.push(...fieldSetItems);
|
||||
}
|
||||
}
|
||||
pageToAdd.subEntries.push(item);
|
||||
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
displayItem(entries: ToCEntry[]):void{
|
||||
private populateSections(sections: FormArray, existingNumbering: string): ToCEntry[] {
|
||||
if (sections == null || sections.controls == null || sections.controls.length == 0) { return null; }
|
||||
|
||||
console.log(this.form);
|
||||
console.log(this.dataModel);
|
||||
const result: ToCEntry[] = [];
|
||||
sections.controls.forEach((sectionElement, i) => {
|
||||
|
||||
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
|
||||
const item = {
|
||||
id: sectionElement.get('id').value,
|
||||
label: sectionElement.get('title').value,
|
||||
type: ToCEntryType.Section,
|
||||
form: sectionElement,
|
||||
numbering: existingNumbering + '.' + i
|
||||
} as ToCEntry;
|
||||
const sectionItems = this.populateSections(sectionElement.get('sections') as FormArray, item.numbering);
|
||||
const fieldSetItems = this.populateFieldSets(sectionElement.get('fieldSets') as FormArray, item.numbering);
|
||||
if (sectionItems != null) {
|
||||
item.subEntries = sectionItems;
|
||||
}
|
||||
if (fieldSetItems != null) {
|
||||
if (item.subEntries == null) {
|
||||
item.subEntries = fieldSetItems;
|
||||
} else {
|
||||
item.subEntries.push(...fieldSetItems);
|
||||
}
|
||||
}
|
||||
result.push(item);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private populateFieldSets(fieldSets: FormArray, existingNumbering: string): ToCEntry[] {
|
||||
if (fieldSets == null || fieldSets.controls == null || fieldSets.controls.length == 0) { return null; }
|
||||
|
||||
const result: ToCEntry[] = [];
|
||||
fieldSets.controls.forEach((fieldSetElement, i) => {
|
||||
|
||||
result.push({
|
||||
id: fieldSetElement.get('id').value,
|
||||
label: fieldSetElement.get('title').value,
|
||||
type: ToCEntryType.FieldSet,
|
||||
subEntries: this.populateSections((fieldSetElement.get('fieldSets') as FormArray), existingNumbering + '.' + i),
|
||||
form: fieldSetElement,
|
||||
numbering: existingNumbering + '.' + i
|
||||
} as ToCEntry)
|
||||
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
selectedTocEntry: ToCEntry
|
||||
displayItem(entry: ToCEntry): void {
|
||||
this.selectedTocEntry = entry;
|
||||
|
||||
|
||||
}
|
||||
// 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
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -637,7 +710,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
// getCurrentEditorModel(): SectionEditorModel{
|
||||
// let currentEditor = this.dataModel.sections.filter(section=> section.page == this.sectionIdPreviewed)[0];
|
||||
// return currentEditor;
|
||||
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
|
@ -651,4 +724,14 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
// return subForm;
|
||||
// }
|
||||
|
||||
getFieldTile(formGroup: FormGroup, 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);
|
||||
}
|
||||
|
||||
deleteFieldSet(formArray: FormArray, index: number) {
|
||||
formArray.removeAt(index);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,12 +1,17 @@
|
|||
import { AbstractControl } from "@angular/forms";
|
||||
|
||||
export interface ToCEntry {
|
||||
id: string;
|
||||
label: string;
|
||||
subEntries: ToCEntry[];
|
||||
type: ToCEntryType;
|
||||
form: AbstractControl;
|
||||
numbering: string;
|
||||
}
|
||||
|
||||
|
||||
export enum ToCEntryType{
|
||||
Page =0,
|
||||
Section = 1
|
||||
export enum ToCEntryType {
|
||||
Page = 0,
|
||||
Section = 1,
|
||||
FieldSet = 2
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<div *ngFor="let link of links; let i = index" class="docs-link mt-0">
|
||||
<span class="link-name" (click)="itemClicked(link)"><span>{{link.numbering}}</span> <span>{{link.label}}</span></span>
|
||||
<app-dataset-profile-table-of-contents-internal-section *ngIf="link.subEntries" [links]="link.subEntries"
|
||||
(itemClick)="itemClicked($event)"></app-dataset-profile-table-of-contents-internal-section>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
.docs-toc-container {
|
||||
width: 100%;
|
||||
padding: 5px 0 10px 0px;
|
||||
cursor: pointer;
|
||||
// border-left: solid 4px #0c7489;
|
||||
|
||||
.scroll-container {
|
||||
overflow-y: auto;
|
||||
// calc(100vh - 250px)
|
||||
// height: calc(100vh - 250px);
|
||||
}
|
||||
|
||||
.docs-link {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
// color: mat-color($app-blue-theme-foreground, secondary-text);
|
||||
transition: color 100ms;
|
||||
|
||||
&:hover,
|
||||
&.docs-active {
|
||||
.link-name {
|
||||
background-color: #ececec;
|
||||
border-radius: 6px;
|
||||
// color: #0c7489;
|
||||
}
|
||||
// color: mat-color($primary, if($is-dark-theme, 200, default));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docs-toc-heading {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 16px;
|
||||
margin: 6px 0 0;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #21212194;
|
||||
font-weight: 400;
|
||||
max-width: 290px;
|
||||
min-width: 290px;
|
||||
padding: 0rem .4rem;
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #212121 !important;
|
||||
font-weight: 700 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
// .docs-level-mat-expansion-panel {
|
||||
// margin-left: 12px;
|
||||
// }
|
||||
|
||||
.docs-level-h5 {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { DOCUMENT } from '@angular/common';
|
||||
import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { ToCEntry } from '../table-of-contents-entry';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-dataset-profile-table-of-contents-internal-section',
|
||||
styleUrls: ['./table-of-contents-internal-section.scss'],
|
||||
templateUrl: './table-of-contents-internal-section.html'
|
||||
})
|
||||
export class DatasetProfileTableOfContentsInternalSection extends BaseComponent implements OnInit {
|
||||
|
||||
@Input() links: ToCEntry[];
|
||||
@Output() itemClick = new EventEmitter<ToCEntry>();
|
||||
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private _document: Document) {
|
||||
super();
|
||||
}
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
|
||||
}
|
||||
|
||||
itemClicked(item: ToCEntry) {
|
||||
//leaf node
|
||||
this.itemClick.emit(item);
|
||||
}
|
||||
|
||||
// propagateClickToParent(childIds: ToCEntry[], currentItem: ToCEntry) {
|
||||
// childIds.push(currentItem);
|
||||
// this.itemClick.emit(childIds);
|
||||
// }
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div *ngIf="links?.length" class="docs-toc-container">
|
||||
<div *ngIf="links?.length > 0" class="docs-toc-container">
|
||||
<!-- <div class="docs-toc-heading">Contents</div> -->
|
||||
<!-- <nav> -->
|
||||
<!-- <a [href]="_rootUrl + '#' + link.id" -->
|
||||
|
|
@ -6,10 +6,11 @@
|
|||
<!-- <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> -->
|
||||
<span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">
|
||||
<app-dataset-profile-table-of-contents-internal-section [links]="links" (itemClick)="itemClicked($event)"></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>
|
||||
<dataset-profile-table-of-contents *ngIf="link.subEntries" [links]="link.subEntries" (itemClick)="propagateClickToParent($event, link)"></dataset-profile-table-of-contents>
|
||||
</span>
|
||||
</span> -->
|
||||
<!-- </nav> -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
|
|||
@Output() stepFound = new EventEmitter<LinkToScroll>();
|
||||
@Output() currentLinks = new EventEmitter<Link[]>();
|
||||
|
||||
@Output() itemClick = new EventEmitter<ToCEntry[]>();
|
||||
@Output() itemClick = new EventEmitter<ToCEntry>();
|
||||
|
||||
|
||||
subscription: Subscription;
|
||||
|
|
@ -166,13 +166,13 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
|
|||
|
||||
itemClicked(item: ToCEntry){
|
||||
//leaf node
|
||||
this.itemClick.emit([item]);
|
||||
this.itemClick.emit(item);
|
||||
}
|
||||
|
||||
propagateClickToParent(childIds:ToCEntry[], currentItem: ToCEntry){
|
||||
childIds.push(currentItem);
|
||||
this.itemClick.emit(childIds);
|
||||
}
|
||||
// propagateClickToParent(childIds:ToCEntry[], currentItem: ToCEntry){
|
||||
// childIds.push(currentItem);
|
||||
// this.itemClick.emit(childIds);
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue