1
|
import {
|
2
|
Component,
|
3
|
ElementRef,
|
4
|
EventEmitter,
|
5
|
Input,
|
6
|
OnChanges,
|
7
|
OnInit,
|
8
|
Output,
|
9
|
SimpleChanges,
|
10
|
ViewChild
|
11
|
} from "@angular/core";
|
12
|
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
|
13
|
import {EnvProperties} from "../../utils/properties/env-properties";
|
14
|
import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";
|
15
|
import {AlertModal} from "../../utils/modal/alert";
|
16
|
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
17
|
import {OrganizationInfo} from "../../utils/entities/organizationInfo";
|
18
|
import {ProjectInfo} from "../../utils/entities/projectInfo";
|
19
|
import {DataProviderInfo} from "../../utils/entities/dataProviderInfo";
|
20
|
import {EmailService} from "../../utils/email/email.service";
|
21
|
import {Composer} from "../../utils/email/composer";
|
22
|
import {Subscriber} from "rxjs";
|
23
|
|
24
|
@Component({
|
25
|
selector: 'feedback',
|
26
|
templateUrl: 'feedback.component.html'
|
27
|
})
|
28
|
export class FeedbackComponent implements OnInit, OnChanges {
|
29
|
@ViewChild('feedback') feedback: ElementRef;
|
30
|
@ViewChild('backModal') backModal: AlertModal;
|
31
|
@Input() showForm: boolean = false;
|
32
|
@Input() resultLandingInfo: ResultLandingInfo = null;
|
33
|
@Input() organizationInfo: OrganizationInfo = null;
|
34
|
@Input() projectInfo: ProjectInfo = null;
|
35
|
@Input() dataProviderInfo: DataProviderInfo = null;
|
36
|
@Input() title: string = null;
|
37
|
@Input() properties: EnvProperties = null;
|
38
|
@Input() entityType: string = null;
|
39
|
@Input() fields: string[] = [];
|
40
|
@Output() show: EventEmitter<boolean> = new EventEmitter<boolean>();
|
41
|
|
42
|
public sending: boolean = false;
|
43
|
public sent: boolean = false;
|
44
|
public error: boolean = false;
|
45
|
public form: FormGroup;
|
46
|
public url: string = null;
|
47
|
public recipients: string[] = [];
|
48
|
subscriptions =[];
|
49
|
constructor(private fb: FormBuilder,
|
50
|
private emailService: EmailService) {
|
51
|
}
|
52
|
ngOnDestroy() {
|
53
|
this.subscriptions.forEach(subscription => {
|
54
|
if (subscription instanceof Subscriber) {
|
55
|
subscription.unsubscribe();
|
56
|
}
|
57
|
});
|
58
|
}
|
59
|
ngOnInit(): void {
|
60
|
if(typeof window !== "undefined") {
|
61
|
this.url = window.location.href;
|
62
|
}
|
63
|
if(this.resultLandingInfo) {
|
64
|
this.title = this.resultLandingInfo.title;
|
65
|
} else if(this.organizationInfo) {
|
66
|
this.title = this.organizationInfo.title.name;
|
67
|
} else if(this.dataProviderInfo) {
|
68
|
this.title = this.dataProviderInfo.title.name;
|
69
|
}
|
70
|
this.recipients = [this.properties.feedbackmail];
|
71
|
this.init();
|
72
|
}
|
73
|
|
74
|
ngOnChanges(changes: SimpleChanges): void {
|
75
|
if(changes.showForm) {
|
76
|
this.init();
|
77
|
}
|
78
|
}
|
79
|
|
80
|
init() {
|
81
|
this.sent = false;
|
82
|
this.form = this.fb.group({
|
83
|
name: this.fb.control(this.title),
|
84
|
url: this.fb.control(this.url),
|
85
|
email: this.fb.control('', Validators.email),
|
86
|
issues: this.fb.array([], Validators.required),
|
87
|
recaptcha: this.fb.control('', Validators.required),
|
88
|
});
|
89
|
this.addIssue();
|
90
|
}
|
91
|
|
92
|
public addIssue() {
|
93
|
let issue: FormGroup = this.fb.group({
|
94
|
field: this.fb.control('', Validators.required),
|
95
|
report: this.fb.control('', Validators.required)
|
96
|
});
|
97
|
this.issues.push(issue);
|
98
|
}
|
99
|
|
100
|
public removeIssue(index: number) {
|
101
|
this.issues.removeAt(index);
|
102
|
}
|
103
|
|
104
|
public get issues(): FormArray {
|
105
|
return <FormArray>this.form.get('issues');
|
106
|
}
|
107
|
|
108
|
changeShowForm(value: boolean) {
|
109
|
this.show.emit(value);
|
110
|
HelperFunctions.scroll();
|
111
|
}
|
112
|
|
113
|
public openBackModal() {
|
114
|
this.backModal.alertTitle = 'Go back to ' + this.entityType + '\'s page';
|
115
|
this.backModal.message = 'All changes will be deleted. Are you sure you want to proceed?';
|
116
|
this.backModal.okButtonText = 'Yes';
|
117
|
this.backModal.cancelButtonText = 'No';
|
118
|
this.backModal.open();
|
119
|
}
|
120
|
|
121
|
public handleRecaptcha(captchaResponse: string) {
|
122
|
this.form.get('recaptcha').setValue(captchaResponse);
|
123
|
}
|
124
|
|
125
|
public sendReport() {
|
126
|
this.sending = true;
|
127
|
this.subscriptions.push(this.emailService.contact(this.properties,
|
128
|
Composer.composeEmailForFeedback(this.form.value, this.recipients), this.form.get('recaptcha').value).subscribe(sent => {
|
129
|
this.error = !sent;
|
130
|
if(sent) {
|
131
|
if(this.form.get('email').value !== '') {
|
132
|
this.subscriptions.push(this.emailService.contact(this.properties,
|
133
|
Composer.composeEmailForUserAfterFeedback([this.form.get('email').value])).subscribe(sent => {
|
134
|
if(sent) {
|
135
|
//console.log('An email has been sent to user ' + this.form.get('email').value);
|
136
|
}
|
137
|
}));
|
138
|
}
|
139
|
this.init();
|
140
|
this.sent = true;
|
141
|
}
|
142
|
this.sending = false;
|
143
|
}, error => {
|
144
|
console.log(error);
|
145
|
this.error = true;
|
146
|
this.sending = false;
|
147
|
}));
|
148
|
}
|
149
|
}
|