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

UI Fix. Expansion Panels expand when the selected element is collapsed.

This commit is contained in:
Kristian Ntavidi 2021-03-17 17:49:42 +02:00
parent 9bdc426af1
commit 72d40b0f33
10 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
View File

@ -54,7 +54,7 @@
<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 #spacer></div>
<table-of-contents [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 [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>
</div>
</div>
</div>
@ -81,7 +81,7 @@
</div>
<div class="col-auto form" id="dataset-editor-form">
<app-dataset-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="formGroup.get('dmp').value.id" [availableProfiles]="formGroup.get('dmp').value.profiles" (formChanged)="formChanged()"></app-dataset-editor-component>
<app-dataset-description [hidden]="this.step === 0" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll"></app-dataset-description>
<app-dataset-description [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hidden]="this.step === 0" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll"></app-dataset-description>
</div>
</div>
</form>

2
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
View File

@ -90,6 +90,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
scrollTop: number;
tocScrollTop: number;
links: Link[] = [];
//the table seraches for elements to scroll on page with id (TOCENTRY_ID_PREFIX+fieldsetId<Tocentry>)
TOCENTRY_ID_PREFIX="TocEntRy";
constructor(
private datasetWizardService: DatasetWizardService,

4
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
View File

@ -75,7 +75,7 @@
<ng-container *ngSwitchCase="tocentriesType.FieldSet">
<!-- FIELDSET CASE -->
<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="fieldsetEntry.id">
<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="panelExpanded = true">
<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(fieldsetEntry.form.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)">
@ -122,7 +122,7 @@
<div *ngIf="form.get('sections')" class="col-12"><!-- MAYBEE NOT NEEDED-->
<div *ngFor="let sectionEntry of tocentry.subEntries; let j = index;" class="row">
<app-form-section class="col-12" [tocentry]="sectionEntry" [form]="sectionEntry.form" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [form]="sectionEntry.form" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
[datasetProfileId]="datasetProfileId"></app-form-section>
</div>
</div>

1
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
View File

@ -28,6 +28,7 @@ export class FormSectionComponent implements OnInit, OnChanges {
subsectionLinkToScroll: LinkToScroll;
tocentriesType = ToCEntryType;
@Input() TOCENTRY_ID_PREFIX="TOCENTRY_ID_PREFIX";
constructor(
public visibilityRulesService: VisibilityRulesService,

2
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
View File

@ -36,7 +36,7 @@
</h4> -->
<div *ngFor="let sectionEntry of pageEntry.subEntries; let i = index;">
<div class="row">
<app-form-section class="col-12" [tocentry]="sectionEntry" [path]="z+1"
<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [path]="z+1"
[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
[linkToScroll]="linkToScroll"></app-form-section>
</div>

1
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
View File

@ -24,6 +24,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
tocentries: ToCEntry[];
@Input() form: FormGroup;
@Input() TOCENTRY_ID_PREFIX="TocEntRy";
private _form: FormGroup;

3
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
View File

@ -25,7 +25,8 @@
[tocentries]="entry.subEntries"
*ngIf="entry.subEntries && entry.subEntries.length && expandChildren[idx]"
(entrySelected)="onEntrySelected($event)"
[selected]="selected">
[selected]="selected"
[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX">
</table-of-contents-internal>
</div>

13
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
View File

@ -23,6 +23,7 @@ export class TableOfContentsInternal implements OnInit {
expandChildren:boolean[];
tocEntryTypeEnum = ToCEntryType;
@Input() TOCENTRY_ID_PREFIX="TocEntRy";
constructor(public visibilityRulesService: VisibilityRulesService){
@ -54,9 +55,17 @@ export class TableOfContentsInternal implements OnInit {
if(entry.type === ToCEntryType.FieldSet){
const fieldSetId = entry.id;
const element = document.getElementById(fieldSetId);
const element = document.getElementById(this.TOCENTRY_ID_PREFIX+fieldSetId);
if(element){
element.scrollIntoView({behavior:'smooth'});
element.click();//open mat expansion panel
//scroll asyn in 200 ms so the expansion panel is expanded and the element coordinates are updated
setTimeout(() => {
const element = document.getElementById(this.TOCENTRY_ID_PREFIX+fieldSetId);
if(element){
element.scrollIntoView({behavior:'smooth'});
}
}, 200);
// event.stopPropagation();
}

2
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
View File

@ -27,7 +27,7 @@
<div *ngIf="tocentries" class="docs-toc-container">
<div class="scroll-container col-12">
<table-of-contents-internal [tocentries]="tocentries"
<table-of-contents-internal [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [tocentries]="tocentries"
(entrySelected)="onToCentrySelected($event)"
[selected]="tocentrySelected"

1
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts
View File

@ -45,6 +45,7 @@ export class TableOfContents extends BaseComponent implements OnInit {
@Input() isActive: boolean;
tocentries: ToCEntry[] = null;
@Input() TOCENTRY_ID_PREFIX = '';
// visibilityRules:Rule[] = [];
@Input() visibilityRules:Rule[] = [];