Dataset profile editor. Preview step basic implementation.

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html

@@ -171,21 +171,23 @@
 			<div class="row" class="actions-list">
 				<mat-list role="list">
 					<!-- INPUT TOOLS -->
-					<h3 matSubheader>Input tools</h3>
+					<ng-container *ngIf="!viewOnly">
-					<!-- Add new Input -->
+						<h3 matSubheader>Input tools</h3>
-					<mat-list-item *ngIf="!viewOnly">
+						<!-- Add new Input -->
-						<mat-icon matListIcon>folder</mat-icon>
+						<mat-list-item>
-						<span matLine (click)="addNewField()" style="cursor: pointer;" >Add Input</span>
+							<mat-icon matListIcon>folder</mat-icon>
-					</mat-list-item>
+							<span matLine (click)="addNewField()" style="cursor: pointer;" >Add Input</span>
-					<!-- Visibility -->
+						</mat-list-item>
-					<mat-list-item *ngIf="targetField && !viewOnly">
+						<!-- Visibility -->
-						<mat-icon matListIcon [ngClass]="{'text-muted':!targetField.get('viewStyle').get('renderStyle').value}"
+						<mat-list-item *ngIf="targetField">
-						>visibility_off</mat-icon>
+							<mat-icon matListIcon [ngClass]="{'text-muted':!targetField.get('viewStyle').get('renderStyle').value}"
-
+							>visibility_off</mat-icon>
-						<button matLine class="mat-button" (click)="addVisibilityRule(targetField)" [disabled]="!targetField.get('viewStyle').get('renderStyle').value">
+	
-							<span>Add Visibility Rule</span>
+							<button matLine class="mat-button" (click)="addVisibilityRule(targetField)" [disabled]="!targetField.get('viewStyle').get('renderStyle').value">
-						</button>
+								<span>Add Visibility Rule</span>
-					</mat-list-item>
+							</button>
+						</mat-list-item>
+					</ng-container>
 			
 					<!-- INPUT SETTINGS -->
 					<h3 matSubheader>Input settings</h3>
@@ -193,7 +195,7 @@
 					<!-- multiplicity -->
 					<mat-list-item>
 						<!-- <mat-icon matListIcon>folder</mat-icon> -->
