From 23bfc3af3d79532d4baa86f8fbb25c4bee126493 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Mon, 20 Feb 2023 16:34:12 +0200
Subject: [PATCH] changes for sdg/fos selection and suggest components

---
 .../fos-selection.component.html              | 22 ++++++-------
 fos/fos-selection/fos-selection.component.ts  | 31 +++++++++++++++----
 fos/fos-selection/fos-selection.module.ts     | 11 ++++---
 landingPages/landing-utils/fos.component.ts   | 21 +++++++------
 .../sdg-fos-suggest.component.ts              | 10 +++---
 .../sdg-fos-suggest/sdg-fos-suggest.module.ts |  5 +--
 landingPages/landing-utils/sdg.component.ts   |  5 ++-
 .../result/resultLanding.component.html       |  5 +--
 sdg/sdg-selection/sdg-selection.component.ts  |  8 ++++-
 utils/modal/alert.ts                          |  7 ++++-
 10 files changed, 83 insertions(+), 42 deletions(-)

diff --git a/fos/fos-selection/fos-selection.component.html b/fos/fos-selection/fos-selection.component.html
index 62a78150..1af39d33 100644
--- a/fos/fos-selection/fos-selection.component.html
+++ b/fos/fos-selection/fos-selection.component.html
@@ -3,7 +3,7 @@
 </div>
 <div *ngIf="!loading">
 	<div class="uk-visible@m">
-		<div class="uk-flex uk-flex-right uk-margin-small-bottom">
+		<div #searchElement class="uk-flex uk-flex-right uk-margin-small-bottom">
 			<div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content"
 				searchInputClass="border-bottom" class="uk-width-large"></div>
 		</div>
@@ -12,11 +12,11 @@
 		<div class="uk-margin-top">
 			<div id="parentContainer" class="uk-grid" uk-grid>
 				<div class="uk-width-1-4@m uk-visible@m">
-					<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 200;">
+					<div>
 						<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
 							<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
 								class="uk-margin-small-bottom uk-text-capitalize">
-									<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
+									<a (click)="scrollToId(item.id)">{{item.id}}</a>
 							</li>
 						</ul>
 						<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
@@ -53,10 +53,10 @@
 						</div>
 					</div>
 				</div>
-				<div class="uk-width-expand@m">
+				<div class="uk-width-expand@m uk-overflow-auto" [style]="'height: ' + calculatedHeight + 'px;'">
 					<ng-container *ngIf="!keyword">
 						<div [id]="item.id" *ngFor="let item of fos; index as i">
-							<div class="uk-text-capitalize">
+							<div [class.uk-padding-small]="i !== 0" class="uk-text-capitalize uk-padding-remove-horizontal uk-padding-remove-bottom">
 								<h2 class="uk-h4 uk-margin-remove">
 									{{item.id}}
 									<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
@@ -75,11 +75,11 @@
 												{{child.id}}
 											</a> -->
 										</h3>
-										<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom">
-											<label>
-												<input [checked]="subjects.includes(subChild.id)"
+										<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom uk-text-truncate">
+											<label [class.uk-text-bolder]="subjects?.includes(subChild.id)">
+												<input [(ngModel)]="subChild.checked"
 													type="checkbox" class="uk-checkbox uk-margin-small-right">
-												<span>{{subChild.id}}</span>
+												<span [title]="subChild.id">{{subChild.id}}</span>
 											</label>
 											<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
 												class="uk-link-text">
@@ -109,11 +109,11 @@
 												class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
 											</a> -->
 										</h3>
-										<div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom">
+										<div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom uk-text-truncate">
 											<label>
 												<input [checked]="subjects.includes(subSubItem.id)"
 													type="checkbox" class="uk-checkbox uk-margin-small-right">
-												<span [innerHTML]="highlightKeyword(subSubItem.id)"></span>
+												<span [innerHTML]="highlightKeyword(subSubItem.id)" [title]="subChild.id"></span>
 											</label>
 											<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
 												class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
diff --git a/fos/fos-selection/fos-selection.component.ts b/fos/fos-selection/fos-selection.component.ts
index 4045f12a..dfbc1b6b 100644
--- a/fos/fos-selection/fos-selection.component.ts
+++ b/fos/fos-selection/fos-selection.component.ts
@@ -1,11 +1,13 @@
 import {HttpClient} from "@angular/common/http";
 import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
 import {FormBuilder, FormControl} from "@angular/forms";
-import { ActivatedRoute, Router } from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {Subscription} from "rxjs";
 import {EnvProperties} from "../../utils/properties/env-properties";
+import {properties} from "../../../../environments/environment";
 import {StringUtils} from "../../utils/string-utils.class";
 import {debounceTime, distinctUntilChanged} from "rxjs/operators";
