From ce24afd16fb56a214197e892c67375f37d3568e6 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Fri, 3 Jul 2020 10:40:22 +0300
Subject: [PATCH] Adds text and button to add dataset on empty tab list on
 dashboard

---
 .../app/ui/dashboard/dashboard.component.html |  29 +-
 .../app/ui/dashboard/dashboard.component.scss | 439 +++++++++---------
 dmp-frontend/src/assets/i18n/en.json          |   4 +
 dmp-frontend/src/assets/i18n/es.json          |   4 +
 dmp-frontend/src/assets/i18n/gr.json          |   4 +
 5 files changed, 262 insertions(+), 218 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
index 55867cb5b..402c5a6b7 100644
--- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
@@ -45,26 +45,35 @@
 							<b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
 							{{'DASHBOARD.DMP-ABOUT-END' | translate}}</p>
 						<div class="d-flex pt-4 pb-4 mt-3 mb-3">
-							<button type="button" class="col-auto align-self-center yellow-btn">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
+							<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" [routerLink]="['/datasets/new']">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
 						</div>
 					</div>
-					<div class="latest-activity-title">Latest activity</div>
+					<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
 					<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
-						<mat-tab label="All ({{this.totalRecents}})">
-							<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
+						<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
+							<div *ngIf="totalRecents === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity>
+							<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
 						</mat-tab>
-						<mat-tab label="{{'DASHBOARD.DRAFTS' | translate}} ({{this.totalDraftDatasets}})">
-							<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
+						<mat-tab label="{{'DASHBOARD.DRAFTS' | translate}} ({{totalDraftDatasets}})">
+							<div *ngIf="totalDraftDatasets === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)"></app-drafts>
+							<div *ngIf="totalDraftDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
 						</mat-tab>
-						<mat-tab label="{{'DASHBOARD.DMPS' | translate}}  ({{this.totalDmps}})">
-							<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
+						<mat-tab label="{{'DASHBOARD.DMPS' | translate}}  ({{totalDmps}})">
+							<div *ngIf="totalDmps === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
+							<div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
 						</mat-tab>
-						<mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{this.totalDatasets}})">
-							<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
+						<mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{totalDatasets}})">
+							<div *ngIf="totalDatasets === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
+							<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
+							<div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
+								<button mat-raised-button class="add-dataset" [routerLink]="['/datasets/new']">
+									<mat-icon>add</mat-icon> {{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
+								</button>
+							</div>
 						</mat-tab>
 					</mat-tab-group>
 				</div>
diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
index eb221e931..46690bf67 100644
--- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -1,327 +1,350 @@
 .main-content {
-	background-color: #f5f5f5;
-	padding-top: 4.68rem;
-	padding-bottom: 3rem;
-	// padding-left: 3.31rem;
-	padding-left: 1rem;
-	margin: 0;
-	display: flex;
-	flex-grow: 1;
+  background-color: #f5f5f5;
+  padding-top: 4.68rem;
+  padding-bottom: 3rem;
+  // padding-left: 3.31rem;
+  padding-left: 1rem;
+  margin: 0;
+  display: flex;
+  flex-grow: 1;
 }
 
 .card {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #00000029;
-	border-radius: 4px;
-	width: 712px;
-	margin-bottom: 3.75rem;
-	/* height: 407px; */
-	opacity: 1;
+  background: #ffffff 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 6px #00000029;
+  border-radius: 4px;
+  width: 712px;
+  margin-bottom: 3.75rem;
+  /* height: 407px; */
+  opacity: 1;
 }
 
 .card-title {
-	text-align: left;
-	font: Bold 20px/30px Roboto;
-	letter-spacing: 0px;
-	color: #212121;
-	padding-left: 40px;
-	/* padding-top: 40px; */
-	padding-right: 55px;
-	opacity: 1;
+  text-align: left;
+  font: Bold 20px/30px Roboto;
+  letter-spacing: 0px;
+  color: #212121;
+  padding-left: 40px;
+  /* padding-top: 40px; */
+  padding-right: 55px;
+  opacity: 1;
 }
 
 .card-content {
-	text-align: left;
-	font: Light 16px/26px Roboto;
-	letter-spacing: 0px;
-	color: #212121;
-	padding-left: 40px;
-	padding-top: 36px;
-	padding-right: 55px;
-	opacity: 1;
+  text-align: left;
+  font: Light 16px/26px Roboto;
+  letter-spacing: 0px;
+  color: #212121;
+  padding-left: 40px;
+  padding-top: 36px;
+  padding-right: 55px;
+  opacity: 1;
 }
 
 .clear-icon {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .normal-btn {
-	min-width: 162px;
-	max-width: 256px;
-	height: 40px;
-	cursor: pointer;
-	background: #129d99 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #1e202029;
-	border-radius: 30px;
-	border: none;
-	color: #ffffff;
-	opacity: 1;
-	line-height: 1;
-	font-size: 0.87rem;
-	padding: 0.62rem 1.87rem;
-	margin-left: 40px;
+  min-width: 162px;
+  max-width: 256px;
+  height: 40px;
+  cursor: pointer;
+  background: #129d99 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 6px #1e202029;
+  border-radius: 30px;
+  border: none;
+  color: #ffffff;
+  opacity: 1;
+  line-height: 1;
+  font-size: 0.87rem;
+  padding: 0.62rem 1.87rem;
+  margin-left: 40px;
 }
 
 .yellow-btn {
-	min-width: 162px;
-	max-width: 256px;
-	height: 40px;
-	cursor: pointer;
-	background: #f7dd72 0% 0% no-repeat padding-box;
-	border-radius: 30px;
-	opacity: 1;
-	border: none;
-	color: #000000;
-	opacity: 1;
-	line-height: 1;
-	font-size: 0.87rem;
-	padding: 0.62rem 1.87rem;
-	margin-left: 40px;
+  min-width: 162px;
+  max-width: 256px;
+  height: 40px;
+  cursor: pointer;
+  background: #f7dd72 0% 0% no-repeat padding-box;
+  border-radius: 30px;
+  opacity: 1;
+  border: none;
+  color: #000000;
+  opacity: 1;
+  line-height: 1;
+  font-size: 0.87rem;
+  padding: 0.62rem 1.87rem;
+  margin-left: 40px;
 }
 
 .personal-usage {
-	text-align: left;
-	font-weight: 300;
-	font-family: "Roboto", sans-serif;
-	font-size: 1.25rem;
-	letter-spacing: 0px;
-	color: #212121;
-	opacity: 0.6;
+  text-align: left;
+  font-weight: 300;
+  font-family: "Roboto", sans-serif;
+  font-size: 1.25rem;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 0.6;
 }
 
 .counter-zero {
-	text-align: left;
-	font: Bold 48px/30px Roboto;
-	letter-spacing: 0px;
-	color: #212121;
-	opacity: 0.36;
-	padding-top: 2rem;
-	padding-bottom: 0.5rem;
+  text-align: left;
+  font: Bold 48px/30px Roboto;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 0.36;
+  padding-top: 2rem;
+  padding-bottom: 0.5rem;
 }
 
 .counter {
-	text-align: left;
-	font: Bold 48px/30px Roboto;
-	letter-spacing: 0px;
-	color: #212121;
-	opacity: 0.85;
-	padding-top: 2rem;
-	padding-bottom: 0.5rem;
+  text-align: left;
+  font: Bold 48px/30px Roboto;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 0.85;
+  padding-top: 2rem;
+  padding-bottom: 0.5rem;
 }
 
 .link {
-	text-align: left;
-	text-decoration: underline;
-	font-weight: 300;
-	font-family: "Roboto", sans-serif;
-	font-size: 1rem;
-	letter-spacing: 0px;
-	color: #1eb5b4;
-	opacity: 1;
+  text-align: left;
+  text-decoration: underline;
+  font-weight: 300;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  letter-spacing: 0px;
+  color: #1eb5b4;
+  opacity: 1;
 }
 
 .link-disabled {
-	text-align: left;
-	font-weight: 300;
-	font-family: "Roboto", sans-serif;
-	font-size: 1rem;
-	letter-spacing: 0px;
-	color: #212121;
-	opacity: 0.6;
+  text-align: left;
+  font-weight: 300;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 0.6;
 }
 
 .latest-activity-title {
-	text-align: left;
-	font-weight: 300;
-	font-family: "Roboto", sans-serif;
-	font-size: 1.25rem;
-	letter-spacing: 0px;
-	color: #212121;
-	opacity: 0.6;
-	padding-bottom: 1.2rem;
+  text-align: left;
+  font-weight: 300;
+  font-family: "Roboto", sans-serif;
+  font-size: 1.25rem;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 0.6;
+  padding-bottom: 1.2rem;
 }
 
 .dmp-card,
 .dataset-card {
-	min-width: 712px;
-	/* min-height: 308px; */
-	background: #ffffff 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #0000001a;
-	border-radius: 4px;
-	opacity: 1;
-	margin-top: 2.43rem;
-	margin-bottom: 1rem;
+  min-width: 712px;
+  /* min-height: 308px; */
+  background: #ffffff 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 6px #0000001a;
+  border-radius: 4px;
+  opacity: 1;
+  margin-top: 2.43rem;
+  margin-bottom: 1rem;
 }
 
 .remove-border-bottom ::ng-deep .mat-tab-header {
-	border-bottom: none;
+  border-bottom: none;
 }
 
 input[type="text"] {
-	background: #fafafa 0% 0% no-repeat padding-box;
-	border: 1px solid #d1d1d1;
-	border-radius: 4px;
-	opacity: 1;
-	width: 347px;
-	height: 56px;
-	font-family: Arial, FontAwesome;
-	padding-left: 15px;
+  background: #fafafa 0% 0% no-repeat padding-box;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  opacity: 1;
+  width: 347px;
+  height: 56px;
+  font-family: Arial, FontAwesome;
+  padding-left: 15px;
 }
 
 .edited-date {
-	text-align: left;
-	font-weight: 300;
-	font-family: "Roboto", sans-serif;
-	line-height: 2.4;
-	letter-spacing: 0px;
-	color: #212121;
-	opacity: 0.6;
+  text-align: left;
+  font-weight: 300;
+  font-family: "Roboto", sans-serif;
+  line-height: 2.4;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 0.6;
 }
 
 .dmp-label {
-	background: #129d99 0% 0% no-repeat padding-box;
-	border-radius: 4px 0px;
-	opacity: 1;
-	width: 67px;
-	height: 37px;
-	color: #ffffff;
-	line-height: 2.4;
-	opacity: 0.75;
+  background: #129d99 0% 0% no-repeat padding-box;
+  border-radius: 4px 0px;
+  opacity: 1;
+  width: 67px;
+  height: 37px;
+  color: #ffffff;
+  line-height: 2.4;
+  opacity: 0.75;
 }
 
 .dataset-label {
-	width: 158px;
-	height: 37px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
-	border-radius: 4px 0px;
-	text-align: left;
-	line-height: 2.8;
-	font-size: 0.875rem;
-	letter-spacing: 0px;
-	color: #212121;
-	opacity: 0.75;
+  width: 158px;
+  height: 37px;
+  background: #f7dd72 0% 0% no-repeat padding-box;
+  border-radius: 4px 0px;
+  text-align: left;
+  line-height: 2.8;
+  font-size: 0.875rem;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 0.75;
 }
 
 .dmp-title,
 .dataset-title {
-	text-align: left;
-	font-weight: 500;
-	font-family: "Roboto", sans-serif;
-	font-size: 1rem;
-	opacity: 0.81;
-	padding-top: 0.75rem;
-	padding-bottom: 0.55rem;
-	color: #212121;
+  text-align: left;
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  opacity: 0.81;
+  padding-top: 0.75rem;
+  padding-bottom: 0.55rem;
+  color: #212121;
 }
 
 .dataset-subtitle,
 .dmp-subtitle {
-	display: flex;
-	flex-direction: row;
-	text-align: left;
-	font-weight: 400;
-	font-family: "Roboto", sans-serif;
-	font-size: 0.875rem;
-	opacity: 1;
-	align-items: center;
-	color: #848484;
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  font-weight: 400;
+  font-family: "Roboto", sans-serif;
+  font-size: 0.875rem;
+  opacity: 1;
+  align-items: center;
+  color: #848484;
 }
 
 .dmp-title-draft {
-	text-align: left;
-	font-weight: 500;
-	font-family: "Roboto", sans-serif;
-	font-size: 1rem;
-	opacity: 0.81;
-	padding-top: 0.75rem;
-	padding-bottom: 0.55rem;
-	color: #f16868;
+  text-align: left;
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  opacity: 0.81;
+  padding-top: 0.75rem;
+  padding-bottom: 0.55rem;
+  color: #f16868;
 }
 
 .icon-align {
-	display: inline-flex;
-	vertical-align: middle;
-	padding-bottom: 0.4rem;
+  display: inline-flex;
+  vertical-align: middle;
+  padding-bottom: 0.4rem;
 }
 
 .dataset-card-actions,
 .dmp-card-actions {
-	display: flex;
-	flex-direction: row;
-	border-top: 1px solid #dbdbdb;
-	line-height: 4;
-	color: #848484;
+  display: flex;
+  flex-direction: row;
+  border-top: 1px solid #dbdbdb;
+  line-height: 4;
+  color: #848484;
 }
 
 .dataset-card-actions a,
 .dmp-card-actions a {
-	color: #848484 !important;
-	text-decoration: none !important;
+  color: #848484 !important;
+  text-decoration: none !important;
 }
 
 .dataset-card-actions a:hover,
 .dmp-card-actions a:hover {
-	color: #129d99 !important;
+  color: #129d99 !important;
 }
 
 .dmp-dataset-descriptions-title {
-	color: #000000;
-	opacity: 0.6;
-	padding-top: 1.5rem;
-	padding-bottom: 0.8rem;
+  color: #000000;
+  opacity: 0.6;
+  padding-top: 1.5rem;
+  padding-bottom: 0.8rem;
 }
 
 .dmp-dataset-descriptions-name {
-	color: #000000;
-	opacity: 0.6;
-	font-weight: 700;
+  color: #000000;
+  opacity: 0.6;
+  font-weight: 700;
 }
 
 .show-more {
-	color: black !important;
+  color: black !important;
 }
 
 .show-more:hover {
-	color: #129d99 !important;
+  color: #129d99 !important;
 }
 
 .btn-load-more {
-	border: 2px solid #212121;
-	border-radius: 30px;
-	opacity: 1;
-	width: 132px;
-	height: 40px;
-	margin-top: 4.125rem;
+  border: 2px solid #212121;
+  border-radius: 30px;
+  opacity: 1;
+  width: 132px;
+  height: 40px;
+  margin-top: 4.125rem;
 }
 
 .btn-load-more:hover {
-	background-color: black;
-	color: white;
+  background-color: black;
+  color: white;
 }
 
 .draft {
-	color: #f16868;
+  color: #f16868;
 }
 
 .stats {
-	padding: 0rem 7em 4rem 3rem;
+  padding: 0rem 7em 4rem 3rem;
+}
+
+.empty-list {
+  color: #212121;
+  font-size: 1.25rem;
+  font-weight: 300;
+  letter-spacing: 0px;
+  color: #212121;
+  opacity: 0.6;
+  display: flex;
+  padding-top: 4.68rem;
+  justify-content: center;
+}
+
+.add-dataset {
+  width: 142px;
+  height: 40px;
+  background: #f7dd72 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 6px #1e202029;
+  border-radius: 30px;
+  opacity: 1;
+  margin-top: 2.5rem;
+  margin-bottom: 1.5rem;
 }
 
 ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
 .mat-tab-nav-bar.mat-primary .mat-ink-bar {
-	background: #129d99;
-	height: 5px;
+  background: #129d99;
+  height: 5px;
 }
 
 ::ng-deep .mat-tab-label {
-	min-width: auto !important;
-	background-color: transparent;
+  min-width: auto !important;
+  background-color: transparent;
 }
 
 ::ng-deep .mat-tab-label.mat-tab-label-active {
-	min-width: auto !important;
-	background-color: transparent;
-	font-weight: 700;
+  min-width: auto !important;
+  background-color: transparent;
+  font-weight: 700;
 }
 
 /* ::ng-deep .mat-tab-group {
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 10bb1e2d2..1220fc8f6 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -1141,10 +1141,14 @@
 		"GRANTS": "Grants",
 		"RELATED-ORGANISATIONS": "Related Organisations",
 		"DRAFTS": "Drafts",
+		"ALL": "All",
+		"EMPTY-LIST": "Nothing here yet.",
+		"LATEST-ACTIVITY": "Latest Activity",
 		"DMP-ABOUT-BEG": "A DMP in Argos consists of key information about research, such as purpose, objectives and researchers involved, but also about documentation of research datasets, namely",
 		"DMP-ABOUT-END": ", that highlight the steps followed and the means used across data management activities.",
 		"ACTIONS": {
 			"ADD-DATASET-DESCRIPTION": "Add Dataset Description",
+			"ADD-DATASET": "Add Dataset",
 			"ADD-DMP-DESCRIPTION": "Add DMP Description"
 		}
 	},
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index 8c67bed8f..54ceaad32 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -1128,8 +1128,12 @@
 		"GRANTS": "Subvenciones",
 		"RELATED-ORGANISATIONS": "Organizaciones Relacionadas",
 		"DRAFTS": "Borradores",
+		"ALL": "All",
+		"LATEST-ACTIVITY": "Latest Activity",
+		"EMPTY-LIST": "Nothing here yet.",
 		"ACTIONS": {
 			"ADD-DATASET-DESCRIPTION": "Agregar Dataset Descripción",
+			"ADD-DATASET": "Add Dataset",
 			"ADD-DMP-DESCRIPTION": "Agregar DMP Descripción"
 		}
 	},
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index 5bc65bc3d..1a815f9c1 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -1116,8 +1116,12 @@
 		"GRANTS": "Grants",
 		"RELATED-ORGANISATIONS": "Σχετικοί Οργανισμοί",
 		"DRAFTS": "Προσχέδια",
+		"ALL": "Όλα",
+		"LATEST-ACTIVITY": "Latest Activity",
+		"EMPTY-LIST": "Nothing here yet.",
 		"ACTIONS": {
 			"ADD-DATASET-DESCRIPTION": "Προσθήκη Περιγραφή Dataset",
+			"ADD-DATASET": "Add Dataset",
 			"ADD-DMP-DESCRIPTION": "Προσθήκη Περιγραφή DMP"
 		}
 	},