[Library | Trunk]: Complete Feedback for development

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58303 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/feedback/feedback.component.html

@@ -32,6 +32,7 @@
     </div>
   </div>
   <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 formArrayName="issues" class="uk-margin-top">
       <div *ngFor="let control of issues.controls; let i = index" [formGroupName]="i" class="uk-margin-medium-bottom">
         <div>
@@ -44,7 +45,7 @@
                       class="matSelection uk-margin-bottom" panelClass="matSelectionPanel">
             <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
           </mat-select>
-          <textarea [formControl]="control.get('report')"
+          <textarea [formControl]="control.get('report')" class="uk-textarea default-border"
                     rows="4" placeholder="Write your report here..."></textarea>
         </div>
       </div>
@@ -54,10 +55,15 @@
           <span>Report issue for another field</span>
         </span>
       </div>
-      <div>
-        <button [class.uk-disabled]="form.invalid" [class.portal-button]="form.valid"
-                (click)="sendReport()" class="uk-button uk-width-1-4@m uk-width-1-3@s uk-float-right">Send
-          report
+    </div>
+    <div class="uk-flex uk-flex-bottom uk-margin-medium-top" uk-grid>
+      <div class="uk-width-expand">
+        <div class="uk-text-small">Please leave us your E-mail to notify you about the reporting status.</div>
+        <input class="uk-input default-border uk-width-1-1" placeholder="E-mail" formControlName="email" [class.uk-form-danger]="form.get('email').invalid">
+      </div>
+      <div class="uk-width-1-4@m uk-width-1-3@s">
+        <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>

landingPages/feedback/feedback.component.ts

@@ -18,6 +18,7 @@ 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";
 
 @Component({
   selector: 'feedback',
@@ -37,16 +38,18 @@ export class FeedbackComponent implements OnInit, OnChanges {
   @Input() fields: string[] = [];
   @Output() show: EventEmitter<boolean> = new EventEmitter<boolean>();
   
+  public sending: boolean = false;
   public sent: boolean = false;
+  public error: boolean = false;
   public form: FormGroup;
   public url: string = null;
+  public recipients: string[] = ['kostis30fylloy@gmail.com'];
   
   constructor(private fb: FormBuilder,
               private emailService: EmailService) {
   }
   
   ngOnInit(): void {
-    this.init();
     if(typeof window !== "undefined") {
      this.url = window.location.href;
     }
@@ -57,6 +60,7 @@ export class FeedbackComponent implements OnInit, OnChanges {
     } else if(this.dataProviderInfo) {
       this.title = this.dataProviderInfo.title.name;
     }
+    this.init();
   }
   
   ngOnChanges(changes: SimpleChanges): void {
@@ -68,6 +72,9 @@ export class FeedbackComponent implements OnInit, OnChanges {
   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)
     });
     this.addIssue();
@@ -103,6 +110,18 @@ export class FeedbackComponent implements OnInit, OnChanges {
   }
   
   public sendReport() {
-    this.sent = true;
+    this.sending = true;
+    this.emailService.contact(this.properties.adminToolsAPIURL + '/contact', Composer.composeEmailForFeedback(this.form.value, this.recipients)).subscribe(sent => {
+      this.error = !sent;
+      if(sent) {
+        this.init();
+        this.sent = true;
+      }
+      this.sending = false;
+    }, error => {
+      console.log(error);
+      this.error = true;
+      this.sending = false;
+    });
   }
 }

utils/email/composer.ts

@@ -9,7 +9,7 @@ export class Composer {
   // TODO move to properties
   private static openaireEmail = "mailto:openaire.test@gmail.com";
   private static subjectPrefix = "[OpenAIRE-Connect] ";
-  private static closing = "OpenAIRE team"
+  private static closing = "OpenAIRE team";
   private static openaireAddress = "<a href='https://www.openaire.eu'>www.openaire.eu</a><br>";
   private static signature =  Composer.closing + "<br>" + Composer.openaireAddress;
 
@@ -65,9 +65,19 @@ export class Composer {
     return email;
   }
   
-  /*public static composeEmailForFeedback(issues: any[], recipients: string[]): Email {
-  
-  }*/
+  public static composeEmailForFeedback(info: {name: string, url: string, email: string, issues: any[],}, recipients: string[]): Email {
+    let email: Email = new Email();
+    email.subject = 'Feedback report for ' + info.name;
+    email.body = "<div style='font-size:" + this.noteBodySize + "'>"
+                  + "<p>A user" + ((info.email)?(" with email " + info.email):"") + " has reported the following issue(s) for "
+                  + "<a href=\'" + info.url + "\'>" + info.name + "</a></p><ul>";
+    info.issues.forEach((issue, index) => {
+      email.body += "<br><li><span><b><u>" + issue.field + "</u>: </b></span>" + issue.report + "</li>";
+    });
+    email.body += "</ul></div>";
+    email.recipients = recipients;
+    return email;
+  }
   
   public static composeEmailToInformOldManagersForTheNewOnes(communityName: string, communityId: string, firstVersionOfManagers: any, managers: any) : Email {
       let email: Email = new Email();

utils/email/email.service.ts

@@ -4,6 +4,7 @@ import {HttpClient} from "@angular/common/http";
 import {Email} from './email';
 import {CustomOptions} from '../../services/servicesUtils/customOptions.class';
 import {EmailRecaptcha} from "../entities/EmailRecaptcha";
+import {Observable} from "rxjs";
 
 @Injectable()
 export class EmailService {
@@ -18,12 +19,11 @@ export class EmailService {
                    //.map(request => request.json());
     }
 
-    contact(url: string, email: Email, recaptcha: string) {
+    contact(url: string, email: Email, recaptcha: string = null):Observable<boolean> {
         const data: EmailRecaptcha = new EmailRecaptcha();
         data.email = email;
         data.recaptcha = recaptcha;
-        return this.http.post(url, data);
-            //.map(request => request.json());
+        return this.http.post<boolean>(url, data);
     }
 
 }