Project

General

Profile

1 61381 k.triantaf
<div *ngIf="showForm && !sent" class="feedback-page">
2
  <div class="portal-background-color uk-padding-small">
3
    <div class="uk-container">
4
      <span class="clickable" (click)="openBackModal()"><span uk-icon="chevron-left"></span> Back</span>
5
      <h3 class="uk-margin-remove-top">Report issues in...</h3>
6
      <landing-header *ngIf="resultLandingInfo" [properties]="properties" [title]="title"
7
                      [subTitle]="resultLandingInfo.subtitle" [underCuration]="resultLandingInfo.underCurationMessage"
8
                      [entityType]="entityType" [types]="resultLandingInfo.types"
9
                      [year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate">
10
      </landing-header>
11
      <landing-header *ngIf="organizationInfo" [properties]="properties" [title]="title"
12
                      [subTitle]="(organizationInfo.name && organizationInfo.title.name !== organizationInfo.name)?organizationInfo.name:null"
13
                      [entityType]="entityType">
14
      </landing-header>
15
      <landing-header *ngIf="projectInfo && title" [properties]="properties" [title]="title"
16
                      [subTitle]="projectInfo.acronym ? projectInfo.title : ''"
17
                      [entityType]="entityType" [startDate]="projectInfo.startDate" [endDate]="projectInfo.endDate"
18
                      [status]="projectInfo.status">
19
      </landing-header>
20
      <landing-header *ngIf="dataProviderInfo" [properties]="properties" [title]="title"
21
                      [subTitle]="(dataProviderInfo.officialName
22
                            && dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
23
                      [entityType]="entityType"
24
                      [types]="dataProviderInfo.type ? [dataProviderInfo.type] : null">
25
      </landing-header>
26
    </div>
27
  </div>
28
  <div *ngIf="form" [formGroup]="form" class="uk-container uk-padding-small">
29
    <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>
30
    <div formArrayName="issues" class="uk-margin-top">
31
      <div *ngFor="let control of issues.controls; let i = index" [formGroupName]="i" class="uk-margin-medium-bottom">
32
        <div>
33
          <span>Issue #{{i + 1}}</span>
34
          <span class="uk-float-right clickable" (click)="removeIssue(i)">Remove</span>
35
        </div>
36
        <div class="form">
37
          <mat-select [formControl]="control.get('field')"
38
                      [disableOptionCentering]="true" [placeholder]="'Select the field to report the issue'"
39
                      class="matSelection uk-margin-bottom" panelClass="matSelectionPanel">
40
            <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
41
          </mat-select>
42
          <textarea [formControl]="control.get('report')" class="uk-textarea default-border"
43
                    rows="4" placeholder="Write your report here..."></textarea>
44
        </div>
45
      </div>
46
      <div class="uk-margin-small-bottom">
47
        <span class="clickable" (click)="addIssue()">
48
          <button class="uk-icon-button portal-button uk-icon uk-margin-small-right" uk-icon="plus"></button>
49
          <span>Report issue for another field</span>
50
        </span>
51
      </div>
52
    </div>
53
    <div class="uk-flex uk-flex-bottom uk-margin-medium-top" uk-grid>
54
      <div class="uk-width-2-3@m uk-width-1-2@s">
55
        <div class="uk-text-small">Please leave us your E-mail to notify you about the reporting status.</div>
56
        <input class="uk-input default-border uk-width-1-1" placeholder="E-mail" formControlName="email" [class.uk-form-danger]="form.get('email').invalid">
57
      </div>
58
      <div *ngIf="form" class="uk-width-expand">
59
        <re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
60
        </re-captcha>
61
      </div>
62
      <div class="uk-margin-top uk-width-1-1">
63
        <div class="uk-width-1-4@m uk-width-1-3@s uk-float-right">
64
          <button [class.uk-disabled]="form.invalid || sending" [class.portal-button]="form.valid"
65
                  (click)="sendReport()" class="uk-button uk-width-1-1">Send report
66
          </button>
67
        </div>
68
      </div>
69
    </div>
70
  </div>
71
</div>
72
<div *ngIf="sent" class="uk-position-relative">
73
  <div class="uk-position-top-center">
74
    <div class="feedback-sent uk-margin-small-top">
75
      <h3>Thank you for your feedback</h3>
76
      <p>Your feedback is successfully received and it will soon be reviewed by our graph experts!</p>
77
      <span uk-icon="icon: check; ratio: 4"></span>
78
    </div>
79
    <div class="uk-text-center uk-margin-medium-top">
80
      <button (click)="changeShowForm(false)" class="uk-button portal-button uk-width-1-2">Go back to {{entityType}}'s page</button>
81
    </div>
82
  </div>
83
</div>
84
<modal-alert #backModal (alertOutput)="changeShowForm(false)"></modal-alert>