When clicking the Datasets icon & number, the user should be navigated to the Datasets listing page and the DPM filter should be set. (Ticket #80)

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

@@ -40,8 +40,10 @@
 				<mat-icon class="gray-icon pt-2">settings</mat-icon>
 				<h4 class="mt-2 ml-1 mr-3 p-1">OWNER</h4>
 
-				<mat-icon class="gray-icon pt-2">storage</mat-icon>
+				<div class="datasets-counter">
-				<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
+					<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dmp)" class="gray-icon pt-2">storage</mat-icon>
+					<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dmp)" class="mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
+				</div>
 
 				<mat-icon class="gray-icon pt-2">assignment</mat-icon>
 				<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">

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

@@ -25,8 +25,16 @@
   flex-wrap: wrap;
 }
 
-.about-item .length {
+// .about-item .length {
-  color: rgb(70, 135, 240);
+//   color: rgb(70, 135, 240);
+// }
+
+.datasets-counter {
+  display: flex;
+}
+
+.datasets-counter :hover {
+  color: #4687e6 !important;
 }
 
 .about-item .title {

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

@@ -2,8 +2,15 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { DmpListingModel } from '../../../../core/model/dmp/dmp-listing';
 import { MatDialog } from '@angular/material';
 import { DmpInvitationDialogComponent } from '../../invitation/dmp-invitation.component';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { ProjectListingModel } from '../../../../core/model/project/project-listing';
+import { RequestItem } from '../../../../core/query/request-item';
+import { TagCriteria } from '../../../../core/query/tag/tag-criteria';
+import { DmpCriteria } from '../../../../core/query/dmp/dmp-criteria';
+import { DatasetCriteria } from '../../../../core/query/dataset/dataset-criteria';
+import { DmpService } from '../../../../core/services/dmp/dmp.service';
+import { DatasetService } from '../../../../core/services/dataset/dataset.service';
+import { DataTableRequest } from '../../../../core/model/data-table/data-table-request';
 
 @Component({
 	selector: 'app-dmp-listing-item-component',
@@ -18,7 +25,7 @@ export class DmpListingItemComponent implements OnInit {
 
 	isDraft: boolean;
 
-	constructor(private router: Router, private dialog: MatDialog) { }
+	constructor(private router: Router, private dialog: MatDialog, private route: ActivatedRoute, private datasetService: DatasetService) { }
 
 	ngOnInit() {
 		if (this.dmp.status == 0) { this.isDraft = true }
@@ -55,4 +62,8 @@ export class DmpListingItemComponent implements OnInit {
 	projectClicked(projectId: String) {
 		this.router.navigate(['/projects/edit/' + projectId]);
 	}
+
+	datasetClicked(dmp: DmpListingModel) {
+		this.router.navigate(['/datasets'], { queryParams: { dmpId: dmp.id } });
+	}
 }

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

@@ -11,6 +11,7 @@
 	padding-bottom: 2px;
 	padding-right: 10px;
 	border-radius: 0px;
+	color: white;
 }
 
 .sidebar-footer .vl {

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

@@ -4,5 +4,5 @@
 		Glossary
 	</a>
 	<a class="option vl" href="#"><i class="fa fa-book style-icon"></i>Guide</a>
-	<a class="option vl" href="#"><i class="fa fa-life-ring style-icon"></i>Help</a>
+	<a class="option" href="#"><i class="fa fa-life-ring style-icon"></i>Help</a>
 </div>