Adds breadcrumbs everywhere - (Ticket #86) and adds related dmps filter on public datasets

dmp-frontend/src/app/core/query/explore-dataset/explore-dataset-criteria.ts

@@ -3,6 +3,7 @@ import { BaseCriteria } from "../base-criteria";
 
 export class ExploreDatasetCriteriaModel extends BaseCriteria {
 	public projectStatus: ProjectStateType;
+	public dmpIds: string[] = [];
 	public projects: string[] = [];
 	public datasetProfile: string[] = [];
 	public dmpOrganisations: string[] = [];

dmp-frontend/src/app/core/services/dmp/dmp.service.ts

@@ -46,10 +46,14 @@ export class DmpService {
 		return this.http.get<DmpModel>(this.actionUrl + 'public/' + id, { headers: this.headers });
 	}
 
-	getOverviewSingle(id: string): Observable<any> {
+	getOverviewSingle(id: string): Observable<DmpOverviewModel> {
 		return this.http.get<DmpOverviewModel>(this.actionUrl + 'overview/' + id, { headers: this.headers });
 	}
 
+	getOverviewSinglePublic(id: string): Observable<DmpOverviewModel> {
+		return this.http.get<DmpOverviewModel>(this.actionUrl + 'publicOverview/' + id, { headers: this.headers })
+	}
+
 	unlock(id: String): Observable<DmpModel> {
 		return this.http.get<DmpModel>(this.actionUrl + id + '/unlock', { headers: this.headers });
 	}
@@ -117,7 +121,7 @@ export class DmpService {
 		return this.http.post(this.actionUrl + 'upload', formData, { params: params });
 	}
 
-	getPublicPaged(dataTableRequest: DataTableRequest<ExploreDmpCriteriaModel>): Observable<DataTableData<DmpListingModel>> {
+	getPublicPaged(dataTableRequest: DataTableRequest<ExploreDmpCriteriaModel>, fieldsGroup?: string): Observable<DataTableData<DmpListingModel>> {
-		return this.http.post<DataTableData<DmpListingModel>>(this.actionUrl + 'public/paged', dataTableRequest);
+		return this.http.post<DataTableData<DmpListingModel>>(this.actionUrl + 'public/paged?fieldsGroup=' + fieldsGroup, dataTableRequest, { headers: this.headers });
 	}
 }

dmp-frontend/src/app/ui/dashboard/dashboard.component.ts

@@ -149,7 +149,7 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
 		fields.push('asc');
 		const dataTableRequest: DataTableRequest<ExploreDmpCriteriaModel> = new DataTableRequest(0, 2, { fields: fields });
 		dataTableRequest.criteria = dmpCriteria;
-		return this.dmpService.getPublicPaged(dataTableRequest).pipe(takeUntil(this._destroyed)).subscribe(result => { this.dmpListingItems = result.data; });
+		return this.dmpService.getPublicPaged(dataTableRequest, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => { this.dmpListingItems = result.data; });
 	}
 
 	getPublicDatasets() {

dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.html

@@ -25,7 +25,7 @@
 		</div>
 		<hr>
 		<div class="date">
-			<p>{{'DATASET-LISTING.PUBLISHED' | translate}} {{dataset.created | date: "shortDate"}}</p>
+			<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.created | date: "shortDate"}}</p>
 		</div>
 	</div>
 </div>

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

@@ -269,7 +269,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 						this.formGroup.get('dmp').setValue(this.datasetWizardModel.dmp);
 						this.loadDatasetProfiles();
 						const breadcrumbs = [];
-						breadcrumbs.push({parentComponentName: null, label:  this.language.instant('NAV-BAR.PUBLIC DATASETS'), url: '/datasets'});
+						breadcrumbs.push({parentComponentName: null, label:  this.language.instant('NAV-BAR.PUBLIC DATASETS'), url: '/explore'});
 						breadcrumbs.push({parentComponentName: null, label:  this.datasetWizardModel.label, url: '/datasets/publicEdit/' + this.datasetWizardModel.id});
 						this.breadCrumbs = Observable.of(breadcrumbs);
 					}

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

