From d038f42021e86e602c2d049d333649a3a2f0f60a Mon Sep 17 00:00:00 2001
From: Kristan Ntavidi <kntavidi@cite.gr>
Date: Mon, 12 Apr 2021 12:05:12 +0300
Subject: [PATCH] Users listing component. Fix user roles chips

---
 .../dataset-profile-editor.component.html     |  6 +++
 .../user-role-editor.component.html           | 20 ++++----
 .../user-role-editor.component.scss           | 46 +++++++++++--------
 .../user/listing/user-listing.component.html  |  2 +-
 dmp-frontend/src/assets/i18n/de.json          |  1 +
 dmp-frontend/src/assets/i18n/en.json          |  1 +
 dmp-frontend/src/assets/i18n/es.json          |  1 +
 dmp-frontend/src/assets/i18n/gr.json          |  1 +
 dmp-frontend/src/assets/i18n/pt.json          |  1 +
 dmp-frontend/src/assets/i18n/sk.json          |  1 +
 dmp-frontend/src/assets/i18n/sr.json          |  1 +
 dmp-frontend/src/assets/i18n/tr.json          |  1 +
 12 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
index 89c8a2420..7e2d68881 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
@@ -183,6 +183,12 @@
 											<button mat-button class="delete-btn" (click)="verifyAndRemoveUser(user)" [matTooltip]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
 										</td>
 									</tr>
+									<tr *ngIf="!userChipList || !userChipList.length">
+										<td style="text-align: end; line-height: 3em;" colspan="2" >
+											<!-- ...No users yet -->
+											{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NO-USERS-YET' | translate}}
+										</td>
+									</tr>
 								</tbody>
 							</table>
 						</div>
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html
index 6bcd97c29..eef52da4b 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html
@@ -1,21 +1,25 @@
-<form class="d-flex user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
-	<div *ngIf="!this.nowEditing"class="roles">
-		<div *ngFor="let role of this.formGroup.get('appRoles').value" [ngClass]="{'user': role == 0, 'manager': role == 1, 'admin': role == 2, 'dataset-template-editor': role == 3}">
-			{{getPrincipalAppRoleWithLanguage(role)}}
-		</div>
+<form class="row user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
+	<div *ngIf="!this.nowEditing"class="roles col">
+		<ng-container *ngFor="let role of this.formGroup.get('appRoles').value">
+			<div>
+				<span  class="user-role" [ngClass]="{'user': role == 0, 'manager': role == 1, 'admin': role == 2, 'dataset-template-editor': role == 3}">
+					{{getPrincipalAppRoleWithLanguage(role)}}
+				</span>
+			</div>
+		</ng-container>
 	</div>
-	<mat-form-field *ngIf="this.nowEditing" class="select-role roles-width-180">
+	<mat-form-field *ngIf="this.nowEditing" class="select-role roles-width-180 col-auto">
 		<mat-select formControlName="appRoles" multiple required>
 			<mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option>
 		</mat-select>
 		<mat-error *ngIf="getFormControl('appRoles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
 
-	<button *ngIf="!this.nowEditing" mat-icon-button color="primary" type="button" (click)="editItem()">
+	<button *ngIf="!this.nowEditing" class="col-auto" mat-icon-button color="primary" type="button" (click)="editItem()">
 		<!-- <mat-icon class="mat-24">edit</mat-icon> -->
 		<span class="row-action">{{'USERS.ACTIONS.EDIT' | translate}}</span>
 	</button>
-	<button *ngIf="this.nowEditing" mat-icon-button color="primary" type="submit">
+	<button *ngIf="this.nowEditing" class="col-auto" mat-icon-button color="primary" type="submit">
 		<!-- <mat-icon class="mat-24">save</mat-icon> -->
 		<span class="row-action">{{'USERS.ACTIONS.SAVE' | translate}}</span>
 	</button>
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
index 7b8e37455..ced1b45aa 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
@@ -1,14 +1,17 @@
 .user-role-editor {
 	align-items: center;
 	margin-top: 1.125rem;
-
+	justify-content: space-between;
+	padding-left: 15px;
+	padding-right: 15px;
 	.select-role {
 		// margin-top: 1rem;
 	}
 
 	.roles {
 		min-width: 90px;
-		margin-right: 6rem;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.roles-width-180 {
@@ -20,13 +23,20 @@
 		color: #129d99;
 		cursor: pointer;
 	}
-
+	.user-role{
+		text-align: center;
+		width: auto;
+		padding-top: 0.2em;
+		padding-left: 1em;
+		padding-right: 1em;
+		display: inline-block;
+	}
 	.user {
-		display: flex;
-		justify-content: center;
-		align-items: center;
+		// display: flex;
+		// justify-content: center;
+		// align-items: center;
 		min-width: 67px;
-		height: 28px;
+		min-height: 28px;
 		color: #00c4ff;
 		background: #d3f5ff 0% 0% no-repeat padding-box;
 		border-radius: 44px;
@@ -40,9 +50,9 @@
 	}
 
 	.manager {
-		display: flex;
-		justify-content: center;
-		align-items: center;
+		// display: flex;
+		// justify-content: center;
+		// align-items: center;
 		min-width: 90px;
 		height: 28px;
 		color: #568b5a;
@@ -58,11 +68,11 @@
 	}
 
 	.admin {
-		display: flex;
-		justify-content: center;
-		align-items: center;
+		// display: flex;
+		// justify-content: center;
+		// align-items: center;
 		min-width: 77px;
-		height: 28px;
+		min-height: 28px;
 		color: #ff3d33;
 		background: #ffd5d3 0% 0% no-repeat padding-box;
 		border-radius: 44px;
@@ -76,11 +86,11 @@
 	}
 
 	.dataset-template-editor {
-		display: flex;
-		justify-content: center;
-		align-items: center;
+		// display: flex;
+		// justify-content: center;
+		// align-items: center;
 		min-width: 77px;
-		height: 28px;
+		min-height: 28px;
 		color: #d633ff;
 		background: #fad3ff 0% 0% no-repeat padding-box;
 		border-radius: 44px;
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
index adaae2a42..150d31164 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
+++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
@@ -42,7 +42,7 @@
 				<ng-container cdkColumnDef="roles">
 					<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
 					<mat-cell *matCellDef="let row">
-						<app-user-role-editor-component [item]="row"></app-user-role-editor-component>
+						<app-user-role-editor-component style="width: 100%;" [item]="row"></app-user-role-editor-component>
 					</mat-cell>
 				</ng-container>
 
diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json
index e998e8ac5..ec18064ea 100644
--- a/dmp-frontend/src/assets/i18n/de.json
+++ b/dmp-frontend/src/assets/i18n/de.json
@@ -291,6 +291,7 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-USERS": "Users",
 				"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
+				"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
 				"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 7b9d1cbc7..b2309347c 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -291,6 +291,7 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-USERS": "Users",
 				"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
+				"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
 				"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index 72a60b987..c9d4bd084 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -290,6 +290,7 @@
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-USERS": "Users",
+				"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
 				"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
 				"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index 38217a96b..885008eee 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -290,6 +290,7 @@
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-USERS": "Users",
+				"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
 				"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
 				"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
diff --git a/dmp-frontend/src/assets/i18n/pt.json b/dmp-frontend/src/assets/i18n/pt.json
index 78e8431a9..2ae17605d 100644
--- a/dmp-frontend/src/assets/i18n/pt.json
+++ b/dmp-frontend/src/assets/i18n/pt.json
@@ -290,6 +290,7 @@
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-USERS": "Users",
+				"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
 				"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
 				"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json
index c8b4ac9c8..28f7f1d74 100644
--- a/dmp-frontend/src/assets/i18n/sk.json
+++ b/dmp-frontend/src/assets/i18n/sk.json
@@ -290,6 +290,7 @@
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-USERS": "Users",
+				"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
 				"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
 				"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
diff --git a/dmp-frontend/src/assets/i18n/sr.json b/dmp-frontend/src/assets/i18n/sr.json
index 5f14785a8..e405d5998 100644
--- a/dmp-frontend/src/assets/i18n/sr.json
+++ b/dmp-frontend/src/assets/i18n/sr.json
@@ -290,6 +290,7 @@
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-USERS": "Users",
+				"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
 				"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
 				"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json
index c93485287..ae6d77a08 100644
--- a/dmp-frontend/src/assets/i18n/tr.json
+++ b/dmp-frontend/src/assets/i18n/tr.json
@@ -290,6 +290,7 @@
 				"DATASET-TEMPLATE-LANGUAGE": "Dataset template language",
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-USERS": "Users",
+				"DATASET-TEMPLATE-NO-USERS-YET":"... No users yet",
 				"DATASET-TEMPLATE-REMOVE-USER": "Remove User",
 				"DATASET-TEMPLATE-VALIDATE-AND-ADD-USER": "Validate and Add User",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",