+import {HelperFunctions} from "../../utils/HelperFunctions.class";
 import Timeout = NodeJS.Timeout;
 
 declare var UIkit;
@@ -16,12 +18,14 @@ declare var UIkit;
 	styleUrls: ['fos-selection.component.less']
 })
 export class FosSelectionComponent {
-	@Input() properties: EnvProperties;
+	public properties: EnvProperties = properties;
 	@Input() subjects: string[];
+	@Input() contentHeight: number = 0;
+	@ViewChild("searchElement") searchElement: ElementRef;
 
 	public loading: boolean;
 	public fos: any[] = [];
-	public fosOptions: string[] = [];
+	public fosOptions: any = [];
 	public activeSection: string;
 
 	public keywordControl: FormControl;
@@ -131,13 +135,13 @@ export class FosSelectionComponent {
 	convertFosToOptions() {
 		this.fosOptions = [];
 		this.fos.forEach(fos => {
-			this.fosOptions.push(fos.id);
+			this.fosOptions.push({id: fos.id, checked: false});
 			if(fos.children) {
 				fos.children.forEach(child => {
-					this.fosOptions.push(child.id);
+					this.fosOptions.push({id: child.id, checked: false});
 					if(child.children) {
 						child.children.forEach(child2 => {
-							this.fosOptions.push(child2.id);
+							this.fosOptions.push({id: child2.id, checked: this.subjects?.includes(child2.id)});
 						});
 					}
 				});
@@ -180,4 +184,19 @@ export class FosSelectionComponent {
   public urlEncodeAndQuote(str: string): string {
     return StringUtils.quote(StringUtils.URIEncode(str));
   }
+
+	public scrollToId(value: string) {
+		HelperFunctions.scrollToId(value);
+		this.activeSection = value;
+	}
+
+	public getSelectedSubjects() {
+    return this.fosOptions.filter(sub => sub.checked == true);
+  }
+
+	get calculatedHeight(): number {
+		if(this.contentHeight && this.searchElement) {
+			return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
+		}
+	}
 }
\ No newline at end of file
diff --git a/fos/fos-selection/fos-selection.module.ts b/fos/fos-selection/fos-selection.module.ts
index 7766379f..8c6b40f5 100644
--- a/fos/fos-selection/fos-selection.module.ts
+++ b/fos/fos-selection/fos-selection.module.ts
@@ -1,22 +1,23 @@
 import {CommonModule} from "@angular/common";
 import {NgModule} from "@angular/core";
 import {FormsModule} from "@angular/forms";
+import {InputModule} from "../../sharedComponents/input/input.module";
+import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
 import {LoadingModule} from "../../utils/loading/loading.module";
-
-// import {FosSelectionComponent} from './fos-selection.component';
+import {FosSelectionComponent} from './fos-selection.component';
 
 @NgModule({
 	imports: [
-		CommonModule, FormsModule, LoadingModule
+		CommonModule, FormsModule, LoadingModule, InputModule, SearchInputModule
 	],
 	declarations: [
-		// FosSelectionComponent
+		FosSelectionComponent
 	],
 	providers: [
 		
 	],
 	exports: [
-		// FosSelectionComponent
+		FosSelectionComponent
 	]
 })
 export class FosSelectionModule {
diff --git a/landingPages/landing-utils/fos.component.ts b/landingPages/landing-utils/fos.component.ts
index 708a9d41..3f06ebc5 100644
--- a/landingPages/landing-utils/fos.component.ts
+++ b/landingPages/landing-utils/fos.component.ts
@@ -13,14 +13,17 @@ import {StringUtils} from "../../utils/string-utils.class";
 					<icon class="uk-margin-small-right" name="arrow_back" [flex]="true" [ratio]="1.2"></icon>
 					<span class="uk-text-nowrap">{{title}}</span>
 				</span>
-				<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right">{{title}}</span>
+				<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right">
+					{{title}}
+					<span *ngIf="subjects && subjects.length > threshold && !viewAll">({{subjects.length}})</span>
+				</span>
 				<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
 				<a *ngIf="subjects && subjects.length > threshold && !viewAll"
-					(click)="viewAllClick();" class="view-more-less-link uk-text-truncate">
-					<span class="">View all & suggest</span>
+					(click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">
+					View all & suggest
 				</a>
-				<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"
-					(click)="feedbackClick();">Feedback</a>
+				<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-link-text uk-text-truncate"
+					(click)="suggestClick();">Suggest</a>
 			</div>
 			<div class="uk-margin-small-top">
 				<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">
@@ -53,7 +56,7 @@ export class FosComponent {
   @Input() subjects: string[];
   @Input() viewAll: boolean = false;
   @Output() viewAllClicked  = new EventEmitter();
-  @Output() feedbackClicked  = new EventEmitter();
+  @Output() suggestClicked  = new EventEmitter();
   public lessBtn: boolean = false;
   public threshold: number = 3; // was 2
   public routerHelper: RouterHelper = new RouterHelper();
@@ -65,7 +68,7 @@ export class FosComponent {
     //   this.viewAll = true;
     //   this.lessBtn = true;
     // } else {
-      // this.viewAll = true;
+      this.viewAll = true;
       this.viewAllClicked.emit('fos');
     // }
   }
@@ -75,8 +78,8 @@ export class FosComponent {
     this.viewAllClicked.emit("");
   }
 
-  public feedbackClick() {
-    this.feedbackClicked.emit("");
+  public suggestClick() {
+    this.suggestClicked.emit('fos');
   }
 
   public urlEncodeAndQuote(str: string): string {
diff --git a/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts b/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts
index 6edc4d4e..3d012cb5 100644
--- a/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts
+++ b/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts
@@ -1,6 +1,7 @@
 import {ChangeDetectorRef, Component, Input, ViewChild} from "@angular/core";
 import {FormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
 import {SdgSelectionComponent} from "../../../sdg/sdg-selection/sdg-selection.component";
+import {FosSelectionComponent} from "../../../fos/fos-selection/fos-selection.component";
 import {properties} from "../../../../../environments/environment";
 import {EnvProperties} from "../../../utils/properties/env-properties";
 import {EmailService} from "../../../utils/email/email.service";
@@ -15,9 +16,9 @@ import {StringUtils} from "../../../utils/string-utils.class";
     <modal-alert #selectionModal [large]="true" (alertOutput)="modalOutput()" (cancelOutput)="modalCancel()"
                  [okDisabled]="!sent && !selectionStep1 && (form.invalid || sending)">
       <sdg-selection *ngIf="subjectType == 'sdg'" #selection [class.uk-hidden]="!selectionStep1"
-                     [subjects]="subjects"></sdg-selection>
-<!--      <fos-selection *ngIf="subjectType == 'fos'" #selection [class.uk-hidden]="!selectionStep1"-->
-<!--                     [subjects]="subjects"></fos-selection>-->
+                     [subjects]="subjects" [entityType]="entityType"></sdg-selection>
+			<fos-selection *ngIf="subjectType == 'fos'" #selection [class.uk-hidden]="!selectionStep1"
+                     [subjects]="subjects" [contentHeight]="selectionModal.bodyHeight"></fos-selection>
       <div [class.uk-hidden]="selectionStep1">
         <div class="uk-flex uk-flex-column uk-flex-middle">
           <ng-container *ngIf="!sent && !error">
@@ -25,6 +26,7 @@ import {StringUtils} from "../../../utils/string-utils.class";
             <div>Before sending us your options, would you like to leave us your e-mail to notify you about the reporting status?</div>
             <div input class="uk-width-1-2 uk-margin-medium-top uk-margin-medium-bottom"
                  [formInput]="form.get('email')" placeholder="E-mail">
+							<span note>(Optional)</span>
             </div>
             <div>
               <re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey">
@@ -51,7 +53,7 @@ export class SdgFosSuggestComponent {
 	public properties: EnvProperties = properties;
 	public selectionStep1: boolean = true;
   @ViewChild("selectionModal") selectionModal: AlertModal;
-	@ViewChild("selection") selection: SdgSelectionComponent;// | FosSelectionComponent;
+	@ViewChild("selection") selection: SdgSelectionComponent | FosSelectionComponent;
 	public form: UntypedFormGroup;
   public url: string = null;
 
diff --git a/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.module.ts b/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.module.ts
index 4707e909..4d327c9e 100644
--- a/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.module.ts
+++ b/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.module.ts
@@ -2,7 +2,8 @@ import {CommonModule} from "@angular/common";
 import {NgModule} from "@angular/core";
 import {FormsModule} from "@angular/forms";
 import {RecaptchaModule} from "ng-recaptcha";
-import {SdgSelectionModule} from "src/app/openaireLibrary/sdg/sdg-selection/sdg-selection.module";
+import {SdgSelectionModule} from "../../../sdg/sdg-selection/sdg-selection.module";
+import {FosSelectionModule} from "../../../fos/fos-selection/fos-selection.module";
 import {InputModule} from "../../../sharedComponents/input/input.module";
 import {SdgFosSuggestComponent} from "./sdg-fos-suggest.component";
 import {AlertModalModule} from "../../../utils/modal/alertModal.module";
@@ -10,7 +11,7 @@ import {IconsModule} from "../../../utils/icons/icons.module";
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, InputModule, SdgSelectionModule, RecaptchaModule, AlertModalModule, IconsModule
+    CommonModule, FormsModule, InputModule, SdgSelectionModule, FosSelectionModule, RecaptchaModule, AlertModalModule, IconsModule
   ],
 	declarations: [
 		SdgFosSuggestComponent
diff --git a/landingPages/landing-utils/sdg.component.ts b/landingPages/landing-utils/sdg.component.ts
index 30253b64..d5f954ea 100644
--- a/landingPages/landing-utils/sdg.component.ts
+++ b/landingPages/landing-utils/sdg.component.ts
@@ -14,7 +14,10 @@ import {StringUtils} from "../../utils/string-utils.class";
 					<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
 					<span uk-tooltip="Sustainable Development Goals">{{title}}</span>
 				</span>
-				<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right" uk-tooltip="Sustainable Development Goals">{{title}} ({{subjects.length}})</span>
+				<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right" uk-tooltip="Sustainable Development Goals">
+					{{title}} 
+					<span *ngIf="subjects && subjects.length > threshold && !viewAll">({{subjects.length}})</span>
+					</span>
 				<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
 				<a *ngIf="subjects && subjects.length > threshold && !viewAll"
 					(click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">
diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index 24783faf..d79b1cf8 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -794,14 +794,15 @@
             <sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (suggestClicked)="suggestClicked($event)"></sdg>
           </div>
           <div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')">
-            <fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="suggestClicked('fos')"></fos>
+            <fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (suggestClicked)="suggestClicked($event)"></fos>
           </div>
           <!-- Funded By -->
           <div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
             <fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event"></fundedBy>
           </div>
           <!-- Communities -->
-          <div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
+          <div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')"
+						class="uk-margin-bottom">
             <relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
 											(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
           </div>
diff --git a/sdg/sdg-selection/sdg-selection.component.ts b/sdg/sdg-selection/sdg-selection.component.ts
index 7c8bb77b..2c42ff95 100644
--- a/sdg/sdg-selection/sdg-selection.component.ts
+++ b/sdg/sdg-selection/sdg-selection.component.ts
@@ -2,6 +2,7 @@ import {HttpClient} from "@angular/common/http";
 import {Component, Input} from "@angular/core";
 import {properties} from "../../../../environments/environment";
 import {EnvProperties} from "../../utils/properties/env-properties";
+import {StringUtils} from "../../utils/string-utils.class";
 
 @Component({
 	selector: 'sdg-selection',
@@ -11,6 +12,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
 export class SdgSelectionComponent {
 	public properties: EnvProperties = properties;
 	@Input() subjects: string[];
+	@Input() entityType: string;
 
 	public loading: boolean;
 	public sdgs: any = [];
@@ -25,7 +27,7 @@ export class SdgSelectionComponent {
 			data['sdg'].forEach(element => {
 				this.sdgs.push({code: element.code, id: element.id, label: element.label, html: element.html, checked: this.subjects?.includes(element.id)});
 			});
-			this.sdgs.push({code: '18', id: 'No SDGs are relevant for this publication', label: 'Not relevant', html: 'Not relevant', checked: false});
+			this.sdgs.push({code: '18', id: 'No SDGs are relevant for this ' + this.getEntityName(this.entityType), label: 'Not relevant', html: 'Not relevant', checked: false});
 		});
 		this.loading = false;
 	}
@@ -40,5 +42,9 @@ export class SdgSelectionComponent {
 
   public getSelectedSubjects() {
     return this.sdgs.filter(sub => sub.checked == true);
+  }
+
+	private getEntityName (entityType:string) {
+    return StringUtils.getEntityName(entityType, false);
   }
 }
\ No newline at end of file
diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts
index 73d85d48..c808c786 100644
--- a/utils/modal/alert.ts
+++ b/utils/modal/alert.ts
@@ -15,7 +15,7 @@ declare var UIkit: any;
             <icon name="close" ratio="1.5"></icon>
           </button>
         </div>
-        <div class="uk-modal-body uk-animation-fast uk-text-left"
+        <div #bodyElement class="uk-modal-body uk-animation-fast uk-text-left"
              [ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody?'':null">
           <div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
           <ng-content></ng-content>
@@ -62,6 +62,7 @@ export class AlertModal {
   @Input() classBody: string = "";
   @Input() large: boolean = false;
   @Input() overflowBody: boolean = true;
+	@ViewChild("bodyElement") bodyElement: ElementRef;
   /**
    * Caption for the title.
    */
@@ -209,4 +210,8 @@ export class AlertModal {
   previous() {
     this.cancelOutput.emit();
   }
+
+	get bodyHeight() {
+		return (this.bodyElement) ? this.bodyElement.nativeElement.offsetHeight : 0;
+	}
 }