@@ -22,12 +22,12 @@ import { DmpListingItemComponent } from './listing/listing-item/dmp-listing-item
 import { DmpWizardComponent } from './wizard/dmp-wizard.component';
 import { DmpWizardEditorComponent } from './wizard/editor/dmp-wizard-editor.component';
 import { DmpWizardDatasetListingComponent } from './wizard/listing/dmp-wizard-dataset-listing.component';
-import { DmpOverviewComponent } from './overview/dmp-overview.component';
 import { ExportMethodDialogModule } from '../../library/export-method-dialog/export-method-dialog.module';
 import { GeneralTabComponent } from './editor/general-tab/general-tab.component';
 import { PeopleTabComponent } from './editor/people-tab/people-tab.component';
 import { ProjectTabComponent } from './editor/project-tab/project-tab.component';
 import { DatasetsTabComponent } from './editor/datasets-tab/datasets-tab.component';
+import { DmpOverviewModule } from './overview/dmp-overview.module';
 
 @NgModule({
 	imports: [
@@ -38,7 +38,8 @@ import { DatasetsTabComponent } from './editor/datasets-tab/datasets-tab.compone
 		ExportMethodDialogModule,
 		FormattingModule,
 		AutoCompleteModule,
-		DmpRoutingModule
+		DmpRoutingModule,
+		DmpOverviewModule
 	],
 	declarations: [
 		DmpListingComponent,
@@ -57,7 +58,6 @@ import { DatasetsTabComponent } from './editor/datasets-tab/datasets-tab.compone
 		DynamicFieldProjectComponent,
 		DmpUploadDialogue,
 		DmpListingItemComponent,
-		DmpOverviewComponent,
 		GeneralTabComponent,
 		PeopleTabComponent,
 		ProjectTabComponent,

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

@@ -36,15 +36,15 @@ const routes: Routes = [
 		},
 	},
 	{
-		path: 'overview/:id',
+		path: 'publicEdit/:publicId',
-		component: DmpOverviewComponent,
+		component: DmpEditorComponent,
 		data: {
 			breadcrumb: true
 		},
 	},
 	{
-		path: 'publicEdit/:publicId',
+		path: 'overview/:id',
-		component: DmpEditorComponent,
+		component: DmpOverviewComponent,
 		data: {
 			breadcrumb: true
 		},

dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts

@@ -157,10 +157,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							this.formGroup = this.dmp.buildForm();
 							//this.registerFormEventsForDmpProfile(this.dmp.definition);
 							if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); }
-							if (this.isAuthenticated()) {
 							// if (!this.isAuthenticated) {
 								const breadcrumbs = [];
-								breadcrumbs.push({ parentComponentName: null, label:this.language.instant('NAV-BAR.MY-PUBLIC-DMPS').toUpperCase(), url: '/plans' });
+								breadcrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-PUBLIC-DMPS').toUpperCase(), url: '/plans' });
 								breadcrumbs.push({ parentComponentName: null, label: this.dmp.label, url: '/plans/publicEdit/' + this.dmp.id });
 								this.breadCrumbs = Observable.of(breadcrumbs);
 								// this.breadCrumbs = Observable.of([
@@ -172,7 +171,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 								// 	}]
 								// );
 								this.associatedUsers = data.associatedUsers;
-							}
+							// }
 						});
 				} else {
 					this.dmp = new DmpEditorModel();

dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss

@@ -26,8 +26,8 @@
 }
 
 .about-item h4 {
-  font-size: 0.92rem;
+  font-size: 1rem;
-  line-height: 1.3em;
+  line-height: 1.25em;
   font-weight: 500;
 }
 

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts

@@ -26,6 +26,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 
 	dmp: DmpOverviewModel;
 	isNew = true;
+	isPublic = false;
 	breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of();
 
 	constructor(
@@ -47,6 +48,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 			.pipe(takeUntil(this._destroyed))
 			.subscribe((params: Params) => {
 				const itemId = params['id'];
+				const publicId = params['publicId'];
 				if (itemId != null) {
 					this.isNew = false;
 					this.dmpService.getOverviewSingle(itemId)
@@ -59,6 +61,19 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 							this.breadCrumbs = Observable.of(breadCrumbs);
 						})
 				}
+				else if (publicId != null) {
+					this.isNew = false;
+					this.isPublic = true;
+					this.dmpService.getOverviewSinglePublic(publicId)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(data => {
+							this.dmp = data;
+							const breadCrumbs = [];
+							breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/explore-plans" });
+							breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/plans/publicOverview/' + this.dmp.id });
+							this.breadCrumbs = Observable.of(breadCrumbs);
+						});
+				}
 			});
 	}
 
