D-Net

import {Component, Input} from "@angular/core";

import {FormBuilder, FormGroup, Validators} from "@angular/forms";

import {EnvProperties} from "../../../../openaireLibrary/utils/properties/env-properties";

import {properties} from "../../../../../environments/environment";

import {CommunityInfo} from "../../../../openaireLibrary/connect/community/communityInfo";

import {Session, User} from "../../../../openaireLibrary/login/utils/helper.class";

import {CommunityService} from "../../../../openaireLibrary/connect/community/community.service";

import {UtilitiesService} from "../../../../openaireLibrary/services/utilities.service";

import {UserManagementService} from "../../../../openaireLibrary/services/user-management.service";

import {StringUtils} from "../../../../openaireLibrary/utils/string-utils.class";

import {Subscription} from "rxjs";

import {Option} from "../../../../openaireLibrary/sharedComponents/input/input.component";

declare var UIkit;

@Component({

  selector: 'edit-community',

  template: `

    <div [ngStyle]="{'max-height': maxHeight}"

         [class.uk-padding-small]="!paddingLarge" [class.uk-padding-large]="paddingLarge"

         class="uk-overflow-auto uk-padding-remove-bottom">

      <form *ngIf="communityFb" [formGroup]="communityFb">

        <div class="uk-grid" [class.uk-margin-small-bottom]="!paddingLarge"

             [class.uk-margin-large-bottom]="paddingLarge" uk-grid uk-height-match=".uk-form-hint">

          <div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('name')" label="Name"

               placeholder="Write a name..."

               hint="Name of the community profile."></div>

          <div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('shortName')"

               hint="Short name of the community."

               label="Short Name" placeholder="Write an acronym..."></div>

<!--          <div dashboard-input class="uk-width-1-1" [type]="'textarea'" placeholder="Write a description..."-->

<!--                hint="The description of the community."-->

<!--                [rows]="4" [formInput]="communityFb.get('description')" label="Description"></div>-->

          <div class="uk-width-1-1">

            <div class="uk-text-bold uk-form-label uk-margin-small-bottom">Description</div>

            <div class="uk-margin-bottom uk-form-hint">The description of the community</div>

                 <ckeditor [readonly]="false"

                           debounce="500"

                           [formControl]="communityFb.get('description')"

                           [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', 

                                      removeButtons:  'Save,NewPage,DocProps,Preview,Print,' +

                                                      'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +

                                                      'CreateDiv,Flash,PageBreak,' +

                                                      'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',

                                      extraPlugins: 'divarea'}">

                 </ckeditor>

          </div>             

          <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>

          <div dashboard-input class="uk-width-1-1" type="logoURL" [hideControl]="communityFb.get('isUpload').value" flex="top"

               hint="Upload or link the logo of the community." [placeholder]="'Write link to the logo'"

               [formInput]="communityFb.get('logoUrl')" label="Logo">

            <div *ngIf="!communityFb.get('isUpload').value" class="uk-width-2-5@l uk-width-1-1" style="margin-top: 7px;">

              <div class="uk-grid uk-flex uk-flex-middle" uk-grid>

                <div class="uk-width-3-4@l uk-width-1-1 uk-flex uk-flex-center">

                  <button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"

                          (click)="file.click()">

                    <icon name="cloud_upload" [flex]="true"></icon>

                    <span class="uk-margin-small-left">Upload a file</span>

                  </button>

                </div>

                <div class="uk-text-center uk-text-bold uk-width-expand">

                  OR

                </div>

              </div>

            </div>

            <div *ngIf="communityFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">

              <div class="uk-card uk-card-default uk-text-center uk-border-circle">

                <img class="uk-position-center" [src]="photo">

              </div>

              <div class="uk-margin-left">

                <button (click)="remove()" class="uk-button-secondary outlined uk-icon-button">

                  <icon name="remove"></icon>

                </button>

              </div>

              <div class="uk-margin-small-left">

                <button class="uk-button-secondary uk-icon-button" (click)="file.click()">

                  <icon name="edit"></icon>

                </button>

              </div>

            </div>

          </div>

          <div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>

          <div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('status')"

               hint="Set the visibility status for your community's profile." type="select" [options]="statuses"

               label="Status" placeholder="Choose a status"></div>

        </div>

      </form>

    </div>`,

  styleUrls: ['edit-community.component.css']

})

export class EditCommunityComponent {

  @Input()

  public maxHeight = 'none';

  @Input()

  public paddingLarge: boolean = false;

  public communityFb: FormGroup;

  public statuses: Option[] = [

    {label: 'Visible', value: 'all'},

    {label: 'Visible to managers', value: 'manager'},

    {label: 'Hidden', value: 'hidden'}

  ]

  public community: CommunityInfo;

  public isNew: boolean;

  public properties: EnvProperties = properties

  ;

  private subscriptions: any[] = [];

  /**

   * Photo upload

   * */

  public file: File;

  public photo: string | ArrayBuffer;

  public uploadError: string;

  public deleteCurrentPhoto: boolean = false;

  private maxsize: number = 200 * 1024;

  user: User;

  constructor(private fb: FormBuilder,

              private communityService: CommunityService,

              private utilsService: UtilitiesService,

              private userManagementService: UserManagementService) {

  }

  ngOnDestroy() {

    this.reset();

  }

