From 1ca647f56e6cf3a027aebabb4e47dca06d0fe4ef Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Sat, 18 Feb 2023 10:52:24 +0200 Subject: [PATCH] [Explore & Library | explore-redesign]: Updated component for suggest SDGs or FoS. 1. alert.ts: Added previous button option. 2. composer.ts: Set feedback values in body | Make method "composeEmailForSdgsSuggestion()" generic to send feedback for either SDGs or FoS. - TODO: Rename method. 3. sdg-selection.component: Added some checks | Added method "getSelectedSubjects()". 4. sdg-fos-suggest.component: Updated component for suggestion | Send suggested subjects to composer | Add modal here | Make file generic for FoS or SDGs suggestion. 5. resultLanding.component: Updated how is called | Moved SDGs / FoS suggest modal inside . --- .../sdg-fos-suggest.component.ts | 161 +++++++++++++----- .../sdg-fos-suggest/sdg-fos-suggest.module.ts | 8 +- .../result/resultLanding.component.html | 14 +- .../result/resultLanding.component.ts | 28 +-- .../sdg-selection.component.html | 4 +- sdg/sdg-selection/sdg-selection.component.ts | 6 +- utils/email/composer.ts | 21 ++- utils/modal/alert.ts | 37 +++- 8 files changed, 196 insertions(+), 83 deletions(-) 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 3f3c1af7..6edc4d4e 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,5 +1,4 @@ -import {HttpClient} from "@angular/common/http"; -import {Component, Input, ViewChild} from "@angular/core"; +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 {properties} from "../../../../../environments/environment"; @@ -7,53 +6,67 @@ import {EnvProperties} from "../../../utils/properties/env-properties"; import {EmailService} from "../../../utils/email/email.service"; import {Subscription} from "rxjs"; import {Composer} from "../../../utils/email/composer"; +import {AlertModal} from "../../../utils/modal/alert"; +import {StringUtils} from "../../../utils/string-utils.class"; @Component({ selector: 'sdg-fos-suggest', template: ` - -
-
-
Thank you for your feedback.
-
Before sending us your options, would you like to leave us your e-mail to notify you about the reporting status?
-
-
-
- - -
-
-
- ` + + + + +
+
+ +
Thank you for your feedback.
+
Before sending us your options, would you like to leave us your e-mail to notify you about the reporting status?
+
+
+
+ + +
+ + +

Your feedback is successfully received and it will soon be reviewed by our graph experts!

+ + + +
+
+ + ` }) export class SdgFosSuggestComponent { - @Input("subjects") subjects; + @Input() entityType: string; @Input() title; + public subjectType: "fos" | "sdg" = "sdg"; + public subjects; public properties: EnvProperties = properties; - public sdgSelectionStep1: boolean = true; - @ViewChild("sdgSelection") sdgSelection: SdgSelectionComponent; + public selectionStep1: boolean = true; + @ViewChild("selectionModal") selectionModal: AlertModal; + @ViewChild("selection") selection: SdgSelectionComponent;// | FosSelectionComponent; public form: UntypedFormGroup; + public url: string = null; + public sending: boolean = false; + public sent: boolean = false; + public error: boolean = false; subscriptions: Subscription[] = []; - constructor( - private emailService: EmailService, - private fb: FormBuilder - ) {} + constructor(private emailService: EmailService, private fb: FormBuilder, private cdr: ChangeDetectorRef) {} ngOnInit() { - let url; if (typeof window !== "undefined") { - url = window.location.href; + this.url = window.location.href; } - this.form = this.fb.group({ - name: this.fb.control(this.title), - url: this.fb.control(url), - email: this.fb.control('', Validators.email), - sdgs: this.fb.array([], Validators.required), - recaptcha: this.fb.control('', Validators.required), - }); + this.init(); } ngOnDestroy() { @@ -64,16 +77,52 @@ export class SdgFosSuggestComponent { }); } - public sdgModalOutput() { - if(this.sdgSelectionStep1) { - this.sdgSelectionStep1 = false; - } else { - console.log(this.sdgSelection.sdgs.filter(element => element.checked == true)); - console.log(this.form.get('email').value); + init() { + this.form = this.fb.group({ + name: this.fb.control(this.title), + url: this.fb.control(this.url), + email: this.fb.control('', Validators.email), + subjects: this.fb.control([]), + recaptcha: this.fb.control('', Validators.required), + }); + } + + public openSelectionModal() { + this.sent = false; + this.sending = false; + this.error = false; + this.selectionStep1 = true; + this.init(); + + this.selectionModal.cancelButton = false; + if(this.subjectType == "sdg") { + this.selectionModal.alertTitle = "Please select SDGs that are the most relevant for this "+this.getEntityName(this.entityType)+"."; + } else { + this.selectionModal.alertTitle = "Please select Fields of Science that are the most relevant for this "+this.getEntityName(this.entityType)+"."; + } + this.selectionModal.okButtonText = "Next"; + this.selectionModal.stayOpen = true; + this.cdr.detectChanges(); + this.selectionModal.open(); + } + + public modalOutput() { + this.selectionModal.previousButton = true; + this.selectionModal.okButtonText = "Send feedback"; + + if(this.selectionStep1) { + this.selectionStep1 = false; + if(this.subjectType == "sdg") { + this.selectionModal.alertTitle = "Please send your feedback on most relevant SDGs for this "+this.getEntityName(this.entityType)+"."; + } else { + this.selectionModal.alertTitle = "Please send your feedback on most relevant Fields of Science for this "+this.getEntityName(this.entityType)+"."; + } + } else { // email functionality + this.form.get("subjects").setValue(this.selection.getSelectedSubjects().map(subject => subject.id)); this.subscriptions.push(this.emailService.contact(this.properties, - Composer.composeEmailForSdgsSuggestion(this.form.value, [this.properties.feedbackmail]), this.form.get('recaptcha').value).subscribe(sent => { - // this.error = !sent; + Composer.composeEmailForSdgsSuggestion(this.form.value, [this.properties.feedbackmail], this.subjectType), this.form.get('recaptcha').value).subscribe(sent => { + this.error = !sent; if (sent) { if (this.form.get('email').value !== '') { this.subscriptions.push(this.emailService.contact(this.properties, @@ -83,19 +132,41 @@ export class SdgFosSuggestComponent { } })); } - // this.init(); - // this.sent = true; + this.init(); + this.sent = true; + + this.selectionModal.alertTitle = "Thank you for your feedback"; + this.selectionModal.okButtonText = "OK"; + this.selectionModal.previousButton = false; + this.selectionModal.stayOpen = false; } // this.sending = false; }, error => { console.log(error); - // this.error = true; - // this.sending = false; + this.error = true; + this.sending = false; })); } } + public modalCancel() { + if(this.subjectType == "sdg") { + this.selectionModal.alertTitle = "Please select SDGs that are the most relevant for this "+this.getEntityName(this.entityType)+"."; + } else { + this.selectionModal.alertTitle = "Please select Fields of Science that are the most relevant for this "+this.getEntityName(this.entityType)+"."; + } + this.selectionStep1 = true; + this.selectionModal.previousButton = false; + this.selectionModal.okButtonText = "Next"; + this.selectionModal.stayOpen = true; + this.error = false; + } + public handleRecaptcha(captchaResponse: string) { this.form.get('recaptcha').setValue(captchaResponse); } + + private getEntityName (entityType:string) { + return StringUtils.getEntityName(entityType, false); + } } \ No newline at end of file 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 b48a938f..4707e909 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 @@ -5,11 +5,13 @@ import {RecaptchaModule} from "ng-recaptcha"; import {SdgSelectionModule} from "src/app/openaireLibrary/sdg/sdg-selection/sdg-selection.module"; import {InputModule} from "../../../sharedComponents/input/input.module"; import {SdgFosSuggestComponent} from "./sdg-fos-suggest.component"; +import {AlertModalModule} from "../../../utils/modal/alertModal.module"; +import {IconsModule} from "../../../utils/icons/icons.module"; @NgModule({ - imports: [ - CommonModule, FormsModule, InputModule, SdgSelectionModule, RecaptchaModule - ], + imports: [ + CommonModule, FormsModule, InputModule, SdgSelectionModule, RecaptchaModule, AlertModalModule, IconsModule + ], declarations: [ SdgFosSuggestComponent ], diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html index 06a0b91d..24783faf 100644 --- a/landingPages/result/resultLanding.component.html +++ b/landingPages/result/resultLanding.component.html @@ -794,7 +794,7 @@
- +
@@ -985,15 +985,17 @@
- - - + + + + +
- +
diff --git a/landingPages/result/resultLanding.component.ts b/landingPages/result/resultLanding.component.ts index 2aa8d714..64341985 100644 --- a/landingPages/result/resultLanding.component.ts +++ b/landingPages/result/resultLanding.component.ts @@ -115,7 +115,7 @@ export class ResultLandingComponent { 'Publisher information', 'Funding Information', 'Persistent identifiers', 'Sustainable Development Goals (SDGs)', 'Fields of Science and Technology (FOS)', 'Other']; - + public pidsArrayString: string = ""; public identifier: Identifier; @@ -143,8 +143,6 @@ export class ResultLandingComponent { // public shouldSticky: boolean = true; public viewAll: string = ""; - @ViewChild("sdgSelectionModal") sdgSelectionModal; - @ViewChild("fosSelectionModal") fosSelectionModal; @ViewChild("sdgFosSuggest") sdgFosSuggest: SdgFosSuggestComponent; public noCommunities: boolean = false; @@ -915,11 +913,15 @@ export class ResultLandingComponent { public suggestClicked(value: string) { if(value == 'sdg') { - this.openSdgSelectionModal(); + this.sdgFosSuggest.subjects=this.resultLandingInfo.sdg; + this.sdgFosSuggest.subjectType="sdg"; } else if(value == 'fos') { - this.openFosSelectionModal(); + console.log(this.resultLandingInfo.fos); + this.sdgFosSuggest.subjects=this.resultLandingInfo.fos; + this.sdgFosSuggest.subjectType="fos"; } - } + this.sdgFosSuggest.openSelectionModal(); + } public openDescriptionModal() { this.descriptionModal.alertFooter = false; @@ -938,13 +940,13 @@ export class ResultLandingComponent { return formatted.number + formatted.size; } - private openSdgSelectionModal() { - this.sdgSelectionModal.cancelButton = false; - this.sdgSelectionModal.alertTitle = "Please select SDGs that are the most relevant for this publication."; - this.sdgSelectionModal.okButtonText = "Send feedback"; - this.sdgSelectionModal.stayOpen = true; - this.sdgSelectionModal.open(); - } + // private openSdgSelectionModal() { + // this.sdgSelectionModal.cancelButton = false; + // this.sdgSelectionModal.alertTitle = "Please select SDGs that are the most relevant for this publication."; + // this.sdgSelectionModal.okButtonText = "Next"; + // this.sdgSelectionModal.stayOpen = true; + // this.sdgSelectionModal.open(); + // } private openFosSelectionModal() { this.fosSelectionModal.cancelButton = false; diff --git a/sdg/sdg-selection/sdg-selection.component.html b/sdg/sdg-selection/sdg-selection.component.html index d0e1d23b..6ebd36f4 100644 --- a/sdg/sdg-selection/sdg-selection.component.html +++ b/sdg/sdg-selection/sdg-selection.component.html @@ -6,7 +6,7 @@
-