Fix: on save of datset, table of contents remains open
This commit is contained in:
parent
2313cd1ca5
commit
0bd5afffe1
|
@ -48,13 +48,13 @@
|
||||||
<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
|
<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
||||||
<div class="stepper-options">
|
<div class="stepper-options" id="stepper-options">
|
||||||
<div class="col stepper-list">
|
<div class="col stepper-list">
|
||||||
<div (click)="changeStep(0)" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
|
<div (click)="changeStep(0)" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
|
||||||
<div (click)="changeStep(0)" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
|
<div (click)="changeStep(0)" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
|
||||||
<div class="row toc-pane-container" #boundary (click)="changeStep(1)">
|
<div class="row toc-pane-container" #boundary (click)="changeStep(1)">
|
||||||
<div #spacer></div>
|
<div #spacer></div>
|
||||||
<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (linksInit)="onLinksInit($event)"></table-of-contents>
|
<table-of-contents class="toc-pane-container" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)"></table-of-contents>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -23,7 +23,7 @@ import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset
|
||||||
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
|
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
|
||||||
import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';
|
import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';
|
||||||
import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
|
import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
|
||||||
import { 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 { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
import { FormService } from '@common/forms/form-service';
|
import { FormService } from '@common/forms/form-service';
|
||||||
import { FormValidationErrorsDialogComponent } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component';
|
import { FormValidationErrorsDialogComponent } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component';
|
||||||
|
@ -85,6 +85,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
||||||
datasetSavedLinks: any = null;
|
datasetSavedLinks: any = null;
|
||||||
|
|
||||||
scrollTop: number;
|
scrollTop: number;
|
||||||
|
tocScrollTop: number;
|
||||||
|
links: Link[] = [];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private datasetWizardService: DatasetWizardService,
|
private datasetWizardService: DatasetWizardService,
|
||||||
|
@ -548,6 +550,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
||||||
|
|
||||||
submit(saveType?: SaveType) {
|
submit(saveType?: SaveType) {
|
||||||
this.scrollTop = document.getElementById('dataset-editor-form').scrollTop;
|
this.scrollTop = document.getElementById('dataset-editor-form').scrollTop;
|
||||||
|
this.tocScrollTop = document.getElementById('stepper-options').scrollTop;
|
||||||
this.datasetWizardService.createDataset(this.formGroup.getRawValue())
|
this.datasetWizardService.createDataset(this.formGroup.getRawValue())
|
||||||
.pipe(takeUntil(this._destroyed))
|
.pipe(takeUntil(this._destroyed))
|
||||||
.subscribe(
|
.subscribe(
|
||||||
|
@ -657,6 +660,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.getElementById('dataset-editor-form').scrollTop = this.scrollTop;
|
document.getElementById('dataset-editor-form').scrollTop = this.scrollTop;
|
||||||
|
document.getElementById('stepper-options').scrollTop = this.tocScrollTop;
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
// this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', data.id]); });
|
// this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', data.id]); });
|
||||||
|
@ -916,7 +920,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
||||||
return this.formGroup.get('label') && this.formGroup.get('label').valid && this.formGroup.get('profile') && this.formGroup.get('profile').valid;
|
return this.formGroup.get('label') && this.formGroup.get('label').valid && this.formGroup.get('profile') && this.formGroup.get('profile').valid;
|
||||||
}
|
}
|
||||||
|
|
||||||
onLinksInit(event) {
|
getLinks(currentLinks: Link[]) {
|
||||||
this.datasetSavedLinks = event;
|
this.links = currentLinks;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -60,7 +60,7 @@
|
||||||
<div class="row editor-content">
|
<div class="row editor-content">
|
||||||
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
|
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
|
||||||
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
||||||
<div class="stepper-options">
|
<div class="stepper-options" id="stepper-options">
|
||||||
<ol class="stepper-list">
|
<ol class="stepper-list">
|
||||||
<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
|
<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
|
||||||
<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
|
<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
<div class="row editor-content">
|
<div class="row editor-content">
|
||||||
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
|
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
|
||||||
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
||||||
<div class="stepper-options">
|
<div class="stepper-options" id="stepper-options">
|
||||||
<ol class="stepper-list">
|
<ol class="stepper-list">
|
||||||
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
|
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
|
||||||
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
|
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { distinctUntilChanged } from 'rxjs/operators';
|
||||||
import { type } from 'os';
|
import { type } from 'os';
|
||||||
import { SimpleChanges } from '@angular/core';
|
import { SimpleChanges } from '@angular/core';
|
||||||
|
|
||||||
interface Link {
|
export interface Link {
|
||||||
/* id of the section*/
|
/* id of the section*/
|
||||||
id: string;
|
id: string;
|
||||||
/* header type h3/h4 */
|
/* header type h3/h4 */
|
||||||
|
@ -30,10 +30,11 @@ interface Link {
|
||||||
})
|
})
|
||||||
export class TableOfContents extends BaseComponent implements OnInit {
|
export class TableOfContents extends BaseComponent implements OnInit {
|
||||||
|
|
||||||
links: Link[] = [];
|
@Input() links: Link[];
|
||||||
container: string;
|
container: string;
|
||||||
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[]>();
|
||||||
subscription: Subscription;
|
subscription: Subscription;
|
||||||
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
|
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
|
||||||
|
|
||||||
|
@ -54,72 +55,75 @@ export class TableOfContents extends BaseComponent implements OnInit {
|
||||||
this.linksSubject.next(headers);
|
this.linksSubject.next(headers);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.linksSubject.asObservable()
|
if (!this.links || this.links.length === 0) {
|
||||||
.pipe(distinctUntilChanged((p: HTMLElement[], q: HTMLElement[]) => JSON.stringify(p) == JSON.stringify(q)))
|
this.linksSubject.asObservable()
|
||||||
.subscribe(headers => {
|
.pipe(distinctUntilChanged((p: HTMLElement[], q: HTMLElement[]) => JSON.stringify(p) == JSON.stringify(q)))
|
||||||
const links: Array<Link> = [];
|
.subscribe(headers => {
|
||||||
|
const links: Array<Link> = [];
|
||||||
|
|
||||||
if (headers.length) {
|
if (headers.length) {
|
||||||
let page;
|
let page;
|
||||||
let section;
|
let section;
|
||||||
let show
|
let show
|
||||||
for (const header of headers) {
|
for (const header of headers) {
|
||||||
let name;
|
let name;
|
||||||
let id;
|
let id;
|
||||||
if (header.classList.contains('toc-page-header')) { // deprecated after removing stepper
|
if (header.classList.contains('toc-page-header')) { // deprecated after removing stepper
|
||||||
name = header.innerText.trim().replace(/^link/, '');
|
name = header.innerText.trim().replace(/^link/, '');
|
||||||
id = header.id;
|
id = header.id;
|
||||||
page = header.id.split('_')[1];
|
page = header.id.split('_')[1];
|
||||||
section = undefined;
|
section = undefined;
|
||||||
show = true;
|
show = true;
|
||||||
} else if (header.classList.contains('toc-section-header')) {
|
} else if (header.classList.contains('toc-section-header')) {
|
||||||
name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
|
name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
|
||||||
id = header.id;
|
id = header.id;
|
||||||
page = header.id.split('.')[1];
|
page = header.id.split('.')[1];
|
||||||
section = header.id;
|
section = header.id;
|
||||||
if (header.id.split('.')[4]) { show = false; }
|
if (header.id.split('.')[4]) { show = false; }
|
||||||
else { show = true; }
|
else { show = true; }
|
||||||
} else if (header.classList.contains('toc-compositeField-header')) {
|
} else if (header.classList.contains('toc-compositeField-header')) {
|
||||||
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
|
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
|
||||||
id = header.id;
|
id = header.id;
|
||||||
// id = header.parentElement.parentElement.parentElement.id;
|
// id = header.parentElement.parentElement.parentElement.id;
|
||||||
show = false;
|
show = false;
|
||||||
|
}
|
||||||
|
const { top } = header.getBoundingClientRect();
|
||||||
|
links.push({
|
||||||
|
name,
|
||||||
|
id,
|
||||||
|
type: header.tagName.toLowerCase(),
|
||||||
|
top: top,
|
||||||
|
active: false,
|
||||||
|
page: page,
|
||||||
|
section: section,
|
||||||
|
show: show,
|
||||||
|
selected: false
|
||||||
|
});
|
||||||
}
|
}
|
||||||
const { top } = header.getBoundingClientRect();
|
|
||||||
links.push({
|
|
||||||
name,
|
|
||||||
id,
|
|
||||||
type: header.tagName.toLowerCase(),
|
|
||||||
top: top,
|
|
||||||
active: false,
|
|
||||||
page: page,
|
|
||||||
section: section,
|
|
||||||
show: show,
|
|
||||||
selected: false
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
this.links = links;
|
||||||
this.links = links;
|
// Initialize selected for button next on dataset wizard component editor
|
||||||
// Initialize selected for button next on dataset wizard component editor
|
this.links.length > 0 ? this.links[0].selected = true : null;
|
||||||
this.links.length > 0 ? this.links[0].selected = true : null;
|
})
|
||||||
})
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnChanges(changes: SimpleChanges) {
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
if (!this.isActive && this.links && this.links.length > 0) {
|
// if (!this.isActive && this.links && this.links.length > 0) {
|
||||||
this.links.forEach(link => {
|
// this.links.forEach(link => {
|
||||||
link.selected = false;
|
// link.selected = false;
|
||||||
})
|
// })
|
||||||
this.links[0].selected = true;
|
// this.links[0].selected = true;
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
goToStep(link: Link) {
|
goToStep(link: Link) {
|
||||||
// this.selectedLinkId = link.id;
|
|
||||||
this.stepFound.emit({
|
this.stepFound.emit({
|
||||||
page: link.page,
|
page: link.page,
|
||||||
section: link.section
|
section: link.section
|
||||||
});
|
});
|
||||||
|
this.currentLinks.emit(this.links);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const target = document.getElementById(link.id);
|
const target = document.getElementById(link.id);
|
||||||
|
@ -133,15 +137,15 @@ export class TableOfContents extends BaseComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle(headerLink: Link) {
|
toggle(headerLink: Link) {
|
||||||
const headerPage = +headerLink.name.split(" ",1);
|
const headerPage = +headerLink.name.split(" ", 1);
|
||||||
let innerPage;
|
let innerPage;
|
||||||
for (const link of this.links) {
|
for (const link of this.links) {
|
||||||
link.selected = false;
|
link.selected = false;
|
||||||
if (link.type === 'mat-expansion-panel') {
|
if (link.type === 'mat-expansion-panel') {
|
||||||
innerPage = +link.name.split(".",1)[0];
|
innerPage = +link.name.split(".", 1)[0];
|
||||||
if(isNaN(innerPage)) { innerPage = +link.name.split(" ",1) }
|
if (isNaN(innerPage)) { innerPage = +link.name.split(" ", 1) }
|
||||||
} else if (link.type === 'h5') {
|
} else if (link.type === 'h5') {
|
||||||
innerPage = +link.name.split(".",1)[0];
|
innerPage = +link.name.split(".", 1)[0];
|
||||||
}
|
}
|
||||||
if (headerPage === innerPage && (link.type !== 'mat-expansion-panel' || (link.type === 'mat-expansion-panel' && link.id.split(".")[4]))) {
|
if (headerPage === innerPage && (link.type !== 'mat-expansion-panel' || (link.type === 'mat-expansion-panel' && link.id.split(".")[4]))) {
|
||||||
link.show = !link.show;
|
link.show = !link.show;
|
||||||
|
|
Loading…
Reference in New Issue