  public init(community: CommunityInfo, isNew: boolean = false) {

    this.reset();

    this.deleteCurrentPhoto = false;

    this.community = community;

    this.isNew = isNew;

    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {

        this.user = user;

        this.communityFb = this.fb.group({

          communityId: this.fb.control(this.community.communityId),

          name: this.fb.control(this.community.title, Validators.required),

          shortName: this.fb.control(this.community.shortTitle, Validators.required),

          description: this.fb.control(this.community.description),

          status: this.fb.control(this.community.status),

          managers: this.fb.control(this.community.managers),

          isUpload: this.fb.control(this.community.isUpload),

          logoUrl: this.fb.control(this.community.logoUrl)

        });

        if (this.community.isUpload) {

          this.communityFb.get('logoUrl').clearValidators();

          this.communityFb.get('logoUrl').updateValueAndValidity();

        } else {

          this.communityFb.get('logoUrl').setValidators([StringUtils.urlValidator()]);

          this.communityFb.get('logoUrl').updateValueAndValidity();

        }

        this.subscriptions.push(this.communityFb.get('isUpload').valueChanges.subscribe(value => {

          if (value == true) {

            this.communityFb.get('logoUrl').clearValidators();

            this.communityFb.updateValueAndValidity();

          } else {

            this.communityFb.get('logoUrl').setValidators([StringUtils.urlValidator()]);

            this.communityFb.updateValueAndValidity();

          }

        }));

        this.initPhoto();

        if (!isNew) {

          if (!this.isAdmin) {

            setTimeout(() => {

              this.communityFb.get('shortName').disable();

            }, 0);

          }

        }

      }

    ));

  }

  public get isAdmin() {

    return Session.isPortalAdministrator(this.user);

  }

  public get disabled(): boolean {

    return (this.communityFb && this.communityFb.invalid) ||

      (this.communityFb && this.communityFb.pristine && !this.isNew && !this.file) ||

      (this.uploadError && this.uploadError.length > 0);

  }

  public get dirty(): boolean {

    return this.communityFb && this.communityFb.dirty;

  }

  reset() {

    this.uploadError = null;

    this.communityFb = null;

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

    });

  }

  public save(callback: Function, errorCallback: Function = null) {

    if (this.file) {

      this.communityFb.get('shortName').enable();

      this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.communityFb.value.communityId), this.file).subscribe(res => {

        this.deletePhoto();

        this.removePhoto();

        this.communityFb.get('logoUrl').setValue(res.filename);

        this.saveCommunity(callback, errorCallback);

      }, error => {

        this.uploadError = "An error has been occurred during upload your image. Try again later";

        this.saveCommunity(callback, errorCallback);

      }));

    } else if (this.deleteCurrentPhoto) {

      this.deletePhoto();

      this.saveCommunity(callback, errorCallback);

    } else {

      this.saveCommunity(callback, errorCallback);

    }

  }

  public saveCommunity(callback: Function, errorCallback: Function = null) {

    if (this.isNew) {

      this.removePhoto();

      this.subscriptions.push(this.communityService.updateCommunity(

        this.properties.communityAPI + this.community.communityId, this.communityFb.value).subscribe(() => {

        this.communityService.getCommunity(this.community.communityId, true).subscribe(community => {

          UIkit.notification(community.shortTitle + ' has been <b>successfully created</b>', {

            status: 'success',

            timeout: 6000,

            pos: 'bottom-right'

          });

          callback(community);

        });

      }, error => {

        UIkit.notification('An error has occurred. Please try again later', {

          status: 'danger',

          timeout: 6000,

          pos: 'bottom-right'

        });

        if (errorCallback) {

          errorCallback(error)

        }

      }));

    } else {

      this.subscriptions.push(this.communityService.updateCommunity(this.properties.communityAPI + this.community.communityId, this.communityFb.value).subscribe(() => {

        this.communityService.getCommunity(this.community.communityId, true).subscribe(community => {

          UIkit.notification(community.shortTitle + ' has been <b>successfully saved</b>', {

            status: 'success',

            timeout: 6000,

            pos: 'bottom-right'

          });

          callback(community);

        });

      }, error => {

        UIkit.notification('An error has occurred. Please try again later', {

          status: 'danger',

          timeout: 6000,

          pos: 'bottom-right'

        });

      }));

    }

  }

  fileChangeEvent(event) {

    if (event.target.files && event.target.files[0]) {

      this.file = event.target.files[0];

      if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {

        this.uploadError = 'You must choose a file with type: image/png or image/jpeg!';

        this.communityFb.get('isUpload').setValue(false);

        this.communityFb.get('isUpload').markAsDirty();

        this.removePhoto();

      } else if (this.file.size > this.maxsize) {

        this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.';

        this.communityFb.get('isUpload').setValue(false);

        this.communityFb.get('isUpload').markAsDirty();

        this.removePhoto();

      } else {

        this.uploadError = null;

        const reader = new FileReader();

        reader.readAsDataURL(this.file);

        reader.onload = () => {

          this.photo = reader.result;

          this.communityFb.get('isUpload').setValue(true);

          this.communityFb.get('isUpload').markAsDirty();

        };

      }

    }

  }

  initPhoto() {

    if (this.communityFb.value.isUpload) {

      this.photo = this.properties.utilsService + "/download/" + this.communityFb.get('logoUrl').value;

    }

  }

  removePhoto() {

    if (this.file) {

      if (typeof document != 'undefined') {

        (<HTMLInputElement>document.getElementById("photo")).value = "";

      }

      this.initPhoto();

      this.file = null;

    }

  }

  remove() {

    this.communityFb.get('isUpload').setValue(false);

    this.communityFb.get('isUpload').markAsDirty();

    this.removePhoto();

    this.communityFb.get('logoUrl').setValue(null);

    if (this.community.isUpload) {

      this.deleteCurrentPhoto = true;

    }

  }

  public deletePhoto() {

    if (this.community.logoUrl) {

      this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.community.logoUrl).subscribe());

    }

  }

}