Add next-previous buttons in dataset editot in order to navigate through chapters
This commit is contained in:
parent
4cab6ca160
commit
fd2ec314a0
|
@ -68,11 +68,16 @@
|
||||||
<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" id="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, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
|
<div (click)="changeStep()" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">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()" *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>
|
||||||
<div #spacer></div>
|
<div #spacer></div>
|
||||||
<table-of-contents [visibilityRulesService]="visRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step === 1" [formGroup]="formGroup" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value"></table-of-contents>
|
<table-of-contents [visibilityRulesService]="visRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents
|
||||||
|
[showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0"
|
||||||
|
[formGroup]="formGroup" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [links]="links"
|
||||||
|
[boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)"
|
||||||
|
(currentLinks)="getLinks($event)" (entrySelected)="changeStep($event)"
|
||||||
|
[visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value"></table-of-contents>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -81,6 +86,7 @@
|
||||||
<span class="material-icons">chevron_left</span>
|
<span class="material-icons">chevron_left</span>
|
||||||
<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
|
<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" (click)="nextStep()">
|
<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" (click)="nextStep()">
|
||||||
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
|
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
|
||||||
<span class="material-icons">chevron_right</span>
|
<span class="material-icons">chevron_right</span>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||||
import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms';
|
import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms';
|
||||||
import {MatDialog} from '@angular/material/dialog';
|
import {MatDialog} from '@angular/material/dialog';
|
||||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||||
|
@ -14,14 +14,18 @@ import {DmpCriteria} from '@app/core/query/dmp/dmp-criteria';
|
||||||
import {RequestItem} from '@app/core/query/request-item';
|
import {RequestItem} from '@app/core/query/request-item';
|
||||||
import {DatasetWizardService} from '@app/core/services/dataset-wizard/dataset-wizard.service';
|
import {DatasetWizardService} from '@app/core/services/dataset-wizard/dataset-wizard.service';
|
||||||
import {DmpService} from '@app/core/services/dmp/dmp.service';
|
import {DmpService} from '@app/core/services/dmp/dmp.service';
|
||||||
import {ExternalSourcesConfigurationService} from '@app/core/services/external-sources/external-sources-configuration.service';
|
import {
|
||||||
|
ExternalSourcesConfigurationService
|
||||||
|
} from '@app/core/services/external-sources/external-sources-configuration.service';
|
||||||
import {ExternalSourcesService} from '@app/core/services/external-sources/external-sources.service';
|
import {ExternalSourcesService} from '@app/core/services/external-sources/external-sources.service';
|
||||||
import {
|
import {
|
||||||
SnackBarNotificationLevel,
|
SnackBarNotificationLevel,
|
||||||
UiNotificationService
|
UiNotificationService
|
||||||
} from '@app/core/services/notification/ui-notification-service';
|
} from '@app/core/services/notification/ui-notification-service';
|
||||||
import {SingleAutoCompleteConfiguration} from '@app/library/auto-complete/single/single-auto-complete-configuration';
|
import {SingleAutoCompleteConfiguration} from '@app/library/auto-complete/single/single-auto-complete-configuration';
|
||||||
import {DatasetCopyDialogueComponent} from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
|
import {
|
||||||
|
DatasetCopyDialogueComponent
|
||||||
|
} from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
|
||||||
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 {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';
|
||||||
|
@ -32,7 +36,9 @@ import {
|
||||||
TableOfContents
|
TableOfContents
|
||||||
} from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
|
} from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
|
||||||
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';
|
||||||
import {ValidationErrorModel} from '@common/forms/validation/error-model/validation-error-model';
|
import {ValidationErrorModel} from '@common/forms/validation/error-model/validation-error-model';
|
||||||
import {ConfirmationDialogComponent} from '@common/modules/confirmation-dialog/confirmation-dialog.component';
|
import {ConfirmationDialogComponent} from '@common/modules/confirmation-dialog/confirmation-dialog.component';
|
||||||
import {TranslateService} from '@ngx-translate/core';
|
import {TranslateService} from '@ngx-translate/core';
|
||||||
|
@ -54,6 +60,7 @@ import {VisibilityRulesService} from '@app/ui/misc/dataset-description-form/visi
|
||||||
import {PopupNotificationDialogComponent} from '@app/library/notification/popup/popup-notification.component';
|
import {PopupNotificationDialogComponent} from '@app/library/notification/popup/popup-notification.component';
|
||||||
import {CheckDeactivateBaseComponent} from '@app/library/deactivate/deactivate.component';
|
import {CheckDeactivateBaseComponent} from '@app/library/deactivate/deactivate.component';
|
||||||
import {PrefillDatasetComponent} from "@app/ui/dataset/dataset-wizard/prefill-dataset/prefill-dataset.component";
|
import {PrefillDatasetComponent} from "@app/ui/dataset/dataset-wizard/prefill-dataset/prefill-dataset.component";
|
||||||
|
import {ToCEntry} from "@app/ui/misc/dataset-description-form/dataset-description.component";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-wizard-component',
|
selector: 'app-dataset-wizard-component',
|
||||||
|
@ -94,7 +101,6 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
|
||||||
|
|
||||||
step: number = 0;
|
step: number = 0;
|
||||||
stepOffset: number = 1;
|
stepOffset: number = 1;
|
||||||
maxStep: number;
|
|
||||||
|
|
||||||
saveAnd = SaveType;
|
saveAnd = SaveType;
|
||||||
datasetSavedLinks: any = null;
|
datasetSavedLinks: any = null;
|
||||||
|
@ -260,7 +266,6 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
|
||||||
this.formGroup = this.datasetWizardModel.buildForm();
|
this.formGroup = this.datasetWizardModel.buildForm();
|
||||||
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
|
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
|
||||||
this.formGroup.get('dmp').disable();
|
this.formGroup.get('dmp').disable();
|
||||||
this.maxStep = 1;
|
|
||||||
this.loadDatasetProfiles();
|
this.loadDatasetProfiles();
|
||||||
this.registerFormListeners();
|
this.registerFormListeners();
|
||||||
}
|
}
|
||||||
|
@ -437,8 +442,6 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
|
||||||
}]);
|
}]);
|
||||||
}
|
}
|
||||||
|
|
||||||
!this.isNew ? this.maxStep = 1 : this.maxStep = 0;
|
|
||||||
|
|
||||||
// this.route.params
|
// this.route.params
|
||||||
// .pipe(takeUntil(this._destroyed))
|
// .pipe(takeUntil(this._destroyed))
|
||||||
// .subscribe((params: Params) => {
|
// .subscribe((params: Params) => {
|
||||||
|
@ -528,7 +531,7 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
|
||||||
if (profiledId && profiledId.length > 0) {
|
if (profiledId && profiledId.length > 0) {
|
||||||
this.formGroup.removeControl('datasetProfileDefinition');
|
this.formGroup.removeControl('datasetProfileDefinition');
|
||||||
this.getDefinition(profiledId);
|
this.getDefinition(profiledId);
|
||||||
this.maxStep = 1;
|
console.log(this.table0fContents.tocentries.length + 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1151,31 +1154,46 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
public changeStep(index: number, dataset?: FormControl) {
|
checkSelectedParent(entry: ToCEntry, selected: ToCEntry = null) {
|
||||||
if (this.step != index) { //view is changing
|
if(!selected) {
|
||||||
this.resetScroll();
|
selected = this.table0fContents.tocentrySelected;
|
||||||
}
|
}
|
||||||
this.step = index;
|
if(entry.numbering === selected.numbering) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return !!entry.subEntries.find(subEntry => this.checkSelectedParent(subEntry, selected))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public changeStep(selected: ToCEntry = null) {
|
||||||
|
if(selected) {
|
||||||
|
let index = this.table0fContents.tocentries.findIndex(entry => this.checkSelectedParent(entry, selected));
|
||||||
|
console.log(index);
|
||||||
|
this.step = index + 1;
|
||||||
|
} else {
|
||||||
|
this.table0fContents.onToCentrySelected(null);
|
||||||
|
this.step = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get maxStep() {
|
||||||
|
return this.table0fContents?this.table0fContents.tocentries.length:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
public nextStep() {
|
public nextStep() {
|
||||||
if (this.step < this.maxStep) {//view is changing
|
if (this.step < this.maxStep) {//view is changing
|
||||||
if (this.step === 0 && this.table0fContents) {
|
|
||||||
this.table0fContents.seekToFirstElement();
|
|
||||||
}
|
|
||||||
this.step++;
|
this.step++;
|
||||||
|
this.table0fContents.internalTable.selected = this.table0fContents.tocentries[this.step - 1];
|
||||||
this.resetScroll();
|
this.resetScroll();
|
||||||
}
|
}
|
||||||
// this.step = this.step < this.maxStep ? this.step + 1 : this.step;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public previousStep() {
|
public previousStep() {
|
||||||
if (this.step > 0) {
|
if (this.step > 0) {
|
||||||
this.resetScroll();
|
|
||||||
this.step--;
|
this.step--;
|
||||||
|
this.table0fContents.internalTable.selected = this.step > 0?this.table0fContents.tocentries[this.step - 1]:null;
|
||||||
|
this.resetScroll();
|
||||||
}
|
}
|
||||||
|
|
||||||
// this.step = this.step !== 0 ? this.step - 1 : this.step;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private resetScroll() {
|
private resetScroll() {
|
||||||
|
|
|
@ -43,6 +43,7 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
|
||||||
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() entrySelected = new EventEmitter<ToCEntry>();
|
||||||
subscription: Subscription;
|
subscription: Subscription;
|
||||||
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
|
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
|
||||||
|
|
||||||
|
@ -442,6 +443,7 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
|
||||||
|
|
||||||
onToCentrySelected(entry: ToCEntry){
|
onToCentrySelected(entry: ToCEntry){
|
||||||
this.tocentrySelected = entry;
|
this.tocentrySelected = entry;
|
||||||
|
this.entrySelected.emit(entry);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue