MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Add Table of contents for the Dataset Descriptor in the New DMP Wizard (ref #223)

This commit is contained in:
George Kalampokis 2020-01-16 12:08:51 +02:00
parent 25fa5a5fa3
commit ea5ec98955
4 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html
View File

@ -48,9 +48,17 @@
required>
<mat-hint>{{'QUICKWIZARD.HINT' | translate}}</mat-hint>
</mat-form-field>
<app-dataset-description-form class="col-12" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]"
[visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value.id">
</app-dataset-description-form>
<div class="row toc-pane-container" #boundary>
<div class="col-md-8 h-100 ">
<app-dataset-description-form class="w-100 h-100" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]"
[visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value.id" [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>
</div>
</div>
</div>

10
dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.scss
View File

@ -0,0 +1,10 @@
.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;
}

6
dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.ts
View File

@ -9,6 +9,7 @@ import { BaseComponent } from '@common/base/base.component';
import { TranslateService } from "@ngx-translate/core";
import { Observable } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
@Component({
selector: 'app-dataset-editor-wizard-component',
@ -122,4 +123,9 @@ export class DatasetEditorWizardComponent extends BaseComponent implements OnIni
window.scrollTo(0, 0);
}
}
linkToScroll: LinkToScroll;
onStepFound(linkToScroll: LinkToScroll) {
this.linkToScroll = linkToScroll;
}
}

6
dmp-frontend/src/app/ui/quick-wizard/quick-wizard.module.ts
View File

@ -14,6 +14,8 @@ import { QuickWizardEditorComponent } from '@app/ui/quick-wizard/quick-wizard-ed
import { QuickWizardRoutingModule } from '@app/ui/quick-wizard/quick-wizard.routing';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { TableOfContentsModule } from '../misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module';
import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
@NgModule({
imports: [
@ -24,7 +26,9 @@ import { CommonUiModule } from '@common/ui/common-ui.module';
ConfirmationDialogModule,
QuickWizardRoutingModule,
DatasetDescriptionFormModule,
DmpModule
DmpModule,
TableOfContentsModule,
AngularStickyThingsModule
],
declarations: [
GrantEditorWizardComponent,