@@ -79,7 +94,10 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 	}
 
 	datasetsClicked(dmpId: String) {
+		if(!this.isPublic)
 			this.router.navigate(['/datasets'], { queryParams: { dmpId: dmpId } });
+		else
+			this.router.navigate(['/explore'], { queryParams: { dmpId: dmpId } });
 	}
 
 	goToUri(uri: string) {

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonFormsModule } from '../../../common/forms/common-forms.module';
+import { CommonUiModule } from '../../../common/ui/common-ui.module';
+import { FormattingModule } from '../../../core/formatting.module';
+import { AutoCompleteModule } from '../../../library/auto-complete/auto-complete.module';
+import { ConfirmationDialogModule } from '../../../library/confirmation-dialog/confirmation-dialog.module';
+import { UrlListingModule } from '../../../library/url-listing/url-listing.module';
+import { DmpOverviewComponent } from './dmp-overview.component';
+import { ExportMethodDialogModule } from '../../../library/export-method-dialog/export-method-dialog.module';
+
+@NgModule({
+	imports: [
+		CommonUiModule,
+		CommonFormsModule,
+		UrlListingModule,
+		ConfirmationDialogModule,
+		ExportMethodDialogModule,
+		FormattingModule,
+		AutoCompleteModule
+	],
+	declarations: [
+		DmpOverviewComponent
+	]
+})
+export class DmpOverviewModule { }

dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, ɵConsole } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute, Params } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
 import { BaseComponent } from '../../core/common/base/base.component';
 import { DataTableRequest } from '../../core/model/data-table/data-table-request';
@@ -11,6 +11,10 @@ import { IBreadCrumbComponent } from '../misc/breadcrumb/definition/IBreadCrumbC
 import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item';
 import { Observable } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
