From 23d664a48b41a2cd0eeadd026bf6a5f5cf8287a3 Mon Sep 17 00:00:00 2001
From: Kristan Ntavidi <kntavidi@cite.gr>
Date: Fri, 9 Apr 2021 17:05:01 +0300
Subject: [PATCH] Admin Template Editor: table styling.

---
 .../editor/animations/animations.ts           | 11 +++
 .../dataset-profile-editor.component.html     | 64 ++++++++----
 .../dataset-profile-editor.component.scss     | 27 +++--
 .../dataset-profile-editor.component.ts       | 98 ++++++++++++++++++-
 4 files changed, 172 insertions(+), 28 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
index c62b30393..c30863a32 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
@@ -60,5 +60,16 @@ export const GENERAL_ANIMATIONS = [
       state('updated',style({opacity:0})),
       transition("*=>updated",
         animate('2s 1s ease-out'))
+    ]),
+    trigger('add-new-user-field', [
+        state('untriggered', style({
+            transform:'translateX(120%)'
+        })),
+        state('triggered', style({
+            transform:'translateX(0)'
+        })),
+        transition('untriggered => triggered', animate('400ms ease')),
+        transition('triggered => untriggered', animate('400ms 100ms ease'))
     ])
+    
 ]
\ No newline at end of file
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 64ec936d0..89c8a2420 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
@@ -167,28 +167,56 @@
 					<div class="col-12">
 						<!-- <div class="heading">1.3 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div> -->
 						<div class="heading">1.4 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}</div>
-							<div class="full-width basic-info-input">
-								<table class="col-12 user-table">
-									<tr class="row user-table-header">
-										<th class="col-4">{{'USERS.LISTING.NAME' | translate}}</th>
-										<th class="col-4">{{'USERS.LISTING.EMAIL' | translate}}</th>
-										<th class="col-4"></th>
-									</tr>
-									<tr *ngFor="let user of userChipList" class="row user-table-row">
-										<td class="col-4">{{user.name}}</td>
-										<td class="col-4">{{user.email}}</td>
-										<td class="col-4">
-											<button mat-raised-button class="delete-btn" (click)="removeUser(user)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate}}</button>
+						<div class="full-width basic-info-input">
+							<table class="col-12 user-table">
+								<tr class="row user-table-header">
+									<th>{{'USERS.LISTING.NAME' | translate}}</th>
+									<th>{{'USERS.LISTING.EMAIL' | translate}}</th>
+									<th></th>
+								</tr>
+								<tbody class="user-table-body">
+									<tr *ngFor="let user of userChipList" class="user-table-row">
+										<td>{{user.name}}</td>
+										<td >{{user.email}}</td>
+										<td>
+											<!-- <button mat-raised-button class="delete-btn" (click)="removeUser(user)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate}}</button> -->
+											<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>
-								</table>
-									</div>
-									<div class = "row">
-										<input matInput #email class = "col-8 email-input" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}">
-										<button mat-raised-button color="primary" (click)="checkAndAdd(email.value)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate}}</button>
-									</div>
+								</tbody>
+							</table>
+						</div>
 					</div>
+					
+					<div class="col-12">
+						<div class="row justify-content-end">
+							<div class="col d-flex justify-content-end" style="overflow: hidden;">
+								<!-- <div class="row">
+									<input matInput #email class = "col-8 email-input" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}">
+									<button mat-raised-button color="primary" (click)="checkAndAdd(email.value)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate}}</button>
+								</div> -->
+								<!-- <div class="row"> -->
+									<div style="min-width: 20em;max-width: 25em;" [@add-new-user-field]="inputUserState">
+										<mat-form-field appearance="legacy">
+											<input matInput #email placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}" (focus)="onUserFieldFocus()" (blur)="onUserFieldBlur()" (keyup.enter)="addUser(email)">
+										</mat-form-field>
+									</div>
+									<!-- <button mat-raised-button color="primary" (click)="checkAndAdd(email.value)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate}}</button> -->
+								<!-- </div> -->
+							</div>
 
+							<div class="col-auto">
+								<button mat-mini-fab color="primary" (click)="addUser(email)" (focus)="onUserButtonFocus()" (blur)="onUserButtonBlur()" [matTooltip]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate" [disabled]="userFormDisabled">
+									<ng-container *ngIf="inputUserState === 'untriggered' else triggericon">
+										<mat-icon>add</mat-icon>
+									</ng-container>
+									<ng-template #triggericon>
+										<mat-icon>person_add</mat-icon>
+									</ng-template>
+								</button>
+							</div>
+						</div>
+					</div>
 					<!-- <div class="col-12">
 						<button mat-button class="full-width" (click)="addPage()"
 							[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.NEXT' | translate}}</button>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
index 83ac05eaf..9a5ae8991 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
@@ -230,8 +230,8 @@ $blue-color-light: #5cf7f2;
 }
 
 .delete-btn {
-	background-color: rgba(255, 0, 0, 0.76);
-	color: white;
+	// background-color: rgba(255, 0, 0, 0.76);
+	// color: white;
 }
 
 .email-input {
@@ -247,26 +247,41 @@ $blue-color-light: #5cf7f2;
 
 
 .user-table {
-	border: thin solid rgb(179, 173, 173);
+	// border: thin solid rgb(179, 173, 173);
+	border: 1px solid rgba(0, 0, 0, 0.12);
 	background-color: white;
 	border-radius: 4px;
+	padding-bottom: 1em;
 }
 
 .user-table-header {
 	text-align: center;
 	display: revert;
+	background-color: rgb(243 245 248);
 }
 
 .user-table-header th {
 	padding-top: 10px;
 	padding-bottom: 10px;
-	border: thin solid darkgray;
+	// border: thin solid darkgray;
 }
 
 .user-table-row {
-	display: revert;
+	// display: revert;
+	background-color: #fafafa;
+	td{
+		padding-top: .5em;
+		padding-bottom: .5em;
+	}
+	&:hover{
+		background-color: #eef5f6;
+	}
+	border-top:1px solid rgba(0, 0, 0, 0.12);
 }
 
 .user-table-row:nth-child(even) {
-	background-color: silver;
+	// background-color: silver;
 }
+.user-table-body{
+	text-align: center;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
index df84aa06f..d84b72d42 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
@@ -1,5 +1,5 @@
 
-import { of as observableOf, Observable } from 'rxjs';
+import { of as observableOf, Observable, Subject, combineLatest, BehaviorSubject, pipe, of, from } from 'rxjs';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { AfterViewInit, Component, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild } from '@angular/core';
 import { AbstractControl, Form, FormArray, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
@@ -7,7 +7,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatHorizontalStepper, MatStep } from '@angular/material/stepper';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { map, takeUntil } from 'rxjs/operators';
+import { debounce, debounceTime, filter, map, mergeMap, takeUntil, tap } from 'rxjs/operators';
 import * as FileSaver from 'file-saver';
 import { BaseComponent } from '@common/base/base.component';
 import { DatasetProfileEditorModel } from '@app/ui/admin/dataset-profile/editor/dataset-profile-editor-model';
@@ -43,7 +43,7 @@ import { invalid } from '@angular/compiler/src/render3/view/util';
 import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
 import { EditorCustomValidators, EditorCustomValidatorsEnum } from './custom-validators/editor-custom-validators';
 import { CustomErrorValidator } from '@common/forms/validation/custom-validator';
-import { STEPPER_ANIMATIONS } from './animations/animations';
+import { GENERAL_ANIMATIONS, STEPPER_ANIMATIONS } from './animations/animations';
 import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { DmpInvitationUser } from '@app/core/model/dmp/invitation/dmp-invitation-user';
@@ -51,6 +51,7 @@ import { RequestItem } from '@app/core/query/request-item';
 import { DmpInvitationUserCriteria } from '@app/core/query/dmp/dmp-invitation-user-criteria';
 import { DmpInvitationService } from '@app/core/services/dmp/dmp-invitation.service';
 import { UserService } from '@app/core/services/user/user.service';
+import { MatInput } from '@angular/material';
 
 
 const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
@@ -59,7 +60,7 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
 	selector: 'app-dataset-profile-editor-component',
 	templateUrl: './dataset-profile-editor.component.html',
 	styleUrls: ['./dataset-profile-editor.component.scss'],
-	animations:[...STEPPER_ANIMATIONS],
+	animations:[...STEPPER_ANIMATIONS, ...GENERAL_ANIMATIONS],
 	providers:[VisibilityRulesService]
 })
 export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
@@ -85,6 +86,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	displayedColumns: String[] = ['name', 'email', 'button'];
 
 	colorizeInvalid:boolean = false;
+	inputUserState: 'untriggered'| 'triggered' = 'untriggered';
+	private _inputUserField$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+	private _inputUserButton$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
 
 	// customEditorValidators = new EditorCustomValidators();
@@ -220,6 +224,22 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		});
 
 
+		combineLatest(this._inputUserButton$.asObservable(),this._inputUserField$.asObservable())
+		.pipe(takeUntil(this._destroyed))
+		.pipe(debounceTime(400))
+		.pipe(filter(_=> !_[0] && !_[1]))
+		.subscribe(_=>{
+			// if(!this.userFormDisabled)
+			this.inputUserState = 'untriggered';
+		});
+		// combineLatest(this._inputUserButton$.asObservable(),this._inputUserField$.asObservable())
+		// .pipe(takeUntil(this._destroyed))
+		// .pipe(debounceTime(200))
+		// .pipe(filter(_=> _[0] || _[1]))
+		// .subscribe(_=>{
+		// 	// if(!this.userFormDisabled)
+		// 	this.inputUserState = 'triggered';
+		// });
 	}
 
 	private _initializeToCEntries(){
@@ -1792,6 +1812,58 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		return invalidControls;
 
 	}
+	userFormDisabled:boolean = false;
+	addUser(email:MatInput){
+
+		// email.focus();
+		if(this.userFormDisabled) return;
+
+		// console.log('user add');
+		if(this.inputUserState === 'triggered'){
+			// this.checkAndAdd(email);
+			
+			of(email.value)
+			.pipe(tap(_=> {this.userFormDisabled = true; email.focus()}))
+			.pipe(mergeMap(email=>this.userService.getFromEmail(email)))
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((result) => {
+				this.userChipList.push(result);
+				this.form.patchValue({'users': this.userChipList});
+
+				email.value = '';
+				this.userFormDisabled = false;
+				// email.focus();
+				// this.inputUserState = 'triggered';
+			
+
+			},
+			error=>{
+				// console.log(error.message);
+				this.uiNotificationService.snackBarNotification(error.message, SnackBarNotificationLevel.Error);
+				this.userFormDisabled = false;
+				// this.inputUserState = 'triggered';//when it loses focus(when disabled) it becomes untriggered
+				// email.focus();
+			});
+			// this.inputUserState = 'untriggered';
+		}else{
+			this.inputUserState = 'triggered';
+			email.focus();
+			
+		}
+	}
+	onUserButtonFocus(){
+		this._inputUserButton$.next(true);
+	}
+	onUserButtonBlur(){
+		this._inputUserButton$.next(false);
+	}
+	onUserFieldFocus(){
+		this._inputUserField$.next(true);
+	}
+	onUserFieldBlur(){
+		this._inputUserField$.next(false);
+	}
+
 
 
 	//Temporary patch
@@ -1847,6 +1919,24 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		this.form.patchValue({'users': this.userChipList});
 	}
 
+
+	verifyAndRemoveUser(user:any){
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(approve => {
+			if (approve) {
+				this.removeUser(user);
+			}
+		});
+	}
+
 }
 
 interface InvalidControl{