From 1389b3dbf5dce57e56d0cecd600716279edac159 Mon Sep 17 00:00:00 2001
From: Kristan Ntavidi <kntavidi@cite.gr>
Date: Thu, 18 Mar 2021 10:52:18 +0200
Subject: [PATCH] UI Fixes. Panels in wizard expand all the way up to page
 level (when selected from table of contents). Hide overflown text in table.

---
 .../dataset-wizard.component.scss             |  6 +++---
 .../form-section/form-section.component.html  |  6 ++++--
 .../form-section/form-section.component.ts    | 14 +++++++++++--
 .../dataset-description.component.html        |  6 ++++--
 .../dataset-description.component.ts          | 10 ++++++++-
 .../table-of-contents-internal.html           |  4 +++-
 .../table-of-contents-internal.scss           | 21 +++++++++----------
 .../table-of-contents-internal.ts             |  5 ++---
 .../table-of-contents.html                    |  2 +-
 .../table-of-contents.scss                    |  7 ++++++-
 10 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
index 893e64223..fc32448f5 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
@@ -277,7 +277,7 @@
     display: flex;
 	flex-direction: column;
 	height: calc(100vh - 246px);
-  max-width: 366px;
+  // max-width: 366px;
   }
 
   .stepper-options {
@@ -317,8 +317,8 @@
 
   .stepper-list {
     .toc-pane-container {
-      padding-left: 0.2rem;
-      overflow-x: hidden;
+      // padding-left: 0.2rem;
+      // overflow-x: hidden;
       span {
         text-align: left;
         font-weight: 400;
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
index 0f122b130..4dd75101e 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
@@ -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]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="panelExpanded = true">
+			<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="onAskedToScroll()">
 				<!-- <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)">
@@ -123,7 +123,9 @@
 			<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 [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>
+					 [datasetProfileId]="datasetProfileId"
+					 (askedToScroll)="onAskedToScroll()"
+					 ></app-form-section>
 				</div>
 			</div>
 		</ng-container>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
index c80ea694b..4852cb945 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
 import { FormGroup, FormArray, AbstractControl } from '@angular/forms';
 import { FormFocusService } from '../../form-focus/form-focus.service';
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
@@ -26,9 +26,12 @@ export class FormSectionComponent implements OnInit, OnChanges {
 	panelExpanded = true;
 	// sub = true;
 	subsectionLinkToScroll: LinkToScroll;
+
+
+	@Output() askedToScroll = new EventEmitter<void>();
 	
 	tocentriesType = ToCEntryType;
-	@Input() TOCENTRY_ID_PREFIX="TOCENTRY_ID_PREFIX";
+	@Input() TOCENTRY_ID_PREFIX="";
 
 	constructor(
 		public visibilityRulesService: VisibilityRulesService,
@@ -90,4 +93,11 @@ export class FormSectionComponent implements OnInit, OnChanges {
 	// next(compositeField: CompositeField) {
 	// 	this.formFocusService.focusNext(compositeField);
 	// }
+
+
+
+	onAskedToScroll(){
+		this.panelExpanded = true;
+		this.askedToScroll.emit();
+	}
 }
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
index 6017cbe3d..0e6b9334f 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
@@ -22,7 +22,7 @@
 					<mat-accordion [multi]="true">
 						
 						<div *ngFor="let pageEntry of tocentries; let z = index;">
-							<mat-expansion-panel [expanded]="true">
+							<mat-expansion-panel [expanded]="true" #expansionPanel>
 
 								<mat-expansion-panel-header>
 									<mat-panel-title>
@@ -38,7 +38,9 @@
 									<div class="row">
 										<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>
+											[linkToScroll]="linkToScroll"
+											(askedToScroll)="onAskedToScroll(expansionPanel)"
+											></app-form-section>
 									</div>
 								</div>
 							</mat-expansion-panel>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
index e58f13b99..b6b66eef0 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
@@ -1,5 +1,6 @@
 import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core';
 import { AbstractControl, AbstractControlOptions, FormArray, FormGroup } from '@angular/forms';
+import { MatExpansionPanel } from '@angular/material';
 import { MatHorizontalStepper } from '@angular/material/stepper';
 import { Rule } from '@app/core/model/dataset-profile-definition/rule';
 import { DatasetProfileTableOfContentsInternalSection } from '@app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
@@ -24,7 +25,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 	tocentries: ToCEntry[];
 	@Input() form: FormGroup;
 
-	@Input() TOCENTRY_ID_PREFIX="TocEntRy";
+	@Input() TOCENTRY_ID_PREFIX="";
 
 
 	private _form: FormGroup;
@@ -67,6 +68,13 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 
 
 
+	onAskedToScroll(panel: MatExpansionPanel){
+		panel.open();
+	}
+
+
+
+
 	private _buildRecursively(form: FormGroup,whatAmI:ToCEntryType):ToCEntry{
 		if(!form) return null;
 
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
index 6cfc0b34f..7ad388d74 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.html
@@ -10,7 +10,9 @@
 			[ngStyle]="calculateStyle(entry)"
 			[ngClass]="calculateClass(entry)"
 			>
-				{{entry.numbering}}. {{entry.label}} 
+				<span>
+					{{entry.numbering}}. {{entry.label}} 
+				</span>
 				<!-- <ng-container *ngIf="entry.subEntries && entry.subEntries.length && !expandChildren[idx]"> 
 					<small>
 						({{entry.subEntries.length}})
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.scss
index 6a9aa908d..5d69b22e7 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.scss
@@ -1,21 +1,20 @@
 
 .internal-table{
-  margin-left: 1.2em;
-  // width: inherit;
+  margin-left: 1em;
+  padding-left: 0.2rem;
 }
-// .table-entry-container{
-//   // overflow: hidden;
-//   // width: inherit;
-// }
 .table-entry{
-  cursor: pointer;
-  // display: block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  // overflow: hidden;
 
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-left: 0.2rem;
   color: rgba(0, 0, 0, 0.54);
   transition: color 100ms;
+
+  display: block;
+  span{
+    white-space: nowrap;
+  }
 }
 
 .table-entry:hover{
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
index d3901af3c..a186f42d2 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
@@ -23,7 +23,7 @@ export class TableOfContentsInternal implements OnInit {
 
 	expandChildren:boolean[];
 	tocEntryTypeEnum = ToCEntryType;
-	@Input() TOCENTRY_ID_PREFIX="TocEntRy";
+	@Input() TOCENTRY_ID_PREFIX="";
 
 
 	constructor(public visibilityRulesService: VisibilityRulesService){
@@ -65,8 +65,7 @@ export class TableOfContentsInternal implements OnInit {
 					if(element){
 						element.scrollIntoView({behavior:'smooth'});
 					}
-				}, 200);
-				// event.stopPropagation();
+				}, 300);
 			}
 
 		}
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
index 9168cc387..73225f41f 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
@@ -26,7 +26,7 @@
 
 <div *ngIf="tocentries" class="docs-toc-container">
 	
-	<div class="scroll-container col-12">
+	<div class="scroll-container col-12 internal-table">
 		<table-of-contents-internal [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [tocentries]="tocentries"
 		(entrySelected)="onToCentrySelected($event)"
 		[selected]="tocentrySelected"
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss
index 9a0092598..7dbc877af 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss
@@ -72,4 +72,9 @@ span {
 // .internal-table-outer{
 //   padding-left: 1.1em;
 //   width: 100%;
-// }
\ No newline at end of file
+// }
+
+.internal-table{
+  max-width: 320px;
+  min-width: 320px;
+}
\ No newline at end of file