+import { DmpService } from '../../core/services/dmp/dmp.service';
+import { DatasetCriteriaComponent } from '../dataset/listing/criteria/dataset-criteria.component';
+import { DmpModel } from '../../core/model/dmp/dmp';
+import { DatasetCriteria } from '../../core/query/dataset/dataset-criteria';
 
 
 @Component({
@@ -27,17 +31,46 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 	listingItems: DatasetListingModel[] = [];
 	exploreDatasetCriteriaModel: ExploreDatasetCriteriaModel;
 	breadCrumbs: Observable<BreadcrumbItem[]>;
+	dmpId: string;
+	dmpSearchEnabled = true;
+	titlePrefix: String;
 
 	constructor(
 		private datasetService: DatasetService,
+		private dmpService: DmpService,
 		private router: Router,
+		private route: ActivatedRoute,
 		private language: TranslateService,
 	) {
 		super();
 	}
 
 	ngOnInit() {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(async (params: Params) => {
+				const queryParams = this.route.snapshot.queryParams;
+				this.dmpId = queryParams['dmpId'];
+				if (this.dmpId != null) {
+					this.dmpSearchEnabled = false;
+					const dmp = await this.dmpService.getSinglePublic(this.dmpId).toPromise();
+
+					const fields: Array<string> = [];
+					const dmpDataTableRequest: DataTableRequest<ExploreDatasetCriteriaModel> = new DataTableRequest(0, this._paginator.pageSize, { fields: fields });
+					dmpDataTableRequest.criteria = new ExploreDatasetCriteriaModel();
+					dmpDataTableRequest.criteria.dmpIds.push(this.dmpId);
+
+					this.datasetService.getPublicPaged(dmpDataTableRequest).pipe(takeUntil(this._destroyed)).subscribe(result => {
+						if (!result) { return []; }
+						if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
+						this.listingItems = result.data;
+					});
+
+
+				} else {
 					this.refresh();
+				}
+			});
 
 		const breadCrumbs = [];
 		breadCrumbs.push({
@@ -48,7 +81,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 		this.breadCrumbs = Observable.of(breadCrumbs);
 	}
 
-	refresh() {
+	refresh(resetPages = false) {
 		if (this._paginator.pageSize === undefined) this._paginator.pageSize = 10;
 		const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
 		let fields: Array<string> = new Array();
@@ -74,8 +107,8 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 
 	getDefaultCriteria(): ExploreDatasetCriteriaModel {
 		const defaultCriteria = new ExploreDatasetCriteriaModel();
-		// if (dmpId != null) {
+		// if (dmp != null) {
-		// 	defaultCriteria.dmpIds.push(dmpId);
+		// 	defaultCriteria.dmpIds.push(dmp.id);
 		// }
 		return defaultCriteria;
 	}

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.html

@@ -23,6 +23,18 @@
 			</mat-list-item>
 		</div>
 
+		<div class="col-10 gray-container">
+			<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DMP' | translate}}</h6>
+			<mat-form-field>
+				<app-multiple-auto-complete
+					placeholder="{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}"
+					[configuration]="dmpAutoCompleteConfiguration"
+					(optionSelected)="onDmpOptionSelected($event)" (optionRemoved)="onDmpOptionRemoved($event)">
+				</app-multiple-auto-complete>
+				<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
+			</mat-form-field>
+		</div>
+
 		<div class="col-10 gray-container">
 			<h6 class="category-title">{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}</h6>
 			<mat-form-field>

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatAccordion } from '@angular/material';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { BaseComponent } from '../../../core/common/base/base.component';
@@ -22,6 +22,13 @@ import { DmpService } from '../../../core/services/dmp/dmp.service';
 import { OrganisationCriteria } from '../../../core/query/organisation/organisation-criteria';
 import { OrganisationService } from '../../../core/services/organisation/organisation.service';
 import { OrganizationModel } from '../../../core/model/organisation/organization';
+import { DataTableData } from '../../../core/model/data-table/data-table-data';
+import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
+import { ExploreDmpCriteriaModel } from '../../../core/query/explore-dmp/explore-dmp-criteria';
+import { DmpModel } from '../../../core/model/dmp/dmp';
+import { BaseCriteriaComponent } from '../../misc/criteria/base-criteria.component';
+import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
 	selector: 'app-explore-dataset-filters-component',
@@ -38,6 +45,7 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 	projects: Observable<ProjectListingModel[]>;
 	profiles: Observable<DatasetProfileModel[]>;
 	dmpOrganisations: Observable<ExternalSourceItemModel[]>;
+	dmpIds: Observable<DataTableData<DmpListingModel>>;
 	projectOptions: Observable<ProjectListingModel[]>;
 	projectStateOptions: Observable<any[]>;
 	filteringOrganisationsAsync = false;
@@ -62,6 +70,13 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 		titleFn: (item) => item['name']
 	};
 
+	dmpAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
+		filterFn: (x, excluded) => this.filterDmps(x).map(x => x.data),
+		initialItems: (extraData) => this.filterDmps('').map(x => x.data),
+		displayFn: (item) => item['label'],
+		titleFn: (item) => item['label']
+	};
+
 	projectAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
 		filterFn: this.filterProject.bind(this),
 		initialItems: (excludedItems: any[]) =>
@@ -244,6 +259,20 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 		}
 	}
 
+	onDmpOptionSelected(items: DmpListingModel[]) {
+		this.facetCriteria.dmpIds.splice(0);
+		this.facetCriteria.dmpIds.push(...items.map(x => x.id));
+		this.facetCriteriaChange.emit(this.facetCriteria);
+	}
+
+	onDmpOptionRemoved(item: DmpListingModel) {
+		const index = this.facetCriteria.dmpIds.indexOf(item.id);
+		if (index >= 0) {
+			this.facetCriteria.dmpIds.splice(index, 1);
+			this.facetCriteriaChange.emit(this.facetCriteria);
+		}
+	}
+
 	onProfileOptionSelected(items: DatasetProfileModel[]) {
 		this.facetCriteria.datasetProfile.splice(0);
 		this.facetCriteria.datasetProfile.push(...items.map(x => x.id));
@@ -272,6 +301,15 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 		}
 	}
 
