toc style changes
This commit is contained in:
parent
8b376ecbd9
commit
4102386ecd
|
@ -22,6 +22,7 @@
|
||||||
"@ngx-translate/core": "^11.0.1",
|
"@ngx-translate/core": "^11.0.1",
|
||||||
"@ngx-translate/http-loader": "^4.0.0",
|
"@ngx-translate/http-loader": "^4.0.0",
|
||||||
"@swimlane/ngx-datatable": "^16.0.2",
|
"@swimlane/ngx-datatable": "^16.0.2",
|
||||||
|
"@w11k/angular-sticky-things": "^1.1.2",
|
||||||
"bootstrap": "^4.3.1",
|
"bootstrap": "^4.3.1",
|
||||||
"core-js": "^2.5.5",
|
"core-js": "^2.5.5",
|
||||||
"file-saver": "^2.0.2",
|
"file-saver": "^2.0.2",
|
||||||
|
|
|
@ -91,8 +91,16 @@
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.DESCRIPTION' | translate}}
|
{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.DESCRIPTION' | translate}}
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<app-dataset-description-form *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules" [datasetProfileId]="formGroup.get('profile').value">
|
<div class="row toc-pane-container" #boundary>
|
||||||
</app-dataset-description-form>
|
<div class="col-md-8 h-100 ">
|
||||||
|
<app-dataset-description-form class="w-100 h-100" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll">
|
||||||
|
</app-dataset-description-form>
|
||||||
|
</div>
|
||||||
|
<div #spacer></div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
</mat-tab-group>
|
</mat-tab-group>
|
||||||
|
|
||||||
|
@ -112,134 +120,3 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="main-content">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="dataset-wizard">
|
|
||||||
<h3 *ngIf="isNew">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h3>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-auto">
|
|
||||||
<h3 *ngIf="!isNew">{{datasetWizardModel?.label}} {{ 'GENERAL.NAMES.DATASET' | translate }}
|
|
||||||
<span *ngIf="this.formGroup && this.formGroup.dirty">
|
|
||||||
- {{ 'GENERAL.STATUSES.EDIT' | translate }}</span>
|
|
||||||
</h3>
|
|
||||||
<h3 *ngIf="this.formGroup && this.formGroup.get('status').value == DatasetStatus.Finalized && viewOnly">{{'GENERAL.STATUSES.FINALISED' | translate }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="col"></div>
|
|
||||||
<mat-menu #actionsMenu="matMenu">
|
|
||||||
<button mat-menu-item (click)="openDmpSearchDialogue()">
|
|
||||||
<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
|
|
||||||
</button>
|
|
||||||
</mat-menu>
|
|
||||||
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode">
|
|
||||||
<mat-icon>more_vert</mat-icon>
|
|
||||||
</button> -->
|
|
||||||
|
|
||||||
<!-- <div class="col"></div>
|
|
||||||
<div class="col-auto" *ngIf=" !viewOnly">
|
|
||||||
<button *ngIf="!editMode" class="col-auto" mat-icon-button (click)="enableForm()">
|
|
||||||
<mat-icon class="mat-24">edit</mat-icon>
|
|
||||||
</button>
|
|
||||||
<button *ngIf="editMode" class="col-auto" mat-icon-button (click)="disableForm()">
|
|
||||||
<mat-icon class="mat-24">lock</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- </div>
|
|
||||||
<div *ngIf="this.datasetProfileDefinitionModel || this.datasetWizardModel?.datasetProfileDefinition">
|
|
||||||
<button mat-raised-button color="primary" *ngIf="!isNew && !viewOnly && !isCopy" class="deleteButton" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)"
|
|
||||||
type="button">{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}</button>
|
|
||||||
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" class="saveButton"
|
|
||||||
(click)="save();" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
|
|
||||||
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" [disabled]="!formGroup.valid"
|
|
||||||
class="saveAndFinalizeButton" (click)="saveFinalize();" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-FINALISE' | translate }}</button>
|
|
||||||
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadPDF"
|
|
||||||
(click)="downloadPDF();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-PDF' | translate }}</button>
|
|
||||||
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadDOCX"
|
|
||||||
(click)="downloadDOCX();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-DOCX' | translate }}</button>
|
|
||||||
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadXML"
|
|
||||||
(click)="downloadXML();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
|
|
||||||
<button mat-raised-button color="primary" *ngIf="needsUpdate()" class="updateDatasetProfile" (click)="openUpdateDatasetProfileDialogue();"
|
|
||||||
type="button">{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}</button>
|
|
||||||
<div class="fill-space"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<mat-horizontal-stepper [linear]="isLinear" class="col-12" #stepper>
|
|
||||||
<mat-step class="step-container" [stepControl]="formGroup">
|
|
||||||
<ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template>
|
|
||||||
<form *ngIf="formGroup" [formGroup]="formGroup">
|
|
||||||
<div *ngIf="this.isActiveStep(0)" class="row">
|
|
||||||
<mat-form-field class="col-md-6">
|
|
||||||
<app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}"
|
|
||||||
[configuration]="dmpAutoCompleteConfiguration">
|
|
||||||
</app-single-auto-complete>
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field class="col-md-6">
|
|
||||||
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile">
|
|
||||||
<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
|
|
||||||
{{profile.label}}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
<app-dataset-editor-component class="col-12" [formGroup]="formGroup"></app-dataset-editor-component>
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col"></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<button matStepperNext mat-raised-button color="primary" (click)="getDefinition()">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</mat-step>
|
|
||||||
<mat-step class="step-container" [stepControl]="formGroup">
|
|
||||||
<ng-template matStepLabel>{{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}}</ng-template>
|
|
||||||
<form *ngIf="formGroup" [formGroup]="formGroup">
|
|
||||||
<div *ngIf="this.isActiveStep(1)" class="row">
|
|
||||||
<app-dataset-external-references-editor-component class="col-12" [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col"></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<button matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</mat-step>
|
|
||||||
<mat-step class="step-container">
|
|
||||||
<ng-template matStepLabel>{{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}}</ng-template>
|
|
||||||
<div *ngIf="this.isActiveStep(2)" class="row">
|
|
||||||
<app-dataset-description-form class="col-12" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
|
|
||||||
[form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules"
|
|
||||||
[datasetProfileId]="formGroup.get('profile').value"></app-dataset-description-form>
|
|
||||||
<div class="col-12 description-action-row">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-auto">
|
|
||||||
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-step> -->
|
|
||||||
|
|
||||||
<!-- <mat-step class="step-container">
|
|
||||||
<ng-template matStepLabel>{{'DATASET-WIZARD.FOURTH-STEP.TITLE' | translate}}</ng-template>
|
|
||||||
<div *ngIf="this.isActiveStep(3)">
|
|
||||||
<app-dynamic-form-pending-questions-display class="full-width" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [dataModel]="datasetWizardModel"></app-dynamic-form-pending-questions-display>
|
|
||||||
<div class="navigation-buttons-container">
|
|
||||||
<button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK'
|
|
||||||
| translate}}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-step> -->
|
|
||||||
|
|
||||||
<!-- </mat-horizontal-stepper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
|
@ -1,125 +1,155 @@
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.main-content {
|
.main-content {
|
||||||
padding: 30px 0px;
|
padding: 30px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-expansion-panel-header {
|
::ng-deep .mat-expansion-panel-header {
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-expansion-panel-body {
|
::ng-deep .mat-expansion-panel-body {
|
||||||
padding: 0 0px 16px !important;
|
padding: 0 0px 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-vertical-content {
|
::ng-deep .mat-vertical-content {
|
||||||
padding: 0 14px 24px 14px !important;
|
padding: 0 14px 24px 14px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dataset-wizard {
|
.dataset-wizard {
|
||||||
.step-container {
|
.toc-pane-container {
|
||||||
margin-top: 1em;
|
&.is-sticky~.nav-spacer {
|
||||||
}
|
height: 500px; // the container size }
|
||||||
.external-item-card {
|
// height: calc(100vh - 100px); // the container size }
|
||||||
margin-top: 1em;
|
}
|
||||||
}
|
}
|
||||||
.external-item-action-row,
|
|
||||||
.description-action-row {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
.deleteButton,
|
|
||||||
.reverseButton {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.cancelButton {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.saveButton {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.saveAndFinalizeButton {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
.finalizeButton {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.export-btn {
|
|
||||||
padding-right: 6px;
|
|
||||||
}
|
|
||||||
.downloadPDF {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
.downloadXML {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
.downloadDOCX {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
.updateDatasetProfile {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
.step-container {
|
||||||
display: flex;
|
margin-top: 1em;
|
||||||
justify-content: flex-end;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// .actions > button {
|
.external-item-card {
|
||||||
// background-color: #0070c0;
|
margin-top: 1em;
|
||||||
// color: #ffffff;
|
}
|
||||||
// text-transform: uppercase;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.more-horiz {
|
.external-item-action-row,
|
||||||
font-size: 28px;
|
.description-action-row {
|
||||||
color: #aaaaaa;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-icon :hover {
|
.deleteButton,
|
||||||
color: #00b29f;
|
.reverseButton {
|
||||||
}
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.new-dataset {
|
.cancelButton {
|
||||||
height: 3.5em;
|
margin-top: 15px;
|
||||||
}
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.saveButton {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.saveAndFinalizeButton {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finalizeButton {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-btn {
|
||||||
|
padding-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloadPDF {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloadXML {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloadDOCX {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updateDatasetProfile {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .actions > button {
|
||||||
|
// background-color: #0070c0;
|
||||||
|
// color: #ffffff;
|
||||||
|
// text-transform: uppercase;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.more-horiz {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #aaaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-icon :hover {
|
||||||
|
color: #00b29f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-dataset {
|
||||||
|
height: 3.5em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item {
|
.menu-item {
|
||||||
width: 248px;
|
width: 248px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-tab-labels {
|
::ng-deep .mat-tab-labels {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-tab-label-content {
|
::ng-deep .mat-tab-label-content {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-ink-bar {
|
::ng-deep .mat-ink-bar {
|
||||||
background-color: #00b29f !important;
|
background-color: #00b29f !important;
|
||||||
// background-color: #0070c0 !important;
|
// background-color: #0070c0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-pane-container {
|
||||||
|
&.is-sticky~.nav-spacer {
|
||||||
|
height: 500px; // the container size }
|
||||||
|
// height: calc(100vh - 100px); // the container size }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-sticky {
|
||||||
|
margin-top: 70px !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import { of as observableOf, Observable } from 'rxjs';
|
|
||||||
import { map, catchError, takeUntil } from 'rxjs/operators';
|
|
||||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
import { FormControl, FormGroup } from '@angular/forms';
|
import { FormControl, FormGroup } from '@angular/forms';
|
||||||
import { MatDialog } from '@angular/material/dialog';
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
@ -8,9 +6,12 @@ import { MatStepper } from '@angular/material/stepper';
|
||||||
import { ActivatedRoute, Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
import { TranslateService } from '@ngx-translate/core';
|
import { TranslateService } from '@ngx-translate/core';
|
||||||
import * as FileSaver from 'file-saver';
|
import * as FileSaver from 'file-saver';
|
||||||
|
import { Observable, of as observableOf } from 'rxjs';
|
||||||
|
import { catchError, map, takeUntil } from 'rxjs/operators';
|
||||||
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
|
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
|
||||||
import { BaseComponent } from '../../../core/common/base/base.component';
|
import { BaseComponent } from '../../../core/common/base/base.component';
|
||||||
import { DatasetStatus } from '../../../core/common/enum/dataset-status';
|
import { DatasetStatus } from '../../../core/common/enum/dataset-status';
|
||||||
|
import { DmpStatus } from '../../../core/common/enum/dmp-status';
|
||||||
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
|
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
|
||||||
import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile';
|
import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile';
|
||||||
import { DmpModel } from '../../../core/model/dmp/dmp';
|
import { DmpModel } from '../../../core/model/dmp/dmp';
|
||||||
|
@ -25,13 +26,12 @@ import { ExternalSourcesService } from '../../../core/services/external-sources/
|
||||||
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
|
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
|
||||||
import { SingleAutoCompleteConfiguration } from '../../../library/auto-complete/single/single-auto-complete-configuration';
|
import { SingleAutoCompleteConfiguration } from '../../../library/auto-complete/single/single-auto-complete-configuration';
|
||||||
import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
|
import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
|
||||||
import { ExportMethodDialogComponent } from '../../../library/export-method-dialog/export-method-dialog.component';
|
|
||||||
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
|
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
|
||||||
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
|
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
|
||||||
import { DatasetDescriptionFormEditorModel } from '../../misc/dataset-description-form/dataset-description-form.model';
|
import { DatasetDescriptionFormEditorModel } from '../../misc/dataset-description-form/dataset-description-form.model';
|
||||||
|
import { LinkToScroll } from '../../misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
|
||||||
import { DatasetCopyDialogueComponent } from './dataset-copy-dialogue/dataset-copy-dialogue.component';
|
import { DatasetCopyDialogueComponent } from './dataset-copy-dialogue/dataset-copy-dialogue.component';
|
||||||
import { DatasetWizardEditorModel } from './dataset-wizard-editor.model';
|
import { DatasetWizardEditorModel } from './dataset-wizard-editor.model';
|
||||||
import { DmpStatus } from '../../../core/common/enum/dmp-status';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-wizard-component',
|
selector: 'app-dataset-wizard-component',
|
||||||
|
@ -42,7 +42,6 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
||||||
|
|
||||||
breadCrumbs: Observable<BreadcrumbItem[]>;
|
breadCrumbs: Observable<BreadcrumbItem[]>;
|
||||||
viewOnly = false;
|
viewOnly = false;
|
||||||
@ViewChild('stepper', { static: false }) stepper: MatStepper;
|
|
||||||
editMode = false;
|
editMode = false;
|
||||||
publicMode = false;
|
publicMode = false;
|
||||||
|
|
||||||
|
@ -600,10 +599,6 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
||||||
this.formGroup.disable();
|
this.formGroup.disable();
|
||||||
}
|
}
|
||||||
|
|
||||||
isActiveStep(index: number) {
|
|
||||||
return this.stepper.selectedIndex === index;
|
|
||||||
}
|
|
||||||
|
|
||||||
openConfirm(dmpLabel, id): void {
|
openConfirm(dmpLabel, id): void {
|
||||||
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||||
maxWidth: '300px',
|
maxWidth: '300px',
|
||||||
|
@ -678,4 +673,9 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
linkToScroll: LinkToScroll;
|
||||||
|
onStepFound(linkToScroll: LinkToScroll) {
|
||||||
|
this.linkToScroll = linkToScroll;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,15 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
|
||||||
import { CommonFormsModule } from '../../common/forms/common-forms.module';
|
import { CommonFormsModule } from '../../common/forms/common-forms.module';
|
||||||
import { CommonUiModule } from '../../common/ui/common-ui.module';
|
import { CommonUiModule } from '../../common/ui/common-ui.module';
|
||||||
import { AutoCompleteModule } from '../../library/auto-complete/auto-complete.module';
|
import { AutoCompleteModule } from '../../library/auto-complete/auto-complete.module';
|
||||||
import { ConfirmationDialogModule } from '../../library/confirmation-dialog/confirmation-dialog.module';
|
import { ConfirmationDialogModule } from '../../library/confirmation-dialog/confirmation-dialog.module';
|
||||||
|
import { ExportMethodDialogModule } from '../../library/export-method-dialog/export-method-dialog.module';
|
||||||
import { UrlListingModule } from '../../library/url-listing/url-listing.module';
|
import { UrlListingModule } from '../../library/url-listing/url-listing.module';
|
||||||
import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/dataset-description-form.module';
|
import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/dataset-description-form.module';
|
||||||
|
import { TableOfContentsModule } from '../misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module';
|
||||||
import { ExternalSourcesModule } from '../misc/external-sources/external-sources.module';
|
import { ExternalSourcesModule } from '../misc/external-sources/external-sources.module';
|
||||||
|
import { DatasetCopyDialogueComponent } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
|
||||||
import { DatasetEditorComponent } from './dataset-wizard/dataset-editor/dataset-editor.component';
|
import { DatasetEditorComponent } from './dataset-wizard/dataset-editor/dataset-editor.component';
|
||||||
import { DatasetWizardComponent } from './dataset-wizard/dataset-wizard.component';
|
import { DatasetWizardComponent } from './dataset-wizard/dataset-wizard.component';
|
||||||
import { DatasetExternalReferencesEditorComponent } from './dataset-wizard/external-references/dataset-external-references-editor.component';
|
import { DatasetExternalReferencesEditorComponent } from './dataset-wizard/external-references/dataset-external-references-editor.component';
|
||||||
|
@ -15,11 +19,9 @@ import { DatasetExternalRegistryDialogEditorComponent } from './dataset-wizard/e
|
||||||
import { DatasetExternalServiceDialogEditorComponent } from './dataset-wizard/external-references/editors/service/dataset-external-service-dialog-editor.component';
|
import { DatasetExternalServiceDialogEditorComponent } from './dataset-wizard/external-references/editors/service/dataset-external-service-dialog-editor.component';
|
||||||
import { DatasetRoutingModule } from './dataset.routing';
|
import { DatasetRoutingModule } from './dataset.routing';
|
||||||
import { DatasetCriteriaComponent } from './listing/criteria/dataset-criteria.component';
|
import { DatasetCriteriaComponent } from './listing/criteria/dataset-criteria.component';
|
||||||
import { DatasetListingComponent } from './listing/dataset-listing.component';
|
|
||||||
import { DatasetCopyDialogueComponent } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
|
|
||||||
import { DatasetUploadDialogue } from './listing/criteria/dataset-upload-dialogue/dataset-upload-dialogue.component';
|
import { DatasetUploadDialogue } from './listing/criteria/dataset-upload-dialogue/dataset-upload-dialogue.component';
|
||||||
|
import { DatasetListingComponent } from './listing/dataset-listing.component';
|
||||||
import { DatasetListingItemComponent } from './listing/listing-item/dataset-listing-item.component';
|
import { DatasetListingItemComponent } from './listing/listing-item/dataset-listing-item.component';
|
||||||
import { ExportMethodDialogModule } from '../../library/export-method-dialog/export-method-dialog.module';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -31,6 +33,8 @@ import { ExportMethodDialogModule } from '../../library/export-method-dialog/exp
|
||||||
ExternalSourcesModule,
|
ExternalSourcesModule,
|
||||||
ExportMethodDialogModule,
|
ExportMethodDialogModule,
|
||||||
DatasetDescriptionFormModule,
|
DatasetDescriptionFormModule,
|
||||||
|
TableOfContentsModule,
|
||||||
|
AngularStickyThingsModule,
|
||||||
DatasetRoutingModule
|
DatasetRoutingModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<form *ngIf="form" novalidate [formGroup]="form" class="col-12">
|
<form *ngIf="form" novalidate [formGroup]="form" class="col-12 form-container">
|
||||||
<app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication>
|
<app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="dynamic-form-editor col-md-8">
|
<div class="dynamic-form-editor col-md-12">
|
||||||
<div class="form-container" id="form-container">
|
<div id="form-container">
|
||||||
<mat-vertical-stepper #stepper [linear]="false">
|
<mat-vertical-stepper #stepper [linear]="false">
|
||||||
<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
|
<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
|
||||||
<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">
|
<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">
|
||||||
|
@ -17,13 +17,6 @@
|
||||||
</div>
|
</div>
|
||||||
</mat-vertical-stepper>
|
</mat-vertical-stepper>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div><table-of-contents (stepFound)="onStepFound($event)"></table-of-contents></div> -->
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4">
|
|
||||||
<table-of-contents (stepFound)="onStepFound($event)" class="w-100"></table-of-contents>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<!-- <div>
|
|
||||||
<table-of-contents (stepFound)="onStepFound($event)"></table-of-contents>
|
|
||||||
</div> -->
|
|
||||||
|
|
|
@ -1,94 +1,16 @@
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.dynamic-form-editor {
|
.dynamic-form-editor {
|
||||||
.form-container {
|
.form-container {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dynamic-form-editor {
|
.dynamic-form-editor {
|
||||||
mat-vertical-stepper {
|
mat-vertical-stepper {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toc-and-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
text-align: left;
|
|
||||||
max-width: 940px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// table-of-contents {
|
|
||||||
// top: 0px;
|
|
||||||
// position: sticky;
|
|
||||||
|
|
||||||
// Reposition on top of content on small screens and remove
|
|
||||||
// sticky positioning
|
|
||||||
// @media (max-width: 720px) {
|
|
||||||
// order: -1;
|
|
||||||
// position: inherit;
|
|
||||||
// width: auto;
|
|
||||||
// padding-left: 0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .ng-sidebar {
|
|
||||||
// width: 40%;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// /* .toc-container {
|
|
||||||
// background: #f9f9f9 none repeat scroll 0 0;
|
|
||||||
// border: 1px solid #aaa;
|
|
||||||
// display: table;
|
|
||||||
// font-size: 95%;
|
|
||||||
// margin-bottom: 1em;
|
|
||||||
// padding: 20px;
|
|
||||||
// width: 100%;
|
|
||||||
// } */
|
|
||||||
|
|
||||||
// .ui-steps .ui-steps-item {
|
|
||||||
// min-width: 10%;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .dynamic-form-editor {
|
|
||||||
// // background-color: #e0e0e0;
|
|
||||||
// // min-height: 80vh;
|
|
||||||
// mat-vertical-stepper {
|
|
||||||
// background-color: #e0e0e0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .ng-sidebar-container {
|
|
||||||
// overflow: inherit !important;
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// /* .ng-sidebar__content {
|
|
||||||
// overflow: inherit !important;
|
|
||||||
// } */
|
|
||||||
|
|
||||||
// .alignment-center{
|
|
||||||
// text-align: center;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .demo-progress-bar-container {
|
|
||||||
|
|
||||||
// width: 100%;
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .form-progress-bar {
|
|
||||||
|
|
||||||
// margin: 20px 0;
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .full-width{
|
|
||||||
// width:100%;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .full-height{
|
|
||||||
// height:100%;
|
|
||||||
// }
|
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
||||||
import { FormGroup } from '@angular/forms';
|
import { FormGroup } from '@angular/forms';
|
||||||
import { MatHorizontalStepper } from '@angular/material/stepper';
|
import { MatHorizontalStepper } from '@angular/material/stepper';
|
||||||
import { ActivatedRoute, Router } from '@angular/router';
|
|
||||||
import { BaseComponent } from '../../../core/common/base/base.component';
|
import { BaseComponent } from '../../../core/common/base/base.component';
|
||||||
import { Rule } from '../../../core/model/dataset-profile-definition/rule';
|
import { Rule } from '../../../core/model/dataset-profile-definition/rule';
|
||||||
import { FormFocusService } from './form-focus/form-focus.service';
|
|
||||||
import { LinkToScroll } from './tableOfContentsMaterial/table-of-contents';
|
import { LinkToScroll } from './tableOfContentsMaterial/table-of-contents';
|
||||||
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';
|
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';
|
||||||
|
|
||||||
|
@ -15,64 +13,21 @@ import { VisibilityRulesService } from './visibility-rules/visibility-rules.serv
|
||||||
})
|
})
|
||||||
export class DatasetDescriptionFormComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
|
export class DatasetDescriptionFormComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
|
||||||
|
|
||||||
// pathName: string;
|
|
||||||
// pages: Array<number>;
|
|
||||||
// activeStepperIndex = 1;
|
|
||||||
// visibleSidebar = false;
|
|
||||||
// datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel;
|
|
||||||
// private currentPageIndex = 0;
|
|
||||||
@ViewChild('stepper', { static: false }) stepper: MatHorizontalStepper;
|
@ViewChild('stepper', { static: false }) stepper: MatHorizontalStepper;
|
||||||
|
|
||||||
// //@Input() dataModel: DatasetProfileDefinitionModel;
|
|
||||||
@Input() path: string;
|
@Input() path: string;
|
||||||
@Input() form: FormGroup;
|
@Input() form: FormGroup;
|
||||||
@Input() visibilityRules: Rule[] = [];
|
@Input() visibilityRules: Rule[] = [];
|
||||||
// id: string;
|
|
||||||
// trackByFn = (index, item) => item ? item['id'] : null;
|
|
||||||
// pageTrackByFn = (index, item) => item['id'];
|
|
||||||
@Input() datasetProfileId: String;
|
@Input() datasetProfileId: String;
|
||||||
|
@Input() linkToScroll: LinkToScroll;
|
||||||
linkToScroll: LinkToScroll;
|
|
||||||
|
|
||||||
// uniqueId = Math.random().toString(36).substr(2, 9);
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private router: Router,
|
|
||||||
private route: ActivatedRoute,
|
|
||||||
private visibilityRulesService: VisibilityRulesService,
|
private visibilityRulesService: VisibilityRulesService,
|
||||||
private formFocusService: FormFocusService
|
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
//this.datasetId = route.snapshot.params['id'];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// getSubForm(subformName) {
|
|
||||||
// return this.form.controls[subformName];
|
|
||||||
// }
|
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
||||||
// this.visibilityRulesService.formGroup = this.form;
|
|
||||||
this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, this.form);
|
this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, this.form);
|
||||||
// this.datasetProfileDefinitionModel = new DatasetDescriptionFormEditorModel().fromModel(this.dataModel);
|
|
||||||
// this.visibilityRulesService.setModel(this.datasetProfileDefinitionModel);
|
|
||||||
|
|
||||||
// this.createPagination();
|
|
||||||
|
|
||||||
// const sections: Pair<Section[], number>[] = this.datasetProfileDefinitionModel.pages.map(page => new Pair<Section[], number>(page.sections, page.ordinal)).filter(x => x);
|
|
||||||
// const compositeFields: Pair<CompositeField[], number>[] = sections.map(section => new Pair<CompositeField[], number>(section.left.flatMap(sec => sec.compositeFields), section.right)).filter(x => x);
|
|
||||||
// const nestedSections: Pair<Section[], number>[] = sections.map(section => new Pair<Section[], number>(section.left.flatMap(x => x.sections), section.right)).filter(x => x);
|
|
||||||
// const nestedCompositeFields: Pair<CompositeField[], number>[] = nestedSections.map(section => new Pair<CompositeField[], number>(section.left.flatMap(x => x.compositeFields), section.right)).filter(x => x);
|
|
||||||
// const compositeFieldsUnion: Pair<CompositeField[], number>[] = compositeFields.concat(nestedCompositeFields);
|
|
||||||
|
|
||||||
//const fields = compositeFieldsUnion.flatJoinOn(x => x.right);
|
|
||||||
//this.formFocusService.setFields(compositeFieldsUnion);
|
|
||||||
// this.route.fragment
|
|
||||||
// .pipe(takeUntil(this._destroyed))
|
|
||||||
// .subscribe((fragment: string) => {
|
|
||||||
// const self = this;
|
|
||||||
// setTimeout(function () { self.scrollTo(fragment); });
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnChanges(changes: SimpleChanges) {
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
@ -80,59 +35,14 @@ export class DatasetDescriptionFormComponent extends BaseComponent implements On
|
||||||
// When the form is changed set stepper index to 0.
|
// When the form is changed set stepper index to 0.
|
||||||
if (changes['form'] && !changes['form'].isFirstChange()) {
|
if (changes['form'] && !changes['form'].isFirstChange()) {
|
||||||
this.stepper.selectedIndex = 0;
|
this.stepper.selectedIndex = 0;
|
||||||
|
} else if (changes['linkToScroll'] && changes['linkToScroll'].currentValue) {
|
||||||
|
if (changes['linkToScroll'].currentValue.page >= 0) {
|
||||||
|
this.stepper.selectedIndex = changes['linkToScroll'].currentValue.page;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onStepFound(linkToScroll: LinkToScroll) {
|
|
||||||
|
|
||||||
if (linkToScroll.page >= 0) {
|
|
||||||
this.stepper.selectedIndex = linkToScroll.page;
|
|
||||||
}
|
|
||||||
this.linkToScroll = linkToScroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
ngAfterViewInit() {
|
ngAfterViewInit() {
|
||||||
//this.visibilityRulesService.triggerVisibilityEvaluation();
|
|
||||||
// this.route.queryParams
|
|
||||||
// .pipe(takeUntil(this._destroyed))
|
|
||||||
// .subscribe((params) => {
|
|
||||||
// if (params && 'page' in params) {
|
|
||||||
// this.changeCurrentPage(params['page']);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// toggleSidebar() {
|
|
||||||
// this.visibleSidebar = !this.visibleSidebar;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// shouldDisplaySection(section: Section): Boolean {
|
|
||||||
// return (section.page) === this.currentPageIndex;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// createPagination() {
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// changePageIndex(index: any) {
|
|
||||||
// this.router.navigate([this.route.snapshot.url[0] + '/' + this.route.snapshot.url[1]], { queryParams: { page: this.pages[index - 1] } });
|
|
||||||
// }
|
|
||||||
|
|
||||||
// scrollTo(sectionID: string) {
|
|
||||||
// if (!sectionID) { return; }
|
|
||||||
// const element = document.querySelector('#' + sectionID);
|
|
||||||
// if (!element) { return; }
|
|
||||||
// element.scrollIntoView();
|
|
||||||
// this.visibleSidebar = true;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// changeCurrentPage(pageString: string) {
|
|
||||||
// //if (!pageString) { return; }
|
|
||||||
// const page = parseInt(pageString);
|
|
||||||
// /*if (isNaN(page)) { return; }
|
|
||||||
// const pageIndex = this.pages.indexOf(page);
|
|
||||||
// if (pageIndex === -1) { return; }*/
|
|
||||||
// this.stepper.selectedIndex = page;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
|
||||||
import { CommonFormsModule } from '../../../common/forms/common-forms.module';
|
import { CommonFormsModule } from '../../../common/forms/common-forms.module';
|
||||||
import { CommonUiModule } from '../../../common/ui/common-ui.module';
|
import { CommonUiModule } from '../../../common/ui/common-ui.module';
|
||||||
import { AutoCompleteModule } from '../../../library/auto-complete/auto-complete.module';
|
import { AutoCompleteModule } from '../../../library/auto-complete/auto-complete.module';
|
||||||
|
@ -8,16 +9,16 @@ import { FormProgressIndicationComponent } from './components/form-progress-indi
|
||||||
import { FormSectionComponent } from './components/form-section/form-section.component';
|
import { FormSectionComponent } from './components/form-section/form-section.component';
|
||||||
import { DatasetDescriptionFormComponent } from './dataset-description-form.component';
|
import { DatasetDescriptionFormComponent } from './dataset-description-form.component';
|
||||||
import { FormFocusService } from './form-focus/form-focus.service';
|
import { FormFocusService } from './form-focus/form-focus.service';
|
||||||
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';
|
|
||||||
import { TableOfContentsModule } from './tableOfContentsMaterial/table-of-contents.module';
|
import { TableOfContentsModule } from './tableOfContentsMaterial/table-of-contents.module';
|
||||||
import { TableOfContents } from './tableOfContentsMaterial/table-of-contents';
|
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonUiModule,
|
CommonUiModule,
|
||||||
CommonFormsModule,
|
CommonFormsModule,
|
||||||
AutoCompleteModule,
|
AutoCompleteModule,
|
||||||
TableOfContentsModule
|
// TableOfContentsModule,
|
||||||
|
// AngularStickyThingsModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
DatasetDescriptionFormComponent,
|
DatasetDescriptionFormComponent,
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
<div *ngIf="getLinks()?.length" class="docs-toc-container">
|
<div *ngIf="links?.length" class="docs-toc-container">
|
||||||
<div class="docs-toc-heading">Contents</div>
|
<div class="docs-toc-heading">Contents</div>
|
||||||
<!-- <nav> -->
|
<!-- <nav> -->
|
||||||
<!-- <a [href]="_rootUrl + '#' + link.id" -->
|
<!-- <a [href]="_rootUrl + '#' + link.id" -->
|
||||||
<span *ngFor="let link of getLinks(); let i = index"
|
<div class="scroll-container">
|
||||||
(click)="goToStep(link)"
|
<span *ngFor="let link of links; let i = index" (click)="goToStep(link)" class="docs-level-{{link.type}} docs-link" [class.docs-active]="link.active">
|
||||||
class="docs-level-{{link.type}} docs-link"
|
{{link.name}}
|
||||||
[class.docs-active]="link.active">
|
</span>
|
||||||
{{link.name}}
|
<!-- </nav> -->
|
||||||
</span>
|
</div>
|
||||||
<!-- </nav> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,58 +1,50 @@
|
||||||
:host {
|
|
||||||
font-size: 13px;
|
|
||||||
// Width is container width minus content width
|
|
||||||
width: 19%;
|
|
||||||
height: fit-content;
|
|
||||||
position: -webkit-sticky;
|
|
||||||
position: sticky;
|
|
||||||
// display: inline-flex;
|
|
||||||
align-self: flex-start;
|
|
||||||
top: 0;
|
|
||||||
padding-left: 25px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-toc-container {
|
.docs-toc-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px 0 10px 10px;
|
padding: 5px 0 10px 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-left: solid 4px #0c7489;
|
border-left: solid 4px #0c7489;
|
||||||
|
|
||||||
.docs-link {
|
.scroll-container {
|
||||||
color: rgba(0, 0, 0, 0.54);
|
overflow-y: auto;
|
||||||
// color: mat-color($app-blue-theme-foreground, secondary-text);
|
// calc(100vh - 250px)
|
||||||
transition: color 100ms;
|
height: calc(100vh - 250px);
|
||||||
|
}
|
||||||
|
|
||||||
&:hover,
|
.docs-link {
|
||||||
&.docs-active {
|
color: rgba(0, 0, 0, 0.54);
|
||||||
color: #0c7489;
|
// color: mat-color($app-blue-theme-foreground, secondary-text);
|
||||||
// color: mat-color($primary, if($is-dark-theme, 200, default));
|
transition: color 100ms;
|
||||||
}
|
|
||||||
}
|
&:hover,
|
||||||
|
&.docs-active {
|
||||||
|
color: #0c7489;
|
||||||
|
// color: mat-color($primary, if($is-dark-theme, 200, default));
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-toc-heading {
|
.docs-toc-heading {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
margin: 8px 0 0;
|
margin: 8px 0 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
text-overflow: ellipsis !important;
|
text-overflow: ellipsis !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: rgba(0, 0, 0, 0.54);
|
color: rgba(0, 0, 0, 0.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-level-mat-expansion-panel {
|
.docs-level-mat-expansion-panel {
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-level-h5 {
|
.docs-level-h5 {
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,29 +1,22 @@
|
||||||
import { DOCUMENT } from '@angular/common';
|
import { DOCUMENT } from '@angular/common';
|
||||||
import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
|
import { Component, ElementRef, EventEmitter, Inject, OnInit, Output } from '@angular/core';
|
||||||
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
import { fromEvent, Subject } from 'rxjs';
|
import { interval, Subject, Subscription } from 'rxjs';
|
||||||
import { debounceTime, takeUntil } from 'rxjs/operators';
|
import { distinctUntilChanged } from 'rxjs/operators';
|
||||||
import { link } from 'fs';
|
import { BaseComponent } from '../../../../core/common/base/base.component';
|
||||||
|
|
||||||
|
|
||||||
interface Link {
|
interface Link {
|
||||||
/* id of the section*/
|
/* id of the section*/
|
||||||
id: string;
|
id: string;
|
||||||
|
|
||||||
/* header type h3/h4 */
|
/* header type h3/h4 */
|
||||||
type: string;
|
type: string;
|
||||||
|
|
||||||
/* If the anchor is in view of the page */
|
/* If the anchor is in view of the page */
|
||||||
active: boolean;
|
active: boolean;
|
||||||
|
|
||||||
/* name of the anchor */
|
/* name of the anchor */
|
||||||
name: string;
|
name: string;
|
||||||
|
|
||||||
/* top offset px of the anchor */
|
/* top offset px of the anchor */
|
||||||
top: number;
|
top: number;
|
||||||
|
|
||||||
page: number;
|
page: number;
|
||||||
|
|
||||||
section: number;
|
section: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,171 +25,73 @@ interface Link {
|
||||||
styleUrls: ['./table-of-contents.scss'],
|
styleUrls: ['./table-of-contents.scss'],
|
||||||
templateUrl: './table-of-contents.html'
|
templateUrl: './table-of-contents.html'
|
||||||
})
|
})
|
||||||
export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
|
export class TableOfContents extends BaseComponent implements OnInit {
|
||||||
|
|
||||||
@Input() links: Link[] = [];
|
|
||||||
@Input() container: string;
|
|
||||||
@Input() headerSelectors = '.toc-page-header, .toc-section-header, .toc-copositeField-header';
|
|
||||||
|
|
||||||
|
links: Link[] = [];
|
||||||
|
container: string;
|
||||||
|
headerSelectors = '.toc-page-header, .toc-section-header, .toc-copositeField-header';
|
||||||
@Output() stepFound = new EventEmitter<LinkToScroll>();
|
@Output() stepFound = new EventEmitter<LinkToScroll>();
|
||||||
|
subscription: Subscription;
|
||||||
|
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
|
||||||
|
|
||||||
_rootUrl = this._router.url.split('#')[0];
|
constructor(
|
||||||
private _scrollContainer: any;
|
|
||||||
private _destroyed = new Subject();
|
|
||||||
private _urlFragment = '';
|
|
||||||
private selectedLinkId: string;
|
|
||||||
|
|
||||||
constructor(private _router: Router,
|
|
||||||
private _route: ActivatedRoute,
|
|
||||||
private _element: ElementRef,
|
|
||||||
@Inject(DOCUMENT) private _document: Document) {
|
@Inject(DOCUMENT) private _document: Document) {
|
||||||
|
super();
|
||||||
this._router.events.pipe(takeUntil(this._destroyed)).subscribe((event) => {
|
|
||||||
if (event instanceof NavigationEnd) {
|
|
||||||
const rootUrl = _router.url.split('#')[0];
|
|
||||||
if (rootUrl !== this._rootUrl) {
|
|
||||||
this.links = this.createLinks();
|
|
||||||
this._rootUrl = rootUrl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this._route.fragment.pipe(takeUntil(this._destroyed)).subscribe(fragment => {
|
|
||||||
this._urlFragment = fragment;
|
|
||||||
|
|
||||||
const target = document.getElementById(this._urlFragment);
|
|
||||||
if (target) {
|
|
||||||
target.scrollIntoView();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// On init, the sidenav content element doesn't yet exist, so it's not possible
|
//emit value every 500ms
|
||||||
// to subscribe to its scroll event until next tick (when it does exist).
|
const source = interval(500);
|
||||||
Promise.resolve().then(() => {
|
this.subscription = source.subscribe(val => {
|
||||||
this._scrollContainer = this.container ?
|
const headers = Array.from(this._document.querySelectorAll(this.headerSelectors)) as HTMLElement[];
|
||||||
this._document.querySelectorAll(this.container)[0] : window;
|
this.linksSubject.next(headers);
|
||||||
|
|
||||||
if (this._scrollContainer) {
|
|
||||||
fromEvent(this._scrollContainer, 'scroll').pipe(
|
|
||||||
takeUntil(this._destroyed),
|
|
||||||
debounceTime(10))
|
|
||||||
.subscribe(() => this.onScroll());
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
ngAfterViewInit() {
|
this.linksSubject.asObservable()
|
||||||
this.updateScrollPosition();
|
.pipe(distinctUntilChanged((p: HTMLElement[], q: HTMLElement[]) => JSON.stringify(p) == JSON.stringify(q)))
|
||||||
}
|
.subscribe(headers => {
|
||||||
|
const links: Array<Link> = [];
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
if (headers.length) {
|
||||||
this._destroyed.next();
|
let page;
|
||||||
}
|
let section;
|
||||||
|
for (const header of headers) {
|
||||||
updateScrollPosition(): void {
|
let name;
|
||||||
this.links = this.createLinks();
|
let id;
|
||||||
|
if (header.classList.contains('toc-page-header')) {
|
||||||
const target = document.getElementById(this._urlFragment);
|
name = header.innerText.trim().replace(/^link/, '');
|
||||||
if (target) {
|
id = header.id;
|
||||||
target.scrollIntoView();
|
page = header.id.split('_')[1];
|
||||||
}
|
section = undefined;
|
||||||
}
|
} else if (header.classList.contains('toc-section-header')) {
|
||||||
|
name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
|
||||||
/** Gets the scroll offset of the scroll container */
|
id = header.id;
|
||||||
private getScrollOffset(): number | void {
|
page = header.id.split('.')[1];
|
||||||
const { top } = this._element.nativeElement.getBoundingClientRect();
|
section = header.id;
|
||||||
if (typeof this._scrollContainer.scrollTop !== 'undefined') {
|
} else if (header.classList.contains('toc-copositeField-header')) {
|
||||||
return this._scrollContainer.scrollTop + top;
|
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
|
||||||
} else if (typeof this._scrollContainer.pageYOffset !== 'undefined') {
|
id = header.id;
|
||||||
return this._scrollContainer.pageYOffset + top;
|
// id = header.parentElement.parentElement.parentElement.id;
|
||||||
}
|
}
|
||||||
}
|
const { top } = header.getBoundingClientRect();
|
||||||
|
links.push({
|
||||||
private createLinks(): Link[] {
|
name,
|
||||||
const links: Array<Link> = [];
|
id,
|
||||||
const headers =
|
type: header.tagName.toLowerCase(),
|
||||||
Array.from(this._document.querySelectorAll(this.headerSelectors)) as HTMLElement[];
|
top: top,
|
||||||
|
active: false,
|
||||||
if (headers.length) {
|
page: page,
|
||||||
for (const header of headers) {
|
section: section
|
||||||
// const step = 0;
|
});
|
||||||
// remove the 'link' icon name from the inner text
|
}
|
||||||
const name = header.innerText.trim().replace(/^link/, '');
|
|
||||||
const { top } = header.getBoundingClientRect();
|
|
||||||
// links.push({
|
|
||||||
// name,
|
|
||||||
// // step,
|
|
||||||
// type: header.tagName.toLowerCase(),
|
|
||||||
// top: top,
|
|
||||||
// id: header.id,
|
|
||||||
// active: false,
|
|
||||||
// section: section
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return links;
|
|
||||||
}
|
|
||||||
|
|
||||||
private onScroll(): void {
|
|
||||||
// for (let i = 0; i < this.links.length; i++) {
|
|
||||||
// this.links[i].active = this.isLinkActive(this.links[i], this.links[i + 1]);
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
// private isLinkActive(currentLink: any, nextLink: any): boolean {
|
|
||||||
// A link is considered active if the page is scrolled passed the anchor without also
|
|
||||||
// being scrolled passed the next link
|
|
||||||
// const scrollOffset = this.getScrollOffset();
|
|
||||||
// return scrollOffset >= currentLink.top && !(nextLink && nextLink.top < scrollOffset);
|
|
||||||
// }
|
|
||||||
|
|
||||||
getLinks() {
|
|
||||||
const links: Array<Link> = [];
|
|
||||||
const headers =
|
|
||||||
Array.from(this._document.querySelectorAll(this.headerSelectors)) as HTMLElement[];
|
|
||||||
|
|
||||||
if (headers.length) {
|
|
||||||
let page;
|
|
||||||
let section;
|
|
||||||
for (const header of headers) {
|
|
||||||
let name;
|
|
||||||
let id;
|
|
||||||
if (header.classList.contains('toc-page-header')) {
|
|
||||||
name = header.innerText.trim().replace(/^link/, '');
|
|
||||||
id = header.id;
|
|
||||||
page = header.id.split('_')[1];
|
|
||||||
section = undefined;
|
|
||||||
} else if (header.classList.contains('toc-section-header')) {
|
|
||||||
name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
|
|
||||||
id = header.id;
|
|
||||||
page = header.id.split('.')[1];
|
|
||||||
section = header.id;
|
|
||||||
} else if (header.classList.contains('toc-copositeField-header')) {
|
|
||||||
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
|
|
||||||
id = header.id;
|
|
||||||
// id = header.parentElement.parentElement.parentElement.id;
|
|
||||||
}
|
}
|
||||||
const { top } = header.getBoundingClientRect();
|
this.links = links;
|
||||||
links.push({
|
})
|
||||||
name,
|
|
||||||
id,
|
|
||||||
type: header.tagName.toLowerCase(),
|
|
||||||
top: top,
|
|
||||||
active: this.selectedLinkId == id ? true : false,
|
|
||||||
page: page,
|
|
||||||
section: section
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.links = links;
|
|
||||||
return links;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
goToStep(link: Link) {
|
goToStep(link: Link) {
|
||||||
this.selectedLinkId = link.id;
|
// this.selectedLinkId = link.id;
|
||||||
this.stepFound.emit({
|
this.stepFound.emit({
|
||||||
page: link.page,
|
page: link.page,
|
||||||
section: link.section
|
section: link.section
|
||||||
|
@ -210,7 +105,7 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
|
||||||
if (scrolledY) {
|
if (scrolledY) {
|
||||||
window.scroll(0, scrolledY - 70);
|
window.scroll(0, scrolledY - 70);
|
||||||
}
|
}
|
||||||
}, 200);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue