From eb0bf2f003dec6dadc2c2f240afb8aa26fb97a67 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Wed, 23 Sep 2020 19:41:12 +0300
Subject: [PATCH] Adds "Insert manually" link instead of add ( + ) button

---
 .../funding-info/funding-info.component.html  |   8 +-
 .../funding-info/funding-info.component.scss  |   2 +-
 .../editor/main-info/main-info.component.html |  14 +-
 .../editor/main-info/main-info.component.scss | 143 ++++++++++--------
 .../editor/main-info/main-info.component.ts   |  10 +-
 5 files changed, 99 insertions(+), 78 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.html b/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.html
index 38195029e..3bbb51292 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.html
@@ -36,9 +36,9 @@
 							<div *ngIf="isCreateNewFunder" (click)="createFunder()">
 								<span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-FUNDER' | translate}}</span>
 							</div>
-							<div *ngIf="!isCreateNewFunder" (click)="createFunder()">
+							<div *ngIf="!isCreateNewFunder">
 								<span [ngClass]="isNewVersion?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
-								<span [ngClass]="isNewVersion?'disabled-toggle':'insert'">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
+								<span [ngClass]="isNewVersion?'disabled-toggle':'insert'" (click)="createFunder()">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
 							</div>
 						</div>
 					</div>
@@ -82,9 +82,9 @@
 								<div *ngIf="isCreateNew" (click)="createGrant()">
 									<span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</span>
 								</div>
-								<div *ngIf="!isCreateNew" (click)="createGrant()">
+								<div *ngIf="!isCreateNew">
 									<span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
-									<span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'insert'">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
+									<span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'insert'" (click)="createGrant()">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
 								</div>
 							</div>
 						</div>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.scss b/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.scss
index 94cef8134..c1716ad85 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.scss
@@ -68,7 +68,7 @@
   }
 
   .not-found {
-	cursor: pointer;
+	// cursor: pointer;
 	font-size: 1rem;
 	font-weight: 400;
 	padding: 0rem 0.5rem 0rem 0rem;
diff --git a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
index 35a56a0ff..30e337af0 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
@@ -52,10 +52,12 @@
 							{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
 						<mat-error *ngIf="formGroup.get('researchers').hasError('required')">
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						<button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher($event)">
+						<!-- <button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher($event)">
 							<mat-icon class="icon-btn">add_circle</mat-icon>
-						</button>
+						</button> -->
 					</mat-form-field>
+					<span *ngIf="!formGroup.get('researchers').disabled" class="not-found">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
+					<span *ngIf="!formGroup.get('researchers').disabled" class="insert-manually" (click)="addResearcher($event)">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
 				</div>
 			</div>
 		</div>
@@ -74,10 +76,14 @@
 						<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
 							{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
 						<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						<button *ngIf="showOrganizationCreator()" matSuffix class="input-btn" [disabled]="canAddOrganizations()" type="button" (click)="addOrganization($event)">
+						<!-- <button *ngIf="showOrganizationCreator()" matSuffix class="input-btn" [disabled]="cantAddOrganizations()" type="button" (click)="addOrganization($event)">
 							<mat-icon class="icon-btn">add_circle</mat-icon>
-						</button>
+						</button> -->
 					</mat-form-field>
+					<div *ngIf="showOrganizationCreator()" class="pb-4">
+						<span *ngIf="!cantAddOrganizations()" class="not-found">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
+						<span *ngIf="!cantAddOrganizations()" class="insert-manually" (click)="addOrganization($event)">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.scss b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.scss
index dcacc6578..d125f68cf 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.scss
@@ -1,97 +1,112 @@
 .main-info {
-  //   position: relative;
-  //   left: 362px;
-  //   width: calc(100% - 366px);
+	//   position: relative;
+	//   left: 362px;
+	//   width: calc(100% - 366px);
 
-  .intro {
-    text-align: left;
-    font-weight: 400;
-    letter-spacing: 0px;
-    color: #212121;
-    opacity: 1;
-    margin: 3rem 0rem 3rem 0rem;
-  }
+	.intro {
+		text-align: left;
+		font-weight: 400;
+		letter-spacing: 0px;
+		color: #212121;
+		opacity: 1;
+		margin: 3rem 0rem 3rem 0rem;
+	}
 
-  .heading {
-    text-align: left;
-    font-weight: 700;
-    font-size: 18px;
-    letter-spacing: 0px;
-    color: #212121;
-    opacity: 0.81;
-    margin-top: 1.625rem;
-    margin-bottom: 0.625rem;
-  }
+	.heading {
+		text-align: left;
+		font-weight: 700;
+		font-size: 18px;
+		letter-spacing: 0px;
+		color: #212121;
+		opacity: 0.81;
+		margin-top: 1.625rem;
+		margin-bottom: 0.625rem;
+	}
 
-  .hint {
-    text-align: left;
-    font-weight: 400;
-    font-size: 16px;
-    letter-spacing: 0px;
-    color: #212121;
-    opacity: 0.81;
-    margin-bottom: 2.125rem;
-  }
+	.hint {
+		text-align: left;
+		font-weight: 400;
+		font-size: 16px;
+		letter-spacing: 0px;
+		color: #212121;
+		opacity: 0.81;
+		margin-bottom: 2.125rem;
+	}
 
-  .title-form,
-  .description-form {
-    text-align: left;
-    font-weight: 400;
-    font-size: 16px;
-    letter-spacing: 0.15px;
-    color: #7d7d7d;
-    opacity: 1;
-    margin-bottom: 1rem;
-  }
+	.title-form,
+	.description-form {
+		text-align: left;
+		font-weight: 400;
+		font-size: 16px;
+		letter-spacing: 0.15px;
+		color: #7d7d7d;
+		opacity: 1;
+		margin-bottom: 1rem;
+	}
 
-  //   textarea::placeholder {
-  //     font-style: oblique;
-  //   }
+	//   textarea::placeholder {
+	//     font-style: oblique;
+	//   }
 
-  .input-btn {
-    border: none;
-    color: #aaaaaa;
-    background-color: #ffffff00;
-    cursor: pointer;
-  }
+	.input-btn {
+		border: none;
+		color: #aaaaaa;
+		background-color: #ffffff00;
+		cursor: pointer;
+	}
 
-  .input-btn :hover {
-    color: #00b29f !important;
-  }
+	.input-btn :hover {
+		color: #00b29f !important;
+	}
+
+	.insert-manually {
+		text-decoration: underline;
+		color: #00b29f;
+		cursor: pointer;
+		font-size: 1rem;
+		font-weight: 400;
+	}
+
+	.not-found {
+		// cursor: pointer;
+		font-size: 1rem;
+		font-weight: 400;
+		padding: 0rem 0.5rem 0rem 0rem;
+	}
 }
 
 ::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-outline {
-  background: #fafafa !important;
+	background: #fafafa !important;
 }
 
 ::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-outline {
-  background: #fafafa !important;
+	background: #fafafa !important;
 }
 
 ::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-outline {
-  background: #fafafa !important;
+	background: #fafafa !important;
 }
 
 ::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-outline {
-  background: #fafafa !important;
+	background: #fafafa !important;
 }
 
 ::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-infix {
-  font-size: 1rem;
-  padding: 0.6em 0 1em 0 !important;
+	font-size: 1rem;
+	padding: 0.6em 0 1em 0 !important;
 }
 
 ::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-infix {
-  font-size: 1rem;
-  padding: 0.6em 0 1em 0 !important;
+	font-size: 1rem;
+	padding: 0.6em 0 1em 0 !important;
 }
 
 ::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-infix {
-  font-size: 1rem;
-  padding: 0.6em 0 1em 0 !important;
+	font-size: 1rem;
+	padding: 0.6em 0 1em 0 !important;
 }
 
 ::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-infix {
-  font-size: 1rem;
-  padding: 0.6em 0 1em 0 !important;
+	font-size: 1rem;
+	padding: 0.6em 0 1em 0 !important;
 }
diff --git a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts
index 5f07ecec7..0a72a9fdc 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts
@@ -84,10 +84,10 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
 			this.formGroup.get('extraProperties').get('publicDate').patchValue(new Date());
 		}
 
-		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
-			.subscribe(x => {
-				this.onFormChanged.emit();
-			});
+		// this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
+		// 	.subscribe(x => {
+		// 		this.onFormChanged.emit();
+		// 	});
 	}
 
 	// Researchers
@@ -126,7 +126,7 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
 		return this.externalSourcesService.searchDMPOrganizations(value);
 	}
 
-	canAddOrganizations(): boolean {
+	cantAddOrganizations(): boolean {
 		if (!isNullOrUndefined(this.formGroup.get('organizations'))) {
 			return this.formGroup.get('organiztions').disabled;
 		} else {