MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update feedback page and fix a bug with events

This commit is contained in:
Konstantinos Triantafyllou 2022-04-19 16:07:21 +03:00
parent 9c1f1dd97d
commit e808c7e26b
7 changed files with 79 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
landingPages/dataProvider/dataProvider.component.html
View File

@ -433,5 +433,5 @@
</div> </div>
<feedback *ngIf="dataProviderInfo && properties.reCaptchaSiteKey" [dataProviderInfo]="dataProviderInfo" <feedback *ngIf="dataProviderInfo && properties.reCaptchaSiteKey" [dataProviderInfo]="dataProviderInfo"
[properties]="properties" [entityType]="'content provider'" [fields]="feedbackFields" [properties]="properties" [entityType]="'content provider'" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback> [(showForm)]="showFeedback"></feedback>
</div> </div>

81
landingPages/feedback/feedback.component.html
View File

@ -1,8 +1,11 @@
<div *ngIf="showForm && !sent" class="feedback-page"> <div *ngIf="showForm && !sent">
<div class="portal-background-color uk-padding-small"> <div class="uk-padding-small">
<div class="uk-container"> <div class="uk-container">
<span class="clickable" (click)="openBackModal()"><span uk-icon="chevron-left"></span> Back</span> <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="openBackModal()">
<h3 class="uk-margin-remove-top">Report issues in...</h3> <icon name="west" [flex]="true"></icon>
<span class="uk-margin-small-left">Back</span>
</button>
<h3>Report issues in...</h3>
<landing-header *ngIf="resultLandingInfo" [properties]="properties" [title]="title" <landing-header *ngIf="resultLandingInfo" [properties]="properties" [title]="title"
[subTitle]="resultLandingInfo.subtitle" [underCuration]="resultLandingInfo.underCurationMessage" [subTitle]="resultLandingInfo.subtitle" [underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="entityType" [types]="resultLandingInfo.types" [entityType]="entityType" [types]="resultLandingInfo.types"
@ -26,47 +29,45 @@
</div> </div>
</div> </div>
<div *ngIf="form" [formGroup]="form" class="uk-container uk-padding-small"> <div *ngIf="form" [formGroup]="form" class="uk-container uk-padding-small">
<div *ngIf="error" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center ng-star-inserted" role="alert">Email sent failed! Please try again.</div> <div class="uk-grid uk-child-width-1-1" uk-grid>
<div formArrayName="issues" class="uk-margin-top"> <div *ngIf="error" class="uk-alert uk-alert-danger uk-text-center ng-star-inserted" role="alert">Email sent failed! Please try again.</div>
<div *ngFor="let control of issues.controls; let i = index" [formGroupName]="i" class="uk-margin-medium-bottom"> <div formArrayName="issues">
<div> <div *ngFor="let control of issues.controls; let i = index" [formGroupName]="i" class="uk-margin-medium-bottom">
<span>Issue #{{i + 1}}</span> <div class="uk-flex uk-flex-between">
<span class="uk-float-right clickable" (click)="removeIssue(i)">Remove</span> <h6 class="uk-margin-remove">Issue #{{i + 1}}</h6>
</div> <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="removeIssue(i)">
<div class="form"> <icon name="delete" [flex]="true"></icon>
<mat-select [formControl]="control.get('field')" <span class="uk-margin-small-left">Remove</span>
[disableOptionCentering]="true" [placeholder]="'Select the field to report the issue'" </button>
class="matSelection uk-margin-bottom" panelClass="matSelectionPanel"> </div>
<mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option> <div class="uk-margin-top">
</mat-select> <div input class="uk-width-medium" [formInput]="control.get('field')" placeholder="Select a field" [options]="fields" type="select"></div>
<textarea [formControl]="control.get('report')" class="uk-textarea default-border" <div input class="uk-width-1-1 uk-margin-top" [formInput]="control.get('report')" placeholder="Write your report here" type="textarea"></div>
rows="4" placeholder="Write your report here..."></textarea> </div>
</div> </div>
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-top uk-margin-bottom" (click)="addIssue()">
<icon name="add" [flex]="true"></icon>
<span class="uk-margin-small-left">Add Issue</span>
</button>
</div> </div>
<div class="uk-margin-small-bottom"> <div>
<span class="clickable" (click)="addIssue()"> <div class="uk-grid uk-flex-top" uk-grid>
<button class="uk-icon-button portal-button uk-icon uk-margin-small-right" uk-icon="plus"></button> <div input class="uk-width-expand" [formInput]="form.get('email')" placeholder="E-mail">
<span>Report issue for another field</span> <span note>Please leave us your E-mail to notify you about the reporting status.</span>
</span> </div>
</div> <div class="uk-width-auto">
</div> <re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey">
<div class="uk-flex uk-flex-bottom uk-margin-medium-top" uk-grid> </re-captcha>
<div class="uk-width-2-3@m uk-width-1-2@s"> </div>
<div class="uk-text-small">Please leave us your E-mail to notify you about the reporting status.</div> <div class="uk-width-1-1 uk-flex uk-flex-center uk-flex-right@m">
<input class="uk-input default-border uk-width-1-1" placeholder="E-mail" formControlName="email" [class.uk-form-danger]="form.get('email').invalid"> <button [class.uk-disabled]="form.invalid || sending" [class.uk-button-primary]="form.valid"
</div> (click)="sendReport()" class="uk-button">Send report
<div *ngIf="form" class="uk-width-expand"> </button>
<re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey"> </div>
</re-captcha>
</div>
<div class="uk-margin-top uk-width-1-1">
<div class="uk-width-1-4@m uk-width-1-3@s uk-float-right">
<button [class.uk-disabled]="form.invalid || sending" [class.portal-button]="form.valid"
(click)="sendReport()" class="uk-button uk-width-1-1">Send report
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="sent" class="uk-position-relative"> <div *ngIf="sent" class="uk-position-relative">

32
landingPages/feedback/feedback.component.ts
View File

@ -29,6 +29,7 @@ export class FeedbackComponent implements OnInit, OnChanges {
@ViewChild('feedback') feedback: ElementRef; @ViewChild('feedback') feedback: ElementRef;
@ViewChild('backModal') backModal: AlertModal; @ViewChild('backModal') backModal: AlertModal;
@Input() showForm: boolean = false; @Input() showForm: boolean = false;
@Output() showFormChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() resultLandingInfo: ResultLandingInfo = null; @Input() resultLandingInfo: ResultLandingInfo = null;
@Input() organizationInfo: OrganizationInfo = null; @Input() organizationInfo: OrganizationInfo = null;
@Input() projectInfo: ProjectInfo = null; @Input() projectInfo: ProjectInfo = null;
@ -37,7 +38,6 @@ export class FeedbackComponent implements OnInit, OnChanges {
@Input() properties: EnvProperties = null; @Input() properties: EnvProperties = null;
@Input() entityType: string = null; @Input() entityType: string = null;
@Input() fields: string[] = []; @Input() fields: string[] = [];
@Output() show: EventEmitter<boolean> = new EventEmitter<boolean>();
public sending: boolean = false; public sending: boolean = false;
public sent: boolean = false; public sent: boolean = false;
@ -45,10 +45,12 @@ export class FeedbackComponent implements OnInit, OnChanges {
public form: FormGroup; public form: FormGroup;
public url: string = null; public url: string = null;
public recipients: string[] = []; public recipients: string[] = [];
subscriptions =[]; subscriptions = [];
constructor(private fb: FormBuilder, constructor(private fb: FormBuilder,
private emailService: EmailService) { private emailService: EmailService) {
} }
ngOnDestroy() { ngOnDestroy() {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
@ -56,15 +58,16 @@ export class FeedbackComponent implements OnInit, OnChanges {
} }
}); });
} }
ngOnInit(): void { ngOnInit(): void {
if(typeof window !== "undefined") { if (typeof window !== "undefined") {
this.url = window.location.href; this.url = window.location.href;
} }
if(this.resultLandingInfo) { if (this.resultLandingInfo) {
this.title = this.resultLandingInfo.title; this.title = this.resultLandingInfo.title;
} else if(this.organizationInfo) { } else if (this.organizationInfo) {
this.title = this.organizationInfo.title.name; this.title = this.organizationInfo.title.name;
} else if(this.dataProviderInfo) { } else if (this.dataProviderInfo) {
this.title = this.dataProviderInfo.title.name; this.title = this.dataProviderInfo.title.name;
} }
this.recipients = [this.properties.feedbackmail]; this.recipients = [this.properties.feedbackmail];
@ -72,7 +75,8 @@ export class FeedbackComponent implements OnInit, OnChanges {
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
if(changes.showForm) { if (changes.showForm) {
console.log(changes);
this.init(); this.init();
} }
} }
@ -106,7 +110,7 @@ export class FeedbackComponent implements OnInit, OnChanges {
} }
changeShowForm(value: boolean) { changeShowForm(value: boolean) {
this.show.emit(value); this.showFormChange.emit(value);
HelperFunctions.scroll(); HelperFunctions.scroll();
} }
@ -127,13 +131,13 @@ export class FeedbackComponent implements OnInit, OnChanges {
this.subscriptions.push(this.emailService.contact(this.properties, this.subscriptions.push(this.emailService.contact(this.properties,
Composer.composeEmailForFeedback(this.form.value, this.recipients), this.form.get('recaptcha').value).subscribe(sent => { Composer.composeEmailForFeedback(this.form.value, this.recipients), this.form.get('recaptcha').value).subscribe(sent => {
this.error = !sent; this.error = !sent;
if(sent) { if (sent) {
if(this.form.get('email').value !== '') { if (this.form.get('email').value !== '') {
this.subscriptions.push(this.emailService.contact(this.properties, this.subscriptions.push(this.emailService.contact(this.properties,
Composer.composeEmailForUserAfterFeedback([this.form.get('email').value])).subscribe(sent => { Composer.composeEmailForUserAfterFeedback([this.form.get('email').value])).subscribe(sent => {
if(sent) { if (sent) {
//console.log('An email has been sent to user ' + this.form.get('email').value); //console.log('An email has been sent to user ' + this.form.get('email').value);
} }
})); }));
} }
this.init(); this.init();

4
landingPages/feedback/feedback.module.ts
View File

@ -7,9 +7,11 @@ import {MatSelectModule} from "@angular/material/select";
import {AlertModalModule} from "../../utils/modal/alertModal.module"; import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {EmailService} from "../../utils/email/email.service"; import {EmailService} from "../../utils/email/email.service";
import {RecaptchaModule} from "ng-recaptcha"; import {RecaptchaModule} from "ng-recaptcha";
import {IconsModule} from "../../utils/icons/icons.module";
import {InputModule} from "../../sharedComponents/input/input.module";
@NgModule({ @NgModule({
imports: [CommonModule, LandingHeaderModule, ReactiveFormsModule, MatSelectModule, AlertModalModule, RecaptchaModule], imports: [CommonModule, LandingHeaderModule, ReactiveFormsModule, MatSelectModule, AlertModalModule, RecaptchaModule, IconsModule, InputModule],
declarations: [FeedbackComponent], declarations: [FeedbackComponent],
providers: [EmailService], providers: [EmailService],
exports: [FeedbackComponent] exports: [FeedbackComponent]

2
landingPages/organization/organization.component.html
View File

@ -273,7 +273,7 @@
</div> </div>
<feedback *ngIf="organizationInfo && properties.reCaptchaSiteKey" [organizationInfo]="organizationInfo" <feedback *ngIf="organizationInfo && properties.reCaptchaSiteKey" [organizationInfo]="organizationInfo"
[properties]="properties" [entityType]="'organization'" [fields]="feedbackFields" [properties]="properties" [entityType]="'organization'" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback> [(showForm)]="showFeedback"></feedback>
</div> </div>
<!-- Other versions --> <!-- Other versions -->
<modal-alert *ngIf="organizationInfo && organizationInfo.deletedByInferenceIds" <modal-alert *ngIf="organizationInfo && organizationInfo.deletedByInferenceIds"

2
landingPages/project/project.component.html
View File

@ -797,7 +797,7 @@
</div> </div>
<feedback *ngIf="projectInfo && properties.reCaptchaSiteKey" [projectInfo]="projectInfo" <feedback *ngIf="projectInfo && properties.reCaptchaSiteKey" [projectInfo]="projectInfo"
[properties]="properties" [entityType]="'project'" [title]="projectName" [fields]="feedbackFields" [properties]="properties" [entityType]="'project'" [title]="projectName" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback> [(showForm)]="showFeedback"></feedback>
</div> </div>
<modal-loading></modal-loading> <modal-loading></modal-loading>

28
sharedComponents/bottom.component.ts
View File

@ -31,7 +31,7 @@ showPage ={};
@Input() darkBackground:boolean=true; @Input() darkBackground:boolean=true;
@Input() centered:boolean=false; @Input() centered:boolean=false;
@Input() shortView: boolean = false; @Input() shortView: boolean = false;
sectionClass= ""; sectionClass= "uk-tile-default";
subs: Subscription[] = []; subs: Subscription[] = [];
public divContents = null; public divContents = null;
@ -47,22 +47,22 @@ constructor(private config: ConfigurationService, private route: ActivatedRoute
if(!this.darkBackground){ if(!this.darkBackground){
this.sectionClass= " footer-light-background"; this.sectionClass= " footer-light-background";
} }
this.subs.push(this.route.queryParams.subscribe(params => { this.subs.push(this.route.queryParams.subscribe(params => {
if(this.showMenuItems){ if(this.showMenuItems){
if( this.properties.adminToolsAPIURL && this.communityId ){ if( this.properties.adminToolsAPIURL && this.communityId ){
//this.subs.push(this.config.getCommunityInformation(this.properties, this.communityId ).subscribe(data => { //this.subs.push(this.config.getCommunityInformation(this.properties, this.communityId ).subscribe(data => {
this.subs.push(this.config.communityInformationState.subscribe(data => { this.subs.push(this.config.communityInformationState.subscribe(data => {
if(data) { if(data) {
for (var i = 0; i < data['pages'].length; i++) { for (var i = 0; i < data['pages'].length; i++) {
this.showPage[data['pages'][i]["route"]] = data['pages'][i]["isEnabled"]; this.showPage[data['pages'][i]["route"]] = data['pages'][i]["isEnabled"];
}
// console.log(this.showPage)
} }
})); // console.log(this.showPage)
} }
}));
} }
})); }
}));
} }
public ngOnDestroy() { public ngOnDestroy() {