+	filterDmps(value: string): Observable<DataTableData<DmpListingModel>> {
+		const fields: Array<string> = new Array<string>();
+		fields.push('asc');
+		const dmpDataTableRequest: DataTableRequest<ExploreDmpCriteriaModel> = new DataTableRequest(0, null, { fields: fields });
+		dmpDataTableRequest.criteria = new ExploreDatasetCriteriaModel();
+		dmpDataTableRequest.criteria.like = value;
+		return this.dmpService.getPublicPaged(dmpDataTableRequest, "autocomplete")
+	}
+
 	filterTags(value: string): Observable<ExternalSourceItemModel[]> {
 		this.filteredTags = undefined;
 		this.filteringTagsAsync = true;
@@ -302,7 +340,7 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 		profileRequestItem.criteria = new ExploreDatasetCriteriaModel();
 		profileRequestItem.criteria.like = query;
 
-		return this.dmpService.getPublicPaged(profileRequestItem).map(x => x.data);
+		return this.dmpService.getPublicPaged(profileRequestItem, "listing").map(x => x.data);
 	}
 
 	filterOrganisation(value: string) {

dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.ts

@@ -310,7 +310,7 @@ export class ExploreDmpFiltersComponent extends BaseCriteriaComponent implements
 		profileRequestItem.criteria = new ExploreDatasetCriteriaModel();
 		profileRequestItem.criteria.like = query;
 
-		return this.dmpService.getPublicPaged(profileRequestItem).map(x => x.data);
+		return this.dmpService.getPublicPaged(profileRequestItem, "listing").map(x => x.data);
 	}
 
 	filterOrganisation(value: string) {

dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { MatPaginator, MatSort } from "@angular/material";
-import { Router } from "@angular/router";
+import { Router, ActivatedRoute } from "@angular/router";
 import { takeUntil } from "rxjs/operators";
 import { BaseComponent } from "../../core/common/base/base.component";
 import { DataTableRequest } from "../../core/model/data-table/data-table-request";
@@ -31,6 +31,7 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
 	constructor(
 		private dmpService: DmpService,
 		private router: Router,
+		private route: ActivatedRoute,
 		private language: TranslateService,
 	) {
 		super();
@@ -55,7 +56,7 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
 		if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
 		const request = new DataTableRequest<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
 		request.criteria = this.exploreDmpCriteriaModel || this.getDefaultCriteria();
-		this.dmpService.getPublicPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
+		this.dmpService.getPublicPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (!result) { return []; }
 			if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
 			this.listingItems = result.data;
@@ -63,7 +64,7 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
 	}
 
 	rowClicked(dmp: DmpListingModel) {
-		this.router.navigate(['/plans/publicEdit/' + dmp.id]);
+		this.router.navigate(['overview', dmp.id], { relativeTo: this.route });
 	}
 
 	getDefaultCriteria(): ExploreDmpCriteriaModel {
@@ -72,7 +73,6 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
 	}
 
 	onCriteriaChange(event: ExploreDmpCriteriaModel) {
-		//console.log(event)
 		this.exploreDmpCriteriaModel = event;
 		this._paginator.pageIndex = 0;
 		this.refresh();

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

@@ -7,13 +7,15 @@ import { ExploreDmpFiltersComponent } from "./dmp-explore-filters/explore-dmp-fi
 import { ExploreDmpListingComponent } from "./explore-dmp-listing.component";
 import { ExploreDmpRoutingModule } from "./explore-dmp.routing";
 import { ExploreDmpListingItemComponent } from "./listing-item/explore-dmp-listing-item.component";
+import { DmpOverviewModule } from "../dmp/overview/dmp-overview.module";
 
 @NgModule({
 	imports: [
 		CommonUiModule,
 		CommonFormsModule,
 		AutoCompleteModule,
-		ExploreDmpRoutingModule
+		ExploreDmpRoutingModule,
+		DmpOverviewModule
 	],
 	declarations: [
 		ExploreDmpListingComponent,

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

@@ -1,11 +1,19 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ExploreDmpListingComponent } from './explore-dmp-listing.component';
+import { DmpOverviewComponent } from '../dmp/overview/dmp-overview.component';
 
 const routes: Routes = [
 	{
 		path: '',
 		component: ExploreDmpListingComponent,
+		data: {
+			breadcrumb: true
+		}
+	},
+	{
+		path: 'overview/:publicId',
+		component: DmpOverviewComponent,
 		data: {
 			breadcrumb: true
 		},

dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss

@@ -16,8 +16,8 @@
 }
 
 .about-item h4 {
-  font-size: 0.92rem;
+  font-size: 1rem;
-  line-height: 1.3em;
+  line-height: 1.25em;
   font-weight: 500;
 }