import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from "@angular/core"; import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo"; import {EnvProperties} from "../../utils/properties/env-properties"; import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms"; import {AlertModal} from "../../utils/modal/alert"; import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {OrganizationInfo} from "../../utils/entities/organizationInfo"; import {ProjectInfo} from "../../utils/entities/projectInfo"; import {DataProviderInfo} from "../../utils/entities/dataProviderInfo"; import {EmailService} from "../../utils/email/email.service"; import {Composer} from "../../utils/email/composer"; import {Subscriber} from "rxjs"; @Component({ selector: 'feedback', templateUrl: 'feedback.component.html' }) export class FeedbackComponent implements OnInit, OnChanges { @ViewChild('feedback') feedback: ElementRef; @ViewChild('backModal') backModal: AlertModal; @Input() showForm: boolean = false; @Output() showFormChange: EventEmitter = new EventEmitter(); @Input() resultLandingInfo: ResultLandingInfo = null; @Input() organizationInfo: OrganizationInfo = null; @Input() projectInfo: ProjectInfo = null; @Input() dataProviderInfo: DataProviderInfo = null; @Input() title: string = null; @Input() properties: EnvProperties = null; @Input() entityType: string = null; @Input() fields: string[] = []; @Input() preSelectedField: string = ""; public sending: boolean = false; public sent: boolean = false; public error: boolean = false; public form: FormGroup; public url: string = null; public recipients: string[] = []; subscriptions = []; constructor(private fb: FormBuilder, private emailService: EmailService) { } ngOnDestroy() { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscriber) { subscription.unsubscribe(); } }); } ngOnInit(): void { if (typeof window !== "undefined") { this.url = window.location.href; } if (this.resultLandingInfo) { this.title = this.resultLandingInfo.title; } else if (this.organizationInfo) { this.title = this.organizationInfo.title.name; } else if (this.dataProviderInfo) { this.title = this.dataProviderInfo.title.name; } this.recipients = [this.properties.feedbackmail]; this.init(); } ngOnChanges(changes: SimpleChanges): void { if (changes.showForm) { this.init(); } } init() { this.sent = false; this.form = this.fb.group({ name: this.fb.control(this.title), url: this.fb.control(this.url), email: this.fb.control('', Validators.email), issues: this.fb.array([], Validators.required), recaptcha: this.fb.control('', Validators.required), }); this.addIssue(); } public addIssue() { let issue: FormGroup = this.fb.group({ field: this.fb.control(this.preSelectedField, Validators.required), report: this.fb.control('', Validators.required) }); this.issues.push(issue); } public removeIssue(index: number) { this.issues.removeAt(index); } public get issues(): FormArray { return this.form.get('issues'); } changeShowForm(value: boolean) { this.showFormChange.emit(value); HelperFunctions.scroll(); } public openBackModal() { this.backModal.alertTitle = 'Go back to ' + this.entityType + '\'s page'; this.backModal.message = 'All changes will be deleted. Are you sure you want to proceed?'; this.backModal.okButtonText = 'Yes'; this.backModal.cancelButtonText = 'No'; this.backModal.open(); } public handleRecaptcha(captchaResponse: string) { this.form.get('recaptcha').setValue(captchaResponse); } public sendReport() { this.sending = true; this.subscriptions.push(this.emailService.contact(this.properties, Composer.composeEmailForFeedback(this.form.value, this.recipients), 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, Composer.composeEmailForUserAfterFeedback([this.form.get('email').value])).subscribe(sent => { if (sent) { //console.log('An email has been sent to user ' + this.form.get('email').value); } })); } this.init(); this.sent = true; } this.sending = false; }, error => { console.log(error); this.error = true; this.sending = false; })); } }