Update feedback page and fix a bug with events

landingPages/dataProvider/dataProvider.component.html

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

landingPages/feedback/feedback.component.html

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

landingPages/feedback/feedback.component.ts

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

landingPages/feedback/feedback.module.ts

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

landingPages/organization/organization.component.html

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

landingPages/project/project.component.html

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

sharedComponents/bottom.component.ts

@@ -31,7 +31,7 @@ showPage ={};
 @Input() darkBackground:boolean=true;
 @Input() centered:boolean=false;
 @Input() shortView: boolean = false;
-sectionClass= "";
+sectionClass= "uk-tile-default";
 
 subs: Subscription[] = [];
 public divContents = null;