-						<mat-checkbox matLine [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)" [disabled]="viewOnly ||!targetField?.get('viewStyle').get('renderStyle').value">
+						<mat-checkbox matLine [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [disabled]="viewOnly ||!targetField?.get('viewStyle').get('renderStyle').value">
 							{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}
 						</mat-checkbox>
 					</mat-list-item>
@@ -213,15 +215,17 @@
 			
 			
 					<!-- OTHER ACTIONS -->
-					<h3 matSubheader>Other actions</h3>
+					<ng-container *ngIf="!viewOnly">
-					<!-- <mat-list-item> -->
+						<h3 matSubheader>Other actions</h3>
-						<!-- <mat-icon matListIcon>folder</mat-icon> -->
+						<!-- <mat-list-item> -->
-						<!-- <mat-checkbox [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX' | translate}}</mat-checkbox>
+							<!-- <mat-icon matListIcon>folder</mat-icon> -->
-					</mat-list-item> -->
+							<!-- <mat-checkbox [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX' | translate}}</mat-checkbox>
-					<mat-list-item *ngIf="targetField">
+						</mat-list-item> -->
-						<mat-icon matListIcon>delete</mat-icon>
+						<mat-list-item *ngIf="targetField && !viewOnly">
-						<span matLine (click)="deleteTargetField()" style="cursor: pointer;">Delete</span>
+							<mat-icon matListIcon>delete</mat-icon>
-					</mat-list-item>
+							<span matLine (click)="deleteTargetField()" style="cursor: pointer;">Delete</span>
+						</mat-list-item>
+					</ng-container>
 				</mat-list>
 			</div>
 		</div>
@@ -235,9 +239,12 @@
 
 </app-form-composite-field> -->
 
-Current FORM: {{this.form.value |json}}
+<!-- Current FORM: {{this.form.value |json}}
 <br>
-Target: {{this.targetField?.value |json}}
+Target: {{this.targetField?.value |json}} -->
+
+
+
 <!-- 
 <button (click)="generatePreview()">Generate preview</button>
 

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts

@@ -27,7 +27,7 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 
 	previewForm: FormGroup;
 	// isComposite = false;
-	isMultiplicityEnabled = false;
+	// isMultiplicityEnabled = false;
 	viewStyleEnum = DatasetProfileFieldViewStyle;
 
 	constructor(
@@ -38,13 +38,27 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 	ngOnChanges(){
 		this.setTargetField(null);
 	}
+
+	get isMultiplicityEnabled(){
+		if(!this.form.get('multiplicity')){
+			return false;
+		}
+
+		if (this.form.get('multiplicity').value.min > 0 || this.form.get('multiplicity').value.max > 0) {
+			return true;
+		}
+
+		return false;
+	}
+
+
 	ngOnInit() {
 		//this.addNewField();
-		if (this.form.get('multiplicity')) {
+		// if (this.form.get('multiplicity')) {
-			if (this.form.get('multiplicity').value.min > 1 || this.form.get('multiplicity').value.max > 1) {
+		// 	if (this.form.get('multiplicity').value.min > 1 || this.form.get('multiplicity').value.max > 1) {
-				this.isMultiplicityEnabled = true;
+		// 		this.isMultiplicityEnabled = true;
-			}
+		// 	}
-		}
+		// }
 		// this.isComposite = (this.form.get('fields') as FormArray).length > 1;
 
 		if (this.viewOnly) {
@@ -109,11 +123,24 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
 		}
 	}
 
-	onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
+	onIsMultiplicityEnabledChange(isMultiplicityEnabled: MatCheckboxChange) {
-		if (!isMultiplicityEnabled) {
+
-			(<FormControl>this.form.get('multiplicity').get('min')).setValue(0);
+		const multiplicity = this.form.get('multiplicity') as FormGroup;
-			(<FormControl>this.form.get('multiplicity').get('max')).setValue(0);
+
+		const minControl = multiplicity.get('min');
+		const maxControl = multiplicity.get('max');
+
+		if (isMultiplicityEnabled.checked) {
+			minControl.setValue(0);
+			maxControl.setValue(1);
+		}else{
+			minControl.setValue(0);
+			maxControl.setValue(0);
 		}
+
+		minControl.updateValueAndValidity();
+		maxControl.updateValueAndValidity();
+		
 	}
 
 	addNewField() {

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts

@@ -35,7 +35,7 @@ import { Subscription } from 'rxjs';
 	templateUrl: './dataset-profile-editor-field.component.html',
 	styleUrls: ['./dataset-profile-editor-field.component.scss']
 })
-export class DatasetProfileEditorFieldComponent extends BaseComponent implements OnInit,OnChanges {
+export class DatasetProfileEditorFieldComponent extends BaseComponent implements OnInit {
 	@Input() viewOnly: boolean;
 	@Input() form: FormGroup;
 	@Input() showOrdinal = true;
@@ -50,9 +50,6 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 		public enumUtils: EnumUtils,
 		public datasetProfileService: DatasetProfileService
 	) { super(); }
-	ngOnChanges(changes: SimpleChanges): void {
-		this.generatePreviewForm();
-	}
 
 	ngOnInit() {
 		this.showPreview = true;
@@ -200,6 +197,14 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 		}
 
 		if(value == true){
+			//value is already true
+			if(this._showPreview){
+				if(this._formChangesSubscription){
+					this._formChangesSubscription.unsubscribe();
+					this._formChangesSubscription = null;
+				}
+			}
+
 			this._formChangesSubscription = this.form.valueChanges.subscribe(()=>{
 				this.generatePreviewForm();
 			});
@@ -215,6 +220,13 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 	previewForm: FormGroup;
 
 	generatePreviewForm(){
+
+
+		if(!this.form.get('data')){
+			return;
+		}
+
+
 		this.previewForm = null;
 		// this._showPreview = false;
 		const fieldEditorModel = new DatasetDescriptionFieldEditorModel();

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html

@@ -1,4 +1,6 @@
-<div class="main-content" style="max-width:1500px">
+<!-- View Only : {{viewOnly}} -->
+
+<div class="main-content" style="max-width:1500px">
 	<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
 		<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
 		<h3 *ngIf="isNew && isClone">
@@ -22,10 +24,10 @@
 		<!-- Total steps: {{stepper.steps.length}} -->
 
 		<!-- Steps Navigation -->
-		<div class="row" style="padding: 2em;">
+		<div class="row" style="padding: 2em;" *ngIf="steps">
 
 			<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
-				<div id="progress" [ngStyle]="{'transform': 'translateX('+barPercentage+'%) skewX(-25deg)'}"></div>
+				<div id="progress" [ngStyle]="progressStyle"></div>
 				<div class="row p-1">
 					<div class="col text-center" *ngFor="let step of steps; index as idx">
 						<span (click)="stepper.selectedIndex=idx" style="cursor: pointer">
@@ -46,7 +48,7 @@
 		</div>
 
 		
-		<mat-horizontal-stepper [linear]="true" #stepper class="stepper">
+		<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onMatStepperSelectionChange($event)">
 
 			<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate">
 				<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
@@ -124,7 +126,8 @@
 							(newEntry)="addNewEntry($event)"
 							(createEntry) = "addNewEntry($event)"
 							(removeEntry)="onRemoveEntry($event)"
-							[itemSelected]="selectedTocEntry">
+							[itemSelected]="selectedTocEntry"
+							[viewOnly]="viewOnly">
 						</dataset-profile-table-of-contents>
 					</div>
 
@@ -244,13 +247,17 @@
 			</mat-step>
 			<mat-step label="Preview and Finalize">
 				Preview and finalize
+				<!-- <button (click)="generatePreviewForm()">foo</button> -->
+				<app-dataset-description [form]="previewForm">
+
+				</app-dataset-description>
 			</mat-step>
 
 		</mat-horizontal-stepper>
 
 
 
-		<ng-container *ngIf="true">
+		<ng-container *ngIf="false">
 
 			<div class="d-flex">
 				<!-- SAVE BUTTON -->
@@ -295,5 +302,8 @@
 				console form
 			</button>
 		</div>
+		<!-- <div class="row"> 
+			<button (click)="foo()">foo</button>
+		</div> -->
 	</div>
 </div>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts

@@ -36,6 +36,7 @@ import { Guid } from '@common/types/guid';
 import { FieldEditorModel } from '../admin/field-editor-model';
 import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
+import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel, DatasetDescriptionFormEditorModel, DatasetDescriptionPageEditorModel, DatasetDescriptionSectionEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
 
 const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
 
@@ -612,6 +613,31 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		return result;
 	}
 
+
+
+	private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
+		if(!tocentries){
+			return null;
+		}
+
+		let tocEntryFound = tocentries.find(entry=>entry.id === id);
+
+		if(tocEntryFound){
+			return tocEntryFound;
+		}	
+
+		for(let entry of tocentries){
+			const result = this._findTocEntryById(id, entry.subEntries);
+			if(result){
+				tocEntryFound = result;
+				break;
+			}
+		}
+		
+		if(tocEntryFound) return tocEntryFound;
+
+		return null;
+	}
 	addNewEntry(tce: Foo) {
 
 		const parent = tce.parent;
@@ -633,15 +659,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 				//make new entry selected
 				const pagesArray = (this.form.get('pages') as FormArray);
 				const addedEntry = pagesArray.at(pagesArray.length-1) as FormGroup;
-				this.selectedTocEntry = {
+
-					form: addedEntry,
+				this.selectedTocEntry = this._findTocEntryById(addedEntry.get('id').value, this.getTocEntries());
-					label: addedEntry.get('title').value,
-					type: ToCEntryType.Page,
-					id: addedEntry.get('id').value,
-					numbering:pagesArray.value.length,
-					subEntries:null,
-					subEntriesType: ToCEntryType.Section
-				}
 
 				break;
 			case ToCEntryType.Section: //adding a section
@@ -676,15 +695,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 				
 				const sectionAdded = sectionsArray.at(sectionsArray.length -1) as FormGroup;
 
-				this.selectedTocEntry = {
+				this.selectedTocEntry = this._findTocEntryById(sectionAdded.get('id').value, this.getTocEntries());
-					id: sectionAdded.get('id').value,
-					label: sectionAdded.get('title').value,
-					form: sectionAdded,
-					numbering:'',
-					subEntries: null,
-					subEntriesType: undefined,  //ADDNEW VALUE TO TOCENTRY TYPE FOR UNDFINED
-					type: ToCEntryType.Section
-				}
 
 				break;
 			case ToCEntryType.FieldSet:
@@ -705,16 +716,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 				const parentArray = parent.form.get('fieldSets') as FormArray;
 				const addedFieldSet = parentArray.at(parentArray.length - 1);
 
-				this.selectedTocEntry = {
+				this.selectedTocEntry = this._findTocEntryById(addedFieldSet.get('id').value, this.getTocEntries());
-					id: addedFieldSet.get('id').value,
-					label: addedFieldSet.get('title').value,
-					form: addedFieldSet,
-					numbering: '',
-					subEntries: null,	//TODO IT SHOULD HAVE CHILDS
-					subEntriesType: ToCEntryType.Field,
-					type: ToCEntryType.FieldSet
-				}
-
 
 				break;
 
@@ -722,6 +724,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 				break;
 		}
 
+
 	}
 
 
@@ -969,6 +972,11 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		return (selectedIndex / this.stepper.steps.length) * 110- 110;
 	}
 
+
+	get progressStyle(){
+		return {'transform': 'translateX('+this.barPercentage+'%) skewX(-25deg)'}
+	}
+
 	get steps(){
 		if(!this.stepper){
 			return [];
@@ -976,4 +984,133 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 		return this.stepper.steps;
 	}
+
+
+	generatePreviewForm(){
+		
+
+		const model =  new DatasetDescriptionFormEditorModel();
+
+		const toCentries = this.getTocEntries();
+
+
+		//first level is always pages
+		model.pages = toCentries.map(entry=>{
+			if( !(entry.type == ToCEntryType.Page)){
+				return null;
+			}
+			const pageModel = new DatasetDescriptionPageEditorModel();
+
+			pageModel.ordinal = entry.form.get('ordinal').value;
+			pageModel.title = entry.label;
+			
+			if(entry.subEntries){
+				pageModel.sections = entry.subEntries.map(section=>{
+					const sectionModel = new DatasetDescriptionSectionEditorModel();
+
+					sectionModel.id = section.id;
+					sectionModel.ordinal = section.form.get('ordinal').value;
+					sectionModel.description = section.form.get('description').value; 
+					sectionModel.page = entry.form.get('ordinal').value;
+					sectionModel.title = section.label;
+					sectionModel.numbering = section.numbering;
+
+
+					if(section.subEntriesType == ToCEntryType.Section){
+						sectionModel.sections = this._buildSectionsRecursively(section.subEntries);
+					}else{
+						sectionModel.compositeFields = this._buildFormFields(section.subEntries)
+					}
+
+					return sectionModel;
+				})
+			};
+			return pageModel;
+
+		});
+
+		
+		this.previewForm = model.buildForm();
+	}
+
+	private _buildSectionsRecursively( tocentries: ToCEntry[]): DatasetDescriptionSectionEditorModel[]{
+		
+
+		if(!tocentries) return null;
+
+
+		const result: Array<DatasetDescriptionSectionEditorModel> = [];
+
+		tocentries.forEach(tocentry=>{
+
+			const sectionModel = new DatasetDescriptionSectionEditorModel();
+			sectionModel.id = tocentry.id;
+			sectionModel.ordinal = tocentry.form.get('ordinal').value;
+			sectionModel.description = tocentry.form.get('description').value; 
+			// sectionModel.page = entry.form.get('ordinal').value;
+			sectionModel.title = tocentry.label;
+			sectionModel.numbering = tocentry.numbering;
+	
+			if(tocentry.subEntriesType == ToCEntryType.Section){
+				sectionModel.sections = this._buildSectionsRecursively(tocentry.subEntries);
+		
+			}else{
+				sectionModel.compositeFields = this._buildFormFields(tocentry.subEntries);
+			}
+
+			result.push(sectionModel);
+		})
+
+		return result;
+	}
+
+	private _buildFormFields(tocentries: ToCEntry[]):DatasetDescriptionCompositeFieldEditorModel[]{
+		if(!tocentries) return null;
+
+		const fieldsets:DatasetDescriptionCompositeFieldEditorModel[] = [];
+		
+		tocentries.forEach(fs=>{
+
+			const fieldset = new DatasetDescriptionCompositeFieldEditorModel();
+
+			fieldset.description = fs.form.get('description').value;
+			fieldset.extendedDescription = fs.form.get('extendedDescription').value;
+			fieldset.id = fs.form.get('id').value;
+			fieldset.multiplicity = fs.form.get('multiplicity').value;
+			fieldset.additionalInformation = fs.form.get('additionalInformation').value;
+			fieldset.ordinal = fs.form.get('ordinal').value;
+			fieldset.hasCommentField = fs.form.get('hasCommentField').value;
+			fieldset.title = fs.label;
+			// fieldset.fields = (fs.form.get('fields') as FormArray).getRawValue();
+			fieldset.fields = (fs.form.get('fields') as FormArray).controls.map(field=>{
+
+				const fieldModel = new DatasetDescriptionFieldEditorModel();
+
+				fieldModel.data = (field.get('data') as FormGroup).getRawValue();
+				fieldModel.id = field.get('id').value;
+				fieldModel.viewStyle = (field.get('viewStyle') as FormGroup).getRawValue();
+				fieldModel.defaultValue = field.get('defaultValue').value;
+				fieldModel.page = field.get('page').value;
+				fieldModel.validations = field.get('validations').value;
+
+				return fieldModel;
+			});
+
+
+
+			fieldsets.push(fieldset);
+		});
+
+		return fieldsets;
+	}
+
+	onMatStepperSelectionChange(event: StepperSelectionEvent){
+
+		if(event.selectedIndex === 2){//preview selected
+			this.generatePreviewForm();//TODO LAZY LOADING IN THE TEMPLATE
+		}
+
+	}
+
+	previewForm:FormGroup;
 }

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html

@@ -2,11 +2,14 @@
 <div *ngFor="let link of links; let i = index; last as isLast " class="docs-link mt-0" style="border-left: 1px solid black; padding-left: 1em;">
 	<div  class="link-name">
 
-		<div class="table-item">	
+		<div class="table-item row">	
-			<span style="display: inline-block; cursor: pointer;" [ngClass]="{'active': itemSelected?.id == link.id}" (click)="itemClicked(link)" >
+			<div class="col link-info">
-				{{link.numbering}} {{link.label? link.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
+				<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == link.id}" (click)="itemClicked(link)" >
-			</span>
+					{{link.numbering}} {{link.label? link.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
-			<div class="table-item-actions">
+					<!-- <span class="mat-button table-item-actions" (click)="deleteEntry(link)"><mat-icon>delete</mat-icon></span> -->
+				</span>
+			</div>
+			<div class="table-item-actions col-auto" *ngIf="!viewOnly">
 				<button class="mat-button" (click)="deleteEntry(link)"><mat-icon>delete</mat-icon></button>
 			</div>
 		</div>
@@ -33,14 +36,15 @@
 			(removeEntry)="deleteEntry($event)"
 			[parentLink]="link"
 			[itemSelected] = "itemSelected"
-			(createFooEntry)="createNewEntry($event)">
+			(createFooEntry)="createNewEntry($event)"
+			[viewOnly]="viewOnly">
 		</app-dataset-profile-table-of-contents-internal-section>
 	</div>
 </div>
 
 
 <!-- BUILD SUBENTRIES IF THEY DONT EXIST -- CURRENT ITEM DOES HAVE CHILDREN -->
-<div *ngIf="!links && parentLink.type!= tocEntryType.FieldSet" class="docs-link mt-0" style="border: 1px solid ;">
+<div *ngIf="(!links && parentLink.type!= tocEntryType.FieldSet) && !viewOnly" class="docs-link mt-0" style="border: 1px solid ;">
 	NoEntries
 	<div class="ml-2">
 
@@ -61,7 +65,7 @@
 
 
 <!-- BUILD TYPE OF SAME LEVEL AS LINK OF  LINKS -->
-<div *ngIf="links">
+<div *ngIf="links && !viewOnly" >
 	<button class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})">
 		<mat-icon>add</mat-icon> 
 		<!-- Create => {{parentLink?.subEntriesType}} -->

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss

@@ -86,4 +86,17 @@
     // display: inline-block;
     visibility: visible;
   }
+}
+
+// .table-item col{
+//   text-overflow: ellipsis;
+//   overflow: hidden;
+//   white-space: nowrap;
+// }
+
+.link-info{
+ // display: inline-block; cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts

@@ -20,6 +20,8 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent
 	@Input() parentLink: ToCEntry;
 	@Input() itemSelected: ToCEntry;
 
+	@Input() viewOnly: boolean;
+
 	constructor(
 		@Inject(DOCUMENT) private _document: Document) {
 		super();

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html

@@ -10,7 +10,8 @@
 			(newEntry)="addNewEntry($event)" (removeEntry)="deleteEntry($event)"
 			(createFooEntry)="createNewEntry($event)"
 			[parentLink]="{ subEntriesType: tocEntryType.Page }"
-			[itemSelected]="itemSelected"></app-dataset-profile-table-of-contents-internal-section>
+			[itemSelected]="itemSelected"
+			[viewOnly]="viewOnly"></app-dataset-profile-table-of-contents-internal-section>
 
 		<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">
 			<span class="link-name" (click)="itemClicked(link)"><span>{{link.label}}</span></span>

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts

@@ -46,6 +46,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 
 
 	@Input() itemSelected: ToCEntry;
+	@Input() viewOnly: boolean;
 
 	subscription: Subscription;
 	linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();