Create /glossary, /faq (Issue #202)

dmp-frontend/src/app/app-routing.module.ts

@@ -93,6 +93,30 @@ const appRoutes: Routes = [
 			title: 'GENERAL.TITLES.DATASET-PROFILES'
 		}
 	},
+	// {
+	// 	path: 'contact',
+	// 	loadChildren: () => import('./ui/contact/contact.module').then(m => m.ContactModule),
+	// 	data: {
+	// 		breadcrumb: true,
+	// 		title: 'CONTACT.SUPPORT.TITLE'
+	// 	}
+	// },
+	{
+		path: 'glossary',
+		loadChildren: () => import('./ui/glossary/glossary.module').then(m => m.GlossaryModule),
+		data: {
+			breadcrumb: true,
+			title: 'GLOSSARY.TITLE'
+		}
+	},
+	{
+		path: 'faq',
+		loadChildren: () => import('./ui/faq/faq.module').then(m => m.FaqModule),
+		data: {
+			breadcrumb: true,
+			title: 'FAQ.TITLE'
+		}
+	},
 	{
 		path: 'privacy-policy',
 		loadChildren: () => import('./ui/sidebar/sidebar-footer/privacy/privacy.module').then(m => m.PrivacyModule),

dmp-frontend/src/app/ui/dmp/editor/grant-tab/funder-form-model.ts

@@ -4,7 +4,6 @@ import { ValidationErrorModel } from "../../../../common/forms/validation/error-
 import { ValidationContext } from "../../../../common/forms/validation/validation-context";
 import { FormGroup, FormBuilder, Validators } from "@angular/forms";
 import { BackendErrorValidator } from "../../../../common/forms/validation/custom-validator";
-import { ValidJsonValidator } from "../../../../library/auto-complete/auto-complete-custom-validator";
 
 export class FunderFormModel {
 	public id: string;

dmp-frontend/src/app/ui/faq/dialog/faq-dialog.component.html

@@ -0,0 +1,16 @@
+<div class="faq">
+	<div class="row d-flex flex-row">
+		<div mat-dialog-title class="col-auto">
+			{{'FAQ.TITLE' | translate}}
+		</div>
+		<div class="col-auto ml-auto close-btn" (click)="close()">
+			<mat-icon>close</mat-icon>
+		</div>
+	</div>
+	<div mat-dialog-content class="row">
+		<app-faq-content [isDialog]="isDialog"></app-faq-content>
+	</div>
+	<div mat-dialog-actions class="row">
+		<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
+	</div>
+</div>

dmp-frontend/src/app/ui/faq/dialog/faq-dialog.component.ts

@@ -1,5 +1,4 @@
 import { Component, Inject } from '@angular/core';
-import { FormGroup } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
@@ -9,10 +8,14 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 })
 export class FaqDialogComponent {
 
+	public isDialog: boolean = false;
+
 	constructor(
 		public dialogRef: MatDialogRef<FaqDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: FormGroup
+		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) {
+		this.isDialog = data.isDialog;
+	}
 
 	cancel() {
 		this.dialogRef.close();

dmp-frontend/src/app/ui/faq/faq-content/faq-content.component.html

@@ -0,0 +1,36 @@
+<div [ngClass]="{'container faq-component': !isDialog}">
+	<div *ngIf="!isDialog" class="row">
+		<div class="col-md-12">
+			<h1>{{ 'FAQ.TITLE-DASHED' | translate}}</h1>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-12">
+			<h4>What is ARGOS?</h4>
+			<p>ARGOS is an open and collaborative platform for creating Data Management Plans according to funders or institutions’ open science policy requirements. ARGOS technology provides solutions and workflows that connect the DMP to the actual data where they are stored and link to other useful information such as publications and funding information, thus enabling the association between research outputs and processes and leading to the creation of coherent/ complete research entities. ARGOS is comprised of two major features: the ARGOS template and the Dataset Description.</p>
+
+			<br />
+			<h4>Who is it for?</h4>
+			<p>ARGOS is inclusive to all researchers and research coordinators who may use the tool to create machine actionable DMPs. Funding and Research Performing Organizations as well as research communities may use the tool and create Dataset Description templates according to their preferences or requirements. ARGOS may be used for purposes other than research projects, such as on the occasion of trainings that familiarise scientists with the data management planning process.</p>
+
+			<br />
+			<h4>How can I use it?</h4>
+			<p>ARGOS is comprised of two main functionalities: DMP templates and Dataset Descriptions. Additional entities are Projects that link to funders and grants information.<br />ARGOS can be used for:
+				<br /><br /><u style="padding:20px;"> A. viewing/ consulting publicly released DMPs and Dataset Descriptions or Projects corresponding to DMPs</u><br /><br />
+				The tool offers options for publishing DMPs in two modes, private or public. To view public DMPs and Dataset Descriptions, there is no need for login to the platform.
+
+				<br /><br /><u style="padding:20px;"> B. writing and publishing a DMP</u><br /><br />
+				The tool helps researchers comply with mandates that may be attached to their grant proposal/ project funding. They can therefore choose from the most suitable to their needs template from the Dataset Descriptions collection and proceed with answering the corresponding questions. Once finalized, researchers can assign a DOI to their DMP, publish and eventually cite it.
+
+				<br /><br /><u style="padding:20px;"> C. practicing in writing DMPs and Dataset Descriptions</u><br /><br />
+				Given that Data Management Planning reflects the data management lifecycle and in accordance/ response to the increasing demand of the global scientific/ research community for training in Research Data Management (RDM), ARGOS may be used for educational purposes. Examples may refer to embedding DMP and DMP tools in specific curricula or even utilization of the tool for researchers and students familiarization with the concept and process, as part of library instructions’ sessions.
+			</p>
+
+			<br />
+			<h4>What is the difference between the “Wizard” and the “Expert” modes/ features?</h4>
+			<p>There are two ways of creating a DMP: the “Wizard” and the “Expert”. The DMP Wizard combines the most necessary fields of the DMP template and the Data Description template. It is an easy way of starting a DMP and completing a Dataset Description. The downside when using the Wizard is that it only supports one Dataset Description. To add more datasets documentation, someone must open the DMP from DMP Expert.
+				<br />DMP expert contains extra fields for describing the project, grant, funding, contributors and associations between DMP authors, etc. DMP Expert is advised for use when further modification and personalization is to take place.
+			</p>
+		</div>
+	</div>
+</div>

dmp-frontend/src/app/ui/faq/faq-content/faq-content.component.scss

@@ -0,0 +1,12 @@
+h1 {
+	text-align: center;
+}
+
+img {
+	height: 150px;
+	width: 100%;
+}
+
+.faq-component {
+	margin-top: 80px;
+}

dmp-frontend/src/app/ui/faq/faq-content/faq-content.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+	selector: 'app-faq-content',
+	templateUrl: './faq-content.component.html',
+	styleUrls: ['./faq-content.component.scss']
+})
+export class FaqContentComponent implements OnInit {
+
+	@Input() isDialog: boolean;
+
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+}

