Compare commits

...

3 Commits

3 changed files with 79 additions and 52 deletions

View File

@ -99,15 +99,15 @@
<div class="col-12">
<div class="container stepper-list ml-1">
<div class="row" *ngIf="!descriptionInfoValid()">
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': reachedBase, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
</div>
<div class="row" *ngIf="descriptionInfoValid()">
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': reachedBase}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
</div>
<div class="row toc-pane-container" #boundary>
<div #spacer></div>
<div class="col-12">
<app-table-of-contents [visibilityRulesService]="visibilityRulesService" #table0fContents [showErrors]="showTocEntriesErrors" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
<app-table-of-contents [visibilityRulesService]="visibilityRulesService" #table0fContents [showErrors]="showTocEntriesErrors" [hasFocus]="reachedBase == false" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" stickyThing (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
</div>
</div>
</div>
@ -118,13 +118,13 @@
<div class="col-12">
<div class="row mt-3 stepper-actions justify-content-center">
<div class="col-auto mb-1">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': reachedBase}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
</div>
</div>
<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
<div *ngIf="!reachedLast" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
@ -136,7 +136,7 @@
<span class="material-icons">chevron_right</span>
</div>
</div>
<div *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
<div *ngIf="reachedLast && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
</button>
@ -151,14 +151,14 @@
</div>
</div>
<div class="col-12 col-md form" id="description-editor-form">
<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
<app-description-base-fields-editor-component [hidden]="!reachedBase" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
<app-description-form
*ngIf="formGroup && formGroup.get('properties')"
[propertiesFormGroup]="formGroup.get('properties')"
[descriptionId]="formGroup.get('id').value"
[descriptionTemplate]="item.descriptionTemplate"
[visibilityRulesService]="visibilityRulesService"
[hidden]="this.step === 0"
[hidden]="reachedBase"
[linkToScroll]="linkToScroll"
[validationErrorModel]="editorModel.validationErrorModel"
[isNew]="isNew || isCopy"

View File

@ -71,7 +71,10 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
isFinalized = false;
showTocEntriesErrors = false;
@ViewChild('table0fContents') table0fContents: TableOfContentsComponent;
step: number = 0;
reachedBase: boolean = true;
reachedLast: boolean = false;
reachedFirst: boolean = false;
pageToFieldSetMap: Map<string, DescriptionFieldIndicator[]> = new Map<string, DescriptionFieldIndicator[]>();
@ -549,15 +552,19 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
public changeStep(selected: ToCEntry = null, execute: boolean = true) {
if (execute) {
if (selected) {
if (this.step == 0) {
this.step = 1;
}
this.reachedBase = false;
this.reachedFirst = selected.isFirstEntry;
this.reachedLast = selected.isLastEntry;
const element = document.getElementById(selected.id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
} else {
this.step = 0;
this.reachedBase = true;
this.reachedFirst = false;
this.reachedLast = false;
this.resetScroll();
}
}
@ -569,38 +576,10 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
public nextStep() {
this.tableOfContentsService.nextClicked();
// if (this.step < this.maxStep) {//view is changing
// this.step = Math.floor(this.step + 1);
// let entry = this.visibleFieldSets[this.step - 1];
// const targetElement = document.getElementById(entry.id);
// if (targetElement) {
// this.table0fContents.onToCentrySelected(entry, false);
// this.scroll(entry);
// } else {
// this.nextStep();
// }
// }
}
public previousStep() {
this.tableOfContentsService.nextClicked();
// if (this.step > 0) {
// this.step = Math.ceil(this.step - 1);
// if (this.step >= 1) {
// let entry = this.visibleFieldSets[this.step - 1];
// const targetElement = document.getElementById(entry.id);
// if (targetElement) {
// this.table0fContents.onToCentrySelected(entry, false);
// this.scroll(entry);
// } else {
// this.previousStep();
// }
// } else {
// this.table0fContents.onToCentrySelected(null, false);
// this.resetScroll();
// }
// }
this.tableOfContentsService.previousClicked();
}
private scroll(entry: ToCEntry) {

View File

@ -28,7 +28,8 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
private _tocentrySelected: ToCEntry = null;
get tocentrySelected() {
return this.hasFocus ? this._tocentrySelected : null;
return this._tocentrySelected;
// return this.hasFocus ? this._tocentrySelected : null;
}
set tocentrySelected(value) {
this._tocentrySelected = value;
@ -49,13 +50,50 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
}
this.tableOfContentsService.getNextClickedEventObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
//TODO: implement function to find next element
// call onToCentrySelected()
let next: ToCEntry;
if (!this.tocentrySelected) next = this._getHeadField(this.tocentries[0]);
else if (this.tocentrySelected?.subEntries && this.tocentrySelected?.subEntries.length > 0) {
next = this.tocentrySelected;
while (next?.subEntries && next?.subEntries?.length > 0 && !next?.nextEntry) {
next = next?.subEntries[0];
}
}
else next = this.tocentrySelected?.nextEntry;
while (!this._isVisible(next?.id) && !next?.isLastEntry) {
next = next?.nextEntry;
}
if (!next || !this._isVisible(next?.id)) {
this.onToCentrySelected(null);
} else {
this.onToCentrySelected(next);
}
});
this.tableOfContentsService.getPreviousEventObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
//TODO: implement function to find previous element
// call onToCentrySelected()
let previous: ToCEntry;
if (!this.tocentrySelected) previous = this._getHeadField(this.tocentries[0]);
else if (this.tocentrySelected?.subEntries && this.tocentrySelected?.subEntries.length > 0) {
previous = this.tocentrySelected;
while (previous?.subEntries && previous?.subEntries?.length > 0 && !previous?.previousEntry) {
previous = previous?.subEntries[0];
}
previous = previous.previousEntry;
}
else previous = this.tocentrySelected?.previousEntry;
while (!this._isVisible(previous?.id) && !previous?.isFirstEntry) {
previous = previous.previousEntry;
}
if (!previous || !this._isVisible(previous?.id)) {
this.onToCentrySelected(null);
} else {
this.onToCentrySelected(previous);
}
});
}
@ -108,8 +146,7 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
).subscribe(x => {
if (x.isIntersecting) {
const target_id = x.target.id;
console.log(target_id);
if (this.visibilityRulesService.isVisibleMap[target_id] ?? true) {
if (this._isVisible(target_id)) {
this.tocentrySelected = TableOfContentsComponent._findTocEntryById(target_id, this.tocentries);
}
}
@ -131,14 +168,21 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
if (tocentry != null) {
tempResult.push(tocentry);
previousTocentry = tocentry;
previousTocentry = this._getTailField(tocentry);
}
} else {
let tocentry = this._buildRecursivelySection(section, previousTocentry); // the nested fieldsets inherit the previousTocEntry
if (tocentry) {
// explanation: previous-section[last-field].next = current-section[first-field]
let firstTocentryOfCurrentSection = this._getHeadField(tocentry);
if (tempResult.length > 0) {
tempResult[tempResult.length - 1] = this._setTocentryNext(tempResult[tempResult.length - 1], firstTocentryOfCurrentSection);
}
tempResult.push(tocentry);
previousTocentry = tocentry;
previousTocentry = this._getTailField(tocentry);
}
}
});
@ -364,6 +408,10 @@ export class TableOfContentsComponent extends BaseComponent implements OnInit, O
return previous;
}
}
private _isVisible(entryId: string): boolean {
return this.visibilityRulesService.isVisibleMap[entryId] ?? true;
}
}
export interface LinkToScroll {