openaire-library/sharedComponents/subscriber-invite/subscriber-invite.component.ts

import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {AbstractControl, FormBuilder, FormGroup, ValidationErrors, Validators} from "@angular/forms";
import {Subscriber} from "rxjs";
import {StringUtils} from "../../utils/string-utils.class";
import {Email} from "../../utils/email/email";
import {Body} from "../../utils/email/body";
import {CommunityService} from "../../connect/community/community.service";
import {Composer} from "../../utils/email/composer";
import {User} from "../../login/utils/helper.class";
import {EmailService} from "../../utils/email/email.service";
import {properties} from "../../../../environments/environment";

declare var UIkit;

@Component({
  selector: 'subscriber-invite',
  template: `
    <div class="uk-grid uk-child-width-1-1" uk-grid [formGroup]="inviteForm">
      <div dashboard-input [formInput]="inviteForm.get('name')" [gridSmall]="true">
        <div class="uk-text-bold field-label">
          From *:
        </div>
      </div>
      <div dashboard-input [formInput]="inviteForm.get('recipients')" [gridSmall]="true" note="Separate multiple emails with a comma">
        <div class="uk-text-bold field-label uk-margin-bottom">
          To *:
        </div>
      </div>
      <div class="uk-grid uk-grid-small" uk-grid>
        <div class="uk-text-bold field-label">
          Message *:
        </div>
        <div class="uk-width-expand">
          <ckeditor class="form-control" formControlName="message" id="message"
                    debounce="400"
                    [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
                                                                   extraPlugins: 'divarea'}"></ckeditor>
          <div class="uk-margin-top">
            {{body.signature}}
            <span *ngIf="body.fromName == ''" class="uk-text-muted">
              <i>{{body.fromMessage}}...</i>
            </span>
            <span *ngIf="body.fromName !=''">
              {{body.fromMessage}}
              <b>{{body.fromName}}</b>
            </span><br>
            <a href="https://www.openaire.eu">www.openaire.eu</a>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['subscriber-invite.component.css']
})
export class SubscriberInviteComponent implements OnInit, OnDestroy {
  @Input()
  public user: User;
  public inviteForm: FormGroup;
  public email: Email;
  public body: Body;
  public loading: boolean = false;
  private subscriptions: any[] = [];
  
  constructor(private fb: FormBuilder,
              private emailService: EmailService,
              private communityService: CommunityService) {
  }
  
  ngOnInit() {
    this.reset();
  }
  
  ngOnDestroy() {
    this.unsubscribe();
  }
  
  unsubscribe() {
    this.subscriptions.forEach(subscription => {
      if(subscription instanceof Subscriber) {
        subscription.unsubscribe();
      }
    });
  }
  
  reset() {
    this.unsubscribe();
    this.inviteForm = this.fb.group({
      name: this.fb.control('', Validators.required),
      recipients: this.fb.control('', [Validators.required, this.emailsValidator]),
      message: this.fb.control('', Validators.required)
    });
    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
      this.inviteForm.get('name').enable();
      this.inviteForm.get('name').setValue(this.user.fullname);
      this.inviteForm.get('name').disable();
      this.body = Composer.initializeInvitationsBody(community.communityId, community.title, this.user.fullname);
      this.email = Composer.initializeInvitationsEmail(community.title);
      this.inviteForm.get('message').setValue(this.body.paragraphs);
    }));
  }
  
  emailsValidator(control: AbstractControl): ValidationErrors | null {
    if (control.value === '' || !control.value || StringUtils.validateEmails(control.value)) {
      return null;
    }
    return { emails: true };
  }
  
  invite() {
    this.loading = true;
    this.parseRecipients();
    this.body.paragraphs = this.inviteForm.value.message;
    this.email.body = Composer.formatEmailBodyForInvitation(this.body);
    this.subscriptions.push(this.emailService.sendEmail(properties, this.email).subscribe(res => {
      if(res['success']) {
        UIkit.notification('Invitation to subscribe has been <b>sent</b>', {
          status: 'success',
          timeout: 6000,
          pos: 'bottom-right'
        });
      } else {
        UIkit.notification('An error has occurred. Please try again later', {
          status: 'danger',
          timeout: 6000,
          pos: 'bottom-right'
        });
      }
      this.loading = false;
    },error => {
      UIkit.notification('An error has occurred. Please try again later', {
        status: 'danger',
        timeout: 6000,
        pos: 'bottom-right'
      });
      this.loading = false;
    }));
  }
  
  public parseRecipients() {
    // remove spaces
    let emails = this.inviteForm.get('recipients').value.replace(/\s/g, '');
    // remove commas
    emails = emails.split(",");
    
    // remove empty fields
    for (let i = 0; i < emails.length; i++) {
      if (!(emails[i] == "")) {
        this.email.recipients.push(emails[i]);
      }
    }
  }
  
  get valid() {
    return this.inviteForm && this.inviteForm.valid;
  }
}