dmp-frontend/src/app/ui/faq/faq.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonUiModule } from '../../common/ui/common-ui.module';
+import { FaqRoutingModule } from './faq.routing';
+import { FaqDialogComponent } from './dialog/faq-dialog.component';
+import { FaqContentComponent } from './faq-content/faq-content.component';
+
+@NgModule({
+	imports: [
+		CommonUiModule,
+		FaqRoutingModule
+	],
+	declarations: [
+		FaqContentComponent,
+		FaqDialogComponent
+	],
+	entryComponents: [
+		FaqContentComponent,
+		FaqDialogComponent
+	],
+	exports: [
+		FaqDialogComponent
+	]
+})
+export class FaqModule { }

dmp-frontend/src/app/ui/faq/faq.routing.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { FaqContentComponent } from './faq-content/faq-content.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: FaqContentComponent,
+	},
+];
+
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule]
+})
+export class FaqRoutingModule { }

dmp-frontend/src/app/ui/glossary/dialog/glossary-dialog.component.html

@@ -0,0 +1,16 @@
+<div class="glossary">
+	<div class="row d-flex flex-row">
+		<div mat-dialog-title class="col-auto">
+			{{'GLOSSARY.TITLE' | translate}}
+		</div>
+		<div class="col-auto ml-auto close-btn" (click)="close()">
+			<mat-icon>close</mat-icon>
+		</div>
+	</div>
+	<div mat-dialog-content class="row">
+		<app-glossary-content [isDialog]="isDialog"></app-glossary-content>
+	</div>
+	<div mat-dialog-actions class="row">
+		<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'GLOSSARY.CLOSE' | translate}}</button></div>
+	</div>
+</div>

dmp-frontend/src/app/ui/glossary/dialog/glossary-dialog.component.ts

@@ -1,5 +1,4 @@
 import { Component, Inject } from '@angular/core';
-import { FormGroup } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
@@ -9,10 +8,14 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 })
 export class GlossaryDialogComponent {
 
+	public isDialog: boolean;
+
 	constructor(
 		public dialogRef: MatDialogRef<GlossaryDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: FormGroup
+		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) {
+		this.isDialog = data.isDialog;
+	}
 
 	cancel() {
 		this.dialogRef.close();

dmp-frontend/src/app/ui/glossary/glossary-content/glossary-content.component.html

@@ -0,0 +1,24 @@
+<div [ngClass]="{'container glossary-component': !isDialog}">
+	<div *ngIf="!isDialog" class="row">
+		<div class="col-md-12">
+			<h1>{{ 'GLOSSARY.TITLE-DASHED' | translate}}</h1>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-12">
+			<h4>DMP</h4>
+			<p>A DMP - short for Data Management Plan - is a document describing the processes that the data have undergone and the tools used for their handling and storage during a research lifecycle. Most importantly, DMPs secure provenance and enable re-use of data by appointing data managers and by including information on how data can be re-used by others in the future. Therefore, a DMP is a living document which is modified according to the data developments of a project before it’s completed and handed over at the end of the project.
+				Public funders increasingly contain DMPs in their grant proposals or policy funding requirements. A good paradigm is the European Commission demands for the production and delivery of DMPs for projects funded under the Horizon 2020 Funding Programme. On that note, and to encourage good data management practices uptake, many European institutions include DMPs in post-graduate researchers policies and offer relevant support to staff and students.
+			</p>
+
+			<h4>DMP template</h4>
+			<p>DMP template contains general but vital information about the name and the duration of the project that the DMP corresponds to, the contributing organisations and individuals as well as the datasets that are under the Dataset Description section. It also offers the possibility of describing datasets other than primary data generated, under “External References” section. A DMP template can have many Dataset Descriptions.
+			</p>
+
+			<h4>Dataset Description</h4>
+			<p>Dataset Description documents the management processes of datasets following funder’s or institution’s requirements. A dataset description is essentially a questionnaire template with underlying added value services for interoperability and machine readability of information which is developed based on the given requirements. Management requirements differ from funder to funder and from institution to institution, hence the growing collection of Dataset Descriptions to select from.
+				Moreover, a Dataset Description links to the documentation of one dataset, hence a DMP template may contain more than one dataset descriptions on the occasion when multiple datasets were used during the project. When documentation of some of the project’s datasets falls under additional requirements (e.g. projects receiving multiple grants from different sources), there is the possibility of describing datasets with more than one Dataset Description template.
+			</p>
+		</div>
+	</div>
+</div>

dmp-frontend/src/app/ui/glossary/glossary-content/glossary-content.component.scss

@@ -0,0 +1,12 @@
+h1 {
+	text-align: center;
+}
+
+img {
+	height: 150px;
+	width: 100%;
+}
+
+.glossary-component {
+	margin-top: 80px;
+}

dmp-frontend/src/app/ui/glossary/glossary-content/glossary-content.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+	selector: 'app-glossary-content',
+	templateUrl: './glossary-content.component.html',
+	styleUrls: ['./glossary-content.component.scss']
+})
+export class GlossaryContentComponent implements OnInit {
+
+	@Input() isDialog: boolean;
+
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+}

dmp-frontend/src/app/ui/glossary/glossary.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { GlossaryRoutingModule } from './glossary.routing';
+import { GlossaryContentComponent } from './glossary-content/glossary-content.component';
+import { GlossaryDialogComponent } from './dialog/glossary-dialog.component';
+import { CommonUiModule } from '../../common/ui/common-ui.module';
+
+@NgModule({
+	imports: [
+		CommonUiModule,
+		GlossaryRoutingModule
+	],
+	declarations: [
+		GlossaryContentComponent,
+		GlossaryDialogComponent
+	],
+	entryComponents: [
+		GlossaryContentComponent,
+		GlossaryDialogComponent
+	],
+	exports: [
+		GlossaryDialogComponent
+	]
+})
+export class GlossaryModule { }

dmp-frontend/src/app/ui/glossary/glossary.routing.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { GlossaryContentComponent } from './glossary-content/glossary-content.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: GlossaryContentComponent,
+	},
+];
+
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule]
+})
+export class GlossaryRoutingModule { }

dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.html

@@ -1,41 +0,0 @@
-<div class="faq">
-	<div class="row d-flex flex-row">
-		<div mat-dialog-title class="col-auto">
-			{{'FAQ.TITLE' | translate}}
-		</div>
-		<div class="col-auto ml-auto close-btn" (click)="close()">
-			<mat-icon>close</mat-icon>
-		</div>
-	</div>
-	<div mat-dialog-content class="row">
-		<h4>What is ARGOS?</h4>
-		<p>ARGOS is an open and collaborative platform for creating Data Management Plans according to funders or institutions’ open science policy requirements. ARGOS technology provides solutions and workflows that connect the DMP to the actual data where they are stored and link to other useful information such as publications and funding information, thus enabling the association between research outputs and processes and leading to the creation of coherent/ complete research entities. ARGOS is comprised of two major features: the ARGOS template and the Dataset Description.</p>
-
-		<br />
-		<h4>Who is it for?</h4>
-		<p>ARGOS is inclusive to all researchers and research coordinators who may use the tool to create machine actionable DMPs. Funding and Research Performing Organizations as well as research communities may use the tool and create Dataset Description templates according to their preferences or requirements. ARGOS may be used for purposes other than research projects, such as on the occasion of trainings that familiarise scientists with the data management planning process.</p>
-
-		<br />
-		<h4>How can I use it?</h4>
-		<p>ARGOS is comprised of two main functionalities: DMP templates and Dataset Descriptions. Additional entities are Projects that link to funders and grants information.<br />ARGOS can be used for:
-			<br /><br /><u style="padding:20px;"> A. viewing/ consulting publicly released DMPs and Dataset Descriptions or Projects corresponding to DMPs</u><br /><br />
-			The tool offers options for publishing DMPs in two modes, private or public. To view public DMPs and Dataset Descriptions, there is no need for login to the platform.
-
-			<br /><br /><u style="padding:20px;"> B. writing and publishing a DMP</u><br /><br />
-			The tool helps researchers comply with mandates that may be attached to their grant proposal/ project funding. They can therefore choose from the most suitable to their needs template from the Dataset Descriptions collection and proceed with answering the corresponding questions. Once finalized, researchers can assign a DOI to their DMP, publish and eventually cite it.
-
-			<br /><br /><u style="padding:20px;"> C. practicing in writing DMPs and Dataset Descriptions</u><br /><br />
-			Given that Data Management Planning reflects the data management lifecycle and in accordance/ response to the increasing demand of the global scientific/ research community for training in Research Data Management (RDM), ARGOS may be used for educational purposes. Examples may refer to embedding DMP and DMP tools in specific curricula or even utilization of the tool for researchers and students familiarization with the concept and process, as part of library instructions’ sessions.
-		</p>
-
-		<br />
-		<h4>What is the difference between the “Wizard” and the “Expert” modes/ features?</h4>
-		<p>There are two ways of creating a DMP: the “Wizard” and the “Expert”. The DMP Wizard combines the most necessary fields of the DMP template and the Data Description template. It is an easy way of starting a DMP and completing a Dataset Description. The downside when using the Wizard is that it only supports one Dataset Description. To add more datasets documentation, someone must open the DMP from DMP Expert.
-			<br />DMP expert contains extra fields for describing the project, grant, funding, contributors and associations between DMP authors, etc. DMP Expert is advised for use when further modification and personalization is to take place.
-		</p>
-
-	</div>
-	<div mat-dialog-actions class="row">
-		<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
-	</div>
-</div>

dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.html

@@ -1,28 +0,0 @@
-<div class="glossary">
-	<div class="row d-flex flex-row">
-		<div mat-dialog-title class="col-auto">
-			{{'GLOSSARY.TITLE' | translate}}
-		</div>
-		<div class="col-auto ml-auto close-btn" (click)="close()">
-			<mat-icon>close</mat-icon>
-		</div>
-	</div>
-	<div mat-dialog-content class="row">
-		<h4>DMP</h4>
-		<p>A DMP - short for Data Management Plan - is a document describing the processes that the data have undergone and the tools used for their handling and storage during a research lifecycle. Most importantly, DMPs secure provenance and enable re-use of data by appointing data managers and by including information on how data can be re-used by others in the future. Therefore, a DMP is a living document which is modified according to the data developments of a project before it’s completed and handed over at the end of the project.
-			Public funders increasingly contain DMPs in their grant proposals or policy funding requirements. A good paradigm is the European Commission demands for the production and delivery of DMPs for projects funded under the Horizon 2020 Funding Programme. On that note, and to encourage good data management practices uptake, many European institutions include DMPs in post-graduate researchers policies and offer relevant support to staff and students.
-		</p>
-
-		<h4>DMP template</h4>
-		<p>DMP template contains general but vital information about the name and the duration of the project that the DMP corresponds to, the contributing organisations and individuals as well as the datasets that are under the Dataset Description section. It also offers the possibility of describing datasets other than primary data generated, under “External References” section. A DMP template can have many Dataset Descriptions.
-		</p>
-
-		<h4>Dataset Description</h4>
-		<p>Dataset Description documents the management processes of datasets following funder’s or institution’s requirements. A dataset description is essentially a questionnaire template with underlying added value services for interoperability and machine readability of information which is developed based on the given requirements. Management requirements differ from funder to funder and from institution to institution, hence the growing collection of Dataset Descriptions to select from.
-			Moreover, a Dataset Description links to the documentation of one dataset, hence a DMP template may contain more than one dataset descriptions on the occasion when multiple datasets were used during the project. When documentation of some of the project’s datasets falls under additional requirements (e.g. projects receiving multiple grants from different sources), there is the possibility of describing datasets with more than one Dataset Description template.
-			</p>
-	</div>
-	<div mat-dialog-actions class="row">
-		<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'GLOSSARY.CLOSE' | translate}}</button></div>
-	</div>
-</div>

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -9,17 +9,18 @@
 	</div> -->
 	<div class="row d-flex flex-reverse">
 		<div class="col-auto text-center">
-			<p class="option" (click)="openGlossaryDialog()">
+			<p class="option" (click)="openGlossaryDialog()" [ngClass]="{'option-active': this.router.url === '/glossary'}">
 				<!-- <i class="fa fa-book pr-2 pt-1"></i> -->
 				{{'FOOTER.GLOSSARY' | translate}}</p>
 		</div>
 		<div class="col-auto text-center">
-			<p class="option" (click)="openFaqDialog()">
+			<p class="option" (click)="openFaqDialog()" [ngClass]="{'option-active': this.router.url === '/faq'}">
 				<!-- <i class="fa fa-question-circle pr-2 pt-1"></i> -->
 				{{'FOOTER.FAQ' | translate}}</p>
 		</div>
 		<div class="col-auto text-center">
 			<p class="option" (click)="openContactDialog()">
+			<!-- <p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact'}"> -->
 				<!-- <i class="fa fa-envelope-open pr-2 pt-1"></i> -->
 				{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
 		</div>

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts

@@ -9,8 +9,9 @@ import { ContactEmailFormModel } from '../../../core/model/contact/contact-email
 import { ContactSupportService } from '../../../core/services/contact-support/contact-support.service';
 import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
 import { ContactDialogComponent } from '../../../library/contact-dialog/contact-dialog.component';
-import { FaqDialogComponent } from './faq/faq-dialog.component';
+import { GlossaryDialogComponent } from '../../glossary/dialog/glossary-dialog.component';
-import { GlossaryDialogComponent } from './glossary/glossary-dialog.component';
+import { Router } from '@angular/router';
+import { FaqDialogComponent } from '../../faq/dialog/faq-dialog.component';
 
 @Component({
 	selector: 'app-sidebar-footer',
@@ -25,6 +26,7 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
 	constructor(
 		private dialog: MatDialog,
 		private language: TranslateService,
+		private router: Router,
 		private contactSupportService: ContactSupportService,
 		private uiNotificationService: UiNotificationService
 	) {
@@ -67,6 +69,9 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
 		else {
 			const dialogRef = this.dialog.open(GlossaryDialogComponent, {
 				disableClose: true,
+				data: {
+					isDialog: true
+				}
 			});
 		}
 	}
@@ -78,6 +83,9 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
 		else {
 			const dialogRef = this.dialog.open(FaqDialogComponent, {
 				disableClose: true,
+				data: {
+					isDialog: true
+				}
 			});
 		}
 	}

dmp-frontend/src/app/ui/sidebar/sidebar.module.ts

@@ -2,29 +2,27 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonFormsModule } from '../../common/forms/common-forms.module';
 import { CommonUiModule } from '../../common/ui/common-ui.module';
-import { ContactDialogModule } from '../../library/contact-dialog/contact-dialog.module';
-import { FaqDialogComponent } from './sidebar-footer/faq/faq-dialog.component';
-import { GlossaryDialogComponent } from './sidebar-footer/glossary/glossary-dialog.component';
 import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
 import { SidebarComponent } from './sidebar.component';
+import { GlossaryModule } from '../glossary/glossary.module';
+import { FaqModule } from '../faq/faq.module';
+import { ContactDialogModule } from '../../library/contact-dialog/contact-dialog.module';
 
 @NgModule({
 	imports: [
 		CommonUiModule,
 		CommonFormsModule,
 		ContactDialogModule,
-		RouterModule
+		GlossaryModule,
+		FaqModule,
+		RouterModule,
+		// ContactModule
 	],
 	declarations: [
 		SidebarComponent,
-		SidebarFooterComponent,
+		SidebarFooterComponent
-		GlossaryDialogComponent,
-		FaqDialogComponent
-	],
-	entryComponents: [
-		GlossaryDialogComponent,
-		FaqDialogComponent
 	],
+	entryComponents: [],
 	exports: [SidebarComponent]
 })
 export class SidebarModule { }

dmp-frontend/src/assets/i18n/en.json

@@ -957,10 +957,12 @@
 	},
 	"GLOSSARY": {
 		"TITLE": "Glossary",
+		"TITLE-DASHED": "-Glossary-",
 		"CLOSE": "Close"
 	},
 	"FAQ": {
 		"TITLE": "FAQ",
+		"TITLE-DASHED": "-FAQ-",
 		"CLOSE": "Close"
 	},
 	"PRIVACY-POLICY": {
@@ -980,6 +982,7 @@
 			"CANCEL": "Cancel",
 			"SEND": "Send"
 		},
+		"TITLE-DASHED": "-Contact Support-",
 		"GUIDE": "Guide",
 		"HELP": "Help",
 		"GLOSSARY": "Glossary"