From 9c0be255c329e2d8ea8f08b59f913439bb3bca2e Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Wed, 15 May 2019 09:57:10 +0300
Subject: [PATCH] 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-listing-item.component.html           |  6 +++--
 .../dmp-listing-item.component.scss           | 12 ++++++++--
 .../dmp-listing-item.component.ts             | 15 ++++++++++--
 .../sidebar-footer.component.css              | 23 ++++++++++---------
 .../sidebar-footer.component.html             |  2 +-
 5 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
index 4fb559d58..432b4a840 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
+++ b/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>
-				<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
+				<div class="datasets-counter">
+					<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">
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
index f02b4e0fa..80548ade9 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
@@ -25,8 +25,16 @@
   flex-wrap: wrap;
 }
 
-.about-item .length {
-  color: rgb(70, 135, 240);
+// .about-item .length {
+//   color: rgb(70, 135, 240);
+// }
+
+.datasets-counter {
+  display: flex;
+}
+
+.datasets-counter :hover {
+  color: #4687e6 !important;
 }
 
 .about-item .title {
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts
index 3e960ce69..5da1e8c4c 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts
+++ b/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 } });
+	}
 }
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
index 100236ecf..dc4fe822d 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
@@ -1,21 +1,22 @@
 .sidebar-footer {
-  padding: white;
-  color: rgb(117, 117, 117);
-  /* background-color: #ffffff; */
-  /* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
+	padding: white;
+	color: rgb(117, 117, 117);
+	/* background-color: #ffffff; */
+	/* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
 }
 
 .sidebar-footer .option {
-  margin: 0px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 10px;
-  border-radius: 0px;
+	margin: 0px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	padding-right: 10px;
+	border-radius: 0px;
+	color: white;
 }
 
 .sidebar-footer .vl {
-  border-right: 1px solid #d4d4d4;
-  color: white;
+	border-right: 1px solid #d4d4d4;
+	color: white;
 }
 
 .option .style-icon {
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
index 7987ad070..5b85a6887 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
+++ b/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>