From 61a7f0b80983c6432d80cb7da4fa3a42435000d4 Mon Sep 17 00:00:00 2001
From: gkolokythas <gkolokythas@cite.gr>
Date: Thu, 19 Dec 2019 12:10:16 +0200
Subject: [PATCH] Adds Collaborators panel on DMP Overview.

---
 .../dmp/overview/dmp-overview.component.html  | 13 ++++++++++++-
 .../dmp/overview/dmp-overview.component.scss  | 19 +++++++++++++++++++
 .../ui/dmp/overview/dmp-overview.component.ts | 18 ++++++++++++------
 dmp-frontend/src/assets/i18n/en.json          |  4 +++-
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
index 2c36bd6d8..22ab7474a 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
@@ -81,7 +81,7 @@
 							<div class="col-12 d-flex flex-row flex-wrap ml-3">
 								<div class="d-flex">
 									<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.LEVEL-OF-ACCESS' | translate}}" class="gray-icon pt-2">settings</mat-icon>
-									<p class="mt-2 ml-1 mr-3 p-1">{{ roleDisplay(dmp.users) }}</p>
+									<p class="mt-2 ml-1 mr-3 p-1">{{ roleDisplayFromList(dmp.users) }}</p>
 								</div>
 
 								<div class="datasets-counter" *ngIf="!isPublishedDMP(dmp)">
@@ -110,6 +110,11 @@
 									<p class="mt-2 ml-1 p-1">{{ dmp.researchers.length }}</p>
 									<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.RESEARCHERS' | translate }}</p>
 								</div>
+								<div class="d-flex" *ngIf="!isPublicView">
+									<mat-icon matTooltip="{{'DMP-OVERVIEW.COLLABORATORS' | translate}}" class="gray-icon pt-2">person</mat-icon>
+									<p class="mt-2 ml-1 p-1">{{ dmp.users.length }}</p>
+									<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.COLLABORATORS' | translate }}</p>
+								</div>
 							</div>
 						</div>
 						<div class="row">
@@ -157,6 +162,12 @@
 								<div matTooltip="{{ researcher.name }}" class="avatar">{{ researcher.name }}</div>
 							</div>
 						</div>
+						<div class="collaborators">
+							<h6 class="collaborators-title">{{'DMP-OVERVIEW.COLLABORATORS' | translate}}</h6>
+							<div *ngFor="let user of dmp.users">
+								<div matTooltip="{{ roleDisplay(user) }}" class="avatar">{{ user.name }}</div>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
index 8e5b8b8e1..c06a7179f 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
@@ -66,6 +66,25 @@
   text-transform: uppercase;
 }
 
+.collaborators {
+	display: flex;
+	flex-direction: column;
+	border: 2px solid #f2f2f2;
+	margin-right: 2em;
+	margin-top: 2em;
+	padding: 0.5em;
+  }
+
+  .collaborators-title {
+	width: 135px;
+	color: #089dbb;
+	background-color: white;
+	padding: 0px 10px;
+	margin-top: -16px;
+	cursor: default;
+	text-transform: uppercase;
+  }
+
 .container-header {
   display: flex;
   align-items: baseline;
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
index e627ff5a4..20da2f5be 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
@@ -12,7 +12,7 @@ import { UserInfoListingModel } from '@app/core/model/user/user-info-listing';
 import { AuthService } from '@app/core/services/auth/auth.service';
 import { DmpService } from '@app/core/services/dmp/dmp.service';
 import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
-import { ConfirmationDialogComponent  } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 import { DmpFinalizeDialogComponent, DmpFinalizeDialogInput, DmpFinalizeDialogOutput } from '@app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component';
 import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
 import { BaseComponent } from '@common/base/base.component';
@@ -219,7 +219,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 		return filename;
 	}
 
-	roleDisplay(value: UserInfoListingModel[]) {
+	roleDisplayFromList(value: UserInfoListingModel[]) {
 		const principal: Principal = this.authentication.current();
 		let role: number;
 		if (principal) {
@@ -229,13 +229,19 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 				}
 			});
 		}
-		if (role === 0) {
+		if (role === Role.Owner) {
+			return this.translate.instant('DMP-LISTING.OWNER');
+		} else if (role === Role.Member) {
+			return this.translate.instant('DMP-LISTING.MEMBER');
+		} else {
 			return this.translate.instant('DMP-LISTING.OWNER');
 		}
-		else if (role === 1) {
+	}
+
+	roleDisplay(value: UserInfoListingModel) {
+		if (value.role === Role.Member) {
 			return this.translate.instant('DMP-LISTING.MEMBER');
-		}
-		else {
+		} else {
 			return this.translate.instant('DMP-LISTING.OWNER');
 		}
 	}
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 03a240d41..acdd24fcf 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -489,6 +489,7 @@
 	},
 	"DMP-OVERVIEW": {
 		"RESEARCHERS": "Researchers",
+		"COLLABORATORS": "Collaborators",
 		"TOOLTIP": {
 			"LEVEL-OF-ACCESS": "Level of Access",
 			"INVOLVED-DATASETS": "Involved Dataset Descriptions",
@@ -662,7 +663,8 @@
 			"GRANT": "Grant",
 			"FUNDER": "Funder",
 			"STATUS": "DMP Status",
-			"EXTERNAL-SOURCE-HINT": "List of values provided by external source(s)"
+			"EXTERNAL-SOURCE-HINT": "List of values provided by external source(s)",
+			"COLLABORATORS": "Collaborators"
 		},
 		"ACTIONS": {
 			"GO-TO-GRANT": "Go